mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-08-20 05:13:18 -07:00
User management styling
This commit is contained in:
Jamie.Rees
parent
4dc4f83506
commit
9e9df87d17
11 changed files with 380 additions and 158 deletions
|
|
@ -179,3 +179,6 @@ button.list-group-item:focus {
|
|||
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
|
||||
border-bottom: 6px solid #333333 !important; }
|
||||
|
||||
#sidebar-wrapper {
|
||||
background: #252424; }
|
||||
|
||||
|
|
|
|||
2
PlexRequests.UI/Content/Themes/plex.min.css
vendored
2
PlexRequests.UI/Content/Themes/plex.min.css
vendored
|
|
@ -1 +1 @@
|
|||
.form-control-custom{background-color:#333 !important;}.form-control-custom-disabled{background-color:#252424 !important;}.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{background:#df691a;}.scroll-top-wrapper{background-color:#333;}.scroll-top-wrapper:hover{background-color:#df691a;}body{font-family:Open Sans Regular,Helvetica Neue,Helvetica,Arial,sans-serif;color:#eee;background-color:#1f1f1f;}.table-striped>tbody>tr:nth-of-type(odd){background-color:#333;}.table-hover>tbody>tr:hover{background-color:#282828;}fieldset{padding:15px;}legend{border-bottom:1px solid #333;}.form-control{color:#fefefe;background-color:#333;}.radio input[type="radio"],.radio-inline input[type="radio"],.checkbox input[type="checkbox"],.checkbox-inline input[type="checkbox"]{margin-left:-0;}.form-horizontal .radio,.form-horizontal .checkbox,.form-horizontal .radio-inline,.form-horizontal .checkbox-inline{margin-top:-15px;}.dropdown-menu{background-color:#282828;}.dropdown-menu .divider{background-color:#333;}.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{background-color:#333;}.input-group-addon{background-color:#333;}.nav>li>a:hover,.nav>li>a:focus{background-color:#df691a;}.nav-tabs>li>a:hover{border-color:#df691a #df691a transparent;}.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{background-color:#df691a;border:1px solid #df691a;}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:hover,.nav-tabs.nav-justified>.active>a:focus{border:1px solid #df691a;}.navbar-default{background-color:#0a0a0a;}.navbar-default .navbar-brand{color:#df691a;}.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus{color:#f0ad4e;background-color:#282828;}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{background-color:#282828;}.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:hover,.navbar-default .navbar-nav>.open>a:focus{background-color:#df691a;color:#fff;}.pagination>li>a,.pagination>li>span{background-color:#282828;}.pagination>li>a:hover,.pagination>li>span:hover,.pagination>li>a:focus,.pagination>li>span:focus{background-color:#333;}.pagination>.disabled>span,.pagination>.disabled>span:hover,.pagination>.disabled>span:focus,.pagination>.disabled>a,.pagination>.disabled>a:hover,.pagination>.disabled>a:focus{color:#fefefe;background-color:#333;}.list-group-item{background-color:#282828;}a.list-group-item:hover,button.list-group-item:hover,a.list-group-item:focus,button.list-group-item:focus{background-color:#333;}.input-addon,.input-group-addon{color:#df691a;}.modal-header,.modal-footer{background-color:#282828;}.modal-content{position:relative;background-color:#282828;border:1px solid transparent;border-radius:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;outline:0;}.badge{display:inline-block;min-width:10px;padding:3px 7px;font-size:12px;font-weight:300;color:#ebebeb;line-height:1;vertical-align:middle;white-space:nowrap;text-align:center;background-color:#333;border-radius:10px;}.bootstrap-datetimepicker-widget.dropdown-menu{background-color:#333;}.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after{border-bottom:6px solid #333 !important;}
|
||||
.form-control-custom{background-color:#333 !important;}.form-control-custom-disabled{background-color:#252424 !important;}.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{background:#df691a;}.scroll-top-wrapper{background-color:#333;}.scroll-top-wrapper:hover{background-color:#df691a;}body{font-family:Open Sans Regular,Helvetica Neue,Helvetica,Arial,sans-serif;color:#eee;background-color:#1f1f1f;}.table-striped>tbody>tr:nth-of-type(odd){background-color:#333;}.table-hover>tbody>tr:hover{background-color:#282828;}fieldset{padding:15px;}legend{border-bottom:1px solid #333;}.form-control{color:#fefefe;background-color:#333;}.radio input[type="radio"],.radio-inline input[type="radio"],.checkbox input[type="checkbox"],.checkbox-inline input[type="checkbox"]{margin-left:-0;}.form-horizontal .radio,.form-horizontal .checkbox,.form-horizontal .radio-inline,.form-horizontal .checkbox-inline{margin-top:-15px;}.dropdown-menu{background-color:#282828;}.dropdown-menu .divider{background-color:#333;}.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{background-color:#333;}.input-group-addon{background-color:#333;}.nav>li>a:hover,.nav>li>a:focus{background-color:#df691a;}.nav-tabs>li>a:hover{border-color:#df691a #df691a transparent;}.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{background-color:#df691a;border:1px solid #df691a;}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:hover,.nav-tabs.nav-justified>.active>a:focus{border:1px solid #df691a;}.navbar-default{background-color:#0a0a0a;}.navbar-default .navbar-brand{color:#df691a;}.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus{color:#f0ad4e;background-color:#282828;}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{background-color:#282828;}.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:hover,.navbar-default .navbar-nav>.open>a:focus{background-color:#df691a;color:#fff;}.pagination>li>a,.pagination>li>span{background-color:#282828;}.pagination>li>a:hover,.pagination>li>span:hover,.pagination>li>a:focus,.pagination>li>span:focus{background-color:#333;}.pagination>.disabled>span,.pagination>.disabled>span:hover,.pagination>.disabled>span:focus,.pagination>.disabled>a,.pagination>.disabled>a:hover,.pagination>.disabled>a:focus{color:#fefefe;background-color:#333;}.list-group-item{background-color:#282828;}a.list-group-item:hover,button.list-group-item:hover,a.list-group-item:focus,button.list-group-item:focus{background-color:#333;}.input-addon,.input-group-addon{color:#df691a;}.modal-header,.modal-footer{background-color:#282828;}.modal-content{position:relative;background-color:#282828;border:1px solid transparent;border-radius:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;outline:0;}.badge{display:inline-block;min-width:10px;padding:3px 7px;font-size:12px;font-weight:300;color:#ebebeb;line-height:1;vertical-align:middle;white-space:nowrap;text-align:center;background-color:#333;border-radius:10px;}.bootstrap-datetimepicker-widget.dropdown-menu{background-color:#333;}.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after{border-bottom:6px solid #333 !important;}#sidebar-wrapper{background:#252424;}
|
||||
|
|
@ -2,7 +2,9 @@
|
|||
$primary-colour-outline: #ff761b;
|
||||
$bg-colour: #333333;
|
||||
$bg-colour-disabled: #252424;
|
||||
$i: !important;
|
||||
$i:
|
||||
!important
|
||||
;
|
||||
|
||||
.form-control-custom {
|
||||
background-color: $bg-colour $i;
|
||||
|
|
@ -201,18 +203,18 @@ button.list-group-item:focus {
|
|||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
min-width: 10px;
|
||||
padding: 3px 7px;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
color: #ebebeb;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
background-color: $bg-colour;
|
||||
border-radius: 10px;
|
||||
display: inline-block;
|
||||
min-width: 10px;
|
||||
padding: 3px 7px;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
color: #ebebeb;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
background-color: $bg-colour;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.bootstrap-datetimepicker-widget.dropdown-menu {
|
||||
|
|
@ -221,4 +223,8 @@ button.list-group-item:focus {
|
|||
|
||||
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
|
||||
border-bottom: 6px solid $bg-colour $i;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar-wrapper {
|
||||
background: $bg-colour-disabled;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
(function() {
|
||||
module = angular.module('PlexRequests', []);
|
||||
module.constant("moment", moment);
|
||||
}());
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
(function () {
|
||||
|
||||
var controller = function ($scope, userManagementService) {
|
||||
var controller = function ($scope, userManagementService, moment) {
|
||||
|
||||
$scope.user = {}; // The local user
|
||||
$scope.users = []; // list of users
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
$scope.selectedUser = {}; // User on the right side
|
||||
$scope.selectedClaims = {};
|
||||
|
||||
$scope.minDate = "0001-01-01T00:00:00.0000000+00:00";
|
||||
|
||||
$scope.sortType = "username";
|
||||
$scope.sortReverse = false;
|
||||
|
|
@ -20,12 +21,19 @@
|
|||
errorMessage: ""
|
||||
};
|
||||
|
||||
var open = false;
|
||||
|
||||
// Select a user to populate on the right side
|
||||
$scope.selectUser = function (id) {
|
||||
var user = $scope.users.filter(function (item) {
|
||||
return item.id === id;
|
||||
});
|
||||
$scope.selectedUser = user[0];
|
||||
|
||||
if (!open) {
|
||||
$("#wrapper").toggleClass("toggled");
|
||||
open = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Get all users in the system
|
||||
|
|
@ -122,6 +130,10 @@
|
|||
return $('#baseUrl').val();
|
||||
}
|
||||
|
||||
$scope.formatDate = function (utcDate) {
|
||||
return moment.utc(utcDate).local().format('lll');
|
||||
}
|
||||
|
||||
|
||||
// On page load
|
||||
$scope.init = function () {
|
||||
|
|
@ -144,5 +156,6 @@
|
|||
generateNotify(message, type);
|
||||
};
|
||||
|
||||
angular.module('PlexRequests').controller('userManagementController', ["$scope", "userManagementService", controller]);
|
||||
|
||||
angular.module('PlexRequests').controller('userManagementController', ["$scope", "userManagementService","moment", controller]);
|
||||
}());
|
||||
98
PlexRequests.UI/Content/base.css
vendored
98
PlexRequests.UI/Content/base.css
vendored
|
|
@ -344,11 +344,95 @@ label {
|
|||
.img-circle {
|
||||
border-radius: 50%; }
|
||||
|
||||
.user-management-menu {
|
||||
border-style: ridge;
|
||||
height: 100%;
|
||||
left: 60%;
|
||||
position: absolute;
|
||||
width: 40%;
|
||||
top: 7%; }
|
||||
#wrapper {
|
||||
padding-left: 0;
|
||||
-webkit-transition: all 0.5s ease;
|
||||
-moz-transition: all 0.5s ease;
|
||||
-o-transition: all 0.5s ease;
|
||||
transition: all 0.5s ease; }
|
||||
|
||||
#wrapper.toggled {
|
||||
padding-right: 250px; }
|
||||
|
||||
#sidebar-wrapper {
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
right: 250px;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
margin-right: -250px;
|
||||
overflow-y: auto;
|
||||
background: #4e5d6c;
|
||||
padding-left: 15px;
|
||||
-webkit-transition: all 0.5s ease;
|
||||
-moz-transition: all 0.5s ease;
|
||||
-o-transition: all 0.5s ease;
|
||||
transition: all 0.5s ease; }
|
||||
|
||||
#wrapper.toggled #sidebar-wrapper {
|
||||
width: 500px; }
|
||||
|
||||
#page-content-wrapper {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
padding: 15px; }
|
||||
|
||||
#wrapper.toggled #page-content-wrapper {
|
||||
position: absolute;
|
||||
margin-left: -250px; }
|
||||
|
||||
/* Sidebar Styles */
|
||||
.sidebar-nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 500px;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
list-style: none; }
|
||||
|
||||
.sidebar-nav li {
|
||||
text-indent: 20px;
|
||||
line-height: 40px; }
|
||||
|
||||
.sidebar-nav li a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: #999999; }
|
||||
|
||||
.sidebar-nav li a:hover {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.2); }
|
||||
|
||||
.sidebar-nav li a:active,
|
||||
.sidebar-nav li a:focus {
|
||||
text-decoration: none; }
|
||||
|
||||
.sidebar-nav > .sidebar-brand {
|
||||
height: 65px;
|
||||
font-size: 18px;
|
||||
line-height: 60px; }
|
||||
|
||||
.sidebar-nav > .sidebar-brand a {
|
||||
color: #999999; }
|
||||
|
||||
.sidebar-nav > .sidebar-brand a:hover {
|
||||
color: #fff;
|
||||
background: none; }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#wrapper {
|
||||
padding-right: 250px; }
|
||||
#wrapper.toggled {
|
||||
padding-right: 0; }
|
||||
#sidebar-wrapper {
|
||||
width: 500px; }
|
||||
#wrapper.toggled #sidebar-wrapper {
|
||||
width: 0; }
|
||||
#page-content-wrapper {
|
||||
padding: 20px;
|
||||
position: relative; }
|
||||
#wrapper.toggled #page-content-wrapper {
|
||||
position: relative;
|
||||
margin-right: 0; } }
|
||||
|
||||
|
|
|
|||
2
PlexRequests.UI/Content/base.min.css
vendored
2
PlexRequests.UI/Content/base.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -434,11 +434,121 @@ $border-radius: 10px;
|
|||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-management-menu {
|
||||
border-style: ridge;
|
||||
#wrapper {
|
||||
padding-left: 0;
|
||||
-webkit-transition: all 0.5s ease;
|
||||
-moz-transition: all 0.5s ease;
|
||||
-o-transition: all 0.5s ease;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
#wrapper.toggled {
|
||||
padding-right: 250px;
|
||||
}
|
||||
|
||||
#sidebar-wrapper {
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
right: 250px;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
left: 60%;
|
||||
margin-right: -250px;
|
||||
overflow-y: auto;
|
||||
background: #4e5d6c;
|
||||
padding-left:15px;
|
||||
-webkit-transition: all 0.5s ease;
|
||||
-moz-transition: all 0.5s ease;
|
||||
-o-transition: all 0.5s ease;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
#wrapper.toggled #sidebar-wrapper {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
#page-content-wrapper {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
width: 40%;
|
||||
top: 7%;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#wrapper.toggled #page-content-wrapper {
|
||||
position: absolute;
|
||||
margin-left: -250px;
|
||||
}
|
||||
|
||||
/* Sidebar Styles */
|
||||
|
||||
.sidebar-nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 500px;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.sidebar-nav li {
|
||||
text-indent: 20px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.sidebar-nav li a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.sidebar-nav li a:hover {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.sidebar-nav li a:active,
|
||||
.sidebar-nav li a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sidebar-nav > .sidebar-brand {
|
||||
height: 65px;
|
||||
font-size: 18px;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.sidebar-nav > .sidebar-brand a {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.sidebar-nav > .sidebar-brand a:hover {
|
||||
color: #fff;
|
||||
background: none;
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
#wrapper {
|
||||
padding-right: 250px;
|
||||
}
|
||||
|
||||
#wrapper.toggled {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
#sidebar-wrapper {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
#wrapper.toggled #sidebar-wrapper {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
#page-content-wrapper {
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#wrapper.toggled #page-content-wrapper {
|
||||
position: relative;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue