Certains input s'agrandissent à la sélection

Désormais, les champs marqués d'un .extend s'étendront sur 300px (taille
par défaut = 180px). Cela a été impliqué dans tous les thèmes. Le
champs de recherche bénéficie de cette amélioration (mais ce dernier est
un peu plus grand par défaut)

Voir issue #375

12 files changed, 63 insertions, 26 deletions

diff --git a/app/layout/aside_feed.phtml b/app/layout/aside_feed.phtml
index 2446e72cb..e324b15bd 100644
--- a/app/layout/aside_feed.phtml
+++ b/app/layout/aside_feed.phtml
@@ -27,10 +27,10 @@
 
 					<li class="dropdown-header"><?php echo Minz_Translate::t ('http_authentication'); ?></li>
 					<li class="input">
-						<input type="text" name="http_user" id="http_user" autocomplete="off" placeholder="<?php echo Minz_Translate::t ('username'); ?>" />
+						<input type="text" name="http_user" id="http_user_add" autocomplete="off" placeholder="<?php echo Minz_Translate::t ('username'); ?>" />
 					</li>
 					<li class="input">
-						<input type="password" name="http_pass" id="http_pass" autocomplete="off" placeholder="<?php echo Minz_Translate::t ('password'); ?>" />
+						<input type="password" name="http_pass" id="http_pass_add" autocomplete="off" placeholder="<?php echo Minz_Translate::t ('password'); ?>" />
 					</li>
 				</ul>
 			</div>
diff --git a/app/layout/header.phtml b/app/layout/header.phtml
index 69b9c65a1..b00c30e71 100644
--- a/app/layout/header.phtml
+++ b/app/layout/header.phtml
@@ -36,7 +36,7 @@ if (Minz_Configuration::canLogIn()) {
 		<form action="<?php echo _url ('index', 'index'); ?>" method="get">
 			<div class="stick">
 				<?php $search = Minz_Request::param ('search', ''); ?>
-				<input type="search" name="search" id="search" value="<?php echo $search; ?>" placeholder="<?php echo Minz_Translate::t ('search'); ?>" />
+				<input type="search" name="search" id="search" class="extend" value="<?php echo $search; ?>" placeholder="<?php echo Minz_Translate::t ('search'); ?>" />
 
 				<?php $get = Minz_Request::param ('get', ''); ?>
 				<?php if($get != '') { ?>
diff --git a/app/layout/nav_menu.phtml b/app/layout/nav_menu.phtml
index edd7707ad..c807e6dd5 100644
--- a/app/layout/nav_menu.phtml
+++ b/app/layout/nav_menu.phtml
@@ -205,7 +205,7 @@
 	<div class="item search">
 		<form action="<?php echo _url ('index', 'index'); ?>" method="get">
 			<?php $search = Minz_Request::param ('search', ''); ?>
-			<input type="search" name="search" value="<?php echo $search; ?>" placeholder="<?php echo Minz_Translate::t ('search_short'); ?>" />
+			<input type="search" name="search" class="extend" value="<?php echo $search; ?>" placeholder="<?php echo Minz_Translate::t ('search_short'); ?>" />
 
 			<?php $get = Minz_Request::param ('get', ''); ?>
 			<?php if($get != '') { ?>
diff --git a/app/views/configure/feed.phtml b/app/views/configure/feed.phtml
index fc26ab58b..138808a9f 100644
--- a/app/views/configure/feed.phtml
+++ b/app/views/configure/feed.phtml
@@ -16,26 +16,26 @@
 		<div class="form-group">
 			<label class="group-name" for="name"><?php echo Minz_Translate::t ('title'); ?></label>
 			<div class="group-controls">
-				<input type="text" name="name" id="name" value="<?php echo $this->flux->name () ; ?>" />
+				<input type="text" name="name" id="name" class="extend" value="<?php echo $this->flux->name () ; ?>" />
 			</div>
 		</div>
 		<div class="form-group">
-			<label class="group-name"><?php echo Minz_Translate::t ('feed_description'); ?></label>
+			<label class="group-name" for="description"><?php echo Minz_Translate::t ('feed_description'); ?></label>
 			<div class="group-controls">
 				<textarea name="description" id="description"><?php echo htmlspecialchars($this->flux->description(), ENT_NOQUOTES, 'UTF-8'); ?></textarea>
 			</div>
 		</div>
 		<div class="form-group">
-			<label class="group-name"><?php echo Minz_Translate::t ('website_url'); ?></label>
+			<label class="group-name" for="website"><?php echo Minz_Translate::t ('website_url'); ?></label>
 			<div class="group-controls">
-				<input type="text" name="website" id="website" value="<?php echo $this->flux->website (); ?>" />
+				<input type="text" name="website" id="website" class="extend" value="<?php echo $this->flux->website (); ?>" />
 				<a target="_blank" href="<?php echo $this->flux->website (); ?>"><?php echo FreshRSS_Themes::icon('link'); ?></a>
 			</div>
 		</div>
 		<div class="form-group">
-			<label class="group-name"><?php echo Minz_Translate::t ('feed_url'); ?></label>
+			<label class="group-name" for="url"><?php echo Minz_Translate::t ('feed_url'); ?></label>
 			<div class="group-controls">
-				<input type="text" name="url" id="url" value="<?php echo $this->flux->url (); ?>" />
+				<input type="text" name="url" id="url" class="extend" value="<?php echo $this->flux->url (); ?>" />
 				<a target="_blank" href="<?php echo $this->flux->url (); ?>"><?php echo FreshRSS_Themes::icon('link'); ?></a>
 				  <a class="btn" target="_blank" href="http://validator.w3.org/feed/check.cgi?url=<?php echo $this->flux->url (); ?>"><?php echo Minz_Translate::t ('feed_validator'); ?></a>
 			</div>
@@ -106,13 +106,13 @@
 		<div class="form-group">
 			<label class="group-name" for="http_user"><?php echo Minz_Translate::t ('http_username'); ?></label>
 			<div class="group-controls">
-				<input type="text" name="http_user" id="http_user" value="<?php echo $auth['username']; ?>" autocomplete="off" />
+				<input type="text" name="http_user" id="http_user" class="extend" value="<?php echo $auth['username']; ?>" autocomplete="off" />
 				<?php echo FreshRSS_Themes::icon('help'); ?> <?php echo Minz_Translate::t ('access_protected_feeds'); ?>
 			</div>
 
 			<label class="group-name" for="http_pass"><?php echo Minz_Translate::t ('http_password'); ?></label>
 			<div class="group-controls">
-				<input type="password" name="http_pass" id="http_pass" value="<?php echo $auth['password']; ?>" autocomplete="off" />
+				<input type="password" name="http_pass" id="http_pass" class="extend" value="<?php echo $auth['password']; ?>" autocomplete="off" />
 			</div>
 		</div>
 
@@ -127,7 +127,7 @@
 		<div class="form-group">
 			<label class="group-name" for="path_entries"><?php echo Minz_Translate::t ('css_path_on_website'); ?></label>
 			<div class="group-controls">
-				<input type="text" name="path_entries" id="path_entries" value="<?php echo $this->flux->pathEntries (); ?>" placeholder="<?php echo Minz_Translate::t ('blank_to_disable'); ?>" />
+				<input type="text" name="path_entries" id="path_entries" class="extend" value="<?php echo $this->flux->pathEntries (); ?>" placeholder="<?php echo Minz_Translate::t ('blank_to_disable'); ?>" />
 				<?php echo FreshRSS_Themes::icon('help'); ?> <?php echo Minz_Translate::t ('retrieve_truncated_feeds'); ?>
 			</div>
 		</div>
diff --git a/app/views/configure/sharing.phtml b/app/views/configure/sharing.phtml
index c6a96b48a..9dc733392 100644
--- a/app/views/configure/sharing.phtml
+++ b/app/views/configure/sharing.phtml
@@ -10,7 +10,7 @@
 				<?php echo Minz_Translate::t ('your_shaarli'); ?>
 			</label>
 			<div class="group-controls">
-				<input type="url" id="shaarli" name="shaarli" value="<?php echo $this->conf->sharing ('shaarli'); ?>" placeholder="<?php echo Minz_Translate::t ('blank_to_disable'); ?>" size="64" />
+				<input type="url" id="shaarli" name="shaarli" class="extend" value="<?php echo $this->conf->sharing ('shaarli'); ?>" placeholder="<?php echo Minz_Translate::t ('blank_to_disable'); ?>" size="64" />
 
 				<?php echo FreshRSS_Themes::icon('help'); ?> <a target="_blank" href="http://sebsauvage.net/wiki/doku.php?id=php:shaarli"><?php echo Minz_Translate::t ('more_information'); ?></a>
 			</div>
@@ -21,7 +21,7 @@
 				<?php echo Minz_Translate::t ('your_poche'); ?>
 			</label>
 			<div class="group-controls">
-				<input type="url" id="poche" name="poche" value="<?php echo $this->conf->sharing ('poche'); ?>" placeholder="<?php echo Minz_Translate::t ('blank_to_disable'); ?>" size="64" />
+				<input type="url" id="poche" name="poche" class="extend" value="<?php echo $this->conf->sharing ('poche'); ?>" placeholder="<?php echo Minz_Translate::t ('blank_to_disable'); ?>" size="64" />
 
 				<?php echo FreshRSS_Themes::icon('help'); ?> <a target="_blank" href="http://www.inthepoche.com/"><?php echo Minz_Translate::t ('more_information'); ?></a>
 			</div>
@@ -32,7 +32,7 @@
 				<?php echo Minz_Translate::t ('your_diaspora_pod'); ?>
 			</label>
 			<div class="group-controls">
-				<input type="url" id="diaspora" name="diaspora" value="<?php echo $this->conf->sharing ('diaspora'); ?>" placeholder="<?php echo Minz_Translate::t ('blank_to_disable'); ?>" size="64" />
+				<input type="url" id="diaspora" name="diaspora" class="extend" value="<?php echo $this->conf->sharing ('diaspora'); ?>" placeholder="<?php echo Minz_Translate::t ('blank_to_disable'); ?>" size="64" />
 
 				<?php echo FreshRSS_Themes::icon('help'); ?> <a target="_blank" href="https://diasporafoundation.org/"><?php echo Minz_Translate::t ('more_information'); ?></a>
 			</div>
diff --git a/app/views/configure/users.phtml b/app/views/configure/users.phtml
index f37b2320f..8ab4c04ba 100644
--- a/app/views/configure/users.phtml
+++ b/app/views/configure/users.phtml
@@ -29,7 +29,7 @@
 			<label class="group-name" for="mail_login"><?php echo Minz_Translate::t('persona_connection_email'); ?></label>
 			<?php $mail = $this->conf->mail_login; ?>
 			<div class="group-controls">
-				<input type="email" id="mail_login" name="mail_login" value="<?php echo $mail; ?>" <?php echo Minz_Configuration::isAdmin(Minz_Session::param('currentUser', '_')) ? '' : 'disabled="disabled"'; ?> placeholder="alice@example.net" />
+				<input type="email" id="mail_login" name="mail_login" class="extend" value="<?php echo $mail; ?>" <?php echo Minz_Configuration::isAdmin(Minz_Session::param('currentUser', '_')) ? '' : 'disabled="disabled"'; ?> placeholder="alice@example.net" />
 				<noscript><b><?php echo Minz_Translate::t('javascript_should_be_activated'); ?></b></noscript>
 			</div>
 		</div>
@@ -145,7 +145,7 @@
 			<label class="group-name" for="new_user_email"><?php echo Minz_Translate::t('persona_connection_email'); ?></label>
 			<?php $mail = $this->conf->mail_login; ?>
 			<div class="group-controls">
-				<input type="email" id="new_user_email" name="new_user_email" placeholder="alice@example.net" />
+				<input type="email" id="new_user_email" name="new_user_email" class="extend" placeholder="alice@example.net" />
 			</div>
 		</div>
 
diff --git a/p/themes/Dark/freshrss.css b/p/themes/Dark/freshrss.css
index 19809c215..77dd1fc4f 100644
--- a/p/themes/Dark/freshrss.css
+++ b/p/themes/Dark/freshrss.css
@@ -31,7 +31,6 @@
 			}
 		.header > .item.search input {
 			width: 230px;
-			transition: width 200ms linear;
 		}
 			.header .item.search input:focus {
 				width: 330px;
@@ -825,9 +824,9 @@ select.number option {
 	background: #1c1c1c;
 }
 
-.header > .item.search input {
+input.extend {
 	-moz-transition: width 200ms linear;
-	 -webkit-transition: width 200ms linear;
+	-webkit-transition: width 200ms linear;
 	-o-transition: width 200ms linear;
 	-ms-transition: width 200ms linear;
 }
diff --git a/p/themes/Dark/global.css b/p/themes/Dark/global.css
index b02f00526..f96f83fc8 100644
--- a/p/themes/Dark/global.css
+++ b/p/themes/Dark/global.css
@@ -87,6 +87,13 @@ label {
 	line-height: 25px;
 	cursor: pointer;
 }
+input {
+	width: 180px;
+}
+textarea {
+	width: 360px;
+	height: 100px;
+}
 input, select, textarea {
 	display: inline-block;
 	max-width: 100%;
@@ -116,6 +123,10 @@ input, select, textarea {
 		border-color: red;
 		box-shadow: 0 0 2px 1px red;
 	}
+	input:focus.extend {
+		width: 300px;
+		transition: width 200ms linear;
+	}
 
 .form-group {
 	margin: 0;
diff --git a/p/themes/Flat/freshrss.css b/p/themes/Flat/freshrss.css
index 894497656..04b3df842 100644
--- a/p/themes/Flat/freshrss.css
+++ b/p/themes/Flat/freshrss.css
@@ -34,7 +34,6 @@ body {
 			}
 		.header > .item.search input {
 			width: 230px;
-			transition: width 200ms linear;
 		}
 			.header .item.search input:focus {
 				width: 330px;
@@ -800,6 +799,13 @@ select.number option {
 	-ms-transform: rotate(45deg);
 }
 
+input.extend {
+	-moz-transition: width 200ms linear;
+	-webkit-transition: width 200ms linear;
+	-o-transition: width 200ms linear;
+	-ms-transition: width 200ms linear;
+}
+
 @media print {
 	.header,
 	.aside,
diff --git a/p/themes/Flat/global.css b/p/themes/Flat/global.css
index af1d37549..e3baa26ab 100644
--- a/p/themes/Flat/global.css
+++ b/p/themes/Flat/global.css
@@ -88,6 +88,13 @@ label {
 	font-weight: bold;
 	color: #444;
 }
+input {
+	width: 180px;
+}
+textarea {
+	width: 360px;
+	height: 100px;
+}
 input, select, textarea {
 	display: inline-block;
 	max-width: 100%;
@@ -117,6 +124,10 @@ input, select, textarea {
 		border-color: red;
 		box-shadow: 0 0 2px 1px red;
 	}
+	input:focus.extend {
+		width: 300px;
+		transition: width 200ms linear;
+	}
 
 .form-group {
 	margin: 5px 0;
diff --git a/p/themes/Origine/freshrss.css b/p/themes/Origine/freshrss.css
index be549bf41..906e0c72b 100644
--- a/p/themes/Origine/freshrss.css
+++ b/p/themes/Origine/freshrss.css
@@ -32,7 +32,6 @@
 			}
 		.header > .item.search input {
 			width: 230px;
-			transition: width 200ms linear;
 		}
 			.header .item.search input:focus {
 				width: 330px;
@@ -847,9 +846,9 @@ select.number option {
 	background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%);
 }
 
-.header > .item.search input {
+input.extend {
 	-moz-transition: width 200ms linear;
-	 -webkit-transition: width 200ms linear;
+	-webkit-transition: width 200ms linear;
 	-o-transition: width 200ms linear;
 	-ms-transition: width 200ms linear;
 }
@@ -857,7 +856,7 @@ select.number option {
 @media(max-width: 840px) {
 	.aside {
 		-moz-transition: width 200ms linear;
-		 -webkit-transition: width 200ms linear;
+		-webkit-transition: width 200ms linear;
 		-o-transition: width 200ms linear;
 		-ms-transition: width 200ms linear;
 	}
diff --git a/p/themes/Origine/global.css b/p/themes/Origine/global.css
index 5209ad161..58a3a52b1 100644
--- a/p/themes/Origine/global.css
+++ b/p/themes/Origine/global.css
@@ -86,6 +86,13 @@ label {
 	line-height: 25px;
 	cursor: pointer;
 }
+input {
+	width: 180px;
+}
+textarea {
+	width: 360px;
+	height: 100px;
+}
 input, select, textarea {
 	display: inline-block;
 	max-width: 100%;
@@ -116,6 +123,10 @@ input, select, textarea {
 		border-color: red;
 		box-shadow: 0 0 2px 1px red;
 	}
+	input:focus.extend {
+		width: 300px;
+		transition: width 200ms linear;
+	}
 
 .form-group {
 	margin: 0;