navbar rework
This commit is contained in:
schrumpel
parent
d13eeea588
commit
2c9058dec7
|
|
@ -2691,17 +2691,62 @@ table img {
|
||||||
.navbar-nav {
|
.navbar-nav {
|
||||||
display: grid !important;
|
display: grid !important;
|
||||||
grid-template-rows: 1fr 1fr;
|
grid-template-rows: 1fr 1fr;
|
||||||
grid-template-columns: 0fr 1fr 1fr;
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
grid-gap: 0.25em;
|
grid-gap: 0.25em;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.placeholder {
|
/* Navbar Rework */
|
||||||
visibility: hidden;
|
.navbar-nav-guests {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 5px 0 5px 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-left: 0px;
|
||||||
|
align-self: center;
|
||||||
|
margin-left: .5rem;
|
||||||
|
margin-right: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-expand-lg .navbar-nav-guests {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.navbar-nav-guests li.nav-item {
|
||||||
|
margin-right: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-expand-lg .navbar-nav-guests .nav-link, .pagination > a, .pagination > span {
|
||||||
|
padding-right: .5rem;
|
||||||
|
padding-left: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
ul.navbar-nav-guests {
|
||||||
|
display: grid !important;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-gap: .25em;
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.navbar-nav-guests li.nav-item {
|
||||||
|
margin-right: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.nav-link span {
|
.nav-link.user {
|
||||||
/* This is a dirty and temporary hack to hide long usernames on mobile devices when logged in */
|
justify-content: left;
|
||||||
max-width: 10ch;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation-links-guest {
|
||||||
|
justify-content: center;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
align-content: center;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -1,83 +1,133 @@
|
||||||
<nav class="navbar navbar-expand-lg">
|
@if(session)
|
||||||
<a class="navbar-brand" href="/"><span class="f0ck" width="" height="">F0CK</span></a>
|
<nav class="navbar navbar-expand-lg">
|
||||||
<div class="navigation-links">
|
<a class="navbar-brand" href="/"><span class="f0ck" width="" height="">F0CK</span></a>
|
||||||
<ul class="navbar-nav">
|
<div class="navigation-links">
|
||||||
<li class="nav-item dropdown">
|
<ul class="navbar-nav">
|
||||||
@if(session)
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-link" href="#" content="{{ session.user }}" data-toggle="dropdown">
|
<a class="nav-link user" href="#" content="{{ session.user }}" data-toggle="dropdown">
|
||||||
<img src="@if(session.avatar)/t/{{ session.avatar }}.webp@else/s/img/ava/default.png@endif" class="avatar" /><span>{{ session.user }}</span>
|
<img src="@if(session.avatar)/t/{{ session.avatar }}.webp@else/s/img/ava/default.png@endif" class="avatar" /><span>{{ session.user }}</span>
|
||||||
</a>
|
</a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="/admin">adminpanel</a></li>
|
<li><a href="/admin">adminpanel</a></li>
|
||||||
<li><a href="/user/{{ session.user.toLowerCase() }}/f0cks">my f0cks</a></li>
|
<li><a href="/user/{{ session.user.toLowerCase() }}/f0cks">my f0cks</a></li>
|
||||||
<li><a href="/user/{{ session.user.toLowerCase() }}/favs">my favs</a></li>
|
<li><a href="/user/{{ session.user.toLowerCase() }}/favs">my favs</a></li>
|
||||||
<li><a href="/settings">settings</a></li>
|
<li><a href="/settings">settings</a></li>
|
||||||
<li><a href="/search">search</a></li>
|
<li><a href="/search">search</a></li>
|
||||||
<li><a href="/about">About</a></li>
|
<li><a href="/about">About</a></li>
|
||||||
<li><a href="/ranking">Ranking</a></li>
|
<li><a href="/ranking">Ranking</a></li>
|
||||||
<li><a href="/logout">logout</a></li>
|
<li><a href="/logout">logout</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@else
|
</li>
|
||||||
<a class="nav-link" href="/about" data-toggle="dropdown">About</a>
|
<li class="nav-item dropdown" id="themes">
|
||||||
<ul class="dropdown-menu">
|
<a class="nav-link ddcontent" href="#" content="{{ theme }}" data-toggle="dropdown">Themes</a>
|
||||||
<li><a href="/login">login</a></li>
|
<ul class="dropdown-menu">
|
||||||
</ul>
|
@each(themes as t)
|
||||||
@endif
|
<li><a href="/theme/{{ t }}">{{ t }}</a></li>
|
||||||
</li>
|
@endeach
|
||||||
<li class="nav-item dropdown" id="themes">
|
</ul>
|
||||||
<a class="nav-link ddcontent" href="#" content="{{ theme }}" data-toggle="dropdown">Themes</a>
|
</li>
|
||||||
<ul class="dropdown-menu">
|
<li class="nav-item dropdown">
|
||||||
@each(themes as t)
|
<a class="nav-link ddcontent" href="#"@if(tmp?.mime) content="{{ tmp?.mime }}" data-toggle="dropdown"@endif>Filter@if(!tmp?.mime) ▼@endif</a>
|
||||||
<li><a href="/theme/{{ t }}">{{ t }}</a></li>
|
<ul class="dropdown-menu">
|
||||||
@endeach
|
<li><a class="dropdown-item" href="/@if(tmp?.user)user/{{ tmp?.user }}/@endif">All</a></li>
|
||||||
</ul>
|
<li><a class="dropdown-item" href="/@if(tmp?.user)user/{{ tmp?.user }}/@endifaudio">Audio</a></li>
|
||||||
</li>
|
<li><a class="dropdown-item" href="/@if(tmp?.user)user/{{ tmp?.user }}/@endifvideo">Video</a></li>
|
||||||
<span class="placeholder"> </span>
|
<li><a class="dropdown-item" href="/@if(tmp?.user)user/{{ tmp?.user }}/@endifimage">Image</a></li>
|
||||||
<li class="nav-item dropdown">
|
</ul>
|
||||||
<a class="nav-link ddcontent" href="#"@if(tmp?.mime) content="{{ tmp?.mime }}" data-toggle="dropdown"@endif>Filter@if(!tmp?.mime) ▼@endif</a>
|
</li>
|
||||||
<ul class="dropdown-menu">
|
<li class="nav-item @if(session)dropdown@endif">
|
||||||
<li><a class="dropdown-item" href="/@if(tmp?.user)user/{{ tmp?.user }}/@endif">All</a></li>
|
<a class="nav-link ddcontent" href="#"@if(typeof session.mode !== "undefined") content="{{ modes[session.mode] ?? 'sfw' }}" data-toggle="dropdown"@endif>Mode</a>
|
||||||
<li><a class="dropdown-item" href="/@if(tmp?.user)user/{{ tmp?.user }}/@endifaudio">Audio</a></li>
|
<ul class="dropdown-menu">
|
||||||
<li><a class="dropdown-item" href="/@if(tmp?.user)user/{{ tmp?.user }}/@endifvideo">Video</a></li>
|
@for(let i = 0; i < modes.length; i++)
|
||||||
<li><a class="dropdown-item" href="/@if(tmp?.user)user/{{ tmp?.user }}/@endifimage">Image</a></li>
|
<li><a class="dropdown-item" href="/mode/{{ i }}">{{ modes[i] }}</a></li>
|
||||||
</ul>
|
@endfor
|
||||||
</li>
|
</ul>
|
||||||
@if(session)
|
</li>
|
||||||
<li class="nav-item @if(session)dropdown@endif">
|
<li class="nav-item">
|
||||||
<a class="nav-link ddcontent" href="#"@if(typeof session.mode !== "undefined") content="{{ modes[session.mode] ?? 'sfw' }}" data-toggle="dropdown"@endif>Mode</a>
|
<a id="random" class="nav-link" href="/random">
|
||||||
<ul class="dropdown-menu">
|
<span class="nav-link-identifier">Random</span>
|
||||||
@for(let i = 0; i < modes.length; i++)
|
</a>
|
||||||
<li><a class="dropdown-item" href="/mode/{{ i }}">{{ modes[i] }}</a></li>
|
</li>
|
||||||
@endfor
|
</ul>
|
||||||
</ul>
|
</div>
|
||||||
</li>
|
<div class="collapse navbar-collapse show" id="navbarSupportedContent">
|
||||||
@endif
|
<div class="pagination-container-fluid">
|
||||||
<li class="nav-item">
|
<div class="pagination-wrapper">
|
||||||
<a id="random" class="nav-link" href="/random">
|
@if(typeof pagination !== "undefined")
|
||||||
<span class="nav-link-identifier">Random</span>
|
<nav class="pagination">
|
||||||
</a>
|
<a href="{{ link.main }}{{ link.path }}{{ pagination.start }}" class="page-item-1 btn start@if(!pagination.prev) disabled@endif">«</a>
|
||||||
</li>
|
<a href="{{ link.main }}{{ link.path }}{{ pagination.prev }}" class="page-item-2 btn prev@if(!pagination.prev) disabled@endif">‹</a>
|
||||||
</ul>
|
@each(pagination.cheat as i)
|
||||||
</div>
|
@if(i == pagination.page)
|
||||||
<div class="collapse navbar-collapse show" id="navbarSupportedContent">
|
<span class="btn disabled">{{ i }}</span>
|
||||||
<div class="pagination-container-fluid">
|
@else
|
||||||
<div class="pagination-wrapper">
|
<a href="{{ link.main }}{{ link.path }}{{ i }}" class="pagination-int-item btn">{{ i }}</a>
|
||||||
@if(typeof pagination !== "undefined")
|
@endif
|
||||||
<nav class="pagination">
|
@endeach
|
||||||
<a href="{{ link.main }}{{ link.path }}{{ pagination.start }}" class="page-item-1 btn start@if(!pagination.prev) disabled@endif">«</a>
|
<a href="{{ link.main }}{{ link.path }}{{ pagination.next }}" class="page-item-3 btn next@if(!pagination.next) disabled@endif">›</a>
|
||||||
<a href="{{ link.main }}{{ link.path }}{{ pagination.prev }}" class="page-item-2 btn prev@if(!pagination.prev) disabled@endif">‹</a>
|
<a href="{{ link.main }}{{ link.path }}{{ pagination.end }}" class="page-item-4 btn start@if(!pagination.next) disabled@endif">»</a>
|
||||||
@each(pagination.cheat as i)
|
</nav>
|
||||||
@if(i == pagination.page)
|
@endif
|
||||||
<span class="btn disabled">{{ i }}</span>
|
</div>
|
||||||
@else
|
</div>
|
||||||
<a href="{{ link.main }}{{ link.path }}{{ i }}" class="pagination-int-item btn">{{ i }}</a>
|
</div>
|
||||||
@endif
|
</nav>
|
||||||
@endeach
|
@else
|
||||||
<a href="{{ link.main }}{{ link.path }}{{ pagination.next }}" class="page-item-3 btn next@if(!pagination.next) disabled@endif">›</a>
|
<nav class="navbar navbar-expand-lg">
|
||||||
<a href="{{ link.main }}{{ link.path }}{{ pagination.end }}" class="page-item-4 btn start@if(!pagination.next) disabled@endif">»</a>
|
<a class="navbar-brand" href="/"><span class="f0ck" width="" height="">F0CK</span></a>
|
||||||
</nav>
|
|
||||||
@endif
|
<div class="navigation-links-guest">
|
||||||
</div>
|
<ul class="navbar-nav-guests">
|
||||||
</div>
|
<li class="nav-item dropdown">
|
||||||
</div>
|
<a class="nav-link" href="/about" data-toggle="dropdown">About</a>
|
||||||
</nav>
|
<ul class="dropdown-menu">
|
||||||
|
<li><a href="/login">login</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item dropdown" id="themes">
|
||||||
|
<a class="nav-link ddcontent" href="#" content="{{ theme }}" data-toggle="dropdown">Themes</a>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
@each(themes as t)
|
||||||
|
<li><a href="/theme/{{ t }}">{{ t }}</a></li>
|
||||||
|
@endeach
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link ddcontent" href="#"@if(tmp?.mime) content="{{ tmp?.mime }}" data-toggle="dropdown"@endif>Filter@if(!tmp?.mime) ▼@endif</a>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="/@if(tmp?.user)user/{{ tmp?.user }}/@endif">All</a></li>
|
||||||
|
<li><a class="dropdown-item" href="/@if(tmp?.user)user/{{ tmp?.user }}/@endifaudio">Audio</a></li>
|
||||||
|
<li><a class="dropdown-item" href="/@if(tmp?.user)user/{{ tmp?.user }}/@endifvideo">Video</a></li>
|
||||||
|
<li><a class="dropdown-item" href="/@if(tmp?.user)user/{{ tmp?.user }}/@endifimage">Image</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a id="random" class="nav-link" href="/random">
|
||||||
|
<span class="nav-link-identifier">Random</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="collapse navbar-collapse show" id="navbarSupportedContent">
|
||||||
|
<div class="pagination-container-fluid">
|
||||||
|
<div class="pagination-wrapper">
|
||||||
|
@if(typeof pagination !== "undefined")
|
||||||
|
<nav class="pagination">
|
||||||
|
<a href="{{ link.main }}{{ link.path }}{{ pagination.start }}" class="page-item-1 btn start@if(!pagination.prev) disabled@endif">«</a>
|
||||||
|
<a href="{{ link.main }}{{ link.path }}{{ pagination.prev }}" class="page-item-2 btn prev@if(!pagination.prev) disabled@endif">‹</a>
|
||||||
|
@each(pagination.cheat as i)
|
||||||
|
@if(i == pagination.page)
|
||||||
|
<span class="btn disabled">{{ i }}</span>
|
||||||
|
@else
|
||||||
|
<a href="{{ link.main }}{{ link.path }}{{ i }}" class="pagination-int-item btn">{{ i }}</a>
|
||||||
|
@endif
|
||||||
|
@endeach
|
||||||
|
<a href="{{ link.main }}{{ link.path }}{{ pagination.next }}" class="page-item-3 btn next@if(!pagination.next) disabled@endif">›</a>
|
||||||
|
<a href="{{ link.main }}{{ link.path }}{{ pagination.end }}" class="page-item-4 btn start@if(!pagination.next) disabled@endif">»</a>
|
||||||
|
</nav>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
@endif
|
||||||
Loading…
Reference in New Issue
Block a user