Admin Tree Resign

Replaces the admin tree list with an improved version.

public/css/NewAdminCSS.css

@@ -370,41 +370,91 @@ h6 {
 .NewPanel.AdminPanel .flex {
   display: table!important;
 }
-.NewPanel .InvitationUserName {
+/*Heavily based off of the roblox developer tree list (because it looks cool)*/
-  text-align: center;
+.NewPanel .SearchTree {
-  margin-top: 20px;
+  width: 260px;
-  font-size: 20px;
+  height: 100%;
-  font-weight: 600;
+  padding: 0;
+  margin: 10px auto 0;
+  min-height: 550px;
+}
+.NewPanel .SearchTree .Menu {
+  list-style-type: none;
+  position: relative;
+  top: 0;
+  bottom: 0;
+  line-height: 20px;
+  min-height: 550px;
+}
+.NewPanel .SearchTree a {
+  color: #9b9b9b;
+  transition: .15s all ease-in-out;
+  font-size: 14px;
+  margin: 0 0 0 38px;
+  padding-right: 5px;
+  position: relative;
+  top: 18px;
+  display: inline-block;
+}
+.NewPanel .SearchTree a:hover {
+  color: #00b7ff;
+}
+.NewPanel .SearchTree a:after {
+  content: '';
+  border: 1px solid #555;
+  border-radius: 100%;
+  width: 2px;
+  height: 2px;
+  display: inline-block;
+  left: -10px;
+  position: absolute;
+  top: 9px;
+}
+.NewPanel .SearchTree a span {
   display: block;
 }
-.NewPanel .InvitationSubName {
+.NewPanel .SearchTree .forwardArrow {
-  text-align: center;
+  transform: rotate(180deg);
-  font-size: 18px;
+  position: relative;
-  font-weight: 100;
-}
-.NewPanel .InvitationSubName .InvitationText {
   display: inline-block;
-  font-weight: 100;
+  margin: 0;
-  cursor: default;
+  padding: 0;
-  -webkit-touch-callout: none;
+  top: 21px;
-  -webkit-user-select: none;
+  line-height: 14px;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
 }
-.NewPanel .InvitationSubText {
+.NewPanel .SearchTree .forwardArrow::after {
-  text-align: center;
+  display: none;
-  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;
 }
-.NewPanel .InvitationSubName li {
+.NewPanel .TreeList {
-  list-style: none;
+  border-left: 1px dashed #555;
+  margin: 13px 0 0 30px;
+  padding: 0;
+}
+.NewPanel #DropDown.TreeList {
+  min-height: 550px;
+}
+.NewPanel .SearchTree li ul li {
+  list-style-type: none;
+  position: relative;
+  top: 3px;
+  bottom: 0;
+  padding-bottom: 16px;
+}
+.NewPanel .SearchTree li ul li:last-child {
+  padding-bottom: 11px;
+}
+.NewPanel .SearchTree li ul li.subList {
+  padding-bottom: 0;
+}
+.NewPanel .SearchTree li ul li:before {
+  content: '';
+  display: inline-block;
+  width: 25px;
+  height: 0;
+  position: absolute;
+  left: 0em;
+  top: 28px;
+  border-top: 1px dashed #555;
 }
 
 @media (max-width:1000px) {

resources/views/admin/tree.blade.php

@@ -37,17 +37,32 @@
                 </div>
             </form>
             @if ($user)
-            <a class="InvitationUserName AuthenticatedUserName" href="{{ route('profile', $user->id) }}">{{ $user->name }}</a>
+            <ul class="SearchTree">
-            <div class="InvitationSubName">
+                <li class="Menu">
-            <h4 class="InvitationText">Invited By </h4>
+                    <a title="{{ $invited_by }}'s Invite Tree" href="/iphone/tree?q={{ App\Models\User::where('name', $invited_by)->first()->id }}&searchBy=id">
-            <a href="{{ route('profile', App\Models\User::where('name', $invited_by)->first()->id) }}" class="AuthenticatedUserName">{{ $invited_by }}</a>
+                        <span>{{ $invited_by }}</span>
-            <h5 class="InvitationSubText">{{ $user->name }} Invited</h5>
+                    </a>
-            @foreach ($children as $child)
+                    <a href="{{ route('profile', App\Models\User::where('name', $invited_by)->first()->id) }}" title="{{ $invited_by }}'s Profile" class="forwardArrow">←</a>
-            <li>
+                    <ul id="DropDown" class="TreeList">
-            <a href="{{ route('profile', $child->id) }}" target="_blank" class="AuthenticatedUserName">{{ $child->name }}</a>
+                        <li class="subList">
-            </li>
+                            <a href="/iphone/tree?q={{ $user->id }}&searchBy=id" title="{{ $user->name }}'s Invite Tree">
-            @endforeach
+                                <span>{{ $user->name }}</span>
-            </div>
+                            </a>
+                            <a href="{{ route('profile', $user->id) }}" title="{{ $user->name }}'s Profile" class="forwardArrow">←</a>
+                            @foreach ($children as $child)
+                            <ul class="TreeList">
+                                <li>
+                                    <a href="/iphone/tree?q={{ $child->id }}&searchBy=id" title="{{ $child->name }}'s Invite Tree">
+                                        <span>{{ $child->name }}</span>
+                                    </a>
+                                    <a href="{{ route('profile', $child->id) }}" title="{{ $child->name }}'s Profile" class="forwardArrow">←</a>
+                                </li>
+                            </ul>
+                            @endforeach
+                        </li>
+                    </ul>
+                </li>
+            </ul>
             @endif
         </div>
     </div>