From 895bfa1933ec8cbf70c10704a5254099f8f9cde5 Mon Sep 17 00:00:00 2001 From: Rudra2637 Date: Fri, 15 May 2026 01:18:39 +0530 Subject: [PATCH 1/4] feat(layouts): add resizable side panels with localStorage persistence Signed-off-by: Rudra2637 --- assets/js/resizable-panels.js | 259 +++++++++++++++++++++++++++++ assets/scss/_resizable-panels.scss | 138 +++++++++++++++ assets/scss/_styles_project.scss | 1 + layouts/partials/scripts.html | 16 ++ 4 files changed, 414 insertions(+) create mode 100644 assets/js/resizable-panels.js create mode 100644 assets/scss/_resizable-panels.scss create mode 100644 layouts/partials/scripts.html diff --git a/assets/js/resizable-panels.js b/assets/js/resizable-panels.js new file mode 100644 index 0000000000..388e12c0b7 --- /dev/null +++ b/assets/js/resizable-panels.js @@ -0,0 +1,259 @@ +/** + * Resizable Panels Feature + * Allows users to adjust the width of side panels (left sidebar and right TOC) + * Preferences are saved to localStorage and restored on page load + * Includes reset functionality to restore default widths + */ + +(function() { + 'use strict'; + + const STORAGE_KEY = 'layer5-docs-panel-widths'; + const DEFAULT_WIDTHS = { + sidebar: 2, // col-xl-2 = ~16.66% + toc: 2, // col-xl-2 = ~16.66% + main: 8 // col-xl-8 = ~66.66% + }; + + // CSS class shortcuts for Bootstrap grid columns + const COL_CLASSES = { + 'col-1': 8.33, + 'col-2': 16.66, + 'col-3': 25, + 'col-4': 33.33, + 'col-5': 41.66, + 'col-6': 50, + 'col-7': 58.33, + 'col-8': 66.66, + 'col-9': 75, + 'col-10': 83.33, + 'col-11': 91.66, + 'col-12': 100 + }; + + class ResizablePanels { + constructor() { + this.sidebar = document.querySelector('.td-sidebar'); + this.toc = document.querySelector('.td-sidebar-toc'); + this.main = document.querySelector('main[role="main"]'); + this.row = document.querySelector('.row.flex-xl-nowrap'); + + if (!this.row || !this.sidebar || !this.main) { + console.warn('Resizable panels: Required elements not found'); + return; + } + + this.isResizing = false; + this.currentResizeTarget = null; + this.startX = 0; + this.startWidth = 0; + + this.init(); + } + + init() { + // Load saved widths from localStorage + this.loadSavedWidths(); + + // Create resize handles + this.createResizeHandles(); + + // Add event listeners + this.addEventListeners(); + + // Add reset button + this.addResetButton(); + } + + loadSavedWidths() { + try { + const saved = localStorage.getItem(STORAGE_KEY); + if (saved) { + const widths = JSON.parse(saved); + this.applyWidths(widths); + } + } catch (error) { + console.error('Error loading saved panel widths:', error); + } + } + + createResizeHandles() { + // Create resize handle between sidebar and main content + const sidebarHandle = document.createElement('div'); + sidebarHandle.className = 'resizable-panel-handle resizable-panel-handle--right'; + sidebarHandle.setAttribute('data-resize-target', 'sidebar'); + sidebarHandle.setAttribute('title', 'Drag to resize sidebar'); + this.sidebar.appendChild(sidebarHandle); + + // Create resize handle for TOC (if it exists) + if (this.toc) { + const tocHandle = document.createElement('div'); + tocHandle.className = 'resizable-panel-handle resizable-panel-handle--left'; + tocHandle.setAttribute('data-resize-target', 'toc'); + tocHandle.setAttribute('title', 'Drag to resize table of contents'); + this.toc.appendChild(tocHandle); + } + } + + addEventListeners() { + document.addEventListener('mousedown', (e) => this.onMouseDown(e)); + document.addEventListener('mousemove', (e) => this.onMouseMove(e)); + document.addEventListener('mouseup', (e) => this.onMouseUp(e)); + } + + onMouseDown(e) { + if (!e.target.classList.contains('resizable-panel-handle')) { + return; + } + + this.isResizing = true; + this.currentResizeTarget = e.target.getAttribute('data-resize-target'); + this.startX = e.clientX; + + // Store current widths for delta calculation + this.startWidths = this.getCurrentWidths(); + + // Add active state + e.target.classList.add('resizable-panel-handle--active'); + document.body.style.userSelect = 'none'; + document.body.style.cursor = 'col-resize'; + } + + onMouseMove(e) { + if (!this.isResizing) return; + + const delta = e.clientX - this.startX; + const adjustment = delta / window.innerWidth; // Convert pixels to percentage-like ratio + + let newWidths = { ...this.startWidths }; + + if (this.currentResizeTarget === 'sidebar') { + // Resizing left sidebar + const sidebarPercent = (this.startWidths.sidebar * 100) / 12; // Convert col units to percentage + const mainPercent = (this.startWidths.main * 100) / 12; + + const newSidebarPercent = sidebarPercent + (adjustment * 100); + const newMainPercent = mainPercent - (adjustment * 100); + + // Constrain widths: min 1 col, max 5 cols for sidebar; min 4 cols for main + if (newSidebarPercent >= 8.33 && newSidebarPercent <= 41.66 && newMainPercent >= 33.33) { + newWidths.sidebar = Math.round((newSidebarPercent / 100) * 12); + newWidths.main = Math.round((newMainPercent / 100) * 12); + } + } else if (this.currentResizeTarget === 'toc') { + // Resizing right TOC panel + const tocPercent = (this.startWidths.toc * 100) / 12; + const mainPercent = (this.startWidths.main * 100) / 12; + + const newTocPercent = tocPercent - (adjustment * 100); + const newMainPercent = mainPercent + (adjustment * 100); + + // Constrain widths: min 1 col, max 5 cols for toc; min 4 cols for main + if (newTocPercent >= 8.33 && newTocPercent <= 41.66 && newMainPercent >= 33.33) { + newWidths.toc = Math.round((newTocPercent / 100) * 12); + newWidths.main = Math.round((newMainPercent / 100) * 12); + } + } + + this.applyWidths(newWidths); + } + + onMouseUp(e) { + if (!this.isResizing) return; + + this.isResizing = false; + const handle = document.querySelector('.resizable-panel-handle--active'); + if (handle) { + handle.classList.remove('resizable-panel-handle--active'); + } + + document.body.style.userSelect = ''; + document.body.style.cursor = ''; + + // Save widths to localStorage + this.savePanelWidths(); + } + + applyWidths(widths) { + const { sidebar, toc, main } = widths; + + // Update sidebar + this.removeBootstrapColClasses(this.sidebar); + this.sidebar.classList.add(`col-xl-${sidebar}`); + + // Update main + this.removeBootstrapColClasses(this.main); + this.main.classList.add(`col-xl-${main}`); + + // Update TOC if it exists + if (this.toc) { + this.removeBootstrapColClasses(this.toc); + this.toc.classList.add(`col-xl-${toc}`); + } + } + + getCurrentWidths() { + const getColNumber = (element) => { + const classes = element.className.split(' '); + const colClass = classes.find(c => c.match(/col-xl-\d+/)); + return colClass ? parseInt(colClass.split('-')[2]) : null; + }; + + return { + sidebar: getColNumber(this.sidebar) || DEFAULT_WIDTHS.sidebar, + toc: this.toc ? (getColNumber(this.toc) || DEFAULT_WIDTHS.toc) : DEFAULT_WIDTHS.toc, + main: getColNumber(this.main) || DEFAULT_WIDTHS.main + }; + } + + removeBootstrapColClasses(element) { + const classes = element.className.split(' ').filter(c => !c.match(/col-xl-\d+/)); + element.className = classes.join(' ').trim(); + } + + savePanelWidths() { + try { + const widths = this.getCurrentWidths(); + localStorage.setItem(STORAGE_KEY, JSON.stringify(widths)); + } catch (error) { + console.error('Error saving panel widths:', error); + } + } + + addResetButton() { + // Find the feature-info-container or page-header to add reset button + const pageHeader = document.querySelector('.page-header'); + if (!pageHeader) return; + + const resetButton = document.createElement('button'); + resetButton.id = 'reset-panel-widths'; + resetButton.className = 'btn btn-sm btn-outline-secondary ms-2'; + resetButton.innerHTML = ' Reset Layout'; + resetButton.setAttribute('title', 'Reset panel widths to default'); + + resetButton.addEventListener('click', () => this.resetPanelWidths()); + + // Find a good place to insert the button + const featureContainer = pageHeader.querySelector('.feature-info-container'); + if (featureContainer) { + featureContainer.insertAdjacentElement('beforeend', resetButton); + } else { + pageHeader.insertAdjacentElement('beforeend', resetButton); + } + } + + resetPanelWidths() { + this.applyWidths(DEFAULT_WIDTHS); + this.savePanelWidths(); + } + } + + // Initialize when DOM is ready + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', () => { + new ResizablePanels(); + }); + } else { + new ResizablePanels(); + } +})(); diff --git a/assets/scss/_resizable-panels.scss b/assets/scss/_resizable-panels.scss new file mode 100644 index 0000000000..e3248d7856 --- /dev/null +++ b/assets/scss/_resizable-panels.scss @@ -0,0 +1,138 @@ +/** + * Resizable Panels Styling + * Styles for the resize handles and drag interactions + */ + +// Resize handle styling +.resizable-panel-handle { + position: absolute; + background-color: transparent; + transition: background-color 0.2s ease; + z-index: 100; + + &--right { + // Right edge handle (between sidebar and main) + right: -3px; + top: 0; + bottom: 0; + width: 6px; + cursor: col-resize; + + &:hover, + &--active { + background-color: rgba(0, 211, 169, 0.3); + + &::after { + opacity: 1; + } + } + + &::after { + content: ''; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + width: 2px; + height: 40px; + background-color: #00d3a9; + opacity: 0; + transition: opacity 0.2s ease; + border-radius: 1px; + } + } + + &--left { + // Left edge handle (between main and TOC) + left: -3px; + top: 0; + bottom: 0; + width: 6px; + cursor: col-resize; + + &:hover, + &--active { + background-color: rgba(0, 211, 169, 0.3); + + &::after { + opacity: 1; + } + } + + &::after { + content: ''; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 2px; + height: 40px; + background-color: #00d3a9; + opacity: 0; + transition: opacity 0.2s ease; + border-radius: 1px; + } + } + + &--active { + background-color: rgba(0, 211, 169, 0.5); + } +} + +// Reset button styling +#reset-panel-widths { + white-space: nowrap; + font-size: 0.875rem; + + i { + margin-right: 0.25rem; + } + + &:hover { + background-color: #00d3a9; + color: #fff; + } +} + +// Make panels relatively positioned for absolute handle positioning +.td-sidebar, +.td-sidebar-toc { + position: relative; +} + +// Smooth transitions for width changes +.td-sidebar, +.td-sidebar-toc, +main[role="main"] { + transition: flex: 0.3s ease; +} + +// Ensure row is flex container for proper layout +.row.flex-xl-nowrap { + display: flex; + flex-wrap: nowrap; + + > aside, + > main { + overflow-x: hidden; + } +} + +// Mobile/Tablet adjustments - disable resize handles on smaller screens +@media (max-width: 1199.98px) { + .resizable-panel-handle { + display: none; + } + + #reset-panel-widths { + display: none; + } +} + +// Print styles - hide resize handles +@media print { + .resizable-panel-handle, + #reset-panel-widths { + display: none !important; + } +} diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 00ca1b8770..84a003f563 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -15,6 +15,7 @@ @import "elements_project"; @import "summary.scss"; @import "_kanvas-corner-popup.scss"; +@import "_resizable-panels.scss"; .navbar-dark { min-height: 5rem; diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html new file mode 100644 index 0000000000..409b2634f5 --- /dev/null +++ b/layouts/partials/scripts.html @@ -0,0 +1,16 @@ + + +{{ $kanvasTransition := resources.Get "js/kanvas-architectural-transition.js" -}} +{{ if $kanvasTransition }} + +{{ end -}} + +{{ $kanvasPopup := resources.Get "js/kanvas-corner-popup.js" -}} +{{ if $kanvasPopup }} + +{{ end -}} + +{{ $offlineSearch := resources.Get "js/offline-search.js" -}} +{{ if $offlineSearch }} + +{{ end -}} From 53e9296bafa5d24eef6dc912a287ca7b1cab2a7a Mon Sep 17 00:00:00 2001 From: Rudra2637 Date: Fri, 15 May 2026 01:29:23 +0530 Subject: [PATCH 2/4] fix(scss): correct transition property syntax in resizable-panels Signed-off-by: Rudra2637 --- assets/scss/_resizable-panels.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/scss/_resizable-panels.scss b/assets/scss/_resizable-panels.scss index e3248d7856..ae3e6167d5 100644 --- a/assets/scss/_resizable-panels.scss +++ b/assets/scss/_resizable-panels.scss @@ -104,7 +104,7 @@ .td-sidebar, .td-sidebar-toc, main[role="main"] { - transition: flex: 0.3s ease; + transition: flex-basis 0.3s ease; } // Ensure row is flex container for proper layout From 8dfa71e4ba2a389e6a0d6972bd762d4a7f3378bc Mon Sep 17 00:00:00 2001 From: Rudra2637 Date: Fri, 15 May 2026 10:10:02 +0530 Subject: [PATCH 3/4] fix(ui): add bottom padding to sidebar for better spacing Signed-off-by: Rudra2637 --- assets/scss/_resizable-panels.scss | 33 +++++++++++++++++++----------- 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/assets/scss/_resizable-panels.scss b/assets/scss/_resizable-panels.scss index ae3e6167d5..3311227f9a 100644 --- a/assets/scss/_resizable-panels.scss +++ b/assets/scss/_resizable-panels.scss @@ -17,10 +17,11 @@ bottom: 0; width: 6px; cursor: col-resize; + background-color: rgba(0, 211, 169, 0.15); &:hover, &--active { - background-color: rgba(0, 211, 169, 0.3); + background-color: rgba(0, 211, 169, 0.4); &::after { opacity: 1; @@ -30,15 +31,16 @@ &::after { content: ''; position: absolute; - right: 0; + right: 1px; top: 50%; transform: translateY(-50%); - width: 2px; - height: 40px; + width: 3px; + height: 50px; background-color: #00d3a9; - opacity: 0; + opacity: 0.3; transition: opacity 0.2s ease; - border-radius: 1px; + border-radius: 2px; + box-shadow: 0 0 4px rgba(0, 211, 169, 0.5); } } @@ -49,10 +51,11 @@ bottom: 0; width: 6px; cursor: col-resize; + background-color: rgba(0, 211, 169, 0.15); &:hover, &--active { - background-color: rgba(0, 211, 169, 0.3); + background-color: rgba(0, 211, 169, 0.4); &::after { opacity: 1; @@ -62,15 +65,16 @@ &::after { content: ''; position: absolute; - left: 0; + left: 1px; top: 50%; transform: translateY(-50%); - width: 2px; - height: 40px; + width: 3px; + height: 50px; background-color: #00d3a9; - opacity: 0; + opacity: 0.3; transition: opacity 0.2s ease; - border-radius: 1px; + border-radius: 2px; + box-shadow: 0 0 4px rgba(0, 211, 169, 0.5); } } @@ -100,6 +104,11 @@ position: relative; } +// Ensure sidebar nav has proper scrolling with resizable panels +.td-sidebar-nav { + padding-bottom: 2rem; +} + // Smooth transitions for width changes .td-sidebar, .td-sidebar-toc, From a7040abbfd42409b0bfd43df3083d0264654b220 Mon Sep 17 00:00:00 2001 From: Rudra2637 Date: Fri, 15 May 2026 23:05:51 +0530 Subject: [PATCH 4/4] fix(sidebar): adjust section title spacing Signed-off-by: Rudra2637 --- assets/js/resizable-panels.js | 259 ----------------------------- assets/scss/_resizable-panels.scss | 147 ---------------- assets/scss/_styles_project.scss | 2 +- layouts/partials/scripts.html | 16 -- 4 files changed, 1 insertion(+), 423 deletions(-) delete mode 100644 assets/js/resizable-panels.js delete mode 100644 assets/scss/_resizable-panels.scss delete mode 100644 layouts/partials/scripts.html diff --git a/assets/js/resizable-panels.js b/assets/js/resizable-panels.js deleted file mode 100644 index 388e12c0b7..0000000000 --- a/assets/js/resizable-panels.js +++ /dev/null @@ -1,259 +0,0 @@ -/** - * Resizable Panels Feature - * Allows users to adjust the width of side panels (left sidebar and right TOC) - * Preferences are saved to localStorage and restored on page load - * Includes reset functionality to restore default widths - */ - -(function() { - 'use strict'; - - const STORAGE_KEY = 'layer5-docs-panel-widths'; - const DEFAULT_WIDTHS = { - sidebar: 2, // col-xl-2 = ~16.66% - toc: 2, // col-xl-2 = ~16.66% - main: 8 // col-xl-8 = ~66.66% - }; - - // CSS class shortcuts for Bootstrap grid columns - const COL_CLASSES = { - 'col-1': 8.33, - 'col-2': 16.66, - 'col-3': 25, - 'col-4': 33.33, - 'col-5': 41.66, - 'col-6': 50, - 'col-7': 58.33, - 'col-8': 66.66, - 'col-9': 75, - 'col-10': 83.33, - 'col-11': 91.66, - 'col-12': 100 - }; - - class ResizablePanels { - constructor() { - this.sidebar = document.querySelector('.td-sidebar'); - this.toc = document.querySelector('.td-sidebar-toc'); - this.main = document.querySelector('main[role="main"]'); - this.row = document.querySelector('.row.flex-xl-nowrap'); - - if (!this.row || !this.sidebar || !this.main) { - console.warn('Resizable panels: Required elements not found'); - return; - } - - this.isResizing = false; - this.currentResizeTarget = null; - this.startX = 0; - this.startWidth = 0; - - this.init(); - } - - init() { - // Load saved widths from localStorage - this.loadSavedWidths(); - - // Create resize handles - this.createResizeHandles(); - - // Add event listeners - this.addEventListeners(); - - // Add reset button - this.addResetButton(); - } - - loadSavedWidths() { - try { - const saved = localStorage.getItem(STORAGE_KEY); - if (saved) { - const widths = JSON.parse(saved); - this.applyWidths(widths); - } - } catch (error) { - console.error('Error loading saved panel widths:', error); - } - } - - createResizeHandles() { - // Create resize handle between sidebar and main content - const sidebarHandle = document.createElement('div'); - sidebarHandle.className = 'resizable-panel-handle resizable-panel-handle--right'; - sidebarHandle.setAttribute('data-resize-target', 'sidebar'); - sidebarHandle.setAttribute('title', 'Drag to resize sidebar'); - this.sidebar.appendChild(sidebarHandle); - - // Create resize handle for TOC (if it exists) - if (this.toc) { - const tocHandle = document.createElement('div'); - tocHandle.className = 'resizable-panel-handle resizable-panel-handle--left'; - tocHandle.setAttribute('data-resize-target', 'toc'); - tocHandle.setAttribute('title', 'Drag to resize table of contents'); - this.toc.appendChild(tocHandle); - } - } - - addEventListeners() { - document.addEventListener('mousedown', (e) => this.onMouseDown(e)); - document.addEventListener('mousemove', (e) => this.onMouseMove(e)); - document.addEventListener('mouseup', (e) => this.onMouseUp(e)); - } - - onMouseDown(e) { - if (!e.target.classList.contains('resizable-panel-handle')) { - return; - } - - this.isResizing = true; - this.currentResizeTarget = e.target.getAttribute('data-resize-target'); - this.startX = e.clientX; - - // Store current widths for delta calculation - this.startWidths = this.getCurrentWidths(); - - // Add active state - e.target.classList.add('resizable-panel-handle--active'); - document.body.style.userSelect = 'none'; - document.body.style.cursor = 'col-resize'; - } - - onMouseMove(e) { - if (!this.isResizing) return; - - const delta = e.clientX - this.startX; - const adjustment = delta / window.innerWidth; // Convert pixels to percentage-like ratio - - let newWidths = { ...this.startWidths }; - - if (this.currentResizeTarget === 'sidebar') { - // Resizing left sidebar - const sidebarPercent = (this.startWidths.sidebar * 100) / 12; // Convert col units to percentage - const mainPercent = (this.startWidths.main * 100) / 12; - - const newSidebarPercent = sidebarPercent + (adjustment * 100); - const newMainPercent = mainPercent - (adjustment * 100); - - // Constrain widths: min 1 col, max 5 cols for sidebar; min 4 cols for main - if (newSidebarPercent >= 8.33 && newSidebarPercent <= 41.66 && newMainPercent >= 33.33) { - newWidths.sidebar = Math.round((newSidebarPercent / 100) * 12); - newWidths.main = Math.round((newMainPercent / 100) * 12); - } - } else if (this.currentResizeTarget === 'toc') { - // Resizing right TOC panel - const tocPercent = (this.startWidths.toc * 100) / 12; - const mainPercent = (this.startWidths.main * 100) / 12; - - const newTocPercent = tocPercent - (adjustment * 100); - const newMainPercent = mainPercent + (adjustment * 100); - - // Constrain widths: min 1 col, max 5 cols for toc; min 4 cols for main - if (newTocPercent >= 8.33 && newTocPercent <= 41.66 && newMainPercent >= 33.33) { - newWidths.toc = Math.round((newTocPercent / 100) * 12); - newWidths.main = Math.round((newMainPercent / 100) * 12); - } - } - - this.applyWidths(newWidths); - } - - onMouseUp(e) { - if (!this.isResizing) return; - - this.isResizing = false; - const handle = document.querySelector('.resizable-panel-handle--active'); - if (handle) { - handle.classList.remove('resizable-panel-handle--active'); - } - - document.body.style.userSelect = ''; - document.body.style.cursor = ''; - - // Save widths to localStorage - this.savePanelWidths(); - } - - applyWidths(widths) { - const { sidebar, toc, main } = widths; - - // Update sidebar - this.removeBootstrapColClasses(this.sidebar); - this.sidebar.classList.add(`col-xl-${sidebar}`); - - // Update main - this.removeBootstrapColClasses(this.main); - this.main.classList.add(`col-xl-${main}`); - - // Update TOC if it exists - if (this.toc) { - this.removeBootstrapColClasses(this.toc); - this.toc.classList.add(`col-xl-${toc}`); - } - } - - getCurrentWidths() { - const getColNumber = (element) => { - const classes = element.className.split(' '); - const colClass = classes.find(c => c.match(/col-xl-\d+/)); - return colClass ? parseInt(colClass.split('-')[2]) : null; - }; - - return { - sidebar: getColNumber(this.sidebar) || DEFAULT_WIDTHS.sidebar, - toc: this.toc ? (getColNumber(this.toc) || DEFAULT_WIDTHS.toc) : DEFAULT_WIDTHS.toc, - main: getColNumber(this.main) || DEFAULT_WIDTHS.main - }; - } - - removeBootstrapColClasses(element) { - const classes = element.className.split(' ').filter(c => !c.match(/col-xl-\d+/)); - element.className = classes.join(' ').trim(); - } - - savePanelWidths() { - try { - const widths = this.getCurrentWidths(); - localStorage.setItem(STORAGE_KEY, JSON.stringify(widths)); - } catch (error) { - console.error('Error saving panel widths:', error); - } - } - - addResetButton() { - // Find the feature-info-container or page-header to add reset button - const pageHeader = document.querySelector('.page-header'); - if (!pageHeader) return; - - const resetButton = document.createElement('button'); - resetButton.id = 'reset-panel-widths'; - resetButton.className = 'btn btn-sm btn-outline-secondary ms-2'; - resetButton.innerHTML = ' Reset Layout'; - resetButton.setAttribute('title', 'Reset panel widths to default'); - - resetButton.addEventListener('click', () => this.resetPanelWidths()); - - // Find a good place to insert the button - const featureContainer = pageHeader.querySelector('.feature-info-container'); - if (featureContainer) { - featureContainer.insertAdjacentElement('beforeend', resetButton); - } else { - pageHeader.insertAdjacentElement('beforeend', resetButton); - } - } - - resetPanelWidths() { - this.applyWidths(DEFAULT_WIDTHS); - this.savePanelWidths(); - } - } - - // Initialize when DOM is ready - if (document.readyState === 'loading') { - document.addEventListener('DOMContentLoaded', () => { - new ResizablePanels(); - }); - } else { - new ResizablePanels(); - } -})(); diff --git a/assets/scss/_resizable-panels.scss b/assets/scss/_resizable-panels.scss deleted file mode 100644 index 3311227f9a..0000000000 --- a/assets/scss/_resizable-panels.scss +++ /dev/null @@ -1,147 +0,0 @@ -/** - * Resizable Panels Styling - * Styles for the resize handles and drag interactions - */ - -// Resize handle styling -.resizable-panel-handle { - position: absolute; - background-color: transparent; - transition: background-color 0.2s ease; - z-index: 100; - - &--right { - // Right edge handle (between sidebar and main) - right: -3px; - top: 0; - bottom: 0; - width: 6px; - cursor: col-resize; - background-color: rgba(0, 211, 169, 0.15); - - &:hover, - &--active { - background-color: rgba(0, 211, 169, 0.4); - - &::after { - opacity: 1; - } - } - - &::after { - content: ''; - position: absolute; - right: 1px; - top: 50%; - transform: translateY(-50%); - width: 3px; - height: 50px; - background-color: #00d3a9; - opacity: 0.3; - transition: opacity 0.2s ease; - border-radius: 2px; - box-shadow: 0 0 4px rgba(0, 211, 169, 0.5); - } - } - - &--left { - // Left edge handle (between main and TOC) - left: -3px; - top: 0; - bottom: 0; - width: 6px; - cursor: col-resize; - background-color: rgba(0, 211, 169, 0.15); - - &:hover, - &--active { - background-color: rgba(0, 211, 169, 0.4); - - &::after { - opacity: 1; - } - } - - &::after { - content: ''; - position: absolute; - left: 1px; - top: 50%; - transform: translateY(-50%); - width: 3px; - height: 50px; - background-color: #00d3a9; - opacity: 0.3; - transition: opacity 0.2s ease; - border-radius: 2px; - box-shadow: 0 0 4px rgba(0, 211, 169, 0.5); - } - } - - &--active { - background-color: rgba(0, 211, 169, 0.5); - } -} - -// Reset button styling -#reset-panel-widths { - white-space: nowrap; - font-size: 0.875rem; - - i { - margin-right: 0.25rem; - } - - &:hover { - background-color: #00d3a9; - color: #fff; - } -} - -// Make panels relatively positioned for absolute handle positioning -.td-sidebar, -.td-sidebar-toc { - position: relative; -} - -// Ensure sidebar nav has proper scrolling with resizable panels -.td-sidebar-nav { - padding-bottom: 2rem; -} - -// Smooth transitions for width changes -.td-sidebar, -.td-sidebar-toc, -main[role="main"] { - transition: flex-basis 0.3s ease; -} - -// Ensure row is flex container for proper layout -.row.flex-xl-nowrap { - display: flex; - flex-wrap: nowrap; - - > aside, - > main { - overflow-x: hidden; - } -} - -// Mobile/Tablet adjustments - disable resize handles on smaller screens -@media (max-width: 1199.98px) { - .resizable-panel-handle { - display: none; - } - - #reset-panel-widths { - display: none; - } -} - -// Print styles - hide resize handles -@media print { - .resizable-panel-handle, - #reset-panel-widths { - display: none !important; - } -} diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 84a003f563..2b7e6112a3 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -15,7 +15,6 @@ @import "elements_project"; @import "summary.scss"; @import "_kanvas-corner-popup.scss"; -@import "_resizable-panels.scss"; .navbar-dark { min-height: 5rem; @@ -273,6 +272,7 @@ a:not([href]):not([class]):hover { color: $gray-400; font-weight: $font-weight-bold; } + margin-top: 0.5rem; } .td-sidebar-link { diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html deleted file mode 100644 index 409b2634f5..0000000000 --- a/layouts/partials/scripts.html +++ /dev/null @@ -1,16 +0,0 @@ - - -{{ $kanvasTransition := resources.Get "js/kanvas-architectural-transition.js" -}} -{{ if $kanvasTransition }} - -{{ end -}} - -{{ $kanvasPopup := resources.Get "js/kanvas-corner-popup.js" -}} -{{ if $kanvasPopup }} - -{{ end -}} - -{{ $offlineSearch := resources.Get "js/offline-search.js" -}} -{{ if $offlineSearch }} - -{{ end -}}