Updated Admin Panel

Made some small adjustments to improve the experience.

public/css/NewAdminCSS.css

@@ -74,6 +74,15 @@ h6 {
   font-weight: 200;
 }
 
+br {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
 .NewPanel #MasterContainer.AdminPanel {
   background-color: #111;
 }
@@ -115,14 +124,18 @@ h6 {
 .NewPanel .AdminSubHeader ul {
   padding: 0;
   margin: auto auto;
-  width: 970px;
+  width: 100%;
   height: 25px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  justify-content: center;
 }
 .NewPanel .AdminSubHeader li {
-  width: 33.334%;
+  width: 25%;
   text-align: center;
   list-style: none;
-  float: left;
   padding: 5px 0;
   color: #fff;
 }
@@ -133,18 +146,60 @@ h6 {
   cursor: pointer;
   transition: .1s all linear;
 }
-.NewPanel .AdminSubHeader li:hover a {
-  color: #ccc
-}
-.NewPanel .AdminSubHeader li a.Active, .NewPanel .AdminSubHeader li a.Active:active {
-  box-shadow: 0 2px 0 0 #00b7ff;
-}
 .NewPanel .AdminSubHeader li a:hover, .NewPanel .AdminSubHeader li a:active {
   color: #fff;
   box-shadow: 0 2px 0 0 #fff;
   transition: .1s all linear;
 }
+.NewPanel .AdminSubHeader li a.active {
+  box-shadow: 0 2px 0 0 #00b7ff;
+}
+.NewPanel .AdminSubHeader li a:focus {
+  color: #dbdbdb;
+  box-shadow: 0 2px 0 0 #dbdbdb;
+}
+.NewPanel .AdminSubHeader li a.active:focus {
+  box-shadow: 0 2px 0 0 #11749b;
+}
+.NewPanel .AdminPanel .logoutbtn {
+  color: #00b7ff;
+  cursor: default;
+  top: 10px;
+  left: 10px;
+  font-size: 16px;
+  font-weight: 100;
+  position: absolute;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  flex-direction: row-reverse;
+}
+.NewPanel .AdminPanel .logoutarrow {
+  height: 16px;
+  width: 16px;
+}
+.NewPanel .AdminPanel .logoutarrow:before {
+  font-family: "copenhagen-icons";
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1.1em;
+  -webkit-font-smoothing: antialiased;
+  transform: rotate(180deg);
+  position: absolute;
+}
+.NewPanel .AdminPanel .logoutarrow:before {
+  content: '\2794';
+}
 .NewPanel .AdminHeader .Slogan {
+  color: #bbb;
+  text-shadow: #11111191 2px 2px;
   font-size: 16px;
   font-weight: 100;
   display: block;
@@ -165,9 +220,14 @@ h6 {
   background-repeat: no-repeat;
   background-size: contain;
   background-position: 0;
+  opacity: .75;
+  transition: .1s opacity linear;
   display: block;
   margin: auto;
 }
+.NewPanel .AdminHeader .SiteBrand:hover {
+  opacity: 1;
+}
 .NewPanel .AdminPanel #Body {
   background-color: #111;
 }
@@ -217,7 +277,7 @@ h6 {
 .NewPanel .AdminPanel form div {
   text-align: center;
 }
-.NewPanel .SearchCloseBtn{
+.NewPanel .SearchCloseBtn {
   color: #af1400;
   transition: .1s linear;
   left: auto;
@@ -230,9 +290,9 @@ h6 {
   color: #d41900;
 }
 .NewPanel .AdminPanel #SearchInput {
-  border: 1px solid #757575;
+  border: 1px solid #555;
   border-radius: 3px;
-  color: #b8b8b8;
+  color: #bbb;
   background-color: #000;
 }
 .NewPanel .AdminPanel #SearchInput:focus, .AdminPanel #SearchInput:active {
@@ -241,8 +301,8 @@ h6 {
 .NewPanel #SearchInput, .NewPanel .btn-neutral {
   margin: 0 5px;
 }
-.NewPanel .AdminPanel #SearchInput:focus-visible {
+.NewPanel :focus-visible {
-  outline: none;
+  outline: none !important;
 }
 .NewPanel .AdminPanel .Stats {
   font-size: 16px;
@@ -332,33 +392,18 @@ h6 {
   -ms-user-select: none;
   user-select: none;
 }
-.NewPanel .AuthenticatedUserName {
+.NewPanel .AuthenticatedUserName, .NewPanel .logoutarrow {
   color: #00b7ff;
   transition: .25s all ease-in-out;
   display: inline-block;
 }
-.NewPanel .AdminHeader .HomeBtn {
+.NewPanel .AuthenticatedUserName:hover, .NewPanel .logout:hover + .logoutarrow {
-  color: #00b7ff;
+  color: #7ddaff;
-  cursor: default;
+  transition: .25s all ease-in-out;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  flex-direction: row-reverse;
 }
 .NewPanel .UserDetails .Row {
   overflow-wrap: anywhere;
 }
-.NewPanel .AuthenticatedUserName:hover {
-  color: #7ddaff;
-  transition: .25s all ease-in-out;
-}
 .NewPanel .SearchContainer .Thumbnail a {
   width: 12px;
   height: 12px;
@@ -388,6 +433,9 @@ h6 {
   border-radius: 50%;
   margin: -8px;
 }
+.NewPanel .hidden-info{
+  font-style: italic;
+}
 /*Heavily based off of the roblox developer tree list (because it looks cool)*/
 .NewPanel .SearchTree {
   width: 260px;
@@ -501,31 +549,18 @@ h6 {
   border-top: 1px dashed #555;
 }
 
-@media (max-width:1000px) {
-  .NewPanel .AdminSubHeader ul {
-    width: 750px;
-  }
-}
 @media (max-width:990px) {
   .NewPanel .AdminPanel #Body, .NewPanel .AdminPanel #BodyWrapper, .NewPanel .AdminPanel #MasterContainer {
     width: 100% !important; /*!important since late 2012 roblox uses element.style CRINGE!*/
     padding: 0;
   }
 }
-@media (max-width:750px) {
-  .NewPanel .AdminSubHeader ul {
-    width: 400px;
-  }
-}
 @media (max-width: 600px) {
   .NewPanel .AuthenticatedUserNameWrapper {
     font-size: 10px;
   }
 }
 @media (max-width:500px) {
-  .NewPanel .AdminSubHeader ul {
-    width: 300px;
-  }
   .NewPanel .AuthenticatedUserNameWrapper {
     display: none;
   }

resources/views/admin/users.blade.php

@@ -32,10 +32,10 @@
         </div>
         <a>
         @if (Cache::has('is_online_' . $user->id))
-            <span class="website">
+            <span class="website" title="Online">
             </span>
         @else
-            <span class="offline">
+            <span class="offline" title="Offline">
             </span>
         @endif
         </a>
@@ -61,108 +61,124 @@
             <div class="text-secondary">
                 Previus Username:
             </div>
-            <a class="text-secondary">
+            <div class="text-secondary">
                 {{ $user->settings->old_name }}
-            </a>
+            </div>
         </div>
         @endif
         <div class="Row">
             <div class="text-secondary">
                 ID:
             </div>
-            <a class="text-secondary">
+            <div class="text-secondary">
                 {{ $user->id }}
-            </a>
+            </div>
         </div>
         <div class="Row">
             <div class="text-secondary">
                 Email:
             </div>
             @if ($user->admin)
-                <a class="text-secondary">[Redacted]</a>
+                <div class="text-secondary hidden-info">[Hidden]</div>
             @else
-                <a class="text-secondary">{{ $user->email }}</a>
+                <div class="text-secondary">{{ $user->email }}</div>
             @endif
         </div>
         <div class="Row">
             <div class="text-secondary">
                 DOB:
             </div>
-            <a class="text-secondary">
+            @if ($user->admin)
-                @if ($user->admin)
+            <div class="text-secondary hidden-info">[Hidden]</div>
-                    [Redacted]
+            @else
-                @else
+            @guest
-                @guest
+            <div class="text-secondary">{{ Carbon\Carbon::parse($user->dob)->format('d/m/Y') }}</div>
-                {{ Carbon\Carbon::parse($user->dob)->format('d/m/Y') }}
+            @else
-                @else
+            <div class="text-secondary">{{ Carbon\Carbon::parse($user->dob)->format(Auth::user()->settings->date_preference) }}</div>
-                {{ Carbon\Carbon::parse($user->dob)->format(Auth::user()->settings->date_preference) }}
+            @endguest
-                @endguest
+            @endif
-                @endif
-            </a>
         </div>
         <div class="Row">
             <div class="text-secondary">
-                Feed Status :
+                Feed Status:
             </div>
-            <a class="text-secondary">
+            <div class="text-secondary">
                 @if (!empty($user->feedposts->last()->status))
                     "{{ $user->feedposts->last()->status }}"
                 @else
                     "I'm new to ARCHBLOX!"
                 @endif
-            </a>
+            </div>
         </div>
         <div class="Row">
             <div class="text-secondary">
                 Bio :
             </div>
-            <a class="text-secondary">
+            <div class="text-secondary">
                 {!! nl2br(e($user->blurb)) !!}
-            </a>
+            </div>
         </div>
         <div class="Row">
             <div class="text-secondary">
-                Total Friends :
+                Total Friends:
             </div>
-            <a class="text-secondary">
+            <div class="text-secondary">
                 {{ $user->getFriendsCount() }}
-            </a>
+            </div>
         </div>
         <div class="Row">
             <div class="text-secondary">
-                Mutual Friends :
+                Mutual Friends:
             </div>
-            <a class="text-secondary">
+            <div class="text-secondary">
                 {{ Auth::user()->getMutualFriendsCount($user) }}
-            </a>
+            </div>
         </div>
         <div class="Row">
             <div class="text-secondary">
-                Total Badges :
+                Friend Requests:
             </div>
-            <a class="text-secondary">
+            <div class="text-secondary">
+                {{ count(Auth::user()->getFriendRequests()) }}
+            </div>
+        </div>
+        <div class="Row">
+            <div class="text-secondary">
+                Total Badges:
+            </div>
+            <div class="text-secondary">
                 {{ sizeof($user->badges) }}
-            </a>
+            </div>
         </div>
         <div class="Row hidden">
             <div class="text-secondary">
-                Place Visits :
+                Place Visits:
             </div>
-            <a class="text-secondary">
+            <div class="text-secondary">
                 TODO
-            </a>
+            </div>
         </div>
         <div class="Row">
             <div class="text-secondary">
-                Join Date :
+                Join Date:
             </div>
-            <a class="text-secondary">
+            <div class="text-secondary">
                 @guest
                     {{ $user->created_at->format('d/m/Y') }}
                 @else
                     {{ $user->created_at->format(Auth::user()->settings->date_preference) }}
                 @endguest
-            </a>
+            </div>
+        </div>
+        <div class="Row">
+            @unless (Cache::has('is_online_' . $user->id))
+            <div class="text-secondary">
+                Last Seen:
+            </div>
+            <div class="text-secondary">
+                {{ Carbon\Carbon::parse($user->last_seen)->diffForHumans() }}
+            </div>
+            @endunless
         </div>
         <div class="Row">
             <div class="text-secondary">
@@ -180,21 +196,21 @@
             <div class="text-secondary">
                 Type:
             </div>
-            <a class="text-secondary">
+            <div class="text-secondary">
                 @if ($user->admin)
                     Admin
                 @else
                     Member
                 @endif
-            </a>
+            </div>
         </div>
         <div class="Row">
             <div class="text-secondary">
                 Moderation Status:
             </div>
-            <a class="text-secondary">
+            <div class="text-secondary">
                 Normal
-            </a>
+            </div>
         </div>
     </div>
 </div>

resources/views/layouts/admin.blade.php

@@ -23,17 +23,25 @@
 <body class="NewPanel">
     @yield('alert')
 
-    <div id="MasterContainer" class="AdminPanel" style="width: 100%;">
+    <div id="MasterContainer" class="AdminPanel EnableLogoutBtn" style="width: 100%;">
     <div id="AdminWrapper" class="Navigation">
         <div class="AdminHeader">
-            <span><a href="{{ route('home') }}" title="Main Site" class="SiteBrand"></a></span>
+            <span><a href="{{ route('home') }}" title="ARCHBLOX Home" class="SiteBrand"></a></span>
             <a class="Slogan">
                 Admin Panel
             </a>
             <div class="AuthenticatedUserNameWrapper">
             Logged in as <a class="AuthenticatedUserName" href="@guest {{ route('login') }} @else {{ route('profile', Auth::id()) }} @endguest">{{ Auth::user()->name }}</a>
             </div>
+            <div class="logoutbtn">
+            <a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="logout AuthenticatedUserName">Logout</a>
+            <span class="logoutarrow"><span>
+            </div>
+        </a>
         </div>
+        <form id="logout-form" class="hidden" action="{{ route('logout') }}" method="POST">
+            @csrf
+        </form>
         <div class="AdminSubHeader">
             <ul>
             <li>