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

add centered search form to header and style adjustments for login integration

Browse Source
This commit is contained in:
Fabian Schieder 2026-02-11 16:22:03 +01:00
parent 1ff652509b
commit 5883f262a5
3 changed files with 58 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/css/login.css
View File

@ -157,6 +157,10 @@
margin-top: 12px; margin-top: 12px;
} }
.auth__search {
margin-top: 1px;
}
.auth__field label { .auth__field label {
display: block; display: block;
margin: 0 0 6px; margin: 0 0 6px;

8
header.php
View File

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="assets/css/login.css">
<link rel="icon" href="assets/images/favicon.ico" sizes="any"> <link rel="icon" href="assets/images/favicon.ico" sizes="any">
@ -13,13 +14,18 @@
</head> </head>
<body> <body>
<!--==================== HEADER ====================-->
<header class="header" id="header"> <header class="header" id="header">
<nav class="nav" aria-label="Hauptnavigation"> <nav class="nav" aria-label="Hauptnavigation">
<a class="nav__logoLink" href="index.php"> <a class="nav__logoLink" href="index.php">
<img class="nav__logo" src="/assets/images/logoText.png" alt="Geizhals" width="150"> <img class="nav__logo" src="/assets/images/logoText.png" alt="Geizhals" width="150">
</a> </a>
<form class="nav__searchForm auth__form auth__search" action="login.php" method="POST" autocomplete="off">
<div class="nav__searchField auth__field">
<input class="nav__searchInput" type="text" id="search" name="Suche" inputmode="text" required>
</div>
</form>
<div class="nav__inner container"> <div class="nav__inner container">
<div class="nav__menu" id="nav-menu"> <div class="nav__menu" id="nav-menu">
<ul class="nav__list"> <ul class="nav__list">

47
style.css
View File

@ -91,6 +91,9 @@ main
display: flex; display: flex;
align-items: center; align-items: center;
background: var(--bg-header); background: var(--bg-header);
/* Suchfeld kann damit exakt zur Header-Mitte positioniert werden */
position: relative;
} }
/* Logo wirklich ganz links (ohne Tricks) */ /* Logo wirklich ganz links (ohne Tricks) */
@ -229,6 +232,50 @@ main
} }
} }
/* ==========================================================
NAVBAR: ZENTRIERTE SUCHE
========================================================== */
.nav__searchForm {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
/* verhindert, dass das Eingabefeld auf Desktop zu breit wird */
width: min(520px, calc(100% - 520px));
z-index: 1;
}
/* Login-Styles (assets/css/login.css) sollen im Header keine vertikalen Abstände reinbringen */
.nav__searchForm.auth__form,
.nav__searchForm .auth__field,
.nav__searchForm.auth__search {
margin-top: 0;
}
.nav__searchField {
width: 100%;
margin-top: 0;
}
.nav__searchInput {
width: 100%;
height: 40px;
padding: 0 12px;
border-radius: 10px;
}
@media (max-width: 900px) {
/* Auf Mobile würde das fix zentrierte Feld dem Burger-Menü in die Quere kommen */
.nav__searchForm {
display: none;
}
}
/* ========================================================== /* ==========================================================
LAYOUT LAYOUT
========================================================== */ ========================================================== */