maketank/Froxlor
2
0
Fork 0
Code Pull Requests Releases Activity

update navigation for better mobile handling

Browse Source 
Signed-off-by: Maurice Preuß (envoyr) <envoyr@froxlor.org>
This commit is contained in:
Maurice Preuß (envoyr)
2022-12-21 20:23:54 +01:00
parent 996b2e4a78
commit 669072d996
5 changed files with 40 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/Froxlor/UI/Panel/UI.php
View File

@@ -93,7 +93,7 @@ class UI
public static function sendHeaders()
{
session_set_cookie_params([
'lifetime' => 600, // will be renewed based on settings in lib/init.php
'lifetime' => self::$install_mode ? 7200 : 600, // will be renewed based on settings in lib/init.php
'path' => '/',
'domain' => $_SERVER['HTTP_HOST'],
'secure' => self::requestIsHttps(),

19
templates/Froxlor/src/scss/components/_navbar.scss
View File

@@ -3,7 +3,7 @@
}
.navbar-brand {
padding: 1rem;
padding: 1rem 0;
}
@include media-breakpoint-up(md) {
@@ -21,9 +21,12 @@
@include media-breakpoint-down(md) {
.navbar {
background: darken($navbar-bg, 90);
background: $navbar-bg-mobile;
.navbar-nav {
flex-direction: row;
gap: .75rem;
.nav-link {
color: $white;
@@ -31,6 +34,18 @@
color: rgba(255,255,255,.45);
}
}
.dropdown-menu {
position: absolute;
}
}
#collapseSearch {
border-top: solid 1px $dark;
#search {
margin-bottom: 1.125rem;
}
}
}

1
templates/Froxlor/src/scss/variables/_dark.scss
View File

@@ -25,6 +25,7 @@ $list-group-action-color: $body-color;
// Navbar
$navbar-bg: $gray-800;
$navbar-bg-mobile: $navbar-bg;
$navbar-light-color: $gray-200;
$navbar-light-hover-color: $gray-500;
$navbar-light-active-color: $gray-500;

1
templates/Froxlor/src/scss/variables/_main.scss
View File

@@ -67,6 +67,7 @@ $link-color: $froxlor-800;
// Navbar
$navbar-bg: $white;
$navbar-bg-mobile: $gray-900;
// Sidebar
$sidebar-width: 256px;

38
templates/Froxlor/userarea.html.twig
View File

@@ -19,28 +19,19 @@
<nav class="navbar navbar-expand-md navbar-light p-0 {% if not block('heading') %}shadow-sm{% endif %}">
<div class="container-fluid gx-0">
<a class="navbar-brand {% if block('heading') %}shadow-sm{% endif %}" href="{{ linker({'section': 'index'}) }}">
<img src="{{ header_logo }}" alt="" width="auto" height="24" class="d-inline-block align-text-top">
</a>
<div class="me-3 me-sm-0">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle sidebar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse px-3 px-lg-5" id="navbar">
<form id="search" method="post">
<div class="d-flex align-items-center">
<a class="navbar-brand me-0 {% if block('heading') %}shadow-sm{% endif %}" href="{{ linker({'section': 'index'}) }}">
<img src="{{ header_logo }}" alt="" width="auto" height="24" class="d-inline-block align-text-top ms-md-3">
</a>
<div class="order-0 order-md-1 d-flex flex-grow-0 flex-md-grow-1" id="navbar">
<ul class="navbar-nav ms-md-auto me-3 me-lg-5">
<a class="nav-link d-md-none" data-bs-toggle="collapse" href="#collapseSearch" role="button" aria-expanded="false" aria-controls="collapseSearch">
<i class="fa-solid fa-search text-muted"></i>
<input title="search" type="search" class="search-input" placeholder="{{ lng('panel.search') }}...">
</div>
<div class="search-results-box p-2 shadow" style="display:none;">
<div class="search-results list-group-flush"></div>
</div>
</form>
<ul class="navbar-nav ms-auto">
</a>
{% if call_static('\\Froxlor\\CurrentUser', 'getField', ['switched_user']) is not empty and call_static('\\Froxlor\\CurrentUser', 'getField', ['switched_user']) is iterable %}
<a class="nav-link text-success" href="{{ linker({'section': 'index', 'action': 'suback'}) }}">
<i class="fa-solid fa-reply me-1"></i><span class="d-none d-xl-inline">{{ userinfo.switched_user.loginname }}</span>
@@ -91,12 +82,23 @@
</ul>
</li>
<li class="nav-item">
<a class="btn btn-link pe-0" title="{{ lng('login.logout') }}" href="{{ linker({'section': 'index', 'action': 'logout'}) }}">
<a class="nav-link text-primary" title="{{ lng('login.logout') }}" href="{{ linker({'section': 'index', 'action': 'logout'}) }}">
<i class="fas fa-power-off"></i>
</a>
</li>
</ul>
</div>
<div class="order-1 order-md-0 collapse navbar-collapse" id="collapseSearch">
<form class="ms-3 mt-3 ms-lg-5 my-md-0" id="search" method="post">
<div class="d-flex align-items-center">
<i class="fa-solid fa-search text-muted"></i>
<input class="search-input" title="search" type="search" placeholder="{{ lng('panel.search') }}...">
</div>
<div class="search-results-box p-2 shadow" style="display:none;">
<div class="search-results list-group-flush"></div>
</div>
</form>
</div>
</div>
</nav>
{% endblock %}