Updated New Panel CSS

Adds more improvements to the css as well as the user list page.

public/css/NewAdminCSS.css

@@ -135,6 +135,24 @@ h6 {
 .NewPanel.AdminPanel .Reminder {
   color: #ff7300
 }
+.text-error {
+  display: block;
+  text-align: center;
+  color: #d6241a;
+  font-weight: 200;
+  padding: 5px;
+}
+.text-header {
+  display: block;
+  text-align: center;
+  padding: 5px 0;
+}
+.text-secondary {
+  color: #bbb;
+  display: inline-block;
+  text-align: left;
+  padding-right: 3px;;
+}
 .NewPanel.AdminPanel .Stats-Wrapper {
   text-align: center;
   padding: 4px;
@@ -155,7 +173,7 @@ h6 {
 .NewPanel .SearchCloseBtn{
   color: #af1400;
   left: auto;
-  margin-left: -92px;
+  margin-left: -105px;
   margin-top: 1px;
   position: absolute;
   font-size: 16px;
@@ -169,7 +187,7 @@ h6 {
 .NewPanel.AdminPanel #SearchInput:focus, .AdminPanel #SearchInput:active {
   border-color: #0099ff;
 }
-#SearchInput, .bluebutton {
+#SearchInput, .btn-neutral {
   margin: 0 5px;
 }
 .NewPanel.AdminPanel #SearchInput:focus-visible {
@@ -200,7 +218,35 @@ h6 {
 }
 .NewPanel.AdminPanel .SearchContainer {
   width: 25%;
+  height: auto;
   background-color: #555;
+  border-radius: 5px;
+  margin-top: 37px;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  flex-direction: column;
+}
+.NewPanel .SearchContainer .Thumbnail {
+  height: 64px;
+  width: 64px;
+  margin-top: -37px;
+  background-color: #555;
+  border: 5px solid #111;
+  border-radius: 100%;
+}
+.NewPanel .SearchContainer .UserThumbnail {
+  background-image: url(/img/defaultrender.png);
+  background-size: contain;
+  width: 100%;
+  height: 100%;
+}
+.NewPanel .SearchContainer .UserDetails {
+  width: 95%;
+  padding: 5px;
+}
+.NewPanel .SearchContainer .SearchBox {
+  width: 100%;
 }
 .NewPanel .AuthenticatedUserNameWrapper {
   top: 10px;
@@ -218,13 +264,23 @@ h6 {
   -ms-user-select: none;
   user-select: none;
 }
-.NewPanel .AuthenticatedUserNameWrapper .AuthenticatedUserName {
+.NewPanel .AuthenticatedUserName {
-  color: #00c3ff;
+  color: #009dff;
+  transition: .25s all ease-in-out;
 }
-.NewPanel .AuthenticatedUserNameWrapper .AuthenticatedUserName:hover {
+.NewPanel .AdminHeader .HomeBtn {
-  text-decoration: underline;
+  color: #009dff;
+  cursor: default;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  display: flex;
+  flex-direction: row-reverse;
 }
-.NewPanel .Backbtn {
+.NewPanel .HomeBtn {
   top: 10px;
   left: 10px;
   background: none;
@@ -235,10 +291,58 @@ h6 {
   font-weight: 100;
   display: inline-block;
   position: absolute;
-  color: #00c3ff;
 }
-.NewPanel .Backbtn:hover {
+.NewPanel .BackArrow {
-  text-decoration: underline;
+  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;
+  line-height: 1.1rem;
+  margin-right: 2px;
+}
+.NewPanel .Backbtn {
+  color: inherit;
+  cursor: pointer;
+  transition: .25s all ease-in-out;
+  -webkit-touch-callout: text;
+  -webkit-user-select: text;
+  -khtml-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}
+.NewPanel .AuthenticatedUserName:hover, .NewPanel .Backbtn:hover, .NewPanel .Backbtn:hover + .BackArrow {
+  color: #2fcfff;
+  transition: .25s all ease-in-out;
+}
+.NewPanel .SearchContainer .Thumbnail a {
+  width: 12px;
+  height: 12px;
+  display: block;
+  float: right;
+  top: -6px;
+  position: relative;
+  border-radius: 50%;
+}
+.NewPanel .website {
+  background: linear-gradient(0deg, #0087e0 0%, #005085 49%,#005a85 50%, #0099ff 95%, #fff 100%);
+  width: 12px;
+  height: 12px;
+  display: block;
+  border-radius: 50%;
+  margin: -5px;
+}
+.NewPanel .offline {
+  background: linear-gradient(0deg, #a3a3a3 0%, #7a7a7a 49%, #797979 50%, #c9c9c9 95%, #fff 100%);
+  width: 12px;
+  height: 12px;
+  display: block;
+  border-radius: 50%;
+  margin: -5px;
 }
 
 @media (max-width:1000px) {

public/css/app.css

@@ -638,7 +638,7 @@ body {
   bottom: 0;
 }
 
-/*Button gradients by TersisWilvin*/
+/*Legacy Button gradients by TersisWilvin*/
 
 .tab {
   background: rgb(255, 255, 255);
@@ -732,6 +732,99 @@ button:hover.greenbutton {
   background: linear-gradient(0deg, #3fc679 0%, #15933f 49%, #3cc175 50%, #46dc86 95%, #53ff9d 100%);
 }
 
+/*-------------*/
+
+.btn-large, .btn-medium, .btn-small {
+  margin: 0px;
+  display: inline-block;
+  zoom: 1;
+  text-align: center;
+  font-weight: normal;
+  text-decoration: none;
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
+  *display: inline;
+  *vertical-align: top;
+}
+.btn-small {
+  padding: 1px 7px 0px 7px;
+  height: 20px;
+  min-width: 40px;
+  font-size: 14px;
+  line-height: 18px;
+  background-position: left -160px;
+  border-radius: 0;
+}
+.btn-small:hover {
+  background-position: left -181px;
+}
+.btn-medium {
+  padding: 1px 13px 3px 13px;
+  height: 28px;
+  min-width: 62px;
+  font-size: 20px;
+  background-position: left -96px;
+  border-radius: 0;
+}
+.btn-medium:hover {
+  background-position: left -128px;
+}
+.btn-large {
+  padding: 9px 13px 0px 13px;
+  height: 39px;
+  min-width: 70px;
+  font-size: 23px;
+  line-height: 27px;
+  background-position: left 0px;
+  border-radius: 0;
+}
+.btn-large:hover {
+  background-position: left -48px;
+}
+.btn-disabled-primary, .btn-disabled-primary:hover, .btn-disabled-neutral, .btn-disabled-neutral:hover, .btn-disabled-negative, .btn-disabled-negative:hover {
+  cursor: default;
+  background-position: left -202px;
+}
+
+.btn-primary, .btn-primary:link, .btn-primary:active, .btn-primary:visited {
+  border-color: #007001;
+  background-color: #007001;
+  background-image: url(/images/Buttons/StyleGuide/bg-btn-green.png);
+  color: white;
+}
+.btn-disabled-primary, .btn-disabled-primary:link, .btn-disabled-primary:active, .btn-disabled-primary:visited {
+  background-color: #99c699;
+  background-image: url(/images/Buttons/StyleGuide/bg-btn-green.png);
+  border-color: #99c699;
+  color: white;
+}
+
+.btn-neutral, .btn-neutral:link, .btn-neutral:active, .btn-neutral:visited {
+  border-color: #0852b7;
+  background-color: #0852b7;
+  background-image: url(/images/Buttons/StyleGuide/bg-btn-blue.png);
+  color: white;
+}
+.btn-disabled-neutral, .btn-disabled-neutral:link, .btn-disabled-neutral:active, .btn-disabled-neutral:visited {
+  background-color: #9cbae2;
+  background-image: url(/images/Buttons/StyleGuide/bg-btn-blue.png);
+  border-color: #9cbae2;
+  color: white;
+}
+
+.btn-negative, .btn-negative:link, .btn-negative:active, .btn-negative:visited {
+  border-color: #565656;
+  background-color: #565656;
+  background-image: url(/images/Buttons/StyleGuide/bg-btn-gray.png);
+  color: white;
+}
+.btn-disabled-negative, .btn-disabled-negative:link, .btn-disabled-negative:active, .btn-disabled-negative:visited {
+  background-color: #bbbcbb;
+  background-image: url(/images/Buttons/StyleGuide/bg-btn-gray.png);
+  border-color: #bbbcbb;
+  color: white;
+}
 
 #footer_signup {
   text-align: center;

resources/views/admin/users.blade.php

@@ -20,18 +20,128 @@
 <div class="Userlist">
 <form method="GET" action="{{ route('admin_users') }}">
 <div>
-<input type="text" id="SearchInput" name="Searchbtn" placeholder="Search" value="{{ request()->q }}">
+<input type="text" id="SearchInput" name="q" placeholder="Search" value="{{ request()->q }}">
-@if (request()->query('Searchbtn'))
+@if (request()->query('q'))
 <a href="{{ route('admin_users') }}" class="SearchCloseBtn">X</a>
 @endif
-<button class="bluebutton" name="searchBy" value="name">Search by Username</button><button class="bluebutton" name="searchBy" value="id">Search by ID</button></div>
+<button class="btn-neutral btn-small" name="searchBy" value="name">Search by Username</button><button class="btn-neutral btn-small" name="searchBy" value="id">Search by ID</button></div>
 </form>
 @foreach ($users as $user)
 <div class="SearchContainer">
+    <div class="Thumbnail">
+        <div class="UserThumbnail">
+        </div>
+        <a>
+        @if (Cache::has('is_online_' . $user->id))
+            <span class="website">
+            </span>
+        @else
+            <span class="offline">
+            </span>
+        @endif
+        </a>
+    </div>
+    <div class="UserDetails">
+        <div class="text-header">
+            User Details
+        </div>
+        <div class="Row">
+            <div class="text-secondary">
+                Username:
+            </div>
+            <a href="{{ route('profile', $user->id) }}" class="AuthenticatedUserName">
+                {{ $user->name }}
+            </a>
+        </div>
+        <div class="Row">
+            <div class="text-secondary">
+                ID:
+            </div>
+            <a class="text-secondary">
+                {{ $user->id }}
+            </a>
+        </div>
+        <div class="Row">
+            <div class="text-secondary">
+                Email:
+            </div>
+            @if ($user->admin)
+                <a class="text-secondary">[Redacted]</a>
+            @else
+                <a class="text-secondary">{{ $user->email }}</a>
+            @endif
+        </div>
+        <div class="Row">
+            <div class="text-secondary">
+                DOB:
+            </div>
+            <a class="text-secondary">
+                @if ($user->admin)
+                    [Redacted]
+                @else
+                    {{ Carbon\Carbon::parse($user->dob)->format('d/m/Y') }}
+                @endif
+            </a>
+        </div>
+        <div class="Row">
+            <div class="text-secondary">
+                Feeds Status :
+            </div>
+            <a class="text-secondary">
+                @if (!request()->has('q'))
+                    @if (!empty($user->feedposts->last()->status))
+                        "{{ $user->feedposts->last()->status }}"
+                    @else
+                        "I'm new to ARCHBLOX!"
+                    @endif
+                    @else
+                    @if (!empty(App\Models\FeedPost::where('user_id', $user->id)->first()->status))
+                        "{{ App\Models\FeedPost::where('user_id', $user->id)->orderBy('id', 'desc')->first()->status }}"
+                    @else
+                        "I'm new to ARCHBLOX!"
+                    @endif
+                    @endif
+            </a>
+        </div>
+        <div class="Row">
+            <div class="text-secondary">
+                Invited By
+            </div>
+            <a href="{{ route('profile', App\Models\User::where('id', $user->invited_by)->first()->id) }}" class="AuthenticatedUserName">
+                {{ App\Models\User::where('id', $user->invited_by)->first()->name }}
+            </a>
+        </div>
+        <div class="Row">
+            <div class="text-secondary">
+                Type:
+            </div>
+            <a class="text-secondary">
+                @if ($user->admin)
+                    Admin
+                @else
+                    Member
+                @endif
+            </a>
+        </div>
+        <div class="Row">
+            <div class="text-secondary">
+                Moderation Status:
+            </div>
+            <a class="text-secondary">
+                Normal
+            </a>
+        </div>
+    </div>
 </div>
 @endforeach
+@if ($users->isEmpty())
+<span class="text-error">
+    Unable to find user, please check if you entered the correct information.
+</span>
+@endif
 </div>
 </div>
+{{ $users->appends($_GET)->links() }}
 @endsection
 @section('content')
     <div id="UserList">

resources/views/layouts/admin.blade.php

@@ -34,9 +34,10 @@
             <div class="AuthenticatedUserNameWrapper">
             Logged in as <a class="AuthenticatedUserName" href="@guest {{ route('login') }} @else {{ route('profile', Auth::id()) }} @endguest">{{ Auth::user()->name }}</a>
             </div>
-            <a href="{{ route('home') }}" class="Backbtn">
+            <div class="HomeBtn">
-                ← Main Site
+            <a href="{{ route('home') }}" class="Backbtn">Main Site</a>
-            </a>
+            <span class="BackArrow">←</span>
+            </div>
         </div>
         <div class="AdminSubHeader">
             <ul>