add bootstrap class to only show fh logo in header on medium and greater displays; adjusted nav-user-btn css under mobile breakpoint to just take space of contained img and let searchbar flex growth apply to leftover width;

This commit is contained in:
Johann Hoffmann
2024-10-21 16:02:54 +02:00
parent 690080035a
commit f3851da10d
4 changed files with 11 additions and 10 deletions
@@ -16,7 +16,8 @@ if (!isset($menu)) {
<button id="nav-main-btn" class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav-main" aria-controls="nav-main" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a id="nav-logo" href="<?= site_url(''); ?>">
<a id="nav-logo" class="d-none d-md-block" href="<?= site_url(''); ?>">
<img src="<?= base_url('/public/images/logo-300x160.png'); ?>" alt="Logo">
</a>
<nav id="nav-main" class="offcanvas offcanvas-start bg-dark" tabindex="-1" aria-labelledby="nav-main-btn" data-bs-backdrop="false">
@@ -53,4 +54,4 @@ if (!isset($menu)) {
</nav>
</header>
<main id="cis-main" class="flex-grow-1 overflow-scroll p-4">
<main id="cis-main" class="flex-grow-1 overflow-scroll p-4">
@@ -32,7 +32,7 @@ if (!isset($menu)) {
<span class="navbar-toggler-icon"></span>
</button>
<fhc-searchbar id="nav-search" class=" fhc-searchbar w-100" @updatesearchtypes="updatesearchtypes" :selectedtypes="selectedtypes" :searchoptions="searchbaroptions" :searchfunction="searchfunction"></fhc-searchbar>
<a id="nav-logo" href="<?= site_url(''); ?>">
<a id="nav-logo" class="d-none d-md-block" href="<?= site_url(''); ?>">
<img src="<?= base_url('/public/images/logo-300x160.png'); ?>" alt="Logo">
</a>
<nav id="nav-main" class="offcanvas offcanvas-start bg-dark" tabindex="-1" aria-labelledby="nav-main-btn" data-bs-backdrop="false">
@@ -64,4 +64,4 @@ if (!isset($menu)) {
</nav>
</header>
<main id="cis-main" class="flex-grow-1 overflow-scroll">
<main id="cis-main" class="flex-grow-1 overflow-scroll">
+4 -4
View File
@@ -352,12 +352,12 @@ html {
position: relative;
}
#nav-user-btn {
width: 100%;
}
#nav-user-btn img {
object-fit: cover;
height: 1.5rem;
width: 1.5rem;
height: 2rem;
width: 2rem;
}
#nav-user-menu {
position: relative !important;
@@ -407,4 +407,4 @@ html {
font-family: var(--fa-style-family, "Font Awesome 6 Free");
font-weight: var(--fa-style, 900);
margin-inline-start: 0.5rem;
}
}
+2 -2
View File
@@ -74,7 +74,7 @@ export default {
<span class="navbar-toggler-icon"></span>
</button>
<fhc-searchbar id="nav-search" class="fhc-searchbar w-100" :searchoptions="searchbaroptions" :searchfunction="searchfunction" :selectedtypes="selectedtypes"></fhc-searchbar>
<a id="nav-logo" :href="rootUrl">
<a id="nav-logo" class="d-none d-md-block" :href="rootUrl">
<img :src="logoUrl" alt="Logo">
</a>
<button id="nav-user-btn" class="btn btn-link rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#nav-user-menu" aria-expanded="false" aria-controls="nav-user-menu">
@@ -102,4 +102,4 @@ export default {
</div>
</div>
</nav>`
};
};