Updated New Panel CSS
Adds more improvements to the css as well as the user list page.
This commit is contained in:
tersiswilvin
parent
053b83cafd
commit
3059df47e3
|
|
@ -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 {
|
||||
color: #00c3ff;
|
||||
.NewPanel .AuthenticatedUserName {
|
||||
color: #009dff;
|
||||
transition: .25s all ease-in-out;
|
||||
}
|
||||
.NewPanel .AuthenticatedUserNameWrapper .AuthenticatedUserName:hover {
|
||||
text-decoration: underline;
|
||||
.NewPanel .AdminHeader .HomeBtn {
|
||||
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 {
|
||||
text-decoration: underline;
|
||||
.NewPanel .BackArrow {
|
||||
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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 }}">
|
||||
@if (request()->query('Searchbtn'))
|
||||
<input type="text" id="SearchInput" name="q" placeholder="Search" value="{{ request()->q }}">
|
||||
@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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
← Main Site
|
||||
</a>
|
||||
<div class="HomeBtn">
|
||||
<a href="{{ route('home') }}" class="Backbtn">Main Site</a>
|
||||
<span class="BackArrow">←</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="AdminSubHeader">
|
||||
<ul>
|
||||
|
|
|
|||
Loading…
Reference in New Issue