Slider: Block Page for one scrollbar; Scrollbar width normal (#4692)

* Block page if slider is open; Hides the double page scrollbar

* Slider scrollbar default width

* Update frss.rtl.css

* Add user Cyb10101 to credits

* make fix-all

* make fix-all (second pass)

Co-authored-by: mathContao <math-home@web.de>
Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

9 files changed, 16 insertions, 5 deletions

diff --git a/CREDITS.md b/CREDITS.md
index efb67f2c6..6d655872f 100644
--- a/CREDITS.md
+++ b/CREDITS.md
@@ -40,6 +40,7 @@ People are sorted by name so please keep this order.
 * [Craig Andrews](https://github.com/candrews): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:candrews), [Web](http://candrews.integralblue.com/)
 * [Creak](https://github.com/MightyCreak): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is%3Apr+author%3AMightyCreak)
 * [Crupuk](https://github.com/Crupuk): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:Crupuk)
+* [Cyb10101](https://github.com/Cyb10101): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:Cyb10101)
 * [Damien Leroy](https://github.com/ShiiFu): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:ShiiFu)
 * [Damstre](https://github.com/Damstre): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:Damstre)
 * [danc](https://github.com/danc): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:danc), [Web](http://tintouli.free.fr/)
diff --git a/app/views/configure/queries.phtml b/app/views/configure/queries.phtml
index bc6d92846..24c06ac5a 100644
--- a/app/views/configure/queries.phtml
+++ b/app/views/configure/queries.phtml
@@ -62,7 +62,7 @@
 </main>
 
 <?php $class = ($this->query != null) ? ' active' : ''; ?>
-<aside id="slider" class="scrollbar-thin<?= $class ?>">
+<aside id="slider" class="<?= $class ?>">
 <a class="toggle_aside" href="#close"><img class="icon" src="../themes/icons/close.svg" loading="lazy" alt="❌"></a>
 	<div id="slider-content">
 		<?php
diff --git a/app/views/extension/index.phtml b/app/views/extension/index.phtml
index c78a815d0..195452d61 100644
--- a/app/views/extension/index.phtml
+++ b/app/views/extension/index.phtml
@@ -81,7 +81,7 @@
 
 <?php $class = isset($this->extension) ? ' active' : ''; ?>
 <?php $closelink = isset($this->extension) ? _url('extension', 'index') : ''; ?>
-<aside id="slider" class="scrollbar-thin">
+<aside id="slider">
 <a class="toggle_aside" href="<?= $closelink ?>#close"><img class="icon" src="../themes/icons/close.svg" loading="lazy" alt="❌"></a>
 	<div id="slider-content">
 		<?php
diff --git a/app/views/index/normal.phtml b/app/views/index/normal.phtml
index c1c46e877..6f7c47677 100644
--- a/app/views/index/normal.phtml
+++ b/app/views/index/normal.phtml
@@ -261,7 +261,7 @@ $today = @strtotime('today');
 <?php endif; ?>
 
 <?php $class = $this->displaySlider ? ' active' : ''; ?>
-<aside id="slider" class="scrollbar-thin<?= $class ?>">
+<aside id="slider" class="<?= $class ?>">
 	<a class="toggle_aside" href="#close"><img class="icon" src="../themes/icons/close.svg" loading="lazy" alt="❌"></a>
 		<div id="slider-content">
 		</div>
diff --git a/app/views/stats/idle.phtml b/app/views/stats/idle.phtml
index 113bb9d1d..fcab1e8e3 100644
--- a/app/views/stats/idle.phtml
+++ b/app/views/stats/idle.phtml
@@ -64,7 +64,7 @@
 </main>
 
 <?php $class = isset($this->feed) ? ' active' : ''; ?>
-<aside id="slider" class="scrollbar-thin<?= $class ?>">
+<aside id="slider" class="<?= $class ?>">
 	<a class="toggle_aside" href="#close"><img class="icon" src="../themes/icons/close.svg" loading="lazy" alt="❌"></a>
 	<div id="slider-content">
 		<?php
diff --git a/app/views/subscription/index.phtml b/app/views/subscription/index.phtml
index 3368c5ab0..76b6279b7 100644
--- a/app/views/subscription/index.phtml
+++ b/app/views/subscription/index.phtml
@@ -91,7 +91,7 @@
 </main>
 
 <?php $class = isset($this->feed) || isset($this->category) ? ' active' : ''; ?>
-<aside id="slider" class="scrollbar-thin<?= $class ?>">
+<aside id="slider" class="<?= $class ?>">
 	<a class="toggle_aside" href="#close"><img class="icon" src="../themes/icons/close.svg" loading="lazy" alt="❌"></a>
 	<div id="slider-content">
 		<?php
diff --git a/p/scripts/extra.js b/p/scripts/extra.js
index 4ae0bcdf0..52a480c9a 100644
--- a/p/scripts/extra.js
+++ b/p/scripts/extra.js
@@ -159,6 +159,7 @@ function open_slider_listener(ev) {
 			req.responseType = 'document';
 			req.onload = function (e) {
 				location.href = '#slider'; // close menu/dropdown
+				document.documentElement.classList.add('slider-active');
 				slider.classList.add('active');
 				slider.scrollTop = 0;
 				slider_content.innerHTML = this.response.body.innerHTML;
@@ -178,6 +179,7 @@ function init_slider(slider) {
 	closer.addEventListener('click', function (ev) {
 		if (data_leave_validation(slider) || confirm(context.i18n.confirmation_default)) {
 			slider.querySelectorAll('form').forEach(function (f) { f.reset(); });
+			document.documentElement.classList.remove('slider-active');
 			return true;
 		} else {
 			return false;
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 3f6ba2d30..05c0c3cd9 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -1586,6 +1586,10 @@ a.website:hover .favicon {
 }
 
 /*=== Slider */
+html.slider-active {
+	overflow: hidden;
+}
+
 #slider {
 	background-color: var(--frss-background-color);
 	width: 0;
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index f336d016f..7e07a288c 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -1586,6 +1586,10 @@ a.website:hover .favicon {
 }
 
 /*=== Slider */
+html.slider-active {
+	overflow: hidden;
+}
+
 #slider {
 	background-color: var(--frss-background-color);
 	width: 0;