Fix/Improved: Slider mobile (#4416)

* add close button, add content slider div

* add &ajax=1#slider to the links

* CSS

* fix showPW functionality

* open slider after received Ajax

* do not show empty slider

* RTL CSS

* fixed code smell

* improved: links prep via JS

* Redirect anchor

* enable #anchors in printuri()

* enable #slider when config was saved

* Active sliding via JS

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

8 files changed, 54 insertions, 38 deletions

diff --git a/app/views/configure/queries.phtml b/app/views/configure/queries.phtml
index 227acc777..93ed38e10 100644
--- a/app/views/configure/queries.phtml
+++ b/app/views/configure/queries.phtml
@@ -61,14 +61,17 @@
 	</form>
 </main>
 
-<?php $class = $this->displaySlider ? ' active' : ''; ?>
-<a href="#" id="close-slider" class="<?= $class ?>">
-	<?= _i('close') ?>
-</a>
+<?php $class = ($this->query != null) ? ' active' : ''; ?>
 <aside id="slider" class="scrollbar-thin<?= $class ?>">
-	<?php
-		if ($this->query != null) {
-			$this->renderHelper('configure/query');
-		}
-	?>
+<a class="toggle_aside" href="#close"><img class="icon" src="../themes/icons/close.svg" loading="lazy" alt="❌"></a>
+	<div id="slider-content">
+		<?php
+			if ($this->query != null) {
+				$this->renderHelper('configure/query');
+			}
+		?>
+	</div>
 </aside>
+<a href="#" id="close-slider">
+	<?= _i('close') ?>
+</a>
diff --git a/app/views/extension/index.phtml b/app/views/extension/index.phtml
index 6d4a1ba6d..c78a815d0 100644
--- a/app/views/extension/index.phtml
+++ b/app/views/extension/index.phtml
@@ -80,13 +80,17 @@
 </main>
 
 <?php $class = isset($this->extension) ? ' active' : ''; ?>
-<aside id="slider" class="scrollbar-thin<?= $class ?>">
-	<?php
-		if (isset($this->extension)) {
-			$this->renderHelper('extension/configure');
-		}
-	?>
+<?php $closelink = isset($this->extension) ? _url('extension', 'index') : ''; ?>
+<aside id="slider" class="scrollbar-thin">
+<a class="toggle_aside" href="<?= $closelink ?>#close"><img class="icon" src="../themes/icons/close.svg" loading="lazy" alt="❌"></a>
+	<div id="slider-content">
+		<?php
+			if (isset($this->extension)) {
+				$this->renderHelper('extension/configure');
+			}
+		?>
+	</div>
 </aside>
-<a href="#" id="close-slider" class="<?= $class ?>">
+<a href="#" id="close-slider">
 	<?= _i('close') ?>
 </a>
diff --git a/app/views/helpers/category/update.phtml b/app/views/helpers/category/update.phtml
index c08e6995a..171ee20a4 100644
--- a/app/views/helpers/category/update.phtml
+++ b/app/views/helpers/category/update.phtml
@@ -9,7 +9,7 @@
 		<a href="<?= _url('index', 'index', 'get', 'c_' . $this->category->id()) ?>"><?= _i('link') ?> <?= _t('gen.action.filter') ?></a>
 	</div>
 
-	<form method="post" action="<?= _url('subscription', 'category', 'id', $this->category->id()) ?>" autocomplete="off">
+	<form method="post" action="<?= _url('subscription', 'category', 'id', $this->category->id(), '#', 'slider') ?>" autocomplete="off">
 		<input type="hidden" name="_csrf" value="<?= FreshRSS_Auth::csrfToken() ?>" />
 
 		<legend><?= _t('sub.category.information') ?></legend>
diff --git a/app/views/helpers/configure/query.phtml b/app/views/helpers/configure/query.phtml
index f681c2538..a75333cfc 100644
--- a/app/views/helpers/configure/query.phtml
+++ b/app/views/helpers/configure/query.phtml
@@ -6,7 +6,7 @@
 		<a href="<?= $this->query->getUrl() ?>"><?= _i('link') ?> <?= _t('gen.action.filter') ?></a>
 	</div>
 
-	<form method="post" action="<?= _url('configure', 'query', 'id', $this->queryId) ?>" autocomplete="off">
+	<form method="post" action="<?= _url('configure', 'query', 'id', $this->queryId, '#', 'slider') ?>" autocomplete="off">
 		<input type="hidden" name="_csrf" value="<?= FreshRSS_Auth::csrfToken() ?>" />
 
 		<div class="form-group">
diff --git a/app/views/helpers/feed/update.phtml b/app/views/helpers/feed/update.phtml
index dc0f53a52..b24812b65 100644
--- a/app/views/helpers/feed/update.phtml
+++ b/app/views/helpers/feed/update.phtml
@@ -19,13 +19,13 @@
 	<?php
 	$from = Minz_Request::param('from');
 	if ($from === false) {
-		$url = _url('subscription', 'feed', 'id', $this->feed->id());
+		$url = _url('subscription', 'feed', 'id', $this->feed->id(), '#', 'slider');
 	} else {
 		$get = Minz_Request::param('get');
 		if (!$get) {
-			$url = _url('subscription', 'feed', 'id', $this->feed->id(), 'from', $from);
+			$url = _url('subscription', 'feed', 'id', $this->feed->id(), 'from', $from, '#', 'slider');
 		} else {
-			$url = _url('subscription', 'feed', 'id', $this->feed->id(), 'from', $from, 'get', $get);
+			$url = _url('subscription', 'feed', 'id', $this->feed->id(), 'from', $from, 'get', $get, '#', 'slider');
 		}
 	}
 	?>
@@ -256,7 +256,7 @@
 			<div class="group-controls">
 				<div class="stick">
 					<input type="text" value="<?= _t('sub.feed.number_entries', $nbEntries) ?>" disabled="disabled" />
-					<a class="btn" href="<?= _url('feed', 'actualize', 'id', $this->feed->id()) ?>">
+					<a class="btn" href="<?= _url('feed', 'actualize', 'id', $this->feed->id(), '#slider') ?>">
 						<?= _i('refresh') ?> <?= _t('gen.action.actualize') ?>
 					</a>
 				</div>
@@ -384,7 +384,7 @@
 			<div class="group-controls">
 				<button type="submit" class="btn btn-important"><?= _t('gen.action.submit') ?></button>
 				<button type="reset" class="btn"><?= _t('gen.action.cancel') ?></button>
-				<button type="submit" class="btn btn-attention confirm" formmethod="post" formaction="<?= _url('feed', 'truncate', 'id', $this->feed->id()) ?>"><?= _t('gen.action.truncate') ?></button>
+				<button type="submit" class="btn btn-attention confirm" formmethod="post" formaction="<?= _url('feed', 'truncate', 'id', $this->feed->id(), '#slider') ?>"><?= _t('gen.action.truncate') ?></button>
 			</div>
 		</div>
 
@@ -491,7 +491,7 @@
 					<input type="text" name="path_entries" id="path_entries" class="w100" value="<?= $this->feed->pathEntries() ?>"
 						data-leave-validation="<?= $this->feed->pathEntries() ?>" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
 					<a id="popup-preview-selector" class="btn" href="<?=
-						_url('feed', 'contentSelectorPreview', 'id', $this->feed->id(), 'selector', 'selector-token') ?>"><?= _i('look') ?></a>
+						_url('feed', 'contentSelectorPreview', 'id', $this->feed->id(), 'selector', 'selector-token', '#slider') ?>"><?= _i('look') ?></a>
 				</div>
 				<p class="help"><?= _i('help') ?> <?= _t('sub.feed.css_help') ?></p>
 			</div>
@@ -589,13 +589,13 @@
 	<legend><?= _t('sub.feed.maintenance.title') ?></legend>
 	<div class="form-group">
 		<div class="group-controls">
-			<a class="btn btn-important" href="<?= _url('feed', 'clearCache', 'id', $this->feed->id()) ?>">
+			<a class="btn btn-important" href="<?= _url('feed', 'clearCache', 'id', $this->feed->id(), '#slider') ?>">
 				<?= _t('sub.feed.maintenance.clear_cache') ?>
 			</a>
 			<p class="help"><?= _i('help') ?> <?= _t('sub.feed.maintenance.clear_cache_help') ?></p>
 		</div>
 		<div class="group-controls">
-			<form method="post" action="<?= _url('feed', 'reload') ?>">
+			<form method="post" action="<?= _url('feed', 'reload', '#slider') ?>">
 				<input type="hidden" name="_csrf" value="<?= FreshRSS_Auth::csrfToken() ?>" />
 				<input type="hidden" name="id" value="<?= $this->feed->id() ?>" />
 				<button type="submit" class="btn btn-important">
diff --git a/app/views/index/normal.phtml b/app/views/index/normal.phtml
index 179c0f86d..348a42e89 100644
--- a/app/views/index/normal.phtml
+++ b/app/views/index/normal.phtml
@@ -261,6 +261,9 @@ $today = @strtotime('today');
 
 <?php $class = $this->displaySlider ? ' active' : ''; ?>
 <aside id="slider" class="scrollbar-thin<?= $class ?>">
+	<a class="toggle_aside" href="#close"><img class="icon" src="../themes/icons/close.svg" loading="lazy" alt="❌"></a>
+		<div id="slider-content">
+		</div>
 </aside>
 <a href="#" id="close-slider" class="<?= $class ?>">
 	<?= _i('close') ?>
diff --git a/app/views/stats/idle.phtml b/app/views/stats/idle.phtml
index 0fa490372..9dbfbf4ab 100644
--- a/app/views/stats/idle.phtml
+++ b/app/views/stats/idle.phtml
@@ -50,13 +50,16 @@
 	<?php } ?>
 </main>
 
-<?php $class = $this->displaySlider ? ' active' : ''; ?>
+<?php $class = isset($this->feed) ? ' active' : ''; ?>
 <aside id="slider" class="scrollbar-thin<?= $class ?>">
-	<?php
+	<a class="toggle_aside" href="#close"><img class="icon" src="../themes/icons/close.svg" loading="lazy" alt="❌"></a>
+	<div id="slider-content">
+		<?php
 		if (isset($this->feed)) {
 			$this->renderHelper('feed/update');
 		}
-	?>
+		?>
+	</div>
 </aside>
 <a href="#" id="close-slider" class="<?= $class ?>">
 	<?= _i('close') ?>
diff --git a/app/views/subscription/index.phtml b/app/views/subscription/index.phtml
index 8b2411edf..d2123a2ac 100644
--- a/app/views/subscription/index.phtml
+++ b/app/views/subscription/index.phtml
@@ -78,16 +78,19 @@
 	</div>
 </main>
 
-<?php $class = $this->displaySlider ? ' active' : ''; ?>
+<?php $class = isset($this->feed) || isset($this->category) ? ' active' : ''; ?>
 <aside id="slider" class="scrollbar-thin<?= $class ?>">
-	<?php
-		if (isset($this->feed)) {
-			$this->renderHelper('feed/update');
-		} elseif (isset($this->category)) {
-			$this->renderHelper('category/update');
-		}
-	?>
+	<a class="toggle_aside" href="#close"><img class="icon" src="../themes/icons/close.svg" loading="lazy" alt="❌"></a>
+	<div id="slider-content">
+		<?php
+			if (isset($this->feed)) {
+				$this->renderHelper('feed/update');
+			} elseif (isset($this->category)) {
+				$this->renderHelper('category/update');
+			}
+		?>
+	</div>
 </aside>
-<a href="#" id="close-slider" class="<?= $class ?>">
+<a href="#" id="close-slider">
 	<?= _i('close') ?>
 </a>