FSST/Geizkragen
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

add bookmark icon and enhance mobile search bar for improved usability

Browse Source
This commit is contained in:
Fabian Schieder 2026-02-27 23:02:10 +01:00
parent b1a8da315d
commit 84d77f0e0e
3 changed files with 63 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/icons/bookmark.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 24 24"><path fill="#000000" d="M16 2H8a3 3 0 0 0-3 3v16a1 1 0 0 0 .5.87a1 1 0 0 0 1 0l5.5-3.18l5.5 3.18a1 1 0 0 0 .5.13a1 1 0 0 0 .5-.13A1 1 0 0 0 19 21V5a3 3 0 0 0-3-3Zm1 17.27l-4.5-2.6a1 1 0 0 0-1 0L7 19.27V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 328 B

21
header.php
View File

@ -54,7 +54,7 @@
<img class="nav__logo" src="/assets/images/logoText.png" alt="Geizkragen" width="150">
</a>
<!-- Desktop-Suche (wird per CSS auf ≤900 px ausgeblendet) -->
<!-- Desktop-Suche (zentriert, wird auf ≤900px per CSS ausgeblendet) -->
<form class="nav__searchForm" action="index.php" method="GET" autocomplete="off">
<div class="nav__searchField">
<input class="nav__searchInput" type="text" id="search" name="search"
@ -66,15 +66,6 @@
<!-- ═══ Slide-In-Menü (wird auf Mobile per JS getoggelt) ═══ -->
<div class="nav__menu" id="nav-menu">
<!-- Mobile-Suche (nur im Hamburger sichtbar) -->
<form class="nav__searchForm nav__searchForm--mobile" action="index.php" method="GET" autocomplete="off">
<div class="nav__searchField">
<input class="nav__searchInput" type="text" name="search"
placeholder="Produkte suchen…" inputmode="text">
</div>
</form>
<ul class="nav__list">
<li class="nav__item">
<a href="index.php" class="nav__link">Home</a>
@ -101,7 +92,7 @@
<div class="nav__actions">
<a class="nav__login nav__wishlist" href="wunschliste.php" aria-label="Wunschliste">
<svg class="icon icon-user" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8 6.00067L21 6.00139M8 12.0007L21 12.0015M8 18.0007L21 18.0015M3.5 6H3.51M3.5 12H3.51M3.5 18H3.51M4 6C4 6.27614 3.77614 6.5 3.5 6.5C3.22386 6.5 3 6.27614 3 6C3 5.72386 3.22386 5.5 3.5 5.5C3.77614 5.5 4 5.72386 4 6ZM4 12C4 12.2761 3.77614 12.5 3.5 12.5C3.22386 12.5 3 12.2761 3 12C3 11.7239 3.22386 11.5 3.5 11.5C3.77614 11.5 4 11.7239 4 12ZM4 18C4 18.2761 3.77614 18.5 3.5 18.5C3.22386 18.5 3 18.2761 3 18C3 17.7239 3.22386 17.5 3.5 17.5C3.77614 17.5 4 17.7239 4 18Z"
<path d="M16 2H8a3 3 0 0 0-3 3v16a1 1 0 0 0 .5.87a1 1 0 0 0 1 0l5.5-3.18l5.5 3.18a1 1 0 0 0 .5.13a1 1 0 0 0 .5-.13A1 1 0 0 0 19 21V5a3 3 0 0 0-3-3Zm1 17.27l-4.5-2.6a1 1 0 0 0-1 0L7 19.27V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1Z"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
@ -123,6 +114,14 @@
</div>
</div>
</nav>
<!-- Mobile-Suchleiste (unterhalb der Nav-Zeile, nur auf ≤900px sichtbar) -->
<form class="nav__searchBar" action="index.php" method="GET" autocomplete="off">
<div class="nav__searchField">
<input class="nav__searchInput" type="text" name="search"
placeholder="Produkte suchen…" inputmode="text">
</div>
</form>
</header>
<script>

91
style.css
View File

@ -262,6 +262,7 @@ a:hover {
margin-left: auto;
}
/* ─── Desktop: nav__menu ist eine horizontale Flex-Zeile ─── */
.nav__menu {
display: flex;
align-items: center;
@ -338,11 +339,11 @@ a:hover {
}
/* ==========================================================
TOGGLE / CLOSE (sind <button>, also Standard-Styles resetten)
TOGGLE / CLOSE – auf Desktop komplett versteckt
========================================================== */
.nav__toggle,
.nav__close {
display: none; /* auf Desktop unsichtbar */
display: none;
background: none;
border: none;
color: var(--text-secondary);
@ -360,94 +361,106 @@ a:hover {
background: rgba(255, 255, 255, 0.08);
}
/* Mobile-only search + items: hidden on desktop */
.nav__searchForm--mobile { display: none; }
.nav__item--mobile { display: none; }
/* Auf Desktop versteckt */
.nav__searchBar { display: none; }
.nav__item--mobile { display: none !important; }
/* ==========================================================
MOBILE NAV (≤ 900 px)
========================================================== */
@media (max-width: 900px) {
/* --- Hamburger-Icon anzeigen --- */
/* Hamburger-Button sichtbar machen */
.nav__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* --- Mobile-only Nav-Einträge anzeigen --- */
/* Mobile-only Links sichtbar */
.nav__item--mobile {
display: list-item;
display: list-item !important;
}
/* --- Slide-In-Panel --- */
/* ────────────────────────────────────────────
Das Slide-In-Panel
- position:fixed → über allem
- right:-100% → standardmäßig außerhalb
- right:0 → reingleiten bei .show-menu
──────────────────────────────────────────── */
.nav__menu {
position: fixed;
top: 0;
right: -100%; /* startet außerhalb */
right: -100%;
width: min(300px, 85vw);
height: 100%;
background: rgba(13, 17, 23, 0.97);
height: 100vh;
height: 100dvh; /* dynamic viewport auf Mobilgeräten */
background: rgba(13, 17, 23, 0.98);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border-left: 1px solid var(--border-subtle);
padding: 5rem 1.5rem 2rem;
box-shadow: -10px 0 40px rgba(0, 0, 0, 0.4);
/* Layout */
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
z-index: 1001;
gap: 0.5rem;
padding: 4.5rem 1.5rem 2rem;
/* Scroll */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* Z-Index */
z-index: 1001;
/* Transition */
transition: right 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nav__menu.show-menu {
right: 0; /* reingleiten */
right: 0;
}
/* --- Mobile-Suche im Hamburger --- */
.nav__searchForm--mobile {
/* ─── Mobile-Suchleiste im Header (unterhalb der Nav) ─── */
.nav__searchBar {
display: block;
width: 100%;
position: static;
transform: none;
margin-bottom: 0.25rem;
padding: 0 0.75rem 0.6rem;
}
.nav__searchForm--mobile .nav__searchField {
.nav__searchBar .nav__searchField {
width: 100%;
}
.nav__searchForm--mobile .nav__searchField::before {
.nav__searchBar .nav__searchInput {
width: 100%;
height: 40px;
padding: 0 14px 0 36px;
font-size: 16px; /* verhindert iOS-Zoom */
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-default);
}
.nav__searchBar .nav__searchField::before {
content: "🔍";
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 0.8rem;
font-size: 0.78rem;
pointer-events: none;
opacity: 0.45;
}
.nav__searchForm--mobile .nav__searchInput {
width: 100%;
height: 46px;
padding: 0 14px 0 36px;
font-size: 16px; /* verhindert iOS-Zoom */
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-default);
}
.nav__searchForm--mobile .nav__searchInput:focus {
.nav__searchBar .nav__searchInput:focus {
border-color: var(--color-primary);
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
/* --- Nav-Links im Panel --- */
/* ─── Links im Panel ─── */
.nav__list {
flex-direction: column;
gap: 0.15rem;
@ -470,7 +483,7 @@ a:hover {
transform: translateX(4px);
}
/* --- Schließen-Button --- */
/* ─── Schließen-Button ─── */
.nav__close {
display: flex;
align-items: center;
@ -480,6 +493,7 @@ a:hover {
right: 1rem;
min-height: 44px;
min-width: 44px;
z-index: 1;
}
.nav__close:hover {
@ -911,7 +925,6 @@ a:hover {
/* ─── Touch Optimizations ─── */
@media (pointer: coarse) {
.nav__link,
.home-nav__list li a,
.nav__login,
.nav__wishlist,