AS1024/itflow
1
0
Fork 0
mirror of https://github.com/itflow-org/itflow synced 2026-09-14 10:45:12 +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 height. v4 pairs .app-header{max-height:2.75rem} with 0.5rem of
navbar padding, but the tallest children - the 2rem avatar and the navbar padding, but the tallest children want 47-48px and overflow that
input-group-sm search box - want 47-48px, so they overflow that 44px cap. 44px cap. Everything below is sized so it fits inside a 3rem bar - the
Everything below is sized so it fits inside a 3rem bar. .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 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. */ same height further down - change both or they stop lining up. */
.app-header.navbar { .app-header.navbar {
@@ -182,14 +182,6 @@
height: 1.6rem; height: 1.6rem;
margin-top: 0; 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 /* .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 markup used to override that inline, which is why it drifted when the bar
was tightened. Positioned against the flex-centred link instead. */ was tightened. Positioned against the flex-centred link instead. */
@@ -307,33 +299,6 @@ a:focus {
background-color: transparent; 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 ------------------------- /* --- Bootstrap 5 unpaired background utilities -------------------------
BS4 + AdminLTE 3 shipped `.bg-dark,.card.bg-dark .card-body{color:#fff}`. 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> </li>
</ul> </ul>
<!-- Center navbar links --> <!-- SEARCH FORM -->
<ul class="navbar-nav ms-auto"> <form class="navbar-search ms-auto" role="search" action="/agent/global_search.php">
<label for="navbar-search-input" class="visually-hidden">Search everywhere</label>
<!-- SEARCH FORM --> <div class="navbar-search-field">
<form class="d-flex" action="/agent/global_search.php"> <input class="form-control" type="search" id="navbar-search-input" name="query"
<div class="input-group input-group-sm"> placeholder="Search everywhere" autocomplete="off"
<input class="form-control form-control-navbar" type="search" placeholder="Search everywhere" name="query" value="<?php if (isset($_GET['query'])) { echo escapeHtml($_GET['query']); } ?>">
value="<?php if (isset($_GET['query'])) { echo escapeHtml($_GET['query']); } ?>"> <button class="navbar-search-submit" type="submit" aria-label="Submit search">
<button class="btn btn-navbar" type="submit"> <i class="fas fa-search" aria-hidden="true"></i>
<i class="fas fa-search"></i> </button>
</button> </div>
</div> </form>
</form>
</ul>
<!-- Right navbar links --> <!-- Right navbar links -->
<ul class="navbar-nav ms-auto"> <ul class="navbar-nav ms-auto">