cadence/bc-explorer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Show full navigation on mobile

Browse source
This commit is contained in:
Cadence Ember 2025-04-14 13:41:00 +12:00
parent b1ab998a4b
commit 8f051edf92
3 changed files with 28 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

20
public/style.css
View file

@ -34,12 +34,30 @@
.s-navigation__toggle.s-navigation { .s-navigation__toggle.s-navigation {
--_na-item-bg: var(--black-150); --_na-item-bg: var(--black-150);
} }
@media screen and (max-width: 450px) { @media screen and (max-width: 700px) {
.s-navigation__toggle.s-navigation .is-selected svg { .s-navigation__toggle.s-navigation .is-selected svg {
visibility: hidden; visibility: hidden;
width: 0; width: 0;
} }
} }
@media screen and (max-width: 640px) {
.s-navigation {
/* styles from s-navigation__sm */
--_na-item-fs: var(--fs-caption);
--_na-item-p: var(--su4) var(--su12);
}
}
.s-topbar {
/* support variable height topbar */
height: auto;
min-height: var(--_tb-h);
align-items: stretch;
}
@media screen and (max-width: 470px) {
.shape-nav {
display: none;
}
}
.duration-last-col td:last-child { .duration-last-col td:last-child {
text-align: right; text-align: right;
white-space: pre; white-space: pre;

4
pug/home.pug
View file

@ -11,8 +11,8 @@ html
meta(name="htmx-config" content='{"requestClass":"is-loading"}') meta(name="htmx-config" content='{"requestClass":"is-loading"}')
body.themed.theme-system.overflow-y-scroll body.themed.theme-system.overflow-y-scroll
header.s-topbar.ps-sticky.t0 header.s-topbar.ps-sticky.t0
.s-topbar--container.wmx9 .s-topbar--container.wmx9.h-auto
.s-topbar--logo .s-topbar--logo.h-auto.as-stretch
!= icons.get("compass-solid", 24) != icons.get("compass-solid", 24)
.ml6 BC Explorer .ml6 BC Explorer

30
pug/includes/layout.pug
View file

@ -31,13 +31,14 @@ html
body.themed.theme-system.overflow-y-scroll(hx-boost="true" hx-swap="outerHTML" hx-target="#page" hx-select="#page") body.themed.theme-system.overflow-y-scroll(hx-boost="true" hx-swap="outerHTML" hx-target="#page" hx-select="#page")
#page(hx-history-elt) #page(hx-history-elt)
header.s-topbar.ps-sticky.t0 header.s-topbar.ps-sticky.t0
.s-topbar--container.wmx9 .s-topbar--container.wmx9.h-auto
button.s-topbar--logo.s-btn.s-btn__muted.s-btn__dropdown.pr24.bar0.fc-black(popovertarget="menu") button.s-topbar--logo.h-auto.as-stretch.s-btn.s-btn__muted.s-btn__dropdown.pr24.bar0.fc-black(popovertarget="menu")
!= icons.get("compass-solid", 24) != icons.get("compass-solid", 24)
.ml6 BC Explorer .ml6(class="md:d-none") BC Explorer
#menu(popover data-popper-placement="bottom" style="display: revert;").s-popover.overflow-visible.px0.py8 #menu(popover data-popper-placement="bottom" style="display: revert;").s-popover.overflow-visible.px0.py8
.s-popover--arrow.s-popover--arrow__tc .s-popover--arrow.s-popover--arrow__tc
ul.s-menu(role="menu") ul.s-menu(role="menu")
li.s-menu--title.d-none(class="md:d-block") BC Explorer
li(role="menuitem") li(role="menuitem")
a.s-block-link.d-flex.ai-center.fc-black(href="/" hx-boost="false") a.s-block-link.d-flex.ai-center.fc-black(href="/" hx-boost="false")
!= icons.get("log-out") != icons.get("log-out")
@ -85,8 +86,8 @@ html
each currency in currencies each currency in currencies
option(selected=(currency === count.displayCurrency))= currency option(selected=(currency === count.displayCurrency))= currency
.fl-grow1 .fl-grow1
nav.d-block(class="md:d-none") nav.d-block
ul.s-navigation ul.s-navigation(class="sm:d-grid sm:grid__3")
li: +navi("arrange", "album", "album", "Album") li: +navi("arrange", "album", "album", "Album")
li: +navi("arrange", "artist", "people-tag", "Artist") li: +navi("arrange", "artist", "people-tag", "Artist")
li: +navi("arrange", "label", "flower", "Label") li: +navi("arrange", "label", "flower", "Label")
@ -97,25 +98,8 @@ html
a.s-navigation--item(href="collection-stats" class={"is-selected": isStatsPage}) a.s-navigation--item(href="collection-stats" class={"is-selected": isStatsPage})
!= icons.get("graph-up") != icons.get("graph-up")
span.ml4 Stats span.ml4 Stats
ul.s-navigation.s-navigation__toggle.d-none(class="md:d-block")
button.s-navigation--item.s-navigation--item__dropdown(popovertarget="arranges")
!= icons.get("lens")
span.ml4 Arrange
#arranges(popover data-popper-placement="bottom" style="display: revert;").s-popover.overflow-visible
.s-popover--arrow.s-popover--arrow__tc
ul.s-navigation.s-navigation__vertical
li: +navi("arrange", "album", "album", "Album")
li: +navi("arrange", "artist", "people-tag", "Artist")
li: +navi("arrange", "label", "flower", "Label")
li: +navi("arrange", "tag", "label", "Tag")
li: +navi("arrange", "track", "music-note", "Track")
li
a.s-navigation--item(href="collection-stats" class={"is-selected": isStatsPage})
!= icons.get("graph-up")
span.ml4 Stats
if !isStatsPage if !isStatsPage
.px16(class="md:px4") nav.shape-nav.pl32(class="md:pl8")
nav
ul.s-navigation.s-navigation__toggle.g0 ul.s-navigation.s-navigation__toggle.g0
li: +navi("shape", "grid").brr0!= icons.get("view-grid") li: +navi("shape", "grid").brr0!= icons.get("view-grid")
li: +navi("shape", "list").blr0!= icons.get("align-justify") li: +navi("shape", "list").blr0!= icons.get("align-justify")