diff --git a/themes/src/main/resources/theme/keycloak-preview/account/index.ftl b/themes/src/main/resources/theme/keycloak-preview/account/index.ftl
index 9969f1f..37ad129 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/index.ftl
+++ b/themes/src/main/resources/theme/keycloak-preview/account/index.ftl
@@ -7,7 +7,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
-
+
<script>
var authUrl = '${authUrl}';
var baseUrl = '${baseUrl}';
@@ -16,7 +16,7 @@
var isRegistrationEmailAsUsername = ${realm.registrationEmailAsUsername?c};
var isEditUserNameAllowed = ${realm.editUsernameAllowed?c};
var isInternationalizationEnabled = ${realm.internationalizationEnabled?c};
-
+
var availableLocales = [];
<#list supportedLocales as locale, label>
availableLocales.push({locale : '${locale}', label : '${label}'});
@@ -160,69 +160,62 @@
</div>
<div class="container-fluid container-cards-pf">
<div class="row row-cards-pf">
- <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
+ <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
- <div class="card-pf-body text-center">
- <div class="card-pf-top-element">
+ <div class="card-pf-body text-center row">
+ <div class="card-pf-top-element col-xs-2 col-sm-12 col-md-12 col-lg-12">
<span class="fa pficon-user card-pf-icon-circle"></span>
</div>
- <h2>
- ${msg("personalInfoHtmlTitle")}
- </h2>
- <p>${msg("personalInfoIntroMessage")}</p>
- <hr/>
- <h3><a href="${baseUrl}/#/account">${msg("personalInfoHtmlTitle")}</a></h3>
+ <div class="card-pf-content col-xs-10 col-sm-12 col-md-12 col-lg-12">
+ <h2>${msg("personalInfoHtmlTitle")}</h2>
+ <p class="card-pf-content-intro">${msg("personalInfoIntroMessage")}</p>
+ <h3><a href="${baseUrl}/#/account">${msg("personalInfoHtmlTitle")}</a></h3>
+ </div>
</div>
</div>
</div>
- <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
+ <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
- <div class="card-pf-body text-center">
- <div class="card-pf-top-element">
+ <div class="card-pf-body text-center row">
+ <div class="card-pf-top-element col-xs-2 col-sm-12 col-md-12 col-lg-12">
<span class="fa fa-shield card-pf-icon-circle"></span>
</div>
- <h2>
- ${msg("accountSecurityTitle")}
- </h2>
- <p>${msg("accountSecurityIntroMessage")}</p>
- <hr/>
- <h3><a href="${baseUrl}/#/password">${msg("changePasswordHtmlTitle")}</a></h3>
- <hr/>
- <h3><a href="${baseUrl}/#/authenticator">${msg("authenticatorTitle")}</a></h3>
- <hr/>
- <h3><a href="${baseUrl}/#/device-activity">${msg("deviceActivityHtmlTitle")}</a></h3>
- <hr/>
- <h3><a href="${baseUrl}/#/account">${msg("federatedIdentity")}</a></h3>
+ <div class="card-pf-content col-xs-10 col-sm-12 col-md-12 col-lg-12">
+ <h2>${msg("accountSecurityTitle")}</h2>
+ <p class="card-pf-content-intro">${msg("accountSecurityIntroMessage")}</p>
+ <h3><a href="${baseUrl}/#/password">${msg("changePasswordHtmlTitle")}</a></h3>
+ <h3><a href="${baseUrl}/#/authenticator">${msg("authenticatorTitle")}</a></h3>
+ <h3><a href="${baseUrl}/#/device-activity">${msg("deviceActivityHtmlTitle")}</a></h3>
+ <h3><a href="${baseUrl}/#/account">${msg("federatedIdentity")}</a></h3>
+ </div>
</div>
</div>
</div>
- <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
+ <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
- <div class="card-pf-body text-center">
- <div class="card-pf-top-element">
+ <div class="card-pf-body text-center row">
+ <div class="card-pf-top-element col-xs-2 col-sm-12 col-md-12 col-lg-12">
<span class="fa fa-th card-pf-icon-circle"></span>
</div>
- <h2>
- ${msg("applicationsHtmlTitle")}
- </h2>
- <p>${msg("applicationsIntroMessage")}</p>
- <hr/>
- <h3><a href="${baseUrl}/#/applications">${msg("applicationsHtmlTitle")}</a></h3>
+ <div class="card-pf-content col-xs-10 col-sm-12 col-md-12 col-lg-12">
+ <h2>${msg("applicationsHtmlTitle")}</h2>
+ <p class="card-pf-content-intro">${msg("applicationsIntroMessage")}</p>
+ <h3><a href="${baseUrl}/#/applications">${msg("applicationsHtmlTitle")}</a></h3>
+ </div>
</div>
</div>
</div>
- <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
+ <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
- <div class="card-pf-body text-center">
- <div class="card-pf-top-element">
+ <div class="card-pf-body text-center row">
+ <div class="card-pf-top-element col-xs-2 col-sm-12 col-md-12 col-lg-12">
<span class="fa pficon-repository card-pf-icon-circle"></span>
</div>
- <h2>
- ${msg("myResources")}
- </h2>
- <p>${msg("resourceIntroMessage")}</p>
- <hr/>
- <h3><a href="${baseUrl}/#/account">${msg("myResources")}</a></h3>
+ <div class="card-pf-content col-xs-10 col-sm-12 col-md-12 col-lg-12">
+ <h2>${msg("myResources")}</h2>
+ <p class="card-pf-content-intro">${msg("resourceIntroMessage")}</p>
+ <h3><a href="${baseUrl}/#/account">${msg("myResources")}</a></h3>
+ </div>
</div>
</div>
</div>
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css b/themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css
index f40d3a9..4af86a9 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css
@@ -3,7 +3,15 @@
body {
background: #f5f5f5;
}
-
+.cards-pf {
+ background: #f5f5f5;
+}
+.card-pf .row-cards-pf:first-child {
+ padding-top: 0px;
+}
+.cards-pf .row-cards-pf {
+ padding: 0 20px;
+}
p.description {
font-size: 14px;
margin: 10px auto 20px;
@@ -11,6 +19,17 @@ p.description {
padding: 0 10px;
text-align: center;
}
+.card-pf-content-intro {
+ padding-bottom: 10px;
+ border-bottom: 1px solid #f5f5f5;
+}
+.card-pf-content h3 {
+ padding-bottom: 10px;
+ border-bottom: 1px solid #f5f5f5;
+}
+.card-pf-content h3:last-child {
+ border-bottom: 0;
+}
.btn-sign {
margin-top: 10px;
@@ -31,6 +50,90 @@ p.description {
margin-bottom: 10px;
}
+/*Responsive Design*/
+@media (max-width: 767px) {
+ body {
+ background: #fff;
+ }
+
+ .cards-pf {
+ background: #ffffff;
+ }
+ .cards-pf .row-cards-pf {
+ padding: 0;
+ }
+
+ .card-pf {
+ margin: 0;
+ background: #ffffff !important;
+ box-shadow: 0 0 0;
+ border-bottom: 1px solid #f5f5f5;
+ border-top: 0;
+ }
+ .card-pf-body {
+ padding-bottom: 5px;
+ }
+ .card-pf-view.card-pf-view-select:hover {
+ box-shadow: 0 0 0;
+ }
+ .cards-pf .row-cards-pf:first-child {
+ padding-top: 0;
+ }
+ .container-cards-pf {
+ margin-top: 0;
+ }
+ .col-xs-12,
+ .col-sm-4,
+ .col-md-4,
+ .col-lg-3,
+ .container-cards-pf {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ #welcomeScreen .text-center h1,
+ #welcomeScreen .card-pf-body hr{
+ display: none;
+ }
+ .card-pf-view .card-pf-top-element .card-pf-icon-circle {
+ width: 30px;
+ height: 30px;
+ font-size: 16px;
+ line-height: 26px;
+ }
+ .card-pf-content-intro {
+ border-bottom: 0;
+ }
+ .card-pf-content p {
+ padding-bottom: 5px;
+ }
+ .card-pf-content h3 {
+ border-bottom: 0;
+ margin-top: 5px;
+ }
+ .card-pf-content {
+ text-align: left;
+ margin-top: -20px;
+ }
+ .card-pf-content h2 {
+ font-size: 16px;
+ font-weight: bold;
+ }
+ .card-pf-content h3{
+ font-size: 14px;
+ padding-bottom: 0;
+ }
+
+}
+
+@media (min-width: 768px) {
+ .cards-pf .row-cards-pf {
+ padding: 0;
+ }
+ .container-cards-pf {
+ margin-top: 0;
+ }
+}
+
/* personal Info Style */
.subtitle {
color: #4d5258;
