thePR0M3TH3AN/bitvid
1
0 Fork 0
mirror of https://github.com/PR0M3TH3AN/bitvid.git synced 2026-11-02 10:52:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #332 from PR0M3TH3AN/codex/fix-main-body-resizing-on-sidebar-change

Browse Source 
Stabilize layout spacing when toggling the sidebar
This commit is contained in:
thePR0M3TH3AN authored and GitHub committed 2025-10-06 20:46:55 -04:00
2 parents 9834fc7d9f c0290b33a7
commit ddf1a560a8
9 files changed
+51 -25
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/iframe_forms/iframe-application-form.html
+3 -1
View File
@@ -4,7 +4,9 @@
<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.23" />
<link rel="stylesheet" href="../../css/style.css?v=2024.10.24" />
<style>
/* Override for form page to match modal field styling */
components/iframe_forms/iframe-bug-fix-form.html
+3 -1
View File
@@ -4,7 +4,9 @@
<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.23" />
<link rel="stylesheet" href="../../css/style.css?v=2024.10.24" />
<style>
/* Override for form page to match modal field styling */
components/iframe_forms/iframe-content-appeals-form.html
+3 -1
View File
@@ -4,7 +4,9 @@
<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.23" />
<link rel="stylesheet" href="../../css/style.css?v=2024.10.24" />
<style>
/* Override for form page to match modal field styling */
components/iframe_forms/iframe-feedback-form.html
+3 -1
View File
@@ -4,7 +4,9 @@
<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.23" />
<link rel="stylesheet" href="../../css/style.css?v=2024.10.24" />
<style>
/* Override for form page to match modal field styling */
components/iframe_forms/iframe-request-form.html
+1 -1
View File
@@ -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.23" />
<link rel="stylesheet" href="../../css/style.css?v=2024.10.24" />
<style>
/* Override for form page to match modal field styling */
config/asset-version.js
+1 -1
View File
@@ -1 +1 @@
export const ASSET_VERSION = "2024.10.23";
export const ASSET_VERSION = "2024.10.24";
css/style.css
+14 -4
View File
@@ -33,6 +33,7 @@
--sidebar-width-collapsed: 4rem;
--sidebar-width: var(--sidebar-width-expanded);
--sidebar-control-size: 2.75rem;
--sidebar-content-gap: 1rem;
}
html {
@@ -1798,11 +1799,20 @@ body.sidebar-open #sidebarOverlay {
}
#app {
margin-left: var(--sidebar-width);
width: calc(100vw - var(--sidebar-width));
max-width: calc(100vw - var(--sidebar-width));
box-sizing: border-box;
transition: margin-left 200ms ease, width 200ms ease;
transition: margin-left 200ms ease, width 200ms ease, max-width 200ms ease;
}
#app[data-sidebar-state="collapsed"] {
margin-left: calc(var(--sidebar-width-collapsed) + var(--sidebar-content-gap));
width: calc(100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap));
max-width: calc(100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap));
}
#app[data-sidebar-state="expanded"] {
margin-left: calc(var(--sidebar-width-expanded) + var(--sidebar-content-gap));
width: calc(100vw - var(--sidebar-width-expanded) - var(--sidebar-content-gap));
max-width: calc(100vw - var(--sidebar-width-expanded) - var(--sidebar-content-gap));
}
body.sidebar-collapsed,
index.html
+19 -15
View File
@@ -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.23" defer></script>
<link href="css/tailwind.generated.css?v=2024.10.23" rel="stylesheet" />
<link href="css/style.css?v=2024.10.23" rel="stylesheet" />
<link href="css/markdown.css?v=2024.10.23" rel="stylesheet" />
<script src="js/tracking.js?v=2024.10.24" defer></script>
<link href="css/tailwind.generated.css?v=2024.10.24" rel="stylesheet" />
<link href="css/style.css?v=2024.10.24" rel="stylesheet" />
<link href="css/markdown.css?v=2024.10.24" rel="stylesheet" />
</head>
<body class="sidebar-collapsed">
<!--
@@ -79,7 +79,11 @@
elements that should animate exactly once on initial paint.
-->
<div id="app" class="px-4 py-8 min-h-screen flex flex-col fade-in">
<div
id="app"
class="px-4 py-8 min-h-screen flex flex-col fade-in"
data-sidebar-state="collapsed"
>
<!-- Header -->
<header class="mb-8 flex items-center w-full">
<!-- Mobile hamburger button (hidden on md+) -->
@@ -211,16 +215,16 @@
<!-- Additional Scripts -->
<!-- Bootstraps nostr-tools before other modules rely on nostrToolsReady -->
<script type="module" src="js/nostrToolsBootstrap.js?v=2024.10.23"></script>
<script type="module" src="js/config.js?v=2024.10.23"></script>
<script type="module" src="js/lists.js?v=2024.10.23"></script>
<script type="module" src="js/accessControl.js?v=2024.10.23"></script>
<script type="module" src="js/webtorrent.js?v=2024.10.23"></script>
<script type="module" src="js/nostr.js?v=2024.10.23"></script>
<script type="module" src="js/viewManager.js?v=2024.10.23"></script>
<script type="module" src="js/bootstrap.js?v=2024.10.23"></script>
<script type="module" src="js/disclaimer.js?v=2024.10.23"></script>
<script type="module" src="js/index.js?v=2024.10.23"></script>
<script type="module" src="js/nostrToolsBootstrap.js?v=2024.10.24"></script>
<script type="module" src="js/config.js?v=2024.10.24"></script>
<script type="module" src="js/lists.js?v=2024.10.24"></script>
<script type="module" src="js/accessControl.js?v=2024.10.24"></script>
<script type="module" src="js/webtorrent.js?v=2024.10.24"></script>
<script type="module" src="js/nostr.js?v=2024.10.24"></script>
<script type="module" src="js/viewManager.js?v=2024.10.24"></script>
<script type="module" src="js/bootstrap.js?v=2024.10.24"></script>
<script type="module" src="js/disclaimer.js?v=2024.10.24"></script>
<script type="module" src="js/index.js?v=2024.10.24"></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>
js/index.js
+4
View File
@@ -238,6 +238,10 @@ async function bootstrapInterface() {
element.style.setProperty("--sidebar-width", nextWidth);
});
if (appShell instanceof HTMLElement) {
appShell.dataset.sidebarState = state;
}
[sidebar, document.body]
.filter((element) => element instanceof HTMLElement)
.forEach((element) => {