User management styling

PlexRequests.UI/Content/Themes/plex.css

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

PlexRequests.UI/Content/Themes/plex.min.css

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

PlexRequests.UI/Content/Themes/plex.scss

@@ -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;
@@ -222,3 +224,7 @@ 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;
+}

PlexRequests.UI/Content/app/app.js

@@ -1,3 +1,4 @@
 (function() {
     module = angular.module('PlexRequests', []);
+    module.constant("moment", moment);
 }());

PlexRequests.UI/Content/app/userManagement/userManagementController.js

@@ -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]);
 }());

PlexRequests.UI/Content/base.css

@@ -344,11 +344,95 @@ label {
 .img-circle {
   border-radius: 50%; }
 
-.user-management-menu {
+#wrapper {
-  border-style: ridge;
+  padding-left: 0;
-  height: 100%;
+  -webkit-transition: all 0.5s ease;
-  left: 60%;
+  -moz-transition: all 0.5s ease;
-  position: absolute;
+  -o-transition: all 0.5s ease;
-  width: 40%;
+  transition: all 0.5s ease; }
-  top: 7%; }
+
+#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; } }
 

PlexRequests.UI/Content/base.scss

@@ -434,11 +434,121 @@ $border-radius: 10px;
     border-radius: 50%;
 }
 
-.user-management-menu {
+#wrapper {
-    border-style: ridge;
+    padding-left: 0;
-    height: 100%;
+    -webkit-transition: all 0.5s ease;
-    left: 60%;
+    -moz-transition: all 0.5s ease;
-    position: absolute;
+    -o-transition: all 0.5s ease;
-    width: 40%;
+    transition: all 0.5s ease;
-    top: 7%;
+}
+
+#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;
+    }
 }

PlexRequests.UI/Helpers/BaseUrlHelper.cs

@@ -218,12 +218,14 @@ namespace PlexRequests.UI.Helpers
         {
             var assetLocation = GetBaseUrl();
             var content = GetContentUrl(assetLocation);
+            var sb = new StringBuilder();
 
-            var controller = $"<script src=\"{content}/Content/app/userManagement/userManagementController.js?v={Assembly}\" type=\"text/javascript\"></script>";
+            sb.Append($"<script src=\"{content}/Content/app/userManagement/userManagementController.js?v={Assembly}\" type=\"text/javascript\"></script>");
-            controller += $"<script src=\"{content}/Content/app/userManagement/userManagementService.js?v={Assembly}\" type=\"text/javascript\"></script>";
+            sb.Append($"<script src=\"{content}/Content/app/userManagement/userManagementService.js?v={Assembly}\" type=\"text/javascript\"></script>");
+            sb.Append($"<script src=\"{content}/Content/moment.min.js\"></script>");
 
 
-            return helper.Raw(controller);
+            return helper.Raw(sb.ToString());
         }
 
 

PlexRequests.UI/Views/UserManagement/Index.cshtml

@@ -2,12 +2,62 @@
 @inherits PlexRequests.UI.Helpers.AngularViewBase
 
 @Html.LoadUserManagementAssets()
-<div ng-controller="userManagementController" ng-init="init()">
+<div id="wrapper" class="toggled" ng-controller="userManagementController" ng-init="init()" ng-cloak>
+    <!--Sidebar-->
+    <div id="sidebar-wrapper" class="shadow">
+        <br />
+        <br />
+        <img ng-show="selectedUser.plexInfo.thumb" class="col-md-pull-1 img-circle" style="position: absolute" ng-src="{{selectedUser.plexInfo.thumb}}" />
+        <div hidden="hidden" ng-bind="selectedUser.id"></div>
+        <div>
+            <strong>Username: </strong><span ng-bind="selectedUser.username"></span>
+        </div>
+        <div ng-show="selectedUser.emailAddress">
+            <strong>Email Address: </strong><span ng-bind="selectedUser.emailAddress"></span>
+        </div>
+        <div>
+            <strong>Permissions: </strong><span ng-bind="selectedUser.claims"></span>
+        </div>
+        <div>
+            <strong>User Type: </strong><span ng-bind="selectedUser.type === 1 ? 'Local User' : 'Plex User'"></span>
+        </div>
+        <br />
+        <br />
+        <div ng-show="selectedUser.type === 1">
+            <!--Edit-->
 
+            <strong>Modify Roles:</strong>
+            <!--Load all claims-->
+            <div class="checkbox" ng-repeat="claim in selectedUser.claimsItem">
+                <input id="claimCheckboxEdit_{{$id}}" class="checkbox-custom" name="selectedClaims[]" ng-checked="claim.selected" ng-model="claim.selected" type="checkbox" value="claim" />
+                <label for="claimCheckboxEdit_{{$id}}">{{claim.name}}</label>
+            </div>
+
+            <strong>Email Address</strong>
+            <div class="form-group">
+                <input id="emailAddress" type="email" ng-model="selectedUser.emailAddress" class="form-control form-control-custom" />
+            </div>
+
+            <strong>Alias</strong>
+            <div class="form-group">
+                <input id="alias" type="text" ng-model="selectedUser.alias" class="form-control form-control-custom" />
+            </div>
+
+
+            <button ng-click="updateUser()" class="btn btn-primary-outline">Update</button>
+            <button ng-click="deleteUser()" class="btn btn-danger-outline">Delete</button>
+        </div>
+
+    </div>
+    <!--SideBar End-->
+
+    <div>
+        <div class="container-fluid">
+            <div>
                 <br />
                 <br />
                 <br />
-    <div class="col-md-7">
+                <div class="col-md-12">
                     <br>
                     <br>
                     <div ng-show="error.error" ng-bind="error.errorMessage"></div>
@@ -105,63 +155,16 @@
                                 <td>
                                     {{u.type === 1 ? 'Local User' : 'Plex User'}}
                                 </td>
+                                <td ng-bind="u.lastLoggedIn === minDate ? 'Never' : formatDate(u.lastLoggedIn)"></td>
                                 <td>
-                        {{u.lastLoggedIn}}
+                                    <a href="#" ng-click="selectUser(u.id)" class="btn btn-sm btn-info-outline detailsBtn">Details/Edit</a>
-                    </td>
-                    <td>
-                        <a href="#" ng-click="selectUser(u.id)" class="btn btn-sm btn-info-outline">Details/Edit</a>
                                 </td>
                             </tr>
                         </tbody>
                     </table>
                 </div>
-
-    <div class="col-md-5 col-md-push-1 user-management-menu" ng-show="selectedUser.username">
-        <br />
-        <br />
-        <img ng-show="selectedUser.plexInfo.thumb" class="col-md-pull-1 img-circle" style="position: absolute" ng-src="{{selectedUser.plexInfo.thumb}}" />
-        <div hidden="hidden" ng-bind="selectedUser.id"></div>
-        <div>
-            <strong>Username: </strong><span ng-bind="selectedUser.username"></span>
             </div>
-        <div ng-show="selectedUser.emailAddress">
-            <strong>Email Address: </strong><span ng-bind="selectedUser.emailAddress"></span>
         </div>
-        <div>
-            <strong>Permissions: </strong><span ng-bind="selectedUser.claims"></span>
     </div>
-        <div>
-            <strong>User Type: </strong><span ng-bind="selectedUser.type === 1 ? 'Local User' : 'Plex User'"></span>
-        </div>
-        <br />
-        <br />
-        <div ng-show="selectedUser.type === 1">
-            <!--Edit-->
-
-            <strong>Modify Roles:</strong>
-            <!--Load all claims-->
-            <div class="checkbox" ng-repeat="claim in selectedUser.claimsItem">
-                <input id="claimCheckboxEdit_{{$id}}" class="checkbox-custom" name="selectedClaims[]" ng-checked="claim.selected" ng-model="claim.selected" type="checkbox" value="claim" />
-                <label for="claimCheckboxEdit_{{$id}}">{{claim.name}}</label>
 </div>
 
-            <strong>Email Address</strong>
-            <div class="form-group">
-                <input id="emailAddress" type="email" ng-model="selectedUser.emailAddress" class="form-control form-control-custom" />
-            </div>
-
-            <strong>Alias</strong>
-            <div class="form-group">
-                <input id="alias" type="text" ng-model="selectedUser.alias" class="form-control form-control-custom" />
-            </div>
-
-
-            <button ng-click="updateUser()" class="btn btn-primary-outline">Update</button>
-            <button ng-click="deleteUser()" class="btn btn-danger-outline">Delete</button>
-        </div>
-
-
-    </div> <!-- End of user side menu -->
-
-
-</div>