From d55f017ccd941c135055d7c3a85007b8e7e02449 Mon Sep 17 00:00:00 2001 From: Inverle Date: Thu, 4 Dec 2025 08:48:03 +0100 Subject: Implement button for toggling sidebar on all views (#8201) * Implement button for toggling sidebar on all views Closes https://github.com/FreshRSS/FreshRSS/issues/7673, https://github.com/FreshRSS/FreshRSS/issues/7100, https://github.com/FreshRSS/FreshRSS/issues/6119, https://github.com/FreshRSS/FreshRSS/issues/5338, https://github.com/FreshRSS/FreshRSS/issues/2792, https://github.com/FreshRSS/FreshRSS/issues/4224, https://github.com/FreshRSS/FreshRSS/issues/4136 https://github.com/user-attachments/assets/0629e465-6450-440e-b38b-430e9ff73ef9 Keyboard shortcut for doing the same: t * Partially fix other views Repartition page looks broken on Swage * Correction `close-aside` wasn't meant to be removed * i18n(conf): fr Co-authored-by: Alexandre Alapetite * make fix-all * Fix settings slider not opening in reader view * make readme --------- Co-authored-by: Alexandre Alapetite --- p/scripts/main.js | 60 ++++++++++++++++++++++++++++++++++++++++ p/themes/Swage/swage.css | 4 +++ p/themes/Swage/swage.rtl.css | 4 +++ p/themes/base-theme/frss.css | 37 ++++++++++--------------- p/themes/base-theme/frss.rtl.css | 37 ++++++++++--------------- 5 files changed, 98 insertions(+), 44 deletions(-) (limited to 'p') diff --git a/p/scripts/main.js b/p/scripts/main.js index 73848060b..50dc31bb9 100644 --- a/p/scripts/main.js +++ b/p/scripts/main.js @@ -922,6 +922,64 @@ function init_posts() { } } +function toggle_aside_click(manual = true) { + const aside = document.querySelector('.aside'); + const toggle_aside = document.querySelector('#nav_menu_toggle_aside button'); + if (!toggle_aside) { + return; + } + + const active = toggle_aside.classList.contains('active'); + if (active) { + toggle_aside.classList.remove('active'); + aside.classList.remove('visible'); + aside.style.display = 'none'; + } else { + toggle_aside.classList.add('active'); + aside.classList.add('visible'); + aside.style.display = ''; + } + + if (manual && ['normal', 'reader'].includes(context.current_view)) { + sessionStorage.setItem(`FreshRSS_aside-toggled_${context.current_view}`, !active ? 1 : 0); + } +} + +function init_nav_menu() { + const aside = document.querySelector('.aside'); + const toggle_aside = document.querySelector('#nav_menu_toggle_aside button'); + if (!toggle_aside) { + return; + } + + function sync(e) { + const active = toggle_aside.classList.contains('active'); + if ((e.matches && active) || (!e.matches && !active)) { + toggle_aside_click(false); + } + } + + const media = window.matchMedia('(max-width: 840px)'); + media.onchange = sync; + + const state = sessionStorage.getItem(`FreshRSS_aside-toggled_${context.current_view}`); + if (state !== null) { + const active = toggle_aside.classList.contains('active'); + if (state != active) toggle_aside_click(false); + } + if (getComputedStyle(aside).display !== 'none') { + if (context.current_view === 'normal') aside.classList.add('visible'); + sync(media); + } + const close_aside = [ + document.querySelector('.aside a.toggle_aside'), + document.querySelector('a.close-aside'), // background of aside (#close) + ]; + + toggle_aside.addEventListener('click', toggle_aside_click); + close_aside.forEach(close => close.addEventListener('click', toggle_aside_click)); +} + function rememberOpenCategory(category_id, isOpen) { if (context.display_categories === 'remember') { const open_categories = JSON.parse(localStorage.getItem('FreshRSS_open_categories') || '{}'); @@ -1204,6 +1262,7 @@ function init_shortcuts() { if (k === s.reading_view) { delayedClick(document.querySelector('#nav_menu_views .view-reader')); ev.preventDefault(); return; } if (k === s.global_view) { delayedClick(document.querySelector('#nav_menu_views .view-global')); ev.preventDefault(); return; } if (k === s.toggle_media) { toggle_media(); ev.preventDefault(); } + if (k === s.toggle_aside) { toggle_aside_click(); ev.preventDefault(); } }); } @@ -2226,6 +2285,7 @@ function init_main_afterDOM() { init_notifications(); init_csp_alert(); init_confirm_action(); + init_nav_menu(); const stream = document.getElementById('stream'); if (stream) { init_load_more(stream); diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css index 592f49167..13e6543cb 100644 --- a/p/themes/Swage/swage.css +++ b/p/themes/Swage/swage.css @@ -981,6 +981,10 @@ main.post .drop-section li.item.feed a:hover .icon { filter: brightness(1); } } + + .btn { + box-sizing: content-box; + } } .flux { diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css index 345622b82..0055a4979 100644 --- a/p/themes/Swage/swage.rtl.css +++ b/p/themes/Swage/swage.rtl.css @@ -981,6 +981,10 @@ main.post .drop-section li.item.feed a:hover .icon { filter: brightness(1); } } + + .btn { + box-sizing: content-box; + } } .flux { diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css index 4d95990b6..6f11c4d22 100644 --- a/p/themes/base-theme/frss.css +++ b/p/themes/base-theme/frss.css @@ -1913,6 +1913,10 @@ a.website:hover .favicon { z-index: 50; } +.aside:not(.visible) ~ #nav_entries { + display: none; +} + #nav_entries button { background-color: transparent; display: table-cell; @@ -2356,7 +2360,6 @@ html.slider-active { .nav-login, .aside .toggle_aside, #slider .toggle_aside, -.nav_menu .toggle_aside, .configure .dropdown-header-close { display: none; } @@ -2372,30 +2375,15 @@ html.slider-active { /*=== READER */ /*===========*/ -.reader .nav_menu .toggle_aside { - display: inline-block; -} - -.reader .aside .toggle_aside { - padding: 1rem 0px; - display: block; - width: 100%; -} - .reader .aside { display: none; - width: 0; } -.reader .aside:target { +.reader .aside.visible { display: table-cell; width: 300px; } -.reader .aside_feed .configure-feeds { - margin-top: 10px; -} - .reader .flux { padding: 1rem 0 2rem; } @@ -2478,7 +2466,7 @@ html.slider-active { display: none; } - .aside:target { + .aside.visible { box-shadow: 3px 3px 5px var(--frss-box-shadow-color-transparent); } @@ -2668,7 +2656,7 @@ html.slider-active { display: inline-block; } - .aside:target + .close-aside, + .aside.visible + .close-aside, .configure .dropdown-target:target ~ .dropdown-close { background-color: var(--frss-modal-background-color-transparent); display: block; @@ -2682,10 +2670,14 @@ html.slider-active { z-index: 99; } - .nav_mobile { + .nav_menu.nav_mobile { display: block; } + .nav_mobile { + display: initial; + } + .aside { position: fixed; top: 0; bottom: 0; @@ -2695,8 +2687,8 @@ html.slider-active { z-index: 100; } - .aside:target, - .reader .aside:target { + .aside.visible, + .reader .aside.visible { width: 90%; height: 100vh; } @@ -2743,6 +2735,7 @@ html.slider-active { } #nav_entries { + display: table !important; width: 100%; } diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css index 9e4d7cd32..684ad2f81 100644 --- a/p/themes/base-theme/frss.rtl.css +++ b/p/themes/base-theme/frss.rtl.css @@ -1913,6 +1913,10 @@ a.website:hover .favicon { z-index: 50; } +.aside:not(.visible) ~ #nav_entries { + display: none; +} + #nav_entries button { background-color: transparent; display: table-cell; @@ -2356,7 +2360,6 @@ html.slider-active { .nav-login, .aside .toggle_aside, #slider .toggle_aside, -.nav_menu .toggle_aside, .configure .dropdown-header-close { display: none; } @@ -2372,30 +2375,15 @@ html.slider-active { /*=== READER */ /*===========*/ -.reader .nav_menu .toggle_aside { - display: inline-block; -} - -.reader .aside .toggle_aside { - padding: 1rem 0px; - display: block; - width: 100%; -} - .reader .aside { display: none; - width: 0; } -.reader .aside:target { +.reader .aside.visible { display: table-cell; width: 300px; } -.reader .aside_feed .configure-feeds { - margin-top: 10px; -} - .reader .flux { padding: 1rem 0 2rem; } @@ -2478,7 +2466,7 @@ html.slider-active { display: none; } - .aside:target { + .aside.visible { box-shadow: -3px 3px 5px var(--frss-box-shadow-color-transparent); } @@ -2668,7 +2656,7 @@ html.slider-active { display: inline-block; } - .aside:target + .close-aside, + .aside.visible + .close-aside, .configure .dropdown-target:target ~ .dropdown-close { background-color: var(--frss-modal-background-color-transparent); display: block; @@ -2682,10 +2670,14 @@ html.slider-active { z-index: 99; } - .nav_mobile { + .nav_menu.nav_mobile { display: block; } + .nav_mobile { + display: initial; + } + .aside { position: fixed; top: 0; bottom: 0; @@ -2695,8 +2687,8 @@ html.slider-active { z-index: 100; } - .aside:target, - .reader .aside:target { + .aside.visible, + .reader .aside.visible { width: 90%; height: 100vh; } @@ -2743,6 +2735,7 @@ html.slider-active { } #nav_entries { + display: table !important; width: 100%; } -- cgit v1.2.3