From 5e28bf8b403205642cf09aad5ef47ed1aa781a5d Mon Sep 17 00:00:00 2001
From: maTh <math-home@web.de>
Date: Mon, 11 Apr 2022 10:31:04 +0200
Subject: [PATCH] Improved: slider (#4297)

* CSS

* thin scrollbar

* fix whitespaces in CSS

* fix CSS order
---
 app/views/configure/queries.phtml    |   6 +-
 app/views/extension/index.phtml      |   6 +-
 app/views/helpers/feed/update.phtml  | 130 ++++++++++++---------------
 app/views/index/normal.phtml         |   6 +-
 app/views/stats/idle.phtml           |   6 +-
 app/views/subscription/index.phtml   |   6 +-
 p/themes/base-theme/template.css     |  46 ++++++++--
 p/themes/base-theme/template.rtl.css |  46 ++++++++--
 8 files changed, 155 insertions(+), 97 deletions(-)

diff --git a/app/views/configure/queries.phtml b/app/views/configure/queries.phtml
index e9f4aed41..5cd7656c2 100644
--- a/app/views/configure/queries.phtml
+++ b/app/views/configure/queries.phtml
@@ -60,11 +60,11 @@
 		<?php } ?>
 	</form>
 
-	<?php $class = $this->displaySlider ? ' class="active"' : ''; ?>
-	<a href="#" id="close-slider"<?= $class ?>>
+	<?php $class = $this->displaySlider ? ' active' : ''; ?>
+	<a href="#" id="close-slider" class="<?= $class ?>">
 		<?= _i('close') ?>
 	</a>
-	<div id="slider"<?= $class ?>>
+	<div id="slider" class="scrollbar-thin<?= $class ?>">
 	<?php
 		if ($this->query != null) {
 			$this->renderHelper('configure/query');
diff --git a/app/views/extension/index.phtml b/app/views/extension/index.phtml
index f72a25ed1..b94af7947 100644
--- a/app/views/extension/index.phtml
+++ b/app/views/extension/index.phtml
@@ -78,11 +78,11 @@
 		</div>
 	<?php } ?>
 
-	<?php $class = isset($this->extension) ? ' class="active"' : ''; ?>
-	<a href="#" id="close-slider"<?= $class ?>>
+	<?php $class = isset($this->extension) ? ' active' : ''; ?>
+	<a href="#" id="close-slider" class="<?= $class ?>">
 		<?= _i('close') ?>
 	</a>
-	<div id="slider"<?= $class ?>>
+	<div id="slider" class="scrollbar-thin<?= $class ?>">
 	<?php
 		if (isset($this->extension)) {
 			$this->renderHelper('extension/configure');
diff --git a/app/views/helpers/feed/update.phtml b/app/views/helpers/feed/update.phtml
index c22761bfa..4c117bdea 100644
--- a/app/views/helpers/feed/update.phtml
+++ b/app/views/helpers/feed/update.phtml
@@ -8,8 +8,6 @@
 		<a href="<?= _url('stats', 'repartition', 'id', $this->feed->id()) ?>"><?= _i('stats') ?> <?= _t('sub.feed.stats') ?></a>
 	</div>
 
-	<p><?= sanitizeHTML($this->feed->description()) ?></p>
-
 	<?php $nbEntries = $this->feed->nbEntries(); ?>
 
 	<?php if ($this->feed->inError()) { ?>
@@ -37,19 +35,19 @@
 		<div class="form-group">
 			<label class="group-name" for="name"><?= _t('sub.feed.title') ?></label>
 			<div class="group-controls">
-				<input type="text" name="name" id="name" class="extend" value="<?= $this->feed->name(true) ?>" />
+				<input type="text" name="name" id="name" class="w100" value="<?= $this->feed->name(true) ?>" />
 			</div>
 		</div>
 		<div class="form-group">
 			<label class="group-name" for="description"><?= _t('sub.feed.description') ?></label>
 			<div class="group-controls">
-				<textarea name="description" id="description"><?= htmlspecialchars($this->feed->description(), ENT_NOQUOTES, 'UTF-8') ?></textarea>
+				<textarea name="description" id="description" class="w100"><?= htmlspecialchars($this->feed->description(), ENT_NOQUOTES, 'UTF-8') ?></textarea>
 			</div>
 		</div>
 		<div class="form-group">
 			<label class="group-name" for="website"><?= _t('sub.feed.website') ?></label>
 			<div class="group-controls">
-				<div class="stick">
+				<div class="stick w100">
 					<input type="text" name="website" id="website" value="<?= $this->feed->website() ?>" />
 					<a class="btn open-url" target="_blank" rel="noreferrer" href="<?= $this->feed->website() ?>" data-input="website" title="<?= _t('gen.action.open_url') ?>"><?= _i('link') ?></a>
 				</div>
@@ -58,7 +56,7 @@
 		<div class="form-group">
 			<label class="group-name" for="url"><?= _t('sub.feed.url') ?></label>
 			<div class="group-controls">
-				<div class="stick">
+				<div class="stick w100">
 					<input type="text" name="url" id="url" value="<?= $this->feed->url() ?>" />
 					<a class="btn open-url" target="_blank" rel="noreferrer" href="<?= $this->feed->url() ?>" data-input="url" title="<?= _t('gen.action.open_url') ?>"><?= _i('link') ?></a>
 				</div>
@@ -70,7 +68,7 @@
 		<div class="form-group">
 			<label class="group-name" for="category"><?= _t('sub.category') ?></label>
 			<div class="group-controls">
-				<select name="category" id="category">
+				<select name="category" id="category" class="w100">
 				<?php foreach ($this->categories as $cat) { ?>
 				<option value="<?= $cat->id() ?>"<?= $cat->id() == $this->feed->category() ? ' selected="selected"' : '' ?>>
 					<?= $cat->name() ?>
@@ -82,7 +80,7 @@
 		<div class="form-group">
 			<label class="group-name" for="priority"><?= _t('sub.feed.priority') ?></label>
 			<div class="group-controls">
-				<select name="priority" id="priority">
+				<select name="priority" id="priority" class="w50">
 					<option value='<?= FreshRSS_Feed::PRIORITY_MAIN_STREAM ?>' <?php
 						if (FreshRSS_Feed::PRIORITY_MAIN_STREAM === $this->feed->priority()) {echo 'selected="selected"';}?>><?= _t('sub.feed.priority.main_stream') ?></option>
 					<option value='<?= FreshRSS_Feed::PRIORITY_NORMAL ?>' <?php
@@ -96,7 +94,7 @@
 		<div class="form-group">
 			<label class="group-name" for="ttl"><?= _t('sub.feed.ttl') ?></label>
 			<div class="group-controls">
-				<select class="number" name="ttl" id="ttl" required="required"><?php
+				<select class="w50" name="ttl" id="ttl" required="required"><?php
 					$found = false;
 					foreach (array(FreshRSS_Feed::TTL_DEFAULT => _t('gen.short.by_default'), 900 => '15min', 1200 => '20min', 1500 => '25min', 1800 => '30min', 2700 => '45min',
 							3600 => '1h', 5400 => '1.5h', 7200 => '2h', 10800 => '3h', 14400 => '4h', 18800 => '5h', 21600 => '6h', 25200 => '7h', 28800 => '8h',
@@ -153,7 +151,7 @@
 		<div class="form-group">
 			<label class="group-name" for="http_user_feed<?= $this->feed->id() ?>"><?= _t('sub.feed.auth.username') ?></label>
 			<div class="group-controls">
-				<input type="text" name="http_user_feed<?= $this->feed->id() ?>" id="http_user_feed<?= $this->feed->id() ?>" class="extend" value="<?=
+				<input type="text" name="http_user_feed<?= $this->feed->id() ?>" id="http_user_feed<?= $this->feed->id() ?>" class="w50" value="<?=
 					empty($auth['username']) ? '' : $auth['username'] ?>" autocomplete="off" />
 				<p class="help"><?= _i('help') ?> <?= _t('sub.feed.auth.help') ?></p>
 			</div>
@@ -161,7 +159,7 @@
 		<div class="form-group">
 			<label class="group-name" for="http_pass_feed<?= $this->feed->id() ?>"><?= _t('sub.feed.auth.password') ?></label>
 			<div class="group-controls">
-				<div class="stick">
+				<div class="stick w50">
 					<input type="password" name="http_pass_feed<?= $this->feed->id() ?>" id="http_pass_feed<?= $this->feed->id() ?>" value="<?=
 						$auth['password'] ?>" autocomplete="new-password" />
 					<button type="button" class="btn toggle-password" data-toggle="http_pass_feed<?= $this->feed->id() ?>"><?= _i('key') ?></button>
@@ -180,58 +178,52 @@
 		<div class="form-group">
 			<label class="group-name" for="mark_updated_article_unread"><?= _t('conf.reading.mark_updated_article_unread') ?></label>
 			<div class="group-controls">
-				<label class="checkbox" for="mark_updated_article_unread">
-					<select name="mark_updated_article_unread" id="mark_updated_article_unread">
-						<option value=""<?= $this->feed->attributes('mark_updated_article_unread') === null ? ' selected="selected"' : '' ?>><?= _t('gen.short.by_default') ?></option>
-						<option value="0"<?= $this->feed->attributes('mark_updated_article_unread') === false ? ' selected="selected"' : '' ?>><?= _t('gen.short.no') ?></option>
-						<option value="1"<?= $this->feed->attributes('mark_updated_article_unread') === true ? ' selected="selected"' : '' ?>><?= _t('gen.short.yes') ?></option>
-					</select>
-				</label>
+				<select name="mark_updated_article_unread" id="mark_updated_article_unread" class="w50">
+					<option value=""<?= $this->feed->attributes('mark_updated_article_unread') === null ? ' selected="selected"' : '' ?>><?= _t('gen.short.by_default') ?></option>
+					<option value="0"<?= $this->feed->attributes('mark_updated_article_unread') === false ? ' selected="selected"' : '' ?>><?= _t('gen.short.no') ?></option>
+					<option value="1"<?= $this->feed->attributes('mark_updated_article_unread') === true ? ' selected="selected"' : '' ?>><?= _t('gen.short.yes') ?></option>
+				</select>
 			</div>
 		</div>
 
 		<div class="form-group">
 			<label class="group-name" for="keep_max_n_unread"><?= _t('conf.reading.read.keep_max_n_unread') ?></label>
 			<div class="group-controls">
-				<input type="number" name="keep_max_n_unread" id="keep_max_n_unread" min="1" max="10000000" value="<?= $this->feed->attributes('keep_max_n_unread') ?>" placeholder="<?= _t('gen.short.by_default') ?>" />
+				<input type="number" name="keep_max_n_unread" id="keep_max_n_unread" class="w50" min="1" max="10000000" value="<?= $this->feed->attributes('keep_max_n_unread') ?>" placeholder="<?= _t('gen.short.by_default') ?>" />
 			</div>
 		</div>
 
 		<div class="form-group">
 			<label class="group-name" for="read_upon_reception"><?= _t('conf.reading.read.when') ?></label>
 			<div class="group-controls">
-				<label class="checkbox" for="read_upon_reception">
-					<select name="read_upon_reception" id="read_upon_reception">
-						<option value=""<?= $this->feed->attributes('read_upon_reception') === null ? ' selected="selected"' : '' ?>><?= _t('gen.short.by_default') ?></option>
-						<option value="0"<?= $this->feed->attributes('read_upon_reception') === false ? ' selected="selected"' : '' ?>><?= _t('gen.short.no') ?></option>
-						<option value="1"<?= $this->feed->attributes('read_upon_reception') === true ? ' selected="selected"' : '' ?>><?= _t('gen.short.yes') ?></option>
-					</select>
-					<?= _t('conf.reading.read.upon_reception') ?>
-				</label>
+				<select name="read_upon_reception" id="read_upon_reception" class="w50">
+					<option value=""<?= $this->feed->attributes('read_upon_reception') === null ? ' selected="selected"' : '' ?>><?= _t('gen.short.by_default') ?></option>
+					<option value="0"<?= $this->feed->attributes('read_upon_reception') === false ? ' selected="selected"' : '' ?>><?= _t('gen.short.no') ?></option>
+					<option value="1"<?= $this->feed->attributes('read_upon_reception') === true ? ' selected="selected"' : '' ?>><?= _t('gen.short.yes') ?></option>
+				</select>
+				<?= _t('conf.reading.read.upon_reception') ?>
 			</div>
 		</div>
 
 		<div class="form-group">
 			<label class="group-name" for="read_when_same_title_in_feed"><?= _t('conf.reading.read.when') ?></label>
 			<div class="group-controls">
-				<label class="checkbox" for="read_when_same_title_in_feed">
-					<select name="read_when_same_title_in_feed" id="read_when_same_title_in_feed">
-						<option value=""<?= $this->feed->attributes('read_when_same_title_in_feed') === null ? ' selected="selected"' : '' ?>><?= _t('gen.short.by_default') ?></option>
-						<option value="0"<?= $this->feed->attributes('read_when_same_title_in_feed') === false ? ' selected="selected"' : '' ?>><?= _t('gen.short.no') ?></option>
-						<option value="10"<?= $this->feed->attributes('read_when_same_title_in_feed') == 10 ? ' selected="selected"' : '' ?>>10</option>
-						<option value="25"<?= $this->feed->attributes('read_when_same_title_in_feed') == 25 ? ' selected="selected"' : '' ?>>25</option>
-						<option value="100"<?= $this->feed->attributes('read_when_same_title_in_feed') == 100 ? ' selected="selected"' : '' ?>>100</option>
-						<option value="1000"<?= $this->feed->attributes('read_when_same_title_in_feed') == 1000 ? ' selected="selected"' : '' ?>>1 000</option>
-					</select>
-					<?= _t('conf.reading.read.when_same_title') ?>
-				</label>
+				<select name="read_when_same_title_in_feed" id="read_when_same_title_in_feed" class="w50">
+					<option value=""<?= $this->feed->attributes('read_when_same_title_in_feed') === null ? ' selected="selected"' : '' ?>><?= _t('gen.short.by_default') ?></option>
+					<option value="0"<?= $this->feed->attributes('read_when_same_title_in_feed') === false ? ' selected="selected"' : '' ?>><?= _t('gen.short.no') ?></option>
+					<option value="10"<?= $this->feed->attributes('read_when_same_title_in_feed') == 10 ? ' selected="selected"' : '' ?>>10</option>
+					<option value="25"<?= $this->feed->attributes('read_when_same_title_in_feed') == 25 ? ' selected="selected"' : '' ?>>25</option>
+					<option value="100"<?= $this->feed->attributes('read_when_same_title_in_feed') == 100 ? ' selected="selected"' : '' ?>>100</option>
+					<option value="1000"<?= $this->feed->attributes('read_when_same_title_in_feed') == 1000 ? ' selected="selected"' : '' ?>>1 000</option>
+				</select>
+				<?= _t('conf.reading.read.when_same_title') ?>
 			</div>
 		</div>
 
 		<div class="form-group">
 			<label class="group-name" for="filteractions_read"><?= _t('conf.reading.read.when') ?></label>
 			<div class="group-controls">
-				<textarea name="filteractions_read" id="filteractions_read"><?php
+				<textarea name="filteractions_read" id="filteractions_read" class="w100"><?php
 					foreach ($this->feed->filtersAction('read') as $filterRead) {
 						echo $filterRead->getRawInput(), PHP_EOL;
 					}
@@ -389,7 +381,7 @@
 		<div class="form-group">
 			<label class="group-name" for="feed_kind"><?= _t('sub.feed.kind') ?></label>
 			<div class="group-controls">
-				<select name="feed_kind" id="feed_kind" class="select-show">
+				<select name="feed_kind" id="feed_kind" class="select-show w100">
 					<option value="<?= FreshRSS_Feed::KIND_RSS ?>" <?= $this->feed->kind() == FreshRSS_Feed::KIND_RSS ? 'selected="selected"' : '' ?>><?= _t('sub.feed.kind.rss') ?></option>
 					<option value="<?= FreshRSS_Feed::KIND_HTML_XPATH ?>" <?= $this->feed->kind() == FreshRSS_Feed::KIND_HTML_XPATH ? 'selected="selected"' : '' ?> data-show="html_xpath"><?= _t('sub.feed.kind.html_xpath') ?></option>
 				</select>
@@ -405,7 +397,7 @@
 				<label class="group-name" for="xPathItem"><small><?= _t('sub.feed.kind.html_xpath.xpath') ?></small><br />
 					<?= _t('sub.feed.kind.html_xpath.item') ?></label>
 				<div class="group-controls">
-					<textarea class="valid-xpath" name="xPathItem" id="xPathItem" rows="2" cols="64" spellcheck="false"
+					<textarea class="valid-xpath w100" name="xPathItem" id="xPathItem" rows="2" cols="64" spellcheck="false"
 						data-leave-validation="<?= $xpath['item'] ?? '' ?>"><?= $xpath['item'] ?? '' ?></textarea>
 					<p class="help"><?= _i('help') ?> <?= _t('sub.feed.kind.html_xpath.item.help') ?></p>
 				</div>
@@ -414,7 +406,7 @@
 				<label class="group-name" for="xPathItemTitle"><small><?= _t('sub.feed.kind.html_xpath.relative') ?></small><br />
 					<?= _t('sub.feed.kind.html_xpath.item_title') ?></label>
 				<div class="group-controls">
-					<textarea class="valid-xpath" name="xPathItemTitle" id="xPathItemTitle" rows="2" cols="64" spellcheck="false"
+					<textarea class="valid-xpath w100" name="xPathItemTitle" id="xPathItemTitle" rows="2" cols="64" spellcheck="false"
 						data-leave-validation="<?= $xpath['itemTitle'] ?? '' ?>"><?= $xpath['itemTitle'] ?? '' ?></textarea>
 					<p class="help"><?= _i('help') ?> <?= _t('sub.feed.kind.html_xpath.item_title.help') ?></p>
 				</div>
@@ -423,7 +415,7 @@
 				<label class="group-name" for="xPathItemContent"><small><?= _t('sub.feed.kind.html_xpath.relative') ?></small><br />
 					<?= _t('sub.feed.kind.html_xpath.item_content') ?></label>
 				<div class="group-controls">
-					<textarea class="valid-xpath" name="xPathItemContent" id="xPathItemContent" rows="2" cols="64" spellcheck="false"
+					<textarea class="valid-xpath w100" name="xPathItemContent" id="xPathItemContent" rows="2" cols="64" spellcheck="false"
 						data-leave-validation="<?= $xpath['itemContent'] ?? '' ?>"><?= $xpath['itemContent'] ?? '' ?></textarea>
 					<p class="help"><?= _i('help') ?> <?= _t('sub.feed.kind.html_xpath.item_content.help') ?></p>
 				</div>
@@ -432,7 +424,7 @@
 				<label class="group-name" for="xPathItemUri"><small><?= _t('sub.feed.kind.html_xpath.relative') ?></small><br />
 					<?= _t('sub.feed.kind.html_xpath.item_uri') ?></label>
 				<div class="group-controls">
-					<textarea class="valid-xpath" name="xPathItemUri" id="xPathItemUri" rows="2" cols="64" spellcheck="false"
+					<textarea class="valid-xpath w100" name="xPathItemUri" id="xPathItemUri" rows="2" cols="64" spellcheck="false"
 						data-leave-validation="<?= $xpath['itemUri'] ?? '' ?>"><?= $xpath['itemUri'] ?? '' ?></textarea>
 					<p class="help"><?= _i('help') ?> <?= _t('sub.feed.kind.html_xpath.item_uri.help') ?></p>
 				</div>
@@ -441,7 +433,7 @@
 				<label class="group-name" for="xPathItemThumbnail"><small><?= _t('sub.feed.kind.html_xpath.relative') ?></small><br />
 					<?= _t('sub.feed.kind.html_xpath.item_thumbnail') ?></label>
 				<div class="group-controls">
-					<textarea class="valid-xpath" name="xPathItemThumbnail" id="xPathItemThumbnail" rows="2" cols="64" spellcheck="false"
+					<textarea class="valid-xpath w100" name="xPathItemThumbnail" id="xPathItemThumbnail" rows="2" cols="64" spellcheck="false"
 						data-leave-validation="<?= $xpath['itemThumbnail'] ?? '' ?>"><?= $xpath['itemThumbnail'] ?? '' ?></textarea>
 					<p class="help"><?= _i('help') ?> <?= _t('sub.feed.kind.html_xpath.item_thumbnail.help') ?></p>
 				</div>
@@ -450,7 +442,7 @@
 				<label class="group-name" for="xPathItemAuthor"><small><?= _t('sub.feed.kind.html_xpath.relative') ?></small><br />
 					<?= _t('sub.feed.kind.html_xpath.item_author') ?></label>
 				<div class="group-controls">
-					<textarea class="valid-xpath" name="xPathItemAuthor" id="xPathItemAuthor" rows="2" cols="64" spellcheck="false"
+					<textarea class="valid-xpath w100" name="xPathItemAuthor" id="xPathItemAuthor" rows="2" cols="64" spellcheck="false"
 						data-leave-validation="<?= $xpath['itemAuthor'] ?? '' ?>"><?= $xpath['itemAuthor'] ?? '' ?></textarea>
 					<p class="help"><?= _i('help') ?> <?= _t('sub.feed.kind.html_xpath.item_author.help') ?></p>
 				</div>
@@ -459,7 +451,7 @@
 				<label class="group-name" for="xPathItemTimestamp"><small><?= _t('sub.feed.kind.html_xpath.relative') ?></small><br />
 					<?= _t('sub.feed.kind.html_xpath.item_timestamp') ?></label>
 				<div class="group-controls">
-					<textarea class="valid-xpath" name="xPathItemTimestamp" id="xPathItemTimestamp" rows="2" cols="64" spellcheck="false"
+					<textarea class="valid-xpath w100" name="xPathItemTimestamp" id="xPathItemTimestamp" rows="2" cols="64" spellcheck="false"
 						data-leave-validation="<?= $xpath['itemTimestamp'] ?? '' ?>"><?= $xpath['itemTimestamp'] ?? '' ?></textarea>
 					<p class="help"><?= _i('help') ?> <?= _t('sub.feed.kind.html_xpath.item_timestamp.help') ?></p>
 				</div>
@@ -468,7 +460,7 @@
 				<label class="group-name" for="xPathItemCategories"><small><?= _t('sub.feed.kind.html_xpath.relative') ?></small><br />
 					<?= _t('sub.feed.kind.html_xpath.item_categories') ?></label>
 				<div class="group-controls">
-					<textarea class="valid-xpath" name="xPathItemCategories" id="xPathItemCategories" rows="2" cols="64" spellcheck="false"
+					<textarea class="valid-xpath w100" name="xPathItemCategories" id="xPathItemCategories" rows="2" cols="64" spellcheck="false"
 						data-leave-validation="<?= $xpath['itemCategories'] ?? '' ?>"><?= $xpath['itemCategories'] ?? '' ?></textarea>
 				</div>
 			</div>
@@ -484,8 +476,8 @@
 		<div class="form-group">
 			<label class="group-name" for="path_entries"><?= _t('sub.feed.css_path') ?></label>
 			<div class="group-controls">
-				<div class="stick">
-					<input type="text" name="path_entries" id="path_entries" class="extend" value="<?= $this->feed->pathEntries() ?>"
+				<div class="stick w100">
+					<input type="text" name="path_entries" id="path_entries" class="w100" value="<?= $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>
@@ -497,12 +489,10 @@
 		<div class="form-group">
 			<label class="group-name" for="curl_params_cookie"><?= _t('sub.feed.css_cookie') ?></label>
 			<div class="group-controls">
-				<div class="stick">
-					<input type="text" name="curl_params_cookie" id="curl_params_cookie" class="extend" value="<?=
-						is_array($this->feed->attributes('curl_params')) && !empty($this->feed->attributes('curl_params')[CURLOPT_COOKIE]) ?
-							$this->feed->attributes('curl_params')[CURLOPT_COOKIE] : ''
-					?>" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
-				</div>
+				<input type="text" name="curl_params_cookie" id="curl_params_cookie" class="w100" value="<?=
+					is_array($this->feed->attributes('curl_params')) && !empty($this->feed->attributes('curl_params')[CURLOPT_COOKIE]) ?
+						$this->feed->attributes('curl_params')[CURLOPT_COOKIE] : ''
+				?>" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
 				<p class="help"><?= _i('help') ?> <?= _t('sub.feed.css_cookie_help') ?></p>
 			</div>
 		</div>
@@ -510,7 +500,7 @@
 		<div class="form-group">
 			<label class="group-name" for="content_action"><?= _t('sub.feed.content_action') ?></label>
 			<div class="group-controls">
-				<select name="content_action" id="content_action">
+				<select name="content_action" id="content_action" class="w50">
 					<option value="replace"<?= 'replace' === $this->feed->attributes('content_action') ? ' selected="selected"' : '' ?>><?= _t('sub.feed.content_action.replace') ?></option>
 					<option value="prepend"<?= 'prepend' === $this->feed->attributes('content_action') ? ' selected="selected"' : '' ?>><?= _t('sub.feed.content_action.prepend') ?></option>
 					<option value="append"<?= 'append' === $this->feed->attributes('content_action') ? ' selected="selected"' : '' ?>><?= _t('sub.feed.content_action.append') ?></option>
@@ -521,12 +511,10 @@
 		<div class="form-group">
 			<label class="group-name" for="curl_params_useragent"><?= _t('sub.feed.useragent') ?></label>
 			<div class="group-controls">
-				<div class="stick">
-					<input type="text" name="curl_params_useragent" id="curl_params_useragent" class="extend" value="<?=
-						is_array($this->feed->attributes('curl_params')) && !empty($this->feed->attributes('curl_params')[CURLOPT_USERAGENT]) ?
-							$this->feed->attributes('curl_params')[CURLOPT_USERAGENT] : ''
-					?>" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
-				</div>
+				<input type="text" name="curl_params_useragent" id="curl_params_useragent" class="w100" value="<?=
+					is_array($this->feed->attributes('curl_params')) && !empty($this->feed->attributes('curl_params')[CURLOPT_USERAGENT]) ?
+						$this->feed->attributes('curl_params')[CURLOPT_USERAGENT] : ''
+				?>" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
 				<p class="help"><?= _i('help') ?> <?= _t('sub.feed.useragent_help') ?></p>
 			</div>
 		</div>
@@ -534,7 +522,7 @@
 		<div class="form-group">
 			<label class="group-name" for="proxy_type"><?= _t('sub.feed.proxy') ?></label>
 			<div class="group-controls">
-				<select class="number" name="proxy_type" id="proxy_type"><?php
+				<select name="proxy_type" id="proxy_type"><?php
 					$type = '';
 					if (is_array($this->feed->attributes('curl_params')) && isset($this->feed->attributes('curl_params')[CURLOPT_PROXYTYPE])) {
 						$type = $this->feed->attributes('curl_params')[CURLOPT_PROXYTYPE];
@@ -544,12 +532,10 @@
 					}
 				?>
 				</select>
-				<div class="stick">
-					<input type="text" name="curl_params" id="curl_params" class="extend" value="<?=
-						is_array($this->feed->attributes('curl_params')) && !empty($this->feed->attributes('curl_params')[CURLOPT_PROXY]) ?
-							$this->feed->attributes('curl_params')[CURLOPT_PROXY] : ''
-					?>" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
-				</div>
+				<input type="text" name="curl_params" id="curl_params" value="<?=
+					is_array($this->feed->attributes('curl_params')) && !empty($this->feed->attributes('curl_params')[CURLOPT_PROXY]) ?
+						$this->feed->attributes('curl_params')[CURLOPT_PROXY] : ''
+				?>" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
 				<p class="help"><?= _i('help') ?> <?= _t('sub.feed.proxy_help') ?></p>
 			</div>
 		</div>
@@ -557,14 +543,14 @@
 		<div class="form-group">
 			<label class="group-name" for="timeout"><?= _t('sub.feed.timeout') ?></label>
 			<div class="group-controls">
-				<input type="number" name="timeout" id="timeout" min="3" max="120" value="<?= $this->feed->attributes('timeout') ?>" placeholder="<?= _t('gen.short.by_default') ?>" />
+				<input type="number" name="timeout" id="timeout" class="w50" min="3" max="120" value="<?= $this->feed->attributes('timeout') ?>" placeholder="<?= _t('gen.short.by_default') ?>" />
 			</div>
 		</div>
 
 		<div class="form-group">
 			<label class="group-name" for="ssl_verify"><?= _t('sub.feed.ssl_verify') ?></label>
 			<div class="group-controls">
-				<select name="ssl_verify" id="ssl_verify">
+				<select name="ssl_verify" id="ssl_verify" class="w50">
 					<option value=""<?= $this->feed->attributes('ssl_verify') === null ? ' selected="selected"' : '' ?>><?= _t('gen.short.by_default') ?></option>
 					<option value="0"<?= $this->feed->attributes('ssl_verify') === false ? ' selected="selected"' : '' ?>><?= _t('gen.short.no') ?></option>
 					<option value="1"<?= $this->feed->attributes('ssl_verify') === true ? ' selected="selected"' : '' ?>><?= _t('gen.short.yes') ?></option>
diff --git a/app/views/index/normal.phtml b/app/views/index/normal.phtml
index 92c10b1b7..49e3c791a 100644
--- a/app/views/index/normal.phtml
+++ b/app/views/index/normal.phtml
@@ -114,11 +114,11 @@ $today = @strtotime('today');
 	if ($nbEntries > 0):
 		call_user_func($this->callbackBeforePagination, $this, $nbEntries, $lastEntry);
 		$this->renderHelper('stream-footer');
-?><?php $class = $this->displaySlider ? ' class="active"' : ''; ?>
-<a href="#" id="close-slider"<?= $class ?>>
+?><?php $class = $this->displaySlider ? ' active' : ''; ?>
+<a href="#" id="close-slider" class="<?= $class ?>">
 	<?= _i('close') ?>
 </a>
-<div id="slider"<?= $class ?>>
+<div id="slider" class="scrollbar-thin<?= $class ?>">
 </div></main><?php
 	else:
 		ob_end_clean();	//Discard the articles headers, as we have no articles
diff --git a/app/views/stats/idle.phtml b/app/views/stats/idle.phtml
index 36ea32a17..c62b5b388 100644
--- a/app/views/stats/idle.phtml
+++ b/app/views/stats/idle.phtml
@@ -49,11 +49,11 @@
 	</p>
 	<?php } ?>
 
-	<?php $class = $this->displaySlider ? ' class="active"' : ''; ?>
-	<a href="#" id="close-slider"<?= $class ?>>
+	<?php $class = $this->displaySlider ? ' active' : ''; ?>
+	<a href="#" id="close-slider" class="<?= $class ?>">
 		<?= _i('close') ?>
 	</a>
-	<div id="slider"<?= $class ?>>
+	<div id="slider" class="scrollbar-thin<?= $class ?>">
 	<?php
 		if (isset($this->feed)) {
 			$this->renderHelper('feed/update');
diff --git a/app/views/subscription/index.phtml b/app/views/subscription/index.phtml
index 8b9176e27..fd3d1e69e 100644
--- a/app/views/subscription/index.phtml
+++ b/app/views/subscription/index.phtml
@@ -74,11 +74,11 @@
 		</div>
 	</div>
 
-	<?php $class = $this->displaySlider ? ' class="active"' : ''; ?>
-	<a href="#" id="close-slider"<?= $class ?>>
+	<?php $class = $this->displaySlider ? ' active' : ''; ?>
+	<a href="#" id="close-slider" class="<?= $class ?>">
 		<?= _i('close') ?>
 	</a>
-	<div id="slider"<?= $class ?>>
+	<div id="slider" class="scrollbar-thin<?= $class ?>">
 	<?php
 		if (isset($this->feed)) {
 			$this->renderHelper('feed/update');
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index 8b35175e4..989ce74af 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -160,8 +160,42 @@ input, select, textarea {
 	font-size: 0.8rem;
 }
 
+input.w50,
+select.w50,
+textarea.w50 {
+	min-width: 50%;
+	box-sizing: border-box;
+}
+
+input.w100,
+select.w100,
+textarea.w100 {
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.stick.w50 {
+	width: 50%;
+}
+
+.stick.w100 {
+	width: 100%;
+}
+
+.stick.w50 input,
+.stick.w100 input {
+	width: 100%;
+}
+
+.stick.w100 input + .btn {
+	width: 29px;
+	padding-left: 3px;
+	padding-right: 3px;
+	text-align: center;
+}
+
 textarea[rows="2"] {
-	height: 3em;
+	height: 4em;
 }
 
 textarea:invalid {
@@ -1397,17 +1431,18 @@ br {
 
 /*=== Slider */
 #slider {
+	background: #fff;
+	width: 0;
 	position: fixed;
 	top: 0; bottom: 0;
-	left: 100%; right: 0;
+	right: 0;
 	overflow: auto;
-	background: #fff;
 	border-left: 1px solid #aaa;
-	transition: left 200ms linear;
+	transition: width 200ms linear;
 }
 
 #slider.active {
-	left: 40%;
+	width: 750px;
 }
 
 #close-slider {
@@ -1832,6 +1867,7 @@ input:checked + .slide-container .properties {
 	#slider.active {
 		left: 0;
 		top: 50px;
+		width: 100%;
 	}
 
 	#close-slider img {
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index e79bbadfb..a3fd59119 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -160,8 +160,42 @@ input, select, textarea {
 	font-size: 0.8rem;
 }
 
+input.w50,
+select.w50,
+textarea.w50 {
+	min-width: 50%;
+	box-sizing: border-box;
+}
+
+input.w100,
+select.w100,
+textarea.w100 {
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.stick.w50 {
+	width: 50%;
+}
+
+.stick.w100 {
+	width: 100%;
+}
+
+.stick.w50 input,
+.stick.w100 input {
+	width: 100%;
+}
+
+.stick.w100 input + .btn {
+	width: 29px;
+	padding-right: 3px;
+	padding-left: 3px;
+	text-align: center;
+}
+
 textarea[rows="2"] {
-	height: 3em;
+	height: 4em;
 }
 
 textarea:invalid {
@@ -1397,17 +1431,18 @@ br {
 
 /*=== Slider */
 #slider {
+	background: #fff;
+	width: 0;
 	position: fixed;
 	top: 0; bottom: 0;
-	right: 100%; left: 0;
+	left: 0;
 	overflow: auto;
-	background: #fff;
 	border-right: 1px solid #aaa;
-	transition: right 200ms linear;
+	transition: width 200ms linear;
 }
 
 #slider.active {
-	right: 40%;
+	width: 750px;
 }
 
 #close-slider {
@@ -1832,6 +1867,7 @@ input:checked + .slide-container .properties {
 	#slider.active {
 		right: 0;
 		top: 50px;
+		width: 100%;
 	}
 
 	#close-slider img {