mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
Stabilize collapsed sidebar rail
This commit is contained in:
thePR0M3TH3AN committed
1 parent
957a3ae6fa
commit
b3b467755a
10 files changed
+315
-284
No files matched your search
@@ -72,9 +72,9 @@ Document the run in PR descriptions so QA can cross-reference results.
|
||||
* **Sidebar layering:** Keep the fixed sidebar below every modal and overlay. Respect the `--z-sidebar*` tokens so dialogs always render on top of the navigation.
|
||||
* **Static asset cache busting:** The CDN aggressively caches `components/sidebar.html` and CSS/JS bundles. Update `config/asset-version.js` and keep the `?v=` query strings in `index.html` (and iframe form shells) in sync whenever you change sidebar markup, scripts, or styles. The fetch helpers in `js/index.js` already append `cache: "no-store"`; reuse them for new partials so desktop collapses ship immediately without waiting on manual cache clears.
|
||||
* **View partial cache busting:** The `views/*.html` files are served from the same CDN tier and require the asset version suffix as well. `js/viewManager.js` now appends `?v=<ASSET_VERSION>` when loading views—keep that helper in place so layout or styling updates propagate on the first refresh.
|
||||
* **Sidebar overflow styling:** Desktop media queries in `css/style.css` used to force `overflow-x: hidden` on `#sidebar`, which clipped the navigation panel’s drop shadow. When adjusting rail dimensions, update both the base `#sidebar` rule and the desktop override so the gradient card can bleed over the white canvas. `#sidebarContainer` now keeps overflow visible while `.sidebar__inner` handles scrolling; stick with that division when extending the layout.
|
||||
* **Collapsed rail padding:** The collapsed rail keeps icons full-size by pairing reduced padding on `.sidebar__inner`, `.sidebar-panel`, and `.sidebar-nav-link`. Update the trio together so 4 rem still fits the 2.75 rem toggle button and 1.5 rem glyphs without squishing the gradients.
|
||||
* **Collapsed nav width:** Links in the collapsed state must keep `width: 100%` so the icons sit on the gradient card instead of drifting over the page background. If you tweak the sidebar spacing, preserve the explicit width on `.sidebar-nav` and `.sidebar-nav-link`.
|
||||
* **Sidebar overflow styling:** `#sidebar` now owns vertical scrolling with `overflow-y: auto` while keeping `overflow-x: visible` so the gradient panel’s drop shadow can spill onto the page. The nested `.sidebar-scroll` wrapper must remain `overflow: visible`; do not reintroduce hidden overflow on any ancestor or the shadow will clip again.
|
||||
* **Collapsed rail padding:** The collapsed rail keeps icons full-size by pairing reduced padding on `.sidebar__inner` and `.sidebar-panel` with the shared `--sidebar-control-size` (2.75 rem). Update the trio together so the 4 rem rail still fits the circular toggle/dropup buttons without squishing the gradients.
|
||||
* **Collapsed nav width:** Collapsed links rely on `width: var(--sidebar-control-size)` plus `margin-inline: auto` to keep every glyph aligned with the circular toggle and footer trigger. Preserve that sizing or the icons will drift off the gradient panel.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<meta charset="utf-8" />
|
||||
<title>bitvid Whitelist Application Form</title>
|
||||
<!-- Link to your main stylesheet -->
|
||||
<link rel="stylesheet" href="../../css/style.css?v=2024.10.17" />
|
||||
<link rel="stylesheet" href="../../css/style.css?v=2024.10.20" />
|
||||
<style>
|
||||
/* Override for form page to match modal field styling */
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<meta charset="utf-8" />
|
||||
<title>bitvid Bug Report Form</title>
|
||||
<!-- Link to your main stylesheet -->
|
||||
<link rel="stylesheet" href="../../css/style.css?v=2024.10.17" />
|
||||
<link rel="stylesheet" href="../../css/style.css?v=2024.10.20" />
|
||||
<style>
|
||||
/* Override for form page to match modal field styling */
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<meta charset="utf-8" />
|
||||
<title>bitvid Content Appeals Form</title>
|
||||
<!-- Link to your main stylesheet -->
|
||||
<link rel="stylesheet" href="../../css/style.css?v=2024.10.17" />
|
||||
<link rel="stylesheet" href="../../css/style.css?v=2024.10.20" />
|
||||
<style>
|
||||
/* Override for form page to match modal field styling */
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<meta charset="utf-8" />
|
||||
<title>bitvid General Feedback Form</title>
|
||||
<!-- Link to your main stylesheet -->
|
||||
<link rel="stylesheet" href="../../css/style.css?v=2024.10.17" />
|
||||
<link rel="stylesheet" href="../../css/style.css?v=2024.10.20" />
|
||||
<style>
|
||||
/* Override for form page to match modal field styling */
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<meta charset="utf-8" />
|
||||
<title>bitvid Feature Request Form</title>
|
||||
<!-- Link to your main stylesheet -->
|
||||
<link rel="stylesheet" href="../../css/style.css?v=2024.10.17" />
|
||||
<link rel="stylesheet" href="../../css/style.css?v=2024.10.20" />
|
||||
<style>
|
||||
/* Override for form page to match modal field styling */
|
||||
|
||||
|
||||
+246
-244
@@ -5,21 +5,99 @@
|
||||
-->
|
||||
<aside id="sidebar" class="fade-in fade-in-delay-100" data-state="expanded">
|
||||
<div class="sidebar__inner">
|
||||
<!-- Primary navigation -->
|
||||
<section class="sidebar-panel sidebar-panel--primary">
|
||||
<div class="sidebar-panel__header">
|
||||
<div class="sidebar-scroll">
|
||||
<!-- Primary navigation -->
|
||||
<section class="sidebar-panel sidebar-panel--primary">
|
||||
<div class="sidebar-panel__header">
|
||||
<button
|
||||
id="sidebarCollapseToggle"
|
||||
type="button"
|
||||
class="sidebar-collapse-toggle"
|
||||
aria-controls="sidebar"
|
||||
aria-expanded="true"
|
||||
aria-label="Collapse sidebar"
|
||||
title="Collapse sidebar"
|
||||
>
|
||||
<svg
|
||||
data-sidebar-chevron
|
||||
class="sidebar-collapse-toggle__icon sidebar-toggle-icon--rotated"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M10 6l6 6-6 6" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<nav class="sidebar-nav" aria-label="Primary">
|
||||
<a href="#view=most-recent-videos" class="sidebar-nav-link" title="Recent">
|
||||
<img
|
||||
src="assets/svg/recent-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">Recent</span>
|
||||
</a>
|
||||
<a href="#view=explore" class="sidebar-nav-link" title="Explore">
|
||||
<img
|
||||
src="assets/svg/explore-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">Explore</span>
|
||||
</a>
|
||||
<a href="#view=history" class="sidebar-nav-link" title="History">
|
||||
<img
|
||||
src="assets/svg/history-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">History</span>
|
||||
</a>
|
||||
<a
|
||||
id="subscriptionsLink"
|
||||
href="#view=subscriptions"
|
||||
class="sidebar-nav-link hidden"
|
||||
title="Subscriptions"
|
||||
>
|
||||
<img
|
||||
src="assets/svg/subscriptions-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">Subscriptions</span>
|
||||
</a>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<!-- Footer Links Toggle -->
|
||||
<footer class="sidebar-footer" data-footer-state="collapsed">
|
||||
<button
|
||||
id="sidebarCollapseToggle"
|
||||
id="footerDropdownButton"
|
||||
type="button"
|
||||
class="sidebar-collapse-toggle"
|
||||
aria-controls="sidebar"
|
||||
aria-expanded="true"
|
||||
aria-label="Collapse sidebar"
|
||||
title="Collapse sidebar"
|
||||
class="sidebar-dropup-trigger"
|
||||
aria-expanded="false"
|
||||
aria-controls="footerLinksContainer"
|
||||
>
|
||||
<img
|
||||
src="assets/svg/ellipsis.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon sidebar-dropup-trigger__glyph"
|
||||
/>
|
||||
<span id="footerDropdownText" class="sidebar-text">More</span>
|
||||
<svg
|
||||
data-sidebar-chevron
|
||||
class="sidebar-collapse-toggle__icon sidebar-toggle-icon--rotated"
|
||||
id="footerDropdownIcon"
|
||||
class="sidebar-dropup-trigger__chevron"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
@@ -29,243 +107,167 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M10 6l6 6-6 6" />
|
||||
<path d="M6 9l6 6 6-6" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<nav class="sidebar-nav" aria-label="Primary">
|
||||
<a href="#view=most-recent-videos" class="sidebar-nav-link" title="Recent">
|
||||
<img
|
||||
src="assets/svg/recent-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">Recent</span>
|
||||
</a>
|
||||
<a href="#view=explore" class="sidebar-nav-link" title="Explore">
|
||||
<img
|
||||
src="assets/svg/explore-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">Explore</span>
|
||||
</a>
|
||||
<a href="#view=history" class="sidebar-nav-link" title="History">
|
||||
<img
|
||||
src="assets/svg/history-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">History</span>
|
||||
</a>
|
||||
<a
|
||||
id="subscriptionsLink"
|
||||
href="#view=subscriptions"
|
||||
class="sidebar-nav-link hidden"
|
||||
title="Subscriptions"
|
||||
>
|
||||
<img
|
||||
src="assets/svg/subscriptions-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">Subscriptions</span>
|
||||
</a>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<!-- Footer Links Toggle -->
|
||||
<footer class="sidebar-footer" data-footer-state="collapsed">
|
||||
<button
|
||||
id="footerDropdownButton"
|
||||
type="button"
|
||||
class="sidebar-dropup-trigger"
|
||||
aria-expanded="false"
|
||||
aria-controls="footerLinksContainer"
|
||||
>
|
||||
<img
|
||||
src="assets/svg/ellipsis.svg"
|
||||
alt=""
|
||||
<!-- Footer Links Container -->
|
||||
<div
|
||||
id="footerLinksContainer"
|
||||
class="sidebar-dropup-panel"
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon sidebar-dropup-trigger__glyph"
|
||||
/>
|
||||
<span id="footerDropdownText" class="sidebar-text">More</span>
|
||||
<svg
|
||||
id="footerDropdownIcon"
|
||||
class="sidebar-dropup-trigger__chevron"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
data-state="collapsed"
|
||||
>
|
||||
<path d="M6 9l6 6 6-6" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Footer Links Container -->
|
||||
<div
|
||||
id="footerLinksContainer"
|
||||
class="sidebar-dropup-panel"
|
||||
aria-hidden="true"
|
||||
data-state="collapsed"
|
||||
>
|
||||
<nav class="sidebar-dropup-panel__inner" aria-label="Secondary">
|
||||
<a href="#view=about" class="sidebar-nav-link sidebar-nav-link--sub" title="About">
|
||||
<img
|
||||
src="assets/svg/about-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">About</span>
|
||||
</a>
|
||||
<a
|
||||
href="#view=community-guidelines"
|
||||
class="sidebar-nav-link sidebar-nav-link--sub"
|
||||
title="Community Guidelines"
|
||||
>
|
||||
<img
|
||||
src="assets/svg/guidelines-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">Guidelines</span>
|
||||
</a>
|
||||
<a
|
||||
href="#view=getting-started"
|
||||
class="sidebar-nav-link sidebar-nav-link--sub"
|
||||
title="Getting Started"
|
||||
>
|
||||
<img
|
||||
src="assets/svg/getting-started-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">Getting Started</span>
|
||||
</a>
|
||||
<a href="#view=roadmap" class="sidebar-nav-link sidebar-nav-link--sub" title="Roadmap">
|
||||
<img
|
||||
src="assets/svg/roadmap-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">Roadmap</span>
|
||||
</a>
|
||||
<a href="#view=blog" class="sidebar-nav-link sidebar-nav-link--sub" title="Blog">
|
||||
<img
|
||||
src="assets/svg/blog-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">Blog</span>
|
||||
</a>
|
||||
<a
|
||||
href="https://primal.net/p/npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="sidebar-nav-link sidebar-nav-link--sub"
|
||||
title="Nostr"
|
||||
>
|
||||
<img
|
||||
src="assets/svg/nostr-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">Nostr</span>
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/PR0M3TH3AN/bitvid"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="sidebar-nav-link sidebar-nav-link--sub"
|
||||
title="GitHub"
|
||||
>
|
||||
<img
|
||||
src="assets/svg/github-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">GitHub</span>
|
||||
</a>
|
||||
<a
|
||||
href="torrent/beacon.html"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="sidebar-nav-link sidebar-nav-link--sub"
|
||||
title="βeacon"
|
||||
>
|
||||
<img
|
||||
src="assets/svg/beacon-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">βeacon</span>
|
||||
</a>
|
||||
<a
|
||||
href="https://beta.bitvid.network/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="sidebar-nav-link sidebar-nav-link--sub"
|
||||
title="Beta"
|
||||
>
|
||||
<img
|
||||
src="assets/svg/beta-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">Beta</span>
|
||||
</a>
|
||||
<a href="#view=links" class="sidebar-nav-link sidebar-nav-link--sub" title="Links">
|
||||
<img
|
||||
src="assets/svg/links-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">Links</span>
|
||||
</a>
|
||||
<a href="#view=ipns" class="sidebar-nav-link sidebar-nav-link--sub" title="IPNS">
|
||||
<img
|
||||
src="assets/svg/ipns-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">IPNS</span>
|
||||
</a>
|
||||
<a
|
||||
href="https://bitvid.network/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="sidebar-nav-link sidebar-nav-link--sub"
|
||||
title="DNS"
|
||||
>
|
||||
<img
|
||||
src="assets/svg/dns-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">DNS</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
<nav class="sidebar-dropup-panel__inner" aria-label="Secondary">
|
||||
<a href="#view=about" class="sidebar-nav-link sidebar-nav-link--sub" title="About">
|
||||
<img
|
||||
src="assets/svg/about-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">About</span>
|
||||
</a>
|
||||
<a
|
||||
href="#view=community-guidelines"
|
||||
class="sidebar-nav-link sidebar-nav-link--sub"
|
||||
title="Community Guidelines"
|
||||
>
|
||||
<img
|
||||
src="assets/svg/guidelines-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">Guidelines</span>
|
||||
</a>
|
||||
<a
|
||||
href="#view=getting-started"
|
||||
class="sidebar-nav-link sidebar-nav-link--sub"
|
||||
title="Getting Started"
|
||||
>
|
||||
<img
|
||||
src="assets/svg/getting-started-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">Getting Started</span>
|
||||
</a>
|
||||
<a href="#view=roadmap" class="sidebar-nav-link sidebar-nav-link--sub" title="Roadmap">
|
||||
<img
|
||||
src="assets/svg/roadmap-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">Roadmap</span>
|
||||
</a>
|
||||
<a href="#view=blog" class="sidebar-nav-link sidebar-nav-link--sub" title="Blog">
|
||||
<img
|
||||
src="assets/svg/blog-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">Blog</span>
|
||||
</a>
|
||||
<a
|
||||
href="https://primal.net/p/npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="sidebar-nav-link sidebar-nav-link--sub"
|
||||
title="Nostr"
|
||||
>
|
||||
<img
|
||||
src="assets/svg/nostr-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">Nostr</span>
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/PR0M3TH3AN/bitvid"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="sidebar-nav-link sidebar-nav-link--sub"
|
||||
title="GitHub"
|
||||
>
|
||||
<img
|
||||
src="assets/svg/github-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">GitHub</span>
|
||||
</a>
|
||||
<a
|
||||
href="torrent/beacon.html"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="sidebar-nav-link sidebar-nav-link--sub"
|
||||
title="βeacon"
|
||||
>
|
||||
<img
|
||||
src="assets/svg/beacon-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">βeacon</span>
|
||||
</a>
|
||||
<a
|
||||
href="https://beta.bitvid.network/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="sidebar-nav-link sidebar-nav-link--sub"
|
||||
title="Beta"
|
||||
>
|
||||
<img
|
||||
src="assets/svg/beta-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">Beta</span>
|
||||
</a>
|
||||
<a href="#view=links" class="sidebar-nav-link sidebar-nav-link--sub" title="Links">
|
||||
<img
|
||||
src="assets/svg/links-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">Links</span>
|
||||
</a>
|
||||
<a href="#view=ipns" class="sidebar-nav-link sidebar-nav-link--sub" title="IPNS">
|
||||
<img
|
||||
src="assets/svg/ipns-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">IPNS</span>
|
||||
</a>
|
||||
<a
|
||||
href="https://bitvid.network/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="sidebar-nav-link sidebar-nav-link--sub"
|
||||
title="DNS"
|
||||
>
|
||||
<img
|
||||
src="assets/svg/dns-icon.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="sidebar-icon"
|
||||
/>
|
||||
<span class="sidebar-text">DNS</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -1 +1 @@
|
||||
export const ASSET_VERSION = "2024.10.17";
|
||||
export const ASSET_VERSION = "2024.10.20";
|
||||
+46
-17
@@ -32,6 +32,7 @@
|
||||
--sidebar-width-expanded: 16rem;
|
||||
--sidebar-width-collapsed: 4rem;
|
||||
--sidebar-width: var(--sidebar-width-expanded);
|
||||
--sidebar-control-size: 2.75rem;
|
||||
}
|
||||
|
||||
html {
|
||||
@@ -1483,7 +1484,11 @@ footer a:hover {
|
||||
height: 100dvh;
|
||||
background-color: transparent;
|
||||
color: var(--color-text);
|
||||
overflow: visible;
|
||||
overflow-x: visible;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior: contain;
|
||||
scrollbar-gutter: stable both-edges;
|
||||
transition: width 200ms ease, transform 0.3s ease, box-shadow 0.3s ease;
|
||||
/* Keep below modal stacks so dialogs overlay the drawer. */
|
||||
z-index: var(--z-sidebar);
|
||||
@@ -1493,16 +1498,30 @@ footer a:hover {
|
||||
#sidebar .sidebar__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
height: 100%;
|
||||
padding: 1.5rem 1.25rem 1.75rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow-x: visible;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior: contain;
|
||||
scrollbar-gutter: stable both-edges;
|
||||
/*
|
||||
Allow the gradient panel shadow to breathe outside the rail while a nested
|
||||
scroll container handles overflow.
|
||||
*/
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/*
|
||||
The scroll wrapper keeps nav + footer together while leaving overflow
|
||||
visible so the gradient card shadow is never clipped.
|
||||
*/
|
||||
.sidebar-scroll {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
flex: 1 1 auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.sidebar-panel {
|
||||
@@ -1517,6 +1536,9 @@ footer a:hover {
|
||||
padding: 1.25rem 1rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.sidebar-panel--primary {
|
||||
@@ -1534,8 +1556,8 @@ footer a:hover {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
width: var(--sidebar-control-size);
|
||||
height: var(--sidebar-control-size);
|
||||
border-radius: 9999px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.2);
|
||||
background: rgba(148, 163, 184, 0.08);
|
||||
@@ -1577,6 +1599,7 @@ footer a:hover {
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.625rem 0.875rem;
|
||||
min-height: var(--sidebar-control-size);
|
||||
border-radius: 0.875rem;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
@@ -1618,6 +1641,7 @@ footer a:hover {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-top: auto;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -1629,6 +1653,7 @@ footer a:hover {
|
||||
gap: 0.75rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem 0.875rem;
|
||||
min-height: var(--sidebar-control-size);
|
||||
border-radius: 0.875rem;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
background: rgba(30, 41, 59, 0.85);
|
||||
@@ -1793,8 +1818,10 @@ body.sidebar-open #sidebarOverlay {
|
||||
Keep icons centered in the collapsed rail without resizing them.
|
||||
*/
|
||||
justify-content: center;
|
||||
padding-inline: 0.5rem;
|
||||
min-height: 2.75rem;
|
||||
width: var(--sidebar-control-size);
|
||||
padding: 0;
|
||||
margin-inline: auto;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
body.sidebar-expanded #sidebar .sidebar-nav-link,
|
||||
@@ -1811,18 +1838,19 @@ body.sidebar-open #sidebarOverlay {
|
||||
#sidebar.sidebar-collapsed .sidebar__inner {
|
||||
/*
|
||||
Keep enough breathing room for the panel shadow while widening the
|
||||
interior track so 2.75rem controls stay perfectly round.
|
||||
interior track so var(--sidebar-control-size) controls stay perfectly
|
||||
round.
|
||||
*/
|
||||
padding-inline: 0.5rem;
|
||||
padding-inline: 0.25rem;
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar-panel,
|
||||
#sidebar.sidebar-collapsed .sidebar-panel {
|
||||
/*
|
||||
Mirror the outer adjustment so the gradient card retains its rounded
|
||||
edges without squeezing the icon rail.
|
||||
edges without squeezing the icon rail or clipping the control diameter.
|
||||
*/
|
||||
padding-inline: 0.75rem;
|
||||
padding-inline: 0.375rem;
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .sidebar-panel__header,
|
||||
@@ -1850,9 +1878,10 @@ body.sidebar-open #sidebarOverlay {
|
||||
padding consistent so the glyph does not scale between states.
|
||||
*/
|
||||
justify-content: center;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
width: var(--sidebar-control-size);
|
||||
height: var(--sidebar-control-size);
|
||||
padding: 0;
|
||||
margin-inline: auto;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
|
||||
+14
-14
@@ -50,10 +50,10 @@
|
||||
so browsers pick up the latest sidebar markup and styling without
|
||||
hard-refreshing around CDN caches.
|
||||
-->
|
||||
<script src="js/tracking.js?v=2024.10.17" defer></script>
|
||||
<link href="css/tailwind.generated.css?v=2024.10.17" rel="stylesheet" />
|
||||
<link href="css/style.css?v=2024.10.17" rel="stylesheet" />
|
||||
<link href="css/markdown.css?v=2024.10.17" rel="stylesheet" />
|
||||
<script src="js/tracking.js?v=2024.10.20" defer></script>
|
||||
<link href="css/tailwind.generated.css?v=2024.10.20" rel="stylesheet" />
|
||||
<link href="css/style.css?v=2024.10.20" rel="stylesheet" />
|
||||
<link href="css/markdown.css?v=2024.10.20" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
@@ -211,16 +211,16 @@
|
||||
|
||||
<!-- Additional Scripts -->
|
||||
<!-- Bootstraps nostr-tools before other modules rely on nostrToolsReady -->
|
||||
<script type="module" src="js/nostrToolsBootstrap.js?v=2024.10.17"></script>
|
||||
<script type="module" src="js/config.js?v=2024.10.17"></script>
|
||||
<script type="module" src="js/lists.js?v=2024.10.17"></script>
|
||||
<script type="module" src="js/accessControl.js?v=2024.10.17"></script>
|
||||
<script type="module" src="js/webtorrent.js?v=2024.10.17"></script>
|
||||
<script type="module" src="js/nostr.js?v=2024.10.17"></script>
|
||||
<script type="module" src="js/viewManager.js?v=2024.10.17"></script>
|
||||
<script type="module" src="js/bootstrap.js?v=2024.10.17"></script>
|
||||
<script type="module" src="js/disclaimer.js?v=2024.10.17"></script>
|
||||
<script type="module" src="js/index.js?v=2024.10.17"></script>
|
||||
<script type="module" src="js/nostrToolsBootstrap.js?v=2024.10.20"></script>
|
||||
<script type="module" src="js/config.js?v=2024.10.20"></script>
|
||||
<script type="module" src="js/lists.js?v=2024.10.20"></script>
|
||||
<script type="module" src="js/accessControl.js?v=2024.10.20"></script>
|
||||
<script type="module" src="js/webtorrent.js?v=2024.10.20"></script>
|
||||
<script type="module" src="js/nostr.js?v=2024.10.20"></script>
|
||||
<script type="module" src="js/viewManager.js?v=2024.10.20"></script>
|
||||
<script type="module" src="js/bootstrap.js?v=2024.10.20"></script>
|
||||
<script type="module" src="js/disclaimer.js?v=2024.10.20"></script>
|
||||
<script type="module" src="js/index.js?v=2024.10.20"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
</body>
|
||||
|
||||
Reference in new issue
Block a user