feat(search): mobile header search expands on focus; drop hero button
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 52s
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 52s
Home: - "Suchen"-Button entfernt. Die Suche feuert ohnehin debounced beim Tippen; der Button war ein Relikt aus dem Submit-Modell. Enter auf dem Input löst weiterhin einen Submit aus (geht zur /search-Seite). Header (< 520 px): - Sobald das Suchfeld fokussiert wird, wandert das nav-search-wrap via :focus-within auf position: absolute und dehnt sich bis zum rechten Rand (1 rem Abstand) aus. Die Action-Icons werden dabei vom Suchfeld überlagert (z-index 60), sodass der Anwender auf engen Displays deutlich mehr Platz zum Tippen hat. - Bar-Inner bekam position: relative, damit das absolute Ausdehnen innerhalb der Header-Zeile greift.
This commit is contained in:
@@ -248,6 +248,7 @@
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.6rem 1rem;
|
||||
position: relative;
|
||||
}
|
||||
.brand {
|
||||
font-size: 1.15rem;
|
||||
@@ -420,5 +421,18 @@
|
||||
height: 36px;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
/* Beim Tippen auf engen Screens nach rechts ausdehnen
|
||||
und die Action-Icons dahinter verschwinden lassen. */
|
||||
.nav-search-wrap:focus-within {
|
||||
position: absolute;
|
||||
top: 0.6rem;
|
||||
bottom: 0.6rem;
|
||||
left: calc(1rem + 1.6rem + 0.6rem);
|
||||
right: 1rem;
|
||||
z-index: 60;
|
||||
}
|
||||
.nav-search-wrap:focus-within .nav-search input {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -87,7 +87,6 @@
|
||||
inputmode="search"
|
||||
aria-label="Suchbegriff"
|
||||
/>
|
||||
<button type="submit" aria-label="Suchen">Suchen</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
@@ -200,16 +199,6 @@
|
||||
outline: 2px solid #2b6a3d;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
button {
|
||||
padding: 0.9rem 1.25rem;
|
||||
font-size: 1rem;
|
||||
border-radius: 10px;
|
||||
border: 0;
|
||||
background: #2b6a3d;
|
||||
color: white;
|
||||
min-height: 48px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.results,
|
||||
.recent {
|
||||
margin-top: 1.5rem;
|
||||
|
||||
Reference in New Issue
Block a user