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

No Javascript navbar

Browse Source
This commit is contained in:
VnPower
2024-10-15 21:21:44 +07:00
parent a71def1dae
commit f56165bc5b
3 changed files with 56 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/bootstrap-style.css
Vendored
+23 -4
View File
@@ -10623,6 +10623,18 @@ textarea.form-control-lg {
z-index: 3 !important;
}
.z-4 {
z-index: 4 !important;
}
.z-5 {
z-index: 5 !important;
}
.z-inf {
z-index: 1000 !important;
}
@media (min-width: 576px) {
.float-sm-start {
float: left !important;
@@ -14239,12 +14251,19 @@ h6, .h6 {
display: none !important;
}
}
#noscript-navbar-toggler {
display: none;
}
#noscript-navbar-toggler:checked ~ #noscriptOffcanvasNavbar {
#noscript-navbar-toggler:checked ~ #noscript-navbar-close-button:not(:checked) ~ #noscriptOffcanvasNavbar, #noscript-navbar-toggler:not(:checked) ~ #noscript-navbar-close-button:checked ~ #noscriptOffcanvasNavbar {
transform: translateX(0);
}
#noscript-navbar-toggler:checked ~ #noscript-navbar-close-button:not(:checked) + label, #noscript-navbar-toggler:not(:checked) ~ #noscript-navbar-close-button:checked + label {
transform: translateX(0);
}
#noscript-navbar-close-button + label {
margin-left: auto;
width: 350px;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
}
#noscriptOffcanvasNavbar {
top: 3.5rem !important;
assets/css/bootstrap-style.scss
Vendored
+27 -4
View File
@@ -116,6 +116,18 @@ $custom-colors: (
);
$theme-colors: map-merge($theme-colors, $custom-colors);
// More z-index values
$zindex-levels: (
n1: -1,
0: 0,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
inf: 1000,
);
@import "./bootstrap/maps";
@import "./bootstrap/mixins";
@import "./bootstrap/utilities";
@@ -353,12 +365,23 @@ h6 {
// Noscript components
#noscript-navbar-toggler {
display: none;
&:checked~#noscriptOffcanvasNavbar {
&:checked~#noscript-navbar-close-button:not(:checked)~#noscriptOffcanvasNavbar,
&:not(:checked)~#noscript-navbar-close-button:checked~#noscriptOffcanvasNavbar {
transform: translateX(0);
}
&:checked~#noscript-navbar-close-button:not(:checked)+label,
&:not(:checked)~#noscript-navbar-close-button:checked+label {
transform: translateX(0);
}
}
#noscript-navbar-close-button + label {
margin-left: auto;
width: 350px;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
}
#noscriptOffcanvasNavbar {
assets/views/noscript/navbar.jet.html
+6 -3
View File
@@ -4,18 +4,21 @@
<div class="d-flex">
<!-- Offcanvas menu for navigation items -->
<input type="checkbox" class="d-none" id="noscript-navbar-toggler" />
<label for="noscript-navbar-toggler" class="navbar-toggler border-0 p-0 me-3" role="button" aria-label="Toggle navigation">
<label for="noscript-navbar-toggler" class="navbar-toggler border-0 p-0 me-3 " role="button" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</label>
<input type="checkbox" class="d-none" id="noscript-navbar-close-button" />
<label for="noscript-navbar-close-button" class="navbar-toggler border-0 p-0 position-fixed top-0 start-0 bg-charcoal-surface1 z-5" role="button" aria-label="Toggle navigation">
<div class="btn-close text-reset p-4" aria-label="Close"></div>
</label>
<div class="offcanvas border-0 bg-charcoal-surface1 position-absolute z-5 vh-100 visible" tabindex="-1" id="noscriptOffcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas border-0 bg-charcoal-surface1 position-fixed z-5 vh-100 visible" tabindex="-1" id="noscriptOffcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<!-- Offcanvas header -->
<div class="offcanvas-header d-flex align-items-start">
<div class="d-flex flex-column w-75">
<h2 class="display-6 offcanvas-title mb-0" id="offcanvasNavbarLabel"><a class="text-body text-decoration-none" href="/">PixivFE</a></h2>
<span class="text-body-secondary mb-0">An open-source alternative frontend for Pixiv that doesn't suck.</span>
</div>
<!-- TODO: p-4 is a dirty hack to 'align' the close button with the title; inconsistent across devices -->
</div>
<!-- Offcanvas body -->
<div class="offcanvas-body">