From 27fe0a34d5c788c9bf1f1d909460e9891dc05306 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Tue, 4 Feb 2025 13:20:37 -0800 Subject: [PATCH 1/2] fix: added scroller to sidebar --- assets/css/v2/style.css | 82 +++++++++++++++++++++++++------- layouts/partials/sidebar-v2.html | 50 +++++++++---------- 2 files changed, 92 insertions(+), 40 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index ababcf23..b757e000 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -20,11 +20,12 @@ --color-footer-text: #E2E2E2; --color-product-title: #8D8D8D; - --sidebar-margin: 48px; + --sidebar-margin: 24px; --sidebar-line-box-side-length: 8px; --sidebar-line-box-top: 6px; --sidebar-line-box-left: 12px; --sidebar-width: 24rem; + --sidebar-line-width: 11.5px; --side-gutter-width: 20rem; --text-content-width-iphone-13: 30rem; --text-content-width-mbp-14: 40rem; @@ -400,8 +401,19 @@ nav { font-size: 1rem; } -.sidebar .sidebar-navigation { +/* Sidebar scroller */ +.sidebar .scrollbar-container { width: 100%; + max-height: calc(100vh - 50px); + overflow: hidden; +} + +.sidebar .scrollbar-container:hover { + overflow: auto; +} + + +.sidebar .sidebar-navigation { margin-left: var(--sidebar-margin); } @@ -435,10 +447,12 @@ nav { position: relative; } +.sidebar .sidebar-navigation .parent-box.opened, .sidebar .sidebar-navigation .box.opened { display: none; } +.toggle-checkbox:checked ~ .collapsible-header .parent-box.expand, .toggle-checkbox:checked ~ .collapsible-header .box.expand { display: none; } @@ -447,6 +461,10 @@ nav { display: block; } +.toggle-checkbox:checked ~ .collapsible-header .parent-box.opened { + display: inline-block; +} + .toggle-checkbox:checked ~ .collapsible-header .box.opened { display: block; } @@ -457,8 +475,8 @@ nav { position: absolute; border-left: black 1px solid; left: -8.5px; - top: -21.5px; - height: calc(100% + 12.5px); + top: -22.5px; + height: calc(100% + 13.5px); } /* Every other Sidebar Partial Horizontal Lines */ @@ -471,7 +489,7 @@ nav { position: absolute; border-top: black 1px solid; left: -11.5px; - width: 11.5px; + width: var(--sidebar-line-width); top: 50%; } @@ -480,7 +498,7 @@ nav { position: absolute; border-top: black 1px solid; left: -12.5px; - width: 11.5px; + width: var(--sidebar-line-width); top: 50%; } @@ -489,7 +507,7 @@ nav { position: absolute; border-top: black 1px solid; left: -11.5px; - width: 11.5px; + width: var(--sidebar-line-width); top: 50%; } @@ -501,6 +519,16 @@ nav { margin-top: 16px; } +.sidebar .sidebar-navigation ul li .parent-box-link { + content: ''; + background-color: black; + position: absolute; + width: 1px; + height: var(--sidebar-line-box-side-length); + margin-top: var(--sidebar-line-box-top); + left: calc(0px - var(--sidebar-line-box-left)); +} + .sidebar .sidebar-navigation ul li .box-link { content: ''; background-color: black; @@ -511,6 +539,16 @@ nav { left: var(--sidebar-line-box-left); } +.sidebar .sidebar-navigation ul li .parent-box { + content: ''; + display: inline-block; + width: var(--sidebar-line-box-side-length); + height: var(--sidebar-line-box-side-length); + vertical-align: middle; + margin-left: -12px; + margin-top: -4px; +} + .sidebar .sidebar-navigation ul li .box { content: ''; position: absolute; @@ -544,24 +582,36 @@ nav { } /* First Sidebar Nav Vertical Line */ -.sidebar .sidebar-navigation .parent-collapsible-content::before{ +.sidebar .sidebar-navigation .parent-collapsible-content { + position: relative; +} + +.sidebar .sidebar-navigation .parent-collapsible-content::before { content: ''; position: absolute; border-left: black 1px solid; - left: 0; - bottom: 1.55rem; - height: calc(100% - 5.65rem); + left: -24px; + top: 10px; + height: calc(100% - 9px - 10px); } /* First Sidebar Nav Horizontal Lines */ -.sidebar .sidebar-navigation .parent-collapsible-content .parent-collapsible-content-item::before, -.sidebar .sidebar-navigation .parent-collapsible-content .parent-collapsible-content-item::after { +.sidebar .sidebar-navigation .parent-collapsible-content .parent-box::before { + content: ''; + display: block; + border-top: black 1px solid; + margin-left: -12px; + margin-top: 50%; + width: var(--sidebar-line-width); +} + +.parent-collapsible-content .parent-box-link::after { content: ''; position: absolute; border-top: black 1px solid; - left: 0; - margin-top: 0.6rem; - width: 0.75rem; + left: -11.5px; + width: var(--sidebar-line-width); + top: 50%; } .row { diff --git a/layouts/partials/sidebar-v2.html b/layouts/partials/sidebar-v2.html index d903c09a..bb47473b 100644 --- a/layouts/partials/sidebar-v2.html +++ b/layouts/partials/sidebar-v2.html @@ -52,29 +52,31 @@ {{ end }} -
- +
+ \ No newline at end of file From 32699926272eee309110128cd1419eb8994c6c44 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Tue, 4 Feb 2025 16:24:44 -0800 Subject: [PATCH 2/2] minor improvements --- assets/css/v2/style.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index b757e000..e029ea9b 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -351,6 +351,7 @@ nav { width: 24rem; position: sticky; top: 0; + height: 100vh; } .sidebar .product-selector-button { @@ -367,7 +368,7 @@ nav { } .sidebar .product-selector-button .selector-icon { - height:24px; + height: 24px; width: 24px; } @@ -404,15 +405,15 @@ nav { /* Sidebar scroller */ .sidebar .scrollbar-container { width: 100%; - max-height: calc(100vh - 50px); + max-height: 100vh; overflow: hidden; + scrollbar-gutter: stable; } .sidebar .scrollbar-container:hover { overflow: auto; } - .sidebar .sidebar-navigation { margin-left: var(--sidebar-margin); } @@ -422,7 +423,6 @@ nav { margin-left: 0; padding-left: 0; list-style-type: none; - padding-right: 1.5rem; } .sidebar ul :not(.sidebar-navigation) ul {