libre.sh/keycloak-scim
2
0
Fork 0
Code Issues 14 Pull requests Releases Packages Activity Actions 6

Fixes KEYCLOAK-7381 Device Activity Response - HTML update (#5230)

Browse source
This commit is contained in:
June Zhang 2018-05-29 21:30:48 +08:00 committed by Stan Silvert
parent c64ecb1ab8
commit 77e503f5ca
5 changed files with 310 additions and 256 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/account-page.component.html
View file

@ -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}}

123
themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/applications-page/applications-page.component.html
View file

@ -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>
<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="#">{{'allApps' | translate}}</a></li>
<li><a href="#">{{'internalApps' | translate}}</a></li>
<li><a href="#">{{'thirdpartyApps' | translate}}</a></li>
</ul>
<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="#">{{'allApps' | translate}}</a></li>
<li><a href="#">{{'internalApps' | translate}}</a></li>
<li><a href="#">{{'thirdpartyApps' | translate}}</a></li>
</ul>
</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");

330
themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity-page.component.html
View file

@ -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>
</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 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>
</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-group-item-text current-color">
Current device
</div>
</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 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 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 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>
</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 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="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>
</ul>
</div>
</div>
</div>
</div>
</div>
</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>
<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>
<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>
</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">&times;</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">&times;</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");

8
themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/password-page/password-page.component.html
View file

@ -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}}

101
themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css
View file

@ -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;
}
}