AS1024/itflow
1
0
Fork 0
mirror of https://github.com/itflow-org/itflow synced 2026-08-26 17:35:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use AdminLTE4 new nav bar Search class looks great

Browse Source
This commit is contained in:
johnnyq
2026-08-25 17:09:38 -04:00
parent 5cf14ee74b
commit 4b9c53675c
2 changed files with 15 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
css/itflow_custom.css
View File

@@ -148,9 +148,9 @@
}
/* Navbar height. v4 pairs .app-header{max-height:2.75rem} with 0.5rem of
navbar padding, but the tallest children - the 2rem avatar and the
input-group-sm search box - want 47-48px, so they overflow that 44px cap.
Everything below is sized so it fits inside a 3rem bar.
navbar padding, but the tallest children want 47-48px and overflow that
44px cap. Everything below is sized so it fits inside a 3rem bar - the
.navbar-search field is ~33px and clears it without help.
NOTE: .sidebar-brand is the matching half of this pair and is set to the
same height further down - change both or they stop lining up. */
.app-header.navbar {
@@ -182,14 +182,6 @@
height: 1.6rem;
margin-top: 0;
}
/* the search box is the other oversized child */
.app-header .input-group-sm > .form-control,
.app-header .input-group-sm > .btn {
height: 1.9rem;
padding-top: 0;
padding-bottom: 0;
line-height: 1.9rem;
}
/* .navbar-badge positions itself (top:9px/right:5px) for a taller bar; the
markup used to override that inline, which is why it drifted when the bar
was tightened. Positioned against the flex-centred link instead. */
@@ -307,33 +299,6 @@ a:focus {
background-color: transparent;
}
/* Navbar search. v3 tinted the field with a LIGHTENED version of the theme
colour (navy #001f3f -> #002953 at rest, lighter again on focus) rather
than a fixed grey. The color-mix line is the fallback; the relative-colour
line reproduces v3's HSL lighten exactly where the browser supports it. */
.app-header .form-control-navbar,
.app-header .btn-navbar {
background-color: color-mix(in srgb, var(--itflow-accent, #007bff) 90%, #fff);
background-color: hsl(from var(--itflow-accent, #007bff) h s calc(l + 4%));
border-color: color-mix(in srgb, var(--itflow-accent, #007bff) 78%, #fff);
border-color: hsl(from var(--itflow-accent, #007bff) h s calc(l + 9%));
color: rgba(255, 255, 255, .8);
box-shadow: none;
}
.app-header .form-control-navbar::placeholder {
color: rgba(255, 255, 255, .6);
}
.app-header .form-control-navbar:focus,
.app-header .form-control-navbar:focus + .btn-navbar {
background-color: color-mix(in srgb, var(--itflow-accent, #007bff) 82%, #fff);
background-color: hsl(from var(--itflow-accent, #007bff) h s calc(l + 9%));
border-color: hsl(from var(--itflow-accent, #007bff) h s calc(l + 14%));
color: #fff;
box-shadow: none;
}
.app-header .form-control-navbar:focus::placeholder {
color: #fff;
}
/* --- Bootstrap 5 unpaired background utilities -------------------------
BS4 + AdminLTE 3 shipped `.bg-dark,.card.bg-dark .card-body{color:#fff}`.

26
includes/top_nav.php
View File

@@ -8,20 +8,18 @@
</li>
</ul>
<!-- Center navbar links -->
<ul class="navbar-nav ms-auto">
<!-- SEARCH FORM -->
<form class="d-flex" action="/agent/global_search.php">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search everywhere" name="query"
value="<?php if (isset($_GET['query'])) { echo escapeHtml($_GET['query']); } ?>">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</form>
</ul>
<!-- SEARCH FORM -->
<form class="navbar-search ms-auto" role="search" action="/agent/global_search.php">
<label for="navbar-search-input" class="visually-hidden">Search everywhere</label>
<div class="navbar-search-field">
<input class="form-control" type="search" id="navbar-search-input" name="query"
placeholder="Search everywhere" autocomplete="off"
value="<?php if (isset($_GET['query'])) { echo escapeHtml($_GET['query']); } ?>">
<button class="navbar-search-submit" type="submit" aria-label="Submit search">
<i class="fas fa-search" aria-hidden="true"></i>
</button>
</div>
</form>
<!-- Right navbar links -->
<ul class="navbar-nav ms-auto">