keycloak-aplcache
Changes
themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/account-page.component.html 4(+2 -2)
themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/applications-page/applications-page.component.html 117(+57 -60)
themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity-page.component.html 298(+144 -154)
Details
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/account-page.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/account-page.component.html
index dee55a9..d4bd572 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/account-page.component.html
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/account-page.component.html
@@ -2,8 +2,8 @@
<h1>{{'personalInfoHtmlTitle' | translate}}</h1>
</div>
-<div class="col-sm-12 content-area">
- <div class="row">
+<div class="col-sm-12 card-pf">
+ <div class="card-pf-body row">
<div class="col-sm-4 col-md-4">
<div class="card-pf-subtitle">
{{'personalSubTitle' | translate}}
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 f58debd..5447626 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
@@ -4,72 +4,69 @@
<!--The new application HTML code-->
<div class="card-pf card-pf-utilization">
- <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 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>
+ <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="card-pf-body">
- <div id="pf-list-simple-expansion" class="list-group list-view-pf list-view-pf-view">
+ <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">
@@ -153,7 +150,7 @@
<!--The end of the collapse application HTNL code-->
</div>
</div>
- <div id="pf-list-simple-expansion" class="list-group list-view-pf list-view-pf-view">
+ <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">
@@ -247,7 +244,7 @@
<script>
$(document).ready(function () {
// click the list-view heading then expand a row
- $("#pf-list-simple-expansion .list-group-item-header").click(function(event){
+ $(".list-group-item-header").click(function(event){
if(!$(event.target).is("button, a, input, .fa-ellipsis-v")){
$(this).find(".fa-angle-right").toggleClass("fa-angle-down")
.end().parent().toggleClass("list-view-pf-expand-active")
@@ -257,7 +254,7 @@
})
// click the close button, hide the expand row and remove the active status
- $("#pf-list-simple-expansion .list-group-item-container .close").on("click", function (){
+ $(".list-group-item-container .close").on("click", function (){
$(this).parent().addClass("hidden")
.parent().removeClass("list-view-pf-expand-active")
.find(".fa-angle-right").removeClass("fa-angle-down");
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity-page.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity-page.component.html
index 026c471..6727e73 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity-page.component.html
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity-page.component.html
@@ -2,204 +2,194 @@
<h1>{{'deviceActivityHtmlTitle' | translate}}</h1>
</div>
-<div class="row row-cards-pf">
- <div class="col-md-12">
- <div class="card-pf card-pf-utilization" style="">
- <div>
- <button class="btn btn-default pull-right" type="button" data-toggle="modal" data-target="#myModal">Log Out All Devices</button>
- <h2 class="card-pf-title" style="">
+
+<div class="card-pf">
+ <div class="card-pf-body">
+ <div class="row">
+ <div class="col-sm-12 col-md-8">
+ <h2 class="card-pf-title">
Signed In Devices
</h2>
<p class="detail-description">You can find devices that have logged into your account from the list. Log out any of them if the device is unfamiliar or logged in wrong place and time.</p>
-
</div>
- <div class="card-pf-body" style="">
- <div class="row">
- <div class="container-fluid">
- <div id="pf-list-simple-expansion" 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="col-sm-12 col-md-4">
+ <button class="btn btn-default pull-right pull-right-sm" type="button" data-toggle="modal" data-target="#myModal">Log Out All Devices</button>
+ </div>
+ </div>
+ <div class="row">
+ <div class="container-fluid">
+ <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>
- <div class="list-view-pf-body">
- <div class="list-view-pf-description">
- <div class="list-group-item-heading">
- Asus A3G
- </div>
- <div class="list-group-item-text current-color">
- Current device
- </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>
+ <div class="list-view-pf-body">
+ <div class="list-view-pf-description">
+ <div class="list-group-item-heading">
+ Asus A3G
+ </div>
+ <div class="list-group-item-text current-color">
+ Current device
</div>
-
</div>
- </div>
- </div>
- <div class="list-group-item-container container-fluid hidden">
- <div class="close">
- <span class="pficon pficon-close"></span>
- </div>
-
- <div id="utilizationDonutChart11" class="example-donut-chart-utilization"></div>
- <div class="activity-item">
- <ul>
- <li><h3><i class="fa fa-firefox"></i> Firefox on OS X 10.11</h3></li>
- <li><b>Last accessed in</b> Dalian, China (219.147.95.224) <b>on</b> January 8, 17:33:52</li>
- <li><b>Clients</b> security-admin-console, account</li>
- <li><span><b>Started at</b> January 8, 3:25:38</span> <span class="m-l"><b>Expires at</b> January 9, 3:25:37</span></li>
- </ul>
- <!-- Button trigger modal -->
- <button type="button" class="btn btn-default btn-logout" data-toggle="modal" data-target="#myModal">Log Out</button>
- <!-- End Button trigger modal -->
</div>
+ </div>
+ </div>
+ <div class="list-group-item-container container-fluid hidden">
+ <div class="close">
+ <span class="pficon pficon-close"></span>
+ </div>
+ <div class="activity-item">
+ <ul>
+ <li><h3><i class="fa fa-firefox"></i> Firefox on OS X 10.11</h3></li>
+ <li><b>Last accessed in</b> Dalian, China (219.147.95.224) <b>on</b> January 8, 17:33:52</li>
+ <li><b>Clients</b> security-admin-console, account</li>
+ <li><span><b>Started at</b> January 8, 3:25:38</span> <span class="m-l block-box"><b>Expires at</b> January 9, 3:25:37</span></li>
+ </ul>
+
+ <!-- Button trigger modal -->
+ <button type="button" class="btn btn-default btn-logout" data-toggle="modal" data-target="#myModal">Log Out</button>
+ <!-- End Button trigger modal -->
+ </div>
- <div class="activity-item">
- <ul>
- <li><h3><i class="fa fa-chrome"></i> Chrome on OS X 10.11.6</h3></li>
- <li><b>Last accessed in</b> Dalian, China (219.147.95.224) <b>on</b> January 8, 17:33:52</li>
- <li><b>Clients</b> security-admin-console, account</li>
- <li><span><b>Started at</b> January 8, 3:25:38</span> <span class="m-l"><b>Expires at</b> January 9, 3:25:37</span></li>
- </ul>
- <button class="btn btn-default btn-logout">Log Out</button>
- </div>
+ <div class="activity-item">
+ <ul>
+ <li><h3><i class="fa fa-chrome"></i> Chrome on OS X 10.11.6</h3></li>
+ <li><b>Last accessed in</b> Dalian, China (219.147.95.224) <b>on</b> January 8, 17:33:52</li>
+ <li><b>Clients</b> security-admin-console, account</li>
+ <li><span><b>Started at</b> January 8, 3:25:38</span> <span class="m-l block-box"><b>Expires at</b> January 9, 3:25:37</span></li>
+ </ul>
+ <button class="btn btn-default btn-logout">Log Out</button>
</div>
</div>
- <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>
+ <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-mobile 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">
- Asus A3G
- </div>
- <div class="list-group-item-text">
- <b>Last Access</b>
- <span>Raleigh, US - January 8, 17:33:52</span>
- </div>
+ <div class="list-view-pf-main-info">
+ <div class="list-view-pf-left">
+ <span class="fa fa-mobile 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">
+ Asus A3G
+ </div>
+ <div class="list-group-item-text">
+ <b>Last Access</b>
+ <span>Raleigh, US - January 8, 17:33:52</span>
</div>
-
</div>
- </div>
- </div>
- <div class="list-group-item-container container-fluid hidden">
- <div class="close">
- <span class="pficon pficon-close"></span>
- </div>
- <div class="activity-item">
- <ul>
- <li><h3><i class="fa fa-firefox"></i> Firefox on OS X 10.11</h3></li>
- <li><b>Last accessed in</b> Dalian, China (219.147.95.224) <b>on</b> January 8, 17:33:52</li>
- <li><b>Clients</b> security-admin-console, account</li>
- <li><span><b>Started at</b> January 8, 3:25:38</span> <span class="m-l"><b>Expires at</b> January 9, 3:25:37</span></li>
- </ul>
- <button class="btn btn-default btn-logout">Log Out</button>
+
</div>
</div>
</div>
+ <div class="list-group-item-container container-fluid hidden">
+ <div class="close">
+ <span class="pficon pficon-close"></span>
+ </div>
+ <div class="activity-item">
+ <ul>
+ <li><h3><i class="fa fa-firefox"></i> Firefox on OS X 10.11</h3></li>
+ <li><b>Last accessed in</b> Dalian, China (219.147.95.224) <b>on</b> January 8, 17:33:52</li>
+ <li><b>Clients</b> security-admin-console, account</li>
+ <li><span><b>Started at</b> January 8, 3:25:38</span> <span class="m-l block-box"><b>Expires at</b> January 9, 3:25:37</span></li>
+ </ul>
+ <button class="btn btn-default btn-logout">Log Out</button>
+ </div>
</div>
</div>
+ </div>
</div>
- </div>
</div>
+ </div>
+</div>
+<div class="card-pf">
+ <div class="card-pf-body">
+ <h2 class="card-pf-title">
+ Recently Used Devices
+ </h2>
+ <p class="detail-description">You can find devices that you used in the last month, but they have not logged into your account anymore.</p>
+
+ <div class="row">
+ <div class="container-fluid">
+ <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="card-pf card-pf-utilization" style="">
- <div>
- <h2 class="card-pf-title" style="">
- Recently Used Devices
- </h2>
- <p class="detail-description">You can find devices that you used in the last month, but they have not logged into your account anymore.</p>
-
- </div>
- <div class="card-pf-body" style="">
- <div class="row">
- <div class="container-fluid">
-
- <div id="pf-list-simple-expansion" 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 class="list-view-pf-main-info">
+ <div class="list-view-pf-left">
+ <span class="fa fa-mobile list-view-pf-icon-sm"></span>
</div>
-
- <div class="list-view-pf-main-info">
- <div class="list-view-pf-left">
- <span class="fa fa-mobile 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">
- Asus A3G
- </div>
- <div class="list-group-item-text">
- <b>Last Access</b>
- <span>Raleigh, US - January 8, 17:33:52</span>
- </div>
+ <div class="list-view-pf-body">
+ <div class="list-view-pf-description">
+ <div class="list-group-item-heading">
+ Asus A3G
+ </div>
+ <div class="list-group-item-text">
+ <b>Last Access</b>
+ <span>Raleigh, US - January 8, 17:33:52</span>
</div>
-
</div>
</div>
</div>
- <div class="list-group-item-container container-fluid hidden">
- <div class="close">
- <span class="pficon pficon-close"></span>
- </div>
- <div class="activity-item">
- <ul>
- <li><h3><i class="fa fa-firefox"></i> Firefox on OS X 10.11</h3></li>
- <li><b>Last accessed in</b> Dalian, China (219.147.95.224) <b>on</b> January 8, 17:33:52</li>
- </ul>
- </div>
- </div>
+ </div>
+ <div class="list-group-item-container container-fluid hidden">
+ <div class="close">
+ <span class="pficon pficon-close"></span>
+ </div>
+ <div class="activity-item">
+ <ul>
+ <li><h3><i class="fa fa-firefox"></i> Firefox on OS X 10.11</h3></li>
+ <li><b>Last accessed in</b> Dalian, China (219.147.95.224) <b>on</b> January 8, 17:33:52</li>
+ </ul>
</div>
</div>
+ </div>
</div>
- </div>
-
</div>
</div>
-
</div>
</div>
<!-- Modal -->
- <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
- <div class="modal-dialog" role="document">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
- <h4 class="modal-title" id="myModalLabel">Log Out All Devices</h4>
- </div>
- <div class="modal-body">
- Logging Out All Devices will log out all the devices that have signed in to your account, including the current device you are using.
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
- <button type="button" class="btn btn-primary">Log Out</button>
- </div>
- </div>
+<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
+ <h4 class="modal-title" id="myModalLabel">Log Out All Devices</h4>
+ </div>
+ <div class="modal-body">
+ Logging Out All Devices will log out all the devices that have signed in to your account, including the current device you are using.
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+ <button type="button" class="btn btn-primary">Log Out</button>
</div>
</div>
+ </div>
+</div>
<!-- End Modal -->
<script>
$(document).ready(function () {
// click the list-view heading then expand a row
- $("#pf-list-simple-expansion .list-group-item-header").click(function(event){
+ $(".list-group-item-header").click(function(event){
if(!$(event.target).is("button, a, input, .fa-ellipsis-v")){
$(this).find(".fa-angle-right").toggleClass("fa-angle-down")
.end().parent().toggleClass("list-view-pf-expand-active")
@@ -209,7 +199,7 @@ $(document).ready(function () {
})
// click the close button, hide the expand row and remove the active status
- $("#pf-list-simple-expansion .list-group-item-container .close").on("click", function (){
+ $(".list-group-item-container .close").on("click", function (){
$(this).parent().addClass("hidden")
.parent().removeClass("list-view-pf-expand-active")
.find(".fa-angle-right").removeClass("fa-angle-down");
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/password-page/password-page.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/password-page/password-page.component.html
index df0728f..8e4aceb 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/password-page/password-page.component.html
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/password-page/password-page.component.html
@@ -2,13 +2,15 @@
<h1>{{'changePasswordHtmlTitle' | translate}}</h1>
</div>
-<div class="col-sm-12 content-area password-update">
+<div class="col-sm-12 card-pf">
+ <div class="card-pf-body p-b">
<span class="i pficon pficon-info"></span>
{{'passwordLastUpdateMessage' | translate}} <strong></strong>
+ </div>
</div>
-<div class="col-sm-12 content-area">
- <div class="row">
+<div class="col-sm-12 card-pf">
+ <div class="card-pf-body row">
<div class="col-sm-4 col-md-4">
<div class="card-pf-subtitle">
{{'updatePasswordTitle' | translate}}
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 517f14d..6ad0fad 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,6 +3,9 @@
body {
background: #f5f5f5;
}
+.layout-pf-alt.layout-pf-alt-fixed body {
+ padding-top: 55px;
+}
.cards-pf {
background: #f5f5f5;
}
@@ -12,6 +15,9 @@ body {
.cards-pf .row-cards-pf {
padding: 0 20px;
}
+.card-pf-title {
+ margin: 0 0 20px;
+}
p.description {
font-size: 14px;
margin: 10px auto 20px;
@@ -49,12 +55,13 @@ p.description {
margin-bottom: 10px;
}
+
/*Responsive Design*/
@media (max-width: 767px) {
- body {
- background: #fff;
+ .container-fluid {
+ padding-left: 0;
+ padding-right: 0;
}
-
.cards-pf {
background: #ffffff;
}
@@ -63,14 +70,16 @@ p.description {
}
.card-pf {
- margin: 0;
+ margin: 0 0 10px;
background: #ffffff !important;
box-shadow: 0 0 0;
border-bottom: 1px solid #f5f5f5;
border-top: 0;
+ padding: 0;
}
.card-pf-body {
- padding-bottom: 5px;
+ padding: 20px 20px 10px;
+ margin-top: 0;
}
.card-pf-view.card-pf-view-select:hover {
box-shadow: 0 0 0;
@@ -82,8 +91,12 @@ p.description {
margin-top: 0;
}
.col-xs-12,
+ .col-xs-2,
+ .col-xs-10,
+ .col-sm-12
.col-sm-4,
.col-md-4,
+ .col-md-8,
.col-lg-3,
.container-cards-pf {
padding-left: 0;
@@ -98,6 +111,7 @@ p.description {
height: 30px;
font-size: 16px;
line-height: 26px;
+ margin-top: -8px;
}
.card-pf-content-intro {
border-bottom: 0;
@@ -123,9 +137,7 @@ p.description {
}
.page-header {
background: #f5f5f5;
- margin-top: 0;
- margin-left: -20px;
- margin-right: -20px;
+ margin: 0;
}
.page-header h1 {
margin-top: 0;
@@ -134,17 +146,28 @@ p.description {
padding-left: 20px;
font-size: 18px;
}
- .password-update {
- margin-left: -20px;
- margin-right: -20px;
- border-bottom: solid 10px #f5f5f5;
- }
.content-area {
- padding-top: 8px;
+ padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
}
-
+ .list-view-pf-view {
+ margin-top: 0;
+ }
+ .list-view-pf-main-info {
+ padding-bottom: 10px;
+ }
+ .row {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ .pull-right-sm {
+ float: none !important;
+ margin-bottom: 10px;
+ }
+ .p-b {
+ padding-bottom: 20px;
+ }
}
@@ -181,21 +204,27 @@ p.description {
/* Introduction Message on the left */
.introMessage {
margin: 10px 20px 20px 0;
+}
/* Device Activity */
-.card-title{
+
+.card-title {
margin-left: 20px;
margin-bottom: 30px;
}
-.detail-description{
+.detail-description {
margin-top:-10px;
}
.list-view-pf-view {
margin-top: 0;
}
-.m-l{
+.m-l {
margin-left: 20px;
}
+.block-box {
+ margin-left: 0;
+ display: block;
+}
.activity-item {
padding-left: 60px;
}
@@ -216,3 +245,39 @@ p.description {
font-weight: bold;
color: #4F9207!important;
}
+.list-view-pf .list-group-item.list-view-pf-expand-active,
+.list-view-pf .list-group-item.list-view-pf-expand-active:first-child {
+ border-top-color: #d8d8d8;
+ border: solid 1px #d8d8d8;
+}
+.list-group-item-container {
+ border-top: solid 1px #d8d8d8;
+}
+
+/* Responsive Design for Devices Activiy*/
+@media (max-width: 767px) {
+ .activity-item {
+ padding-left: 0;
+ }
+ .list-group-item-header {
+ padding: 0;
+ }
+ .list-view-pf .list-group-item.list-view-pf-expand-active {
+ margin-left: -21px;
+ margin-right: -21px;
+ }
+ .list-view-pf .list-group-item.list-view-pf-expand-active .list-group-item-header {
+ padding-left: 20px;
+ padding-right: 20px;
+ }
+ .list-group {
+ margin-bottom: 0;
+ }
+ .list-view-pf .list-group-item:last-child {
+ border-bottom: 0;
+ }
+ .list-group-item-container {
+ padding-left: 5px;
+ padding-right: 25px;
+ }
+}