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>

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/)

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

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

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>

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

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

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;

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;

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;