diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/applications-page/applications-page.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/applications-page/applications-page.component.html
index 5447626..9e265dc 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/applications-page/applications-page.component.html
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/applications-page/applications-page.component.html
@@ -3,246 +3,253 @@
</div>
<!--The new application HTML code-->
-<div class="card-pf card-pf-utilization">
+<div class="card-pf card-pf-application">
<div class="card-pf-body">
<div class="row toolbar-pf">
<div class="col-sm-12">
- <form class="toolbar-pf-actions">
- <div class="form-group toolbar-pf-filter">
- <label class="sr-only" for="filter">{{'applicaitonName' | translate}}</label>
- <div class="input-group">
- <div class="input-group-btn">
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
+ <div id="toolbar-application-mobile">
+ <h2>
+ <span class="fa fa-angle-right"></span>
+ <a href="javascript:void(0)">Filter</a>
+ </h2>
+ </div>
+ <div id="toolbar-application">
+ <form class="toolbar-pf-actions">
+ <div class="form-group toolbar-pf-filter">
+ <label class="sr-only" for="filter">{{'applicaitonName' | translate}}</label>
+ <div class="input-group">
+ <div class="input-group-btn">
+ <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
+ <ul class="dropdown-menu">
+ <li class="selected"><a href="#">{{'applicaitonName' | translate}}</a></li>
+ <li><a href="#">{{'applicaitonType' | translate}}</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ <input type="text" class="form-control" id="filter" placeholder="{{'filterByName' | translate}}">
+ </div><!-- /input-group -->
+ </div>
+ <div class="form-group">
+ <div class="dropdown btn-group">
+ <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{'applicaitonType' | translate}} <span class="caret"></span></button>
<ul class="dropdown-menu">
- <li class="selected"><a href="#">{{'applicaitonName' | translate}}</a></li>
- <li><a href="#">{{'applicaitonType' | translate}}</a></li>
+ <li class="selected"><a href="#">{{'allApps' | translate}}</a></li>
+ <li><a href="#">{{'internalApps' | translate}}</a></li>
+ <li><a href="#">{{'thirdpartyApps' | translate}}</a></li>
</ul>
- </div><!-- /btn-group -->
- <input type="text" class="form-control" id="filter" placeholder="{{'filterByName' | translate}}">
- </div><!-- /input-group -->
- </div>
- <div class="form-group">
- <div class="dropdown btn-group">
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{'applicaitonType' | translate}} <span class="caret"></span></button>
- <ul class="dropdown-menu">
- <li class="selected"><a href="#">{{'allApps' | translate}}</a></li>
- <li><a href="#">{{'internalApps' | translate}}</a></li>
- <li><a href="#">{{'thirdpartyApps' | translate}}</a></li>
+ </div>
+ </div>
+ <div class="form-group">
+ <input id="app-check" type="checkbox" checked> <label for="app-check"> {{'applicationInUse' | translate}}</label>
+ </div>
+ </form>
+ <div class="row toolbar-pf-results">
+ <div class="col-sm-12">
+ <h5>40 {{'appResults' | translate}}</h5>
+ <p>{{'activeFilters' | translate}}</p>
+ <ul class="list-inline">
+ <li>
+ <span class="label label-info">
+ {{'applicaitonName' | translate}}: nameofthething
+ <a href="#"><span class="pficon pficon-close"></span></a>
+ </span>
+ </li>
+ <li>
+ <span class="label label-info">
+ {{'applicaitonName' | translate}}: nameofthething
+ <a href="#"><span class="pficon pficon-close"></span></a>
+ </span>
+ </li>
+ <li>
+ <span class="label label-info">
+ {{'applicaitonName' | translate}}: nameofthething
+ <a href="#"><span class="pficon pficon-close"></span></a>
+ </span>
+ </li>
</ul>
+ <p><a href="#">{{'clearAllFilter' | translate}}</a></p>
</div>
</div>
- <div class="form-group">
- <input id="app-check" type="checkbox" checked> <label for="app-check"> {{'applicationInUse' | translate}}</label>
- </div>
- </form>
- <div class="row toolbar-pf-results">
- <div class="col-sm-12">
- <h5>40 {{'appResults' | translate}}</h5>
- <p>{{'activeFilters' | translate}}</p>
- <ul class="list-inline">
- <li>
- <span class="label label-info">
- {{'applicaitonName' | translate}}: nameofthething
- <a href="#"><span class="pficon pficon-close"></span></a>
- </span>
- </li>
- <li>
- <span class="label label-info">
- {{'applicaitonName' | translate}}: nameofthething
- <a href="#"><span class="pficon pficon-close"></span></a>
- </span>
- </li>
- <li>
- <span class="label label-info">
- {{'applicaitonName' | translate}}: nameofthething
- <a href="#"><span class="pficon pficon-close"></span></a>
- </span>
- </li>
- </ul>
- <p><a href="#">{{'clearAllFilter' | translate}}</a></p>
- </div>
</div>
</div>
</div>
- <div class="list-group list-view-pf list-view-pf-view">
- <div class="list-group-item">
- <div class="list-group-item-header">
- <div class="list-view-pf-expand">
- <span class="fa fa-angle-right"></span>
- </div>
- <div class="list-view-pf-main-info">
- <div class="list-view-pf-left">
- <span class="fa fa-desktop list-view-pf-icon-sm"></span>
+ <div class="list-group list-view-pf list-view-pf-view">
+ <div class="list-group-item">
+ <div class="list-group-item-header">
+ <div class="list-view-pf-expand">
+ <span class="fa fa-angle-right"></span>
</div>
- <div class="list-view-pf-body">
- <div class="list-view-pf-description">
- <div class="list-group-item-heading">
- Admin CLI
- </div>
- <div class="list-group-item-text">
- <ul class="app-info">
- <li>Internal</li>
- <li><span class="current-color">In-use</span></li>
- <li><i class="fa fa-link"></i> <a>http://photoz.com/admincli</a></li>
- </ul>
+ <div class="list-view-pf-main-info">
+ <div class="list-view-pf-left">
+ <span class="fa fa-desktop list-view-pf-icon-sm"></span>
+ </div>
+ <div class="list-view-pf-body">
+ <div class="list-view-pf-description">
+ <div class="list-group-item-heading">
+ Admin CLI
+ </div>
+ <div class="list-group-item-text">
+ <ul class="app-info">
+ <li>Internal</li>
+ <li><span class="current-color">In-use</span></li>
+ <li><i class="fa fa-link"></i> <a>http://photoz.com/admincli</a></li>
+ </ul>
+ </div>
</div>
</div>
- </div>
- </div>
- <!--The collapse application HTNL code-->
- <div class="list-group-item-container container-fluid hidden">
- <div class="close">
- <span class="pficon pficon-close"></span>
</div>
- <form class="form-horizontal app-form">
- <div class="form-group">
- <label class="col-md-2 control-label" for="textInput">Client</label>
- <div class="col-md-6">
- Google
- </div>
+ <!--The collapse application HTNL code-->
+ <div class="list-group-item-container container-fluid hidden">
+ <div class="close">
+ <span class="pficon pficon-close"></span>
</div>
- <div class="divide-line"></div>
- <div class="form-group">
- <label class="col-md-2 control-label" for="textInput2">Description</label>
- <div class="col-md-6">
- Google is an American mutinational technology company that specialize in internet-related services and products, which include online advertising technologies,search engine, cloud computing, software, and hardware.
+ <div class="row form-horizontal">
+ <label class="col-md-2 control-label non-display" for="textInput">Client</label>
+ <div class="col-md-6 non-display">
+ Google
+ </div>
</div>
- </div>
- <div class="form-group">
- <label class="col-md-2 control-label" for="textInput3">URL</label>
- <div class="col-md-6">
- <a href="#">www.google.com</a>
+ <div class="row form-horizontal">
+ <label class="col-md-2 control-label non-display" for="textInput2">Description</label>
+ <div class="col-md-6">
+ Google is an American mutinational technology company that specialize in internet-related services and products, which include online advertising technologies,search engine, cloud computing, software, and hardware.
+ </div>
</div>
- </div>
- <div class="form-group">
- <label class="col-md-2 control-label" for="textInput4">Has access to</label>
- <div class="col-md-6">
- Account
- <ul>
- <li>View profile</li>
- <li>Manage account links</li>
- <li>Manage account</li>
- </ul>
+ <div class="row form-horizontal">
+ <label class="col-md-2 control-label" for="textInput3">URL</label>
+ <div class="col-md-6">
+ <a href="#">www.google.com</a>
+ </div>
</div>
- </div>
- <div class="form-group">
- <label class="col-md-2 control-label">Access granted on</label>
- <div class="col-md-6">
- 2018-1-7 17：33：52
+ <div class="row form-horizontal">
+ <label class="col-md-2 control-label" for="textInput4">Has access to</label>
+ <div class="col-md-6">
+ Account
+ <ul>
+ <li>View profile</li>
+ <li>Manage account links</li>
+ <li>Manage account</li>
+ </ul>
+ </div>
</div>
- </div>
- <div class="divide-line"></div>
- <div class="form-group">
- <label class="col-md-2 control-label">
- <!-- Button trigger modal -->
- <button type="button" class="btn btn-default btn-logout" data-toggle="modal" data-target="#myModal">Remove Access</button>
- <!-- End Button trigger modal -->
- </label>
- <div class="col-md-10 remove-notice">
- <i class="fa fa-info-circle"></i>
- <span>By clicking ‘Remove Access’, you will remove granted permissions of this app. This app will no longer use your information.</span>
+ <div class="row form-horizontal">
+ <label class="col-md-2 control-label">Access granted on</label>
+ <div class="col-md-6">
+ 2018-1-7 17：33：52
+ </div>
</div>
- </div>
- </form>
+ <div class="divide-line"></div>
+ <div class="row form-horizontal">
+ <label class="col-md-2 control-label">
+ <!-- Button trigger modal -->
+ <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">Remove Access</button>
+ <!-- End Button trigger modal -->
+ </label>
+ <div class="col-md-10 remove-notice">
+ <i class="fa fa-info-circle"></i>
+ <span>By clicking ‘Remove Access’, you will remove granted permissions of this app. This app will no longer use your information.</span>
+ </div>
+ </div>
+
+ </div>
+ <!--The end of the collapse application HTNL code-->
</div>
- <!--The end of the collapse application HTNL code-->
</div>
- </div>
- <div class="list-group list-view-pf list-view-pf-view">
- <div class="list-group-item">
- <div class="list-group-item-header">
- <div class="list-view-pf-expand">
- <span class="fa fa-angle-right"></span>
- </div>
- <div class="list-view-pf-main-info">
- <div class="list-view-pf-left">
- <span class="fa fa-desktop list-view-pf-icon-sm"></span>
+ <div class="list-group list-view-pf list-view-pf-view">
+ <div class="list-group-item">
+ <div class="list-group-item-header">
+ <div class="list-view-pf-expand">
+ <span class="fa fa-angle-right"></span>
</div>
- <div class="list-view-pf-body">
- <div class="list-view-pf-description">
- <div class="list-group-item-heading">
- Admin CLI
- </div>
- <div class="list-group-item-text">
- <ul class="app-info">
- <li>Internal</li>
- <li><span class="current-color">In-use</span></li>
- <li><i class="fa fa-link"></i> <a>http://photoz.com/admincli</a></li>
- </ul>
+ <div class="list-view-pf-main-info">
+ <div class="list-view-pf-left">
+ <span class="fa fa-desktop list-view-pf-icon-sm"></span>
+ </div>
+ <div class="list-view-pf-body">
+ <div class="list-view-pf-description">
+ <div class="list-group-item-heading">
+ Admin CLI
+ </div>
+ <div class="list-group-item-text">
+ <ul class="app-info">
+ <li>Internal</li>
+ <li><span class="current-color">In-use</span></li>
+ <li><i class="fa fa-link"></i> <a>http://photoz.com/admincli</a></li>
+ </ul>
+ </div>
</div>
</div>
</div>
- </div>
- <!--The collapse application HTNL code-->
- <div class="list-group-item-container container-fluid hidden">
- <div class="close">
- <span class="pficon pficon-close"></span>
</div>
- <form class="form-horizontal app-form">
- <div class="form-group">
- <label class="col-md-2 control-label" for="textInput">Client</label>
- <div class="col-md-6">
- Google
- </div>
+ <!--The collapse application HTNL code-->
+ <div class="list-group-item-container container-fluid hidden">
+ <div class="close">
+ <span class="pficon pficon-close"></span>
</div>
- <div class="divide-line"></div>
- <div class="form-group">
- <label class="col-md-2 control-label" for="textInput2">Description</label>
- <div class="col-md-6">
- Google is an American mutinational technology company that specialize in internet-related services and products, which include online advertising technologies,search engine, cloud computing, software, and hardware.
+ <form class="form-horizontal app-form">
+ <div class="form-group">
+ <label class="col-md-2 control-label" for="textInput">Client</label>
+ <div class="col-md-6">
+ Google
+ </div>
</div>
- </div>
- <div class="form-group">
- <label class="col-md-2 control-label" for="textInput3">URL</label>
- <div class="col-md-6">
- <a href="#">www.google.com</a>
+ <div class="divide-line"></div>
+ <div class="form-group">
+ <label class="col-md-2 control-label" for="textInput2">Description</label>
+ <div class="col-md-6">
+ Google is an American mutinational technology company that specialize in internet-related services and products, which include online advertising technologies,search engine, cloud computing, software, and hardware.
+ </div>
</div>
- </div>
- <div class="form-group">
- <label class="col-md-2 control-label" for="textInput4">Has access to</label>
- <div class="col-md-6">
- Account
- <ul>
- <li>View profile</li>
- <li>Manage account links</li>
- <li>Manage account</li>
- </ul>
+ <div class="form-group">
+ <label class="col-md-2 control-label" for="textInput3">URL</label>
+ <div class="col-md-6">
+ <a href="#">www.google.com</a>
+ </div>
</div>
- </div>
- <div class="form-group">
- <label class="col-md-2 control-label">Access granted on</label>
- <div class="col-md-6">
- 2018-1-7 17：33：52
+ <div class="form-group">
+ <label class="col-md-2 control-label" for="textInput4">Has access to</label>
+ <div class="col-md-6">
+ Account
+ <ul>
+ <li>View profile</li>
+ <li>Manage account links</li>
+ <li>Manage account</li>
+ </ul>
+ </div>
</div>
- </div>
- <div class="divide-line"></div>
- <div class="form-group">
- <label class="col-md-2 control-label">
- <!-- Button trigger modal -->
- <button type="button" class="btn btn-default btn-logout" data-toggle="modal" data-target="#myModal">Remove Access</button>
- <!-- End Button trigger modal -->
- </label>
- <div class="col-md-10 remove-notice">
- <i class="fa fa-info-circle"></i>
- <span>By clicking ‘Remove Access’, you will remove granted permissions of this app. This app will no longer use your information.</span>
+ <div class="form-group">
+ <label class="col-md-2 control-label">Access granted on</label>
+ <div class="col-md-6">
+ 2018-1-7 17：33：52
+ </div>
</div>
- </div>
- </form>
+ <div class="divide-line"></div>
+ <div class="form-group">
+ <label class="col-md-2 control-label">
+ <!-- Button trigger modal -->
+ <button type="button" class="btn btn-default btn-logout" data-toggle="modal" data-target="#myModal">Remove Access</button>
+ <!-- End Button trigger modal -->
+ </label>
+ <div class="col-md-10 remove-notice">
+ <i class="fa fa-info-circle"></i>
+ <span>By clicking ‘Remove Access’, you will remove granted permissions of this app. This app will no longer use your information.</span>
+ </div>
+ </div>
+ </form>
+ </div>
+ <!--The end of the collapse application HTNL code-->
</div>
- <!--The end of the collapse application HTNL code-->
</div>
</div>
</div>
<!--End of the new application HTML code-->
-
-
-
-</div>
<script>
$(document).ready(function () {
+ $("#toolbar-application-mobile").click(function(){
+ $("#toolbar-application").toggle();
+ })
// click the list-view heading then expand a row
$(".list-group-item-header").click(function(event){
if(!$(event.target).is("button, a, input, .fa-ellipsis-v")){
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 6ad0fad..525187a 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
@@ -93,7 +93,7 @@ p.description {
.col-xs-12,
.col-xs-2,
.col-xs-10,
- .col-sm-12
+ .col-sm-12,
.col-sm-4,
.col-md-4,
.col-md-8,
@@ -281,3 +281,49 @@ p.description {
padding-right: 25px;
}
}
+
+
+/* Application Style */
+.card-pf-application {
+ padding: 0;
+}
+.card-pf-application .card-pf-body {
+ padding-bottom: 0;
+}
+.card-pf-application .toolbar-pf {
+ margin: 0;
+ border-bottom: 0;
+}
+#toolbar-application-mobile {
+ display: none;
+}
+.card-pf-application .close {
+ position: absolute;
+ right: 10px;
+}
+
+@media (max-width: 767px) {
+ .card-pf-application h2 {
+ margin-top: -10px;
+ }
+ .card-pf-application h2 a {
+ text-decoration: none;
+ }
+ .card-pf-application .list-group-item-container {
+ padding-left: 20px;
+ padding-right: 20px;
+ margin-left: -20px;
+ }
+ .card-pf-application .form-horizontal {
+ margin-bottom: 10px;
+ }
+ #toolbar-application-mobile {
+ display: block;
+ }
+ #toolbar-application {
+ display: none;
+ }
+ .non-display {
+ display: none;
+ }
+}
