Improved: expanding inputs (#5040)

* fix

* wider input element

app/layout/header.phtml

@@ -15,7 +15,7 @@
 		<?php if (FreshRSS_Auth::hasAccess() || FreshRSS_Context::$system_conf->allow_anonymous) { ?>
 		<form action="<?= _url('index', 'index') ?>" method="get">
 			<div class="stick">
-				<input type="search" name="search" id="search" class="extend"
+				<input type="search" name="search" id="search"
 					value="<?= htmlspecialchars(htmlspecialchars_decode(FreshRSS_Context::$search, ENT_QUOTES), ENT_COMPAT, 'UTF-8') ?>"
 					placeholder="<?= _t('gen.menu.search') ?>" />
 

app/views/configure/system.phtml

@@ -16,7 +16,7 @@
 		<div class="form-group">
 			<label class="group-name" for="instance-name"><?= _t('admin.system.instance-name') ?></label>
 			<div class="group-controls">
-				<input type="text" class="extend" id="instance-name" name="instance-name" value="<?= FreshRSS_Context::$system_conf->title ?>"
+				<input type="text" id="instance-name" name="instance-name" value="<?= FreshRSS_Context::$system_conf->title ?>"
 					data-leave-validation="<?= FreshRSS_Context::$system_conf->title ?>"/>
 			</div>
 		</div>
@@ -24,7 +24,7 @@
 		<div class="form-group">
 			<label class="group-name" for="auto-update-url"><?= _t('admin.system.auto-update-url') ?></label>
 			<div class="group-controls">
-				<input type="text" class="extend" id="auto-update-url" name="auto-update-url" value="<?= FreshRSS_Context::$system_conf->auto_update_url ?>"
+				<input type="text" id="auto-update-url" name="auto-update-url" value="<?= FreshRSS_Context::$system_conf->auto_update_url ?>"
 					data-leave-validation="<?= FreshRSS_Context::$system_conf->auto_update_url ?>"/>
 			</div>
 		</div>

app/views/feed/add.phtml

@@ -67,7 +67,7 @@
 		<div class="form-group">
 			<label class="group-name" for="http_user"><?= _t('sub.feed.auth.username') ?></label>
 			<div class="group-controls">
-				<input type="text" name="http_user" id="http_user" class="extend" value="<?= $auth['username'] ?>" autocomplete="off" />
+				<input type="text" name="http_user" id="http_user" value="<?= $auth['username'] ?>" autocomplete="off" />
 				<p class="help"><?= _i('help') ?> <?= _t('sub.feed.auth.help') ?></p>
 			</div>
 

app/views/helpers/category/update.phtml

@@ -16,7 +16,7 @@
 		<div class="form-group">
 			<label class="group-name" for="name"><?= _t('sub.category.title') ?></label>
 			<div class="group-controls">
-				<input type="text" name="name" id="name" class="extend" value="<?= $this->category->name()  ?>" <?php
+				<input type="text" name="name" id="name" value="<?= $this->category->name()  ?>" <?php
 					//Disallow changing the name of the default category
 					echo $this->category->id() == FreshRSS_CategoryDAO::DEFAULTCATEGORYID ? 'disabled="disabled"' : '';
 				?> />

app/views/helpers/configure/query.phtml

@@ -12,7 +12,7 @@
 		<div class="form-group">
 			<label class="group-name" for="name"><?= _t('conf.query.name') ?></label>
 			<div class="group-controls">
-				<input type="text" name="name" id="name" class="extend" value="<?= $this->query->getName()  ?>" />
+				<input type="text" name="name" id="name" value="<?= $this->query->getName()  ?>" />
 			</div>
 		</div>
 		<legend><?= _t('conf.query.filter') ?></legend>
@@ -20,7 +20,7 @@
 		<div class="form-group">
 			<label class="group-name" for=""><?= _t('conf.query.filter.search') ?></label>
 			<div class="group-controls">
-				<input type="text" id="query_search" name="query[search]"  class="extend" value="<?= htmlspecialchars($this->query->getSearch(), ENT_COMPAT, 'UTF-8') ?>"/>
+				<input type="text" id="query_search" name="query[search]" value="<?= htmlspecialchars($this->query->getSearch(), ENT_COMPAT, 'UTF-8') ?>"/>
 			</div>
 		</div>
 		<div class="form-group">

app/views/subscription/add.phtml

@@ -190,7 +190,7 @@
 			<div class="form-group">
 				<label class="group-name" for="curl_params_cookie"><?= _t('sub.feed.css_cookie') ?></label>
 				<div class="group-controls">
-					<input type="text" name="curl_params_cookie" id="curl_params_cookie" class="extend" value="" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
+					<input type="text" name="curl_params_cookie" id="curl_params_cookie" value="" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
 					<p class="help"><?= _i('help') ?> <?= _t('sub.feed.css_cookie_help') ?></p>
 					<label for="curl_params_cookiefile">
 						<input type="checkbox" name="curl_params_cookiefile" id="curl_params_cookiefile" value="1" />
@@ -203,7 +203,7 @@
 			<div class="form-group">
 				<label class="group-name" for="curl_params_redirects"><?= _t('sub.feed.max_http_redir') ?></label>
 				<div class="group-controls">
-					<input type="number" name="curl_params_redirects" id="curl_params_redirects" class="extend" min="-1" value="" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
+					<input type="number" name="curl_params_redirects" id="curl_params_redirects" min="-1" value="" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
 					<p class="help"><?= _i('help') ?> <?= _t('sub.feed.max_http_redir_help') ?></p>
 				</div>
 			</div>
@@ -212,7 +212,7 @@
 				<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="" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
+						<input type="text" name="curl_params_useragent" id="curl_params_useragent" value="" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
 					</div>
 					<p class="help"><?= _i('help') ?> <?= _t('sub.feed.useragent_help') ?></p>
 				</div>
@@ -228,7 +228,7 @@
 					?>
 					</select>
 					<div class="stick">
-						<input type="text" name="curl_params" id="curl_params" class="extend" value="" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
+						<input type="text" name="curl_params" id="curl_params" value="" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
 					</div>
 					<p class="help"><?= _i('help') ?> <?= _t('sub.feed.proxy_help') ?></p>
 				</div>

p/themes/Alternative-Dark/adark.css

@@ -114,10 +114,6 @@ input:disabled, select:disabled {
 	border-color: var(--border-color-dark);
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -556,10 +552,6 @@ kbd {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 

p/themes/Alternative-Dark/adark.rtl.css

@@ -114,10 +114,6 @@ input:disabled, select:disabled {
 	border-color: var(--border-color-dark);
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -556,10 +552,6 @@ kbd {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 

p/themes/Ansum/_forms.scss

@@ -120,11 +120,6 @@ input:disabled, select:disabled {
 	border-color: variables.$grey-medium-dark;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
-
 .form-group {
 	padding: 5px;
 	border-radius: 3px;

p/themes/Ansum/_layout.scss

@@ -29,7 +29,7 @@
 
 		&.search {
 			input {
-				width: 230px;
+				width: 350px;
 				color: variables.$sid-font-color;
 				border: none;
 				border-radius: 2px 0 0 2px;
@@ -42,9 +42,7 @@
 				}
 
 				&:focus {
-					width: 350px;
 					color: variables.$grey-dark;
-
 					background-color: variables.$white;
 				}
 			}

p/themes/Ansum/ansum.css

@@ -164,10 +164,6 @@ input:disabled, select:disabled {
 	border-color: #ba9;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 .form-group {
 	padding: 5px;
 	border-radius: 3px;
@@ -673,7 +669,7 @@ form th {
 	filter: invert(80%) opacity(80%);
 }
 .header .item.search input {
-	width: 230px;
+	width: 350px;
 	color: #363330;
 	border: none;
 	border-radius: 2px 0 0 2px;
@@ -684,7 +680,6 @@ form th {
 	background-color: #efe3d3;
 }
 .header .item.search input:focus {
-	width: 350px;
 	color: #766556;
 	background-color: #fff;
 }

p/themes/Ansum/ansum.rtl.css

@@ -164,10 +164,6 @@ input:disabled, select:disabled {
 	border-color: #ba9;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 .form-group {
 	padding: 5px;
 	border-radius: 3px;
@@ -673,7 +669,7 @@ form th {
 	filter: invert(80%) opacity(80%);
 }
 .header .item.search input {
-	width: 230px;
+	width: 350px;
 	color: #363330;
 	border: none;
 	border-radius: 0 2px 2px 0;
@@ -684,7 +680,6 @@ form th {
 	background-color: #efe3d3;
 }
 .header .item.search input:focus {
-	width: 350px;
 	color: #766556;
 	background-color: #fff;
 }

p/themes/BlueLagoon/BlueLagoon.css

@@ -66,10 +66,6 @@ input:disabled, select:disabled {
 	border-color: #ccc;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -593,10 +589,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 

p/themes/BlueLagoon/BlueLagoon.rtl.css

@@ -66,10 +66,6 @@ input:disabled, select:disabled {
 	border-color: #ccc;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -593,10 +589,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 

p/themes/Dark/dark.css

@@ -78,10 +78,6 @@ input:disabled, select:disabled {
 	border-color: #000;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -544,10 +540,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 

p/themes/Dark/dark.rtl.css

@@ -78,10 +78,6 @@ input:disabled, select:disabled {
 	border-color: #000;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -544,10 +540,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 

p/themes/Flat/flat.css

@@ -70,10 +70,6 @@ input:disabled, select:disabled {
 	background: #eee;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -547,10 +543,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 

p/themes/Flat/flat.rtl.css

@@ -70,10 +70,6 @@ input:disabled, select:disabled {
 	background: #eee;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -547,10 +543,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 

p/themes/Mapco/_forms.scss

@@ -119,11 +119,6 @@ input:disabled, select:disabled {
 	background: variables.$grey-light;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
-
 .form-group {
 	padding: 5px;
 	border-radius: 3px;

p/themes/Mapco/_layout.scss

@@ -29,7 +29,7 @@
 
 		&.search {
 			input {
-				width: 230px;
+				width: 350px;
 				color: variables.$sid-font-color;
 				border: none;
 				border-radius: 2px 0 0 2px;
@@ -42,9 +42,7 @@
 				}
 
 				&:focus {
-					width: 350px;
 					color: variables.$grey-dark;
-
 					background-color: variables.$white;
 				}
 			}

p/themes/Mapco/mapco.css

@@ -163,10 +163,6 @@ input:disabled, select:disabled {
 	background: #eff0f2;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 .form-group {
 	padding: 5px;
 	border-radius: 3px;
@@ -687,7 +683,7 @@ form th {
 	filter: grayscale(100%) brightness(2.2);
 }
 .header .item.search input {
-	width: 230px;
+	width: 350px;
 	color: #ffffff;
 	border: none;
 	border-radius: 2px 0 0 2px;
@@ -698,7 +694,6 @@ form th {
 	background-color: #17181a;
 }
 .header .item.search input:focus {
-	width: 350px;
 	color: #5b6871;
 	background-color: #fff;
 }

p/themes/Mapco/mapco.rtl.css

@@ -163,10 +163,6 @@ input:disabled, select:disabled {
 	background: #eff0f2;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 .form-group {
 	padding: 5px;
 	border-radius: 3px;
@@ -687,7 +683,7 @@ form th {
 	filter: grayscale(100%) brightness(2.2);
 }
 .header .item.search input {
-	width: 230px;
+	width: 350px;
 	color: #ffffff;
 	border: none;
 	border-radius: 0 2px 2px 0;
@@ -698,7 +694,6 @@ form th {
 	background-color: #17181a;
 }
 .header .item.search input:focus {
-	width: 350px;
 	color: #5b6871;
 	background-color: #fff;
 }

p/themes/Nord/nord.css

@@ -448,10 +448,6 @@ img.favicon {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
@@ -833,17 +829,10 @@ textarea {
 	height: 100px;
 }
 
-
 option {
 	padding: 0 .5em;
 }
 
-
-input.extend {
-	transition: width 200ms linear;
-}
-
-
 /*=== COMPONENTS */
 /*===============*/
 /*=== Forms */

p/themes/Nord/nord.rtl.css

@@ -448,10 +448,6 @@ img.favicon {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
@@ -833,17 +829,10 @@ textarea {
 	height: 100px;
 }
 
-
 option {
 	padding: 0 .5em;
 }
 
-
-input.extend {
-	transition: width 200ms linear;
-}
-
-
 /*=== COMPONENTS */
 /*===============*/
 /*=== Forms */

p/themes/Origine/origine.css

@@ -151,10 +151,6 @@ input:disabled, select:disabled {
 	background-color: var(--background-color-light-shadowed);
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -656,10 +652,6 @@ a:hover .icon {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 

p/themes/Origine/origine.rtl.css

@@ -151,10 +151,6 @@ input:disabled, select:disabled {
 	background-color: var(--background-color-light-shadowed);
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -656,10 +652,6 @@ a:hover .icon {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 

p/themes/Pafat/pafat.css

@@ -140,10 +140,6 @@ input:invalid, select:invalid {
 	box-shadow: 0 0 2px 2px var(--invalid-box-shadow-color) inset;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -611,7 +607,7 @@ a.signin {
 	height: 29px;
 }
 
-.header .item.search input:focus {
+.header .item.search input {
 	width: 350px;
 }
 

p/themes/Pafat/pafat.rtl.css

@@ -140,10 +140,6 @@ input:invalid, select:invalid {
 	box-shadow: 0 0 2px 2px var(--invalid-box-shadow-color) inset;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -611,7 +607,7 @@ a.signin {
 	height: 29px;
 }
 
-.header .item.search input:focus {
+.header .item.search input {
 	width: 350px;
 }
 

p/themes/Screwdriver/screwdriver.css

@@ -64,10 +64,6 @@ input:disabled, select:disabled {
 	background: #eee;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -577,10 +573,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 

p/themes/Screwdriver/screwdriver.rtl.css

@@ -64,10 +64,6 @@ input:disabled, select:disabled {
 	background: #eee;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -577,10 +573,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 

p/themes/Swage/swage.css

@@ -148,10 +148,6 @@ select {
 	padding-bottom: 8px;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 option {
 	padding: 0 0.5em;
 }
@@ -580,9 +576,6 @@ form th {
 	top: 5px;
 	filter: grayscale(100%) brightness(100);
 }
-.header .item.search input:focus {
-	width: 350px;
-}
 .header .item.search {
 	display: none;
 }

p/themes/Swage/swage.rtl.css

@@ -148,10 +148,6 @@ select {
 	padding-bottom: 8px;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 option {
 	padding: 0 0.5em;
 }
@@ -580,9 +576,6 @@ form th {
 	top: 5px;
 	filter: grayscale(100%) brightness(100);
 }
-.header .item.search input:focus {
-	width: 350px;
-}
 .header .item.search {
 	display: none;
 }

p/themes/Swage/swage.scss

@@ -186,12 +186,6 @@ select {
 	padding-bottom: 8px;
 }
 
-input {
-	&.extend {
-		transition: width 200ms linear;
-	}
-}
-
 option {
 	padding: 0 .5em;
 }
@@ -744,10 +738,6 @@ form {
 		}
 	}
 
-	.item.search input:focus {
-		width: 350px;
-	}
-
 	.item.search {
 		display: none;
 	}

p/themes/base-theme/base.css

@@ -52,10 +52,6 @@ input:invalid, select:invalid {
 input:disabled, select:disabled {
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -404,10 +400,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 

p/themes/base-theme/base.rtl.css

@@ -52,10 +52,6 @@ input:invalid, select:invalid {
 input:disabled, select:disabled {
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -404,10 +400,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 

p/themes/base-theme/frss.css

@@ -194,7 +194,8 @@ label {
 }
 
 input {
-	width: 180px;
+	max-width: 90%;
+	width: 300px;
 }
 
 input[type=number] {
@@ -203,8 +204,7 @@ input[type=number] {
 
 textarea,
 input[type="file"],
-input.long,
-input.extend:focus {
+input.long {
 	width: 300px;
 }
 
@@ -212,6 +212,7 @@ input, select, textarea {
 	display: inline-block;
 	max-width: 100%;
 	font-size: 0.8rem;
+	box-sizing: border-box;
 }
 
 input.w50,

p/themes/base-theme/frss.rtl.css

@@ -194,7 +194,8 @@ label {
 }
 
 input {
-	width: 180px;
+	max-width: 90%;
+	width: 300px;
 }
 
 input[type=number] {
@@ -203,8 +204,7 @@ input[type=number] {
 
 textarea,
 input[type="file"],
-input.long,
-input.extend:focus {
+input.long {
 	width: 300px;
 }
 
@@ -212,6 +212,7 @@ input, select, textarea {
 	display: inline-block;
 	max-width: 100%;
 	font-size: 0.8rem;
+	box-sizing: border-box;
 }
 
 input.w50,