mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
Revert "feat(mobile): sidebar nav becomes an app-grid on mobile (#7)"
This reverts commit d0f8859f8b.
This commit is contained in:
1 parent
d0f8859f8b
commit
ab20640b9b
2 files changed
-53
No files matched your search
@@ -4714,51 +4714,6 @@
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/* Mobile (below the desktop breakpoint): render the OPEN (expanded) sidebar's
|
||||
primary nav as an app-grid — icon tiles with the title centered below each
|
||||
icon — instead of the desktop vertical list. Desktop and the collapsed icon
|
||||
rail are unchanged. Scoped to `.sidebar-nav` so the footer "More" links are
|
||||
untouched. Uses the sidebar-expanded prefix for specificity (no !important). */
|
||||
@media (max-width: calc(theme("screens.lg") - var(--breakpoint-edge-offset))) {
|
||||
body.sidebar-expanded #sidebar .sidebar-nav,
|
||||
#sidebar.sidebar-expanded .sidebar-nav {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: var(--space-2xs);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
body.sidebar-expanded #sidebar .sidebar-nav .sidebar-nav-link,
|
||||
#sidebar.sidebar-expanded .sidebar-nav .sidebar-nav-link {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
text-align: center;
|
||||
gap: var(--space-2xs);
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
padding-block: var(--space-xs);
|
||||
padding-inline: var(--space-3xs);
|
||||
/* the desktop hover slide is meaningless for centered tiles */
|
||||
--sidebar-nav-translate-x: 0;
|
||||
}
|
||||
|
||||
body.sidebar-expanded #sidebar .sidebar-nav .sidebar-nav-link .sidebar-text,
|
||||
#sidebar.sidebar-expanded
|
||||
.sidebar-nav
|
||||
.sidebar-nav-link
|
||||
.sidebar-text {
|
||||
font-size: var(--font-size-2xs);
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
text-align: center;
|
||||
/* wrap at spaces, not mid-word (so "Recently Added" breaks cleanly) */
|
||||
overflow-wrap: break-word;
|
||||
word-break: normal;
|
||||
hyphens: none;
|
||||
}
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar-text,
|
||||
#sidebar.sidebar-collapsed .sidebar-text {
|
||||
display: none;
|
||||
|
||||
@@ -462,14 +462,6 @@ toward freshness and looked identical. Gave each a structural identity:
|
||||
- [ ] Improve mobile layout and the video card layout.
|
||||
- [ ] **Improve mobile UI** broadly (reiterated 2026-06-25) — not just the card: nav/
|
||||
sidebar, modals, the player, forms, and touch targets across the app.
|
||||
- [x] **Mobile sidebar nav → app-grid (2026-06-25).** Below the desktop breakpoint
|
||||
(<1024px), the OPEN/expanded sidebar's primary nav renders as a 3-column grid
|
||||
of icon tiles with the title centered below each icon (app-grid feel), instead
|
||||
of the desktop vertical list. Desktop + the collapsed icon rail are unchanged;
|
||||
scoped to `.sidebar-nav` (footer "More" links untouched); token-only, no
|
||||
`!important` (sidebar-expanded specificity). `css/tailwind.source.css`.
|
||||
Validated live in-browser. (Option A: shows on the open mobile menu; an
|
||||
always-on variant was deferred — would need the sidebar widened/overlaid.)
|
||||
- [ ] Consider removing the CDN/WebTorrent source badge from the card (clutter).
|
||||
- [ ] Run `npm run test:visual` after layout changes; update baselines deliberately.
|
||||
|
||||
|
||||
Reference in new issue
Block a user