refactor(header): streamline navigation and improve form aesthetics

Redesigned the header's navigation layout and search form to enhance user interface consistency and accessibility. Migrated the logo loading to utilize Flask's url_for, ensuring dynamic path resolution which is more maintainable and compatible across different deployment environments. Simplified the navbar structure by consolidating elements under a single navbar-collapse class, aligning with Bootstrap's best practices for responsive design. Upgraded the search button to be more visually appealing and accessible by replacing visibility styles with an outline class, promoting a clearer call-to-action for users to engage with the search functionality.
This commit is contained in:
Kumi 2024-05-22 18:01:09 +02:00
parent 6324579b36
commit 0f9f8b21a4
Signed by: kumi
GPG key ID: ECBCC9082395383F

View file

@ -1,11 +1,15 @@
<header> <header>
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">
<img class="navbar-logo" src="/static/img/logo.png" alt="Structables" />
</a>
<div class="container-fluid"> <div class="container-fluid">
<div class="navbar-nav-scroll"> <a class="navbar-brand" href="/">
<ul class="nav navbar-nav"> <img
class="navbar-logo"
src="{{ url_for('static', filename='img/logo.png') }}"
alt="Structables Logo"
/>
</a>
<div class="navbar-collapse">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/projects/">Projects</a> <a class="nav-link" href="/projects/">Projects</a>
</li> </li>
@ -19,17 +23,15 @@
<a class="nav-link" href="/sitemap/">Sitemap</a> <a class="nav-link" href="/sitemap/">Sitemap</a>
</li> </li>
</ul> </ul>
</div> <form class="d-flex" action="/search" method="post">
<div class="navbar-form navbar-right">
<form class="form-inline" action="/search" method="post">
<input <input
class="form-control" class="form-control me-2"
type="search" type="search"
placeholder="Search" placeholder="Search"
name="q" name="q"
aria-label="Search" aria-label="Search"
/> />
<button class="btn btn-default" type="submit" style="visibility: hidden;">Search</button> <button class="btn btn-outline-success" type="submit">Search</button>
</form> </form>
</div> </div>
</div> </div>