PrivateCoffee/structables
4
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(header): streamline navigation and improve form aesthetics

Browse source 
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
1 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
templates/header.html
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>