VnPower/PixivFE
1
0
Fork 0
mirror of https://codeberg.org/VnPower/PixivFE synced 2024-12-06 19:16:23 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

navbar: search modal

Browse Source
This commit is contained in:
perennial
2024-10-04 20:05:09 +10:00
parent 51c3213a4d
commit 656d8a5ade
1 changed files with 32 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/views/layout/default.jet.html
+32 -6
View File
@@ -55,11 +55,11 @@
<body class="bg-black">
<!-- mb-4 for spacing between the navbar and main content -->
<nav class="navbar bg-charcoal-surface1 mb-4">
<div class="container-fluid justify-content-between">
<nav class="navbar bg-charcoal-surface1 py-3 mb-4">
<div class="container">
<div class="d-flex">
<!-- Offcanvas menu for navigation items -->
<button class="navbar-toggler border-0 me-2 px-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler border-0 p-0 me-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-start bg-charcoal-surface1 border-0" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
@@ -120,15 +120,23 @@
<!-- Icon and title -->
<a class="text-decoration-none fw-bold mb-0 d-flex align-items-center" href="/">
<img src="/img/favicon.svg" alt="PixivFE icon" width="30" height="30" class="d-inline-block me-2">
<p class="h3 text-body m-0">PixivFE</p>
<p class="h2 text-body m-0">PixivFE</p>
</a>
</div>
<!-- Search bar -->
<div class="position-absolute top-50 start-50 translate-middle">
<!-- Search bar (visible on md and larger devices) -->
<div class="position-absolute top-50 start-50 translate-middle d-none d-md-block">
<form class="d-flex" action="/tags" method="post" autocomplete="off">
<input class="form-control bg-charcoal-surface2 rounded-pill border-0" type="search" name="name" required placeholder="⌕ Search artworks" aria-label="Search">
</form>
</div>
<!-- Search icon (visible on smaller devices) -->
<div class="d-md-none ms-auto">
<button class="btn btn-link text-body p-0 me-1" type="button" data-bs-toggle="modal" data-bs-target="#searchModal">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
</svg>
</button>
</div>
<!-- TODO: figure out how to have the logged in user's avatar and name in the navbar -->
<!-- <a class="h5 text-decoration-none mb-0 d-flex align-items-center" href="/">
<img src=" .User.Avatar " width="30" height="30" class="d-inline-block rounded-circle me-2">
@@ -136,6 +144,24 @@
</a> -->
</div>
</nav>
<!-- Search modal -->
<div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content bg-charcoal-surface1 rounded-5 border-0 p-4">
<div class="modal-header border-0 p-0 mb-3">
<h2 class="modal-title" id="searchModalLabel">Search</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<form action="/tags" method="post" autocomplete="off">
<input class="form-control bg-charcoal-surface2 rounded-pill border-0" type="search" name="name" required placeholder="⌕ Search artworks" aria-label="Search">
</form>
</div>
</div>
</div>
</div>
<script src="/js/on-page-load.js"></script>
<!-- mb-5 for spacing at the bottom of the page -->
<main class="container mb-5" hx-boost="true" hx-swap="outerHTML">