Bien meilleure gestion des formulaires

7 files changed, 235 insertions, 139 deletions

diff --git a/app/views/configure/categorize.phtml b/app/views/configure/categorize.phtml
index 567859ea5..5d649a93a 100644
--- a/app/views/configure/categorize.phtml
+++ b/app/views/configure/categorize.phtml
@@ -1,18 +1,31 @@
 <?php $this->partial ('aside_configure'); ?>
 
-<div class="table">
-	<form method="post" action="">
-		<h1>Gérer les catégories</h1>
-	
+<div class="post">
+	<form method="post" action="<?php echo _url ('configure', 'categorize'); ?>">
+		<legend>Gestion des catégories</legend>
+
 		<?php $i = 0; foreach ($this->categories as $cat) { $i++; ?>
-		<label for="cat_<?php echo $cat->id (); ?>">Catégorie n°<?php echo $i; ?></label>
-		<input type="text" id="cat_<?php echo $cat->id (); ?>" name="categories[]" value="<?php echo $cat->name (); ?>" />
-		<input type="hidden" name="ids[]" value="<?php echo $cat->id (); ?>" />
+		<div class="form-group">
+			<label class="group-name" for="cat_<?php echo $cat->id (); ?>">Catégorie n°<?php echo $i; ?></label>
+			<div class="group-controls">
+				<input type="text" id="cat_<?php echo $cat->id (); ?>" name="categories[]" value="<?php echo $cat->name (); ?>" />
+				<input type="hidden" name="ids[]" value="<?php echo $cat->id (); ?>" />
+			</div>
+		</div>
 		<?php } ?>
-	
-		<label for="new_category">Ajouter une catégorie</label>
-		<input type="text" id="new_category" name="new_category" placeholder="Nouvelle catégorie" />
-	
-		<button class="btn btn-important">Sauvegarder</button>
+
+		<div class="form-group">
+			<label class="group-name" for="new_category">Ajouter une catégorie</label>
+			<div class="group-controls">
+				<input type="text" id="new_category" name="new_category" placeholder="Nouvelle catégorie" />
+			</div>
+		</div>
+
+		<div class="form-group form-actions">
+			<div class="group-controls">
+				<button type="submit" class="btn btn-important">Sauvegarder</button>
+				<button type="reset" class="btn">Annuler</button>
+			</div>
+		</div>
 	</form>
 </div>
diff --git a/app/views/configure/display.phtml b/app/views/configure/display.phtml
index d90f48240..bf488dbe0 100644
--- a/app/views/configure/display.phtml
+++ b/app/views/configure/display.phtml
@@ -1,53 +1,77 @@
 <?php $this->partial ('aside_configure'); ?>
 
-<div class="table">
-	<form method="post" action="">
-		<h1>Configuration générale</h1>
-	
-		<label for="old_entries">Supprimer les articles au bout de (mois)</label>
-		<input type="number" id="old_entries" name="old_entries" value="<?php echo $this->conf->oldEntries (); ?>" />
-	
-		<label for="mail_login">Adresse mail de connexion (utilise <a href="https://persona.org/">Persona</a>)</label>
-		<p><noscript>nécessite que javascript soit activé</noscript></p>
+<div class="post">
+	<form method="post" action="<?php echo _url ('configure', 'display'); ?>">
+		<legend>Configuration générale</legend>
+
+		<div class="form-group">
+			<label class="group-name" for="old_entries">Supprimer les articles tous les</label>
+			<div class="group-controls">
+				<input type="number" id="old_entries" name="old_entries" value="<?php echo $this->conf->oldEntries (); ?>" /> mois
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label class="group-name" for="mail_login">Adresse mail de connexion (utilise <a href="https://persona.org/">Persona</a>)</label>
 		<?php $mail = $this->conf->mailLogin (); ?>
-		<input type="email" id="mail_login" name="mail_login" value="<?php echo $mail ? $mail : ''; ?>" placeholder="Laissez vide pour désactiver" />
-		<br />
-	
-		<h1>Configuration de l'affichage</h1>
-	
-		<label for="posts_per_page">Nombre d'articles par page</label>
-		<input type="number" id="posts_per_page" name="posts_per_page" value="<?php echo $this->conf->postsPerPage (); ?>" />
-	
-		<label>Vue par défaut</label>
-		<div class="radio_group">
-			<label for="radio_all">
-				<input type="radio" name="default_view" id="radio_all" value="all"<?php echo $this->conf->defaultView () == 'all' ? ' checked="checked"' : ''; ?> />
-				Tout afficher
-			</label>
-			<label for="radio_not_read">
-				<input type="radio" name="default_view" id="radio_not_read" value="not_read"<?php echo $this->conf->defaultView () == 'not_read' ? ' checked="checked"' : ''; ?> />
-				Afficher les non lus
-			</label>
+			<div class="group-controls">
+				<input type="email" id="mail_login" name="mail_login" value="<?php echo $mail ? $mail : ''; ?>" placeholder="Laissez vide pour désactiver" />
+				<noscript><b>nécessite que javascript soit activé</b></noscript>
+			</div>
 		</div>
 	
-		<label for="sort_order">Ordre de tri</label>
-		<select name="sort_order" id="sort_order">
-			<option value="low_to_high"<?php echo $this->conf->sortOrder () == 'low_to_high' ? ' selected="selected"' : ''; ?>>Du plus récent au plus ancien</option>
-			<option value="high_to_low"<?php echo $this->conf->sortOrder () == 'high_to_low' ? ' selected="selected"' : ''; ?>>Du plus ancien au plus récent</option>
-		</select>
-	
-		<label>Afficher les articles dépliés par défaut</label>
-		<div class="radio_group">
-			<label for="radio_yes">
-				<input type="radio" name="display_posts" id="radio_yes" value="yes"<?php echo $this->conf->displayPosts () == 'yes' ? ' checked="checked"' : ''; ?> />
-				Oui
-			</label>
-			<label for="radio_no">
-				<input type="radio" name="display_posts" id="radio_no" value="no"<?php echo $this->conf->displayPosts () == 'no' ? ' checked="checked"' : ''; ?> />
-				Non<noscript> - <strong>nécessite que javascript soit activé</strong></noscript>
-			</label>
+		<legend>Configuration de l'affichage</legend>
+
+		<div class="form-group">
+			<label class="group-name" for="posts_per_page">Nombre d'articles par page</label>
+			<div class="group-controls">
+				<input type="number" id="posts_per_page" name="posts_per_page" value="<?php echo $this->conf->postsPerPage (); ?>" />
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label class="group-name">Vue par défaut</label>
+			<div class="group-controls">
+				<label class="radio" for="radio_all">
+					<input type="radio" name="default_view" id="radio_all" value="all"<?php echo $this->conf->defaultView () == 'all' ? ' checked="checked"' : ''; ?> />
+					Tout afficher
+				</label>
+				<label class="radio" for="radio_not_read">
+					<input type="radio" name="default_view" id="radio_not_read" value="not_read"<?php echo $this->conf->defaultView () == 'not_read' ? ' checked="checked"' : ''; ?> />
+					Afficher les non lus
+				</label>
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label class="group-name" for="sort_order">Ordre de tri</label>
+			<div class="group-controls">
+				<select name="sort_order" id="sort_order">
+					<option value="low_to_high"<?php echo $this->conf->sortOrder () == 'low_to_high' ? ' selected="selected"' : ''; ?>>Du plus récent au plus ancien</option>
+					<option value="high_to_low"<?php echo $this->conf->sortOrder () == 'high_to_low' ? ' selected="selected"' : ''; ?>>Du plus ancien au plus récent</option>
+				</select>
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label class="group-name">Afficher les articles dépliés par défaut</label>
+			<div class="group-controls">
+				<label class="radio" for="radio_yes">
+					<input type="radio" name="display_posts" id="radio_yes" value="yes"<?php echo $this->conf->displayPosts () == 'yes' ? ' checked="checked"' : ''; ?> />
+					Oui
+				</label>
+				<label class="radio" for="radio_no">
+					<input type="radio" name="display_posts" id="radio_no" value="no"<?php echo $this->conf->displayPosts () == 'no' ? ' checked="checked"' : ''; ?> />
+					Non<noscript> - <b>nécessite que javascript soit activé</b></noscript>
+				</label>
+			</div>
+		</div>
+
+		<div class="form-group form-actions">
+			<div class="group-controls">
+				<button type="submit" class="btn btn-important">Valider</button>
+				<button type="reset" class="btn">Annuler</button>
+			</div>
 		</div>
-	
-		<button class="btn btn-important">Valider</button>
 	</form>
 </div>
diff --git a/app/views/configure/feed.phtml b/app/views/configure/feed.phtml
index dc1d7ff96..11a194071 100644
--- a/app/views/configure/feed.phtml
+++ b/app/views/configure/feed.phtml
@@ -1,32 +1,52 @@
 <?php $this->partial ('aside_feed'); ?>
 
 <?php if ($this->flux) { ?>
-<form method="post" action="<?php echo _url ('configure', 'feed', 'id', $this->flux->id ()); ?>">
+<div class="post">
 	<h1><?php echo $this->flux->name (); ?></h1>
 	<?php echo $this->flux->description (); ?>
+
+	<form method="post" action="<?php echo _url ('configure', 'feed', 'id', $this->flux->id ()); ?>">
+		<legend>Informations</legend>
+
+		<div class="form-group">
+			<label class="group-name">URL du site</label>
+			<div class="group-controls">
+				<span class="control"><a target="_blank" href="<?php echo $this->flux->website (); ?>"><?php echo $this->flux->website (); ?></a></span>
+			</div>
+		</div>
 	
-	<label>URL du site</label>
-	<span><a target="_blank" href="<?php echo $this->flux->website (); ?>"><?php echo $this->flux->website (); ?></a></span>
+		<div class="form-group">
+			<label class="group-name">Nombre d'articles</label>
+			<div class="group-controls">
+				<span class="control"><?php echo $this->flux->nbEntries (); ?></span>
+			</div>
+		</div>
 	
-	<label>Nombre d'articles</label>
-	<span><?php echo $this->flux->nbEntries (); ?></span>
+		<?php if (!empty ($this->categories)) { ?>
+		<div class="form-group">
+			<label class="group-name">Ranger dans une catégorie</label>
+			<div class="group-controls">
+				<?php foreach ($this->categories as $cat) { ?>
+				<label class="radio" for="cat_<?php echo $cat->id (); ?>">
+					<input type="radio" name="category" id="cat_<?php echo $cat->id (); ?>" value="<?php echo $cat->id (); ?>"<?php echo $cat->id () == $this->flux->category () ? ' checked="checked"' : ''; ?> />
+					<?php echo $cat->name (); ?>
+				</label>
+				<?php } ?>
+			</div>
+		</div>
 	
-	<?php if (!empty ($this->categories)) { ?>
-	<label>Ranger dans une catégorie</label>
-	<div class="radio_group">
-		<?php foreach ($this->categories as $cat) { ?>
-		<label for="cat_<?php echo $cat->id (); ?>">
-			<input type="radio" name="category" id="cat_<?php echo $cat->id (); ?>" value="<?php echo $cat->id (); ?>"<?php echo $cat->id () == $this->flux->category () ? ' checked="checked"' : ''; ?> />
-			<?php echo $cat->name (); ?>
-		</label>
+		<div class="form-group form-actions">
+			<div class="group-controls">
+				<button class="btn btn-important">Valider</button>
+		<?php } else { ?>
+		<div class="form-group">
+			<div class="group-controls">
 		<?php } ?>
-	</div>
-	
-	<button class="btn btn-important">Valider</button>
-	<?php } ?>
-	
-	<button class="btn" formaction="<?php echo Url::display (array ('c' => 'feed', 'a' => 'delete', 'params' => array ('id' => $this->flux->id ()))); ?>">Supprimer</button>
-</form>
+				<button class="btn btn-attention" formaction="<?php echo Url::display (array ('c' => 'feed', 'a' => 'delete', 'params' => array ('id' => $this->flux->id ()))); ?>">Supprimer</button>
+			</div>
+		</div>
+	</form>
+</div>
 <?php } else { ?>
 <div class="alert"><span class="alert-head">Aucun flux sélectionné.</span> Pensez à en ajouter !</div>
 <?php } ?>
diff --git a/app/views/configure/importExport.phtml b/app/views/configure/importExport.phtml
index d7a84df78..e660274d6 100644
--- a/app/views/configure/importExport.phtml
+++ b/app/views/configure/importExport.phtml
@@ -13,15 +13,23 @@
 <?php } else { ?>
 <?php $this->partial ('aside_configure'); ?>
 
-<div>
+<div class="post">
 	<form method="post" action="<?php echo Url::display (array ('c' => 'configure', 'a' => 'importExport', 'params' => array ('q' => 'import'))); ?>" enctype="multipart/form-data">
-		<h1>Exporter au format OPML</h1>
-		<button class="btn btn-important" formaction="<?php echo Url::display (array ('c' => 'configure', 'a' => 'importExport', 'params' => array ('q' => 'export'))); ?>">Exporter</button>
-	
-		<h1>Importer au format OPML</h1>
-		<label for="file">Fichier</label>
-		<input type="file" name="file" id="file" />
-		<button class="btn btn-important">Importer</button>
+		<legend>Import / export au format OPML</legend>
+		<div class="form-group">
+			<label class="group-name" for="file">Fichier à importer</label>
+			<div class="group-controls">
+				<input type="file" name="file" id="file" />
+			</div>
+		</div>
+
+		<div class="form-group form-actions">
+			<div class="group-controls">
+				<button type="submit" class="btn btn-important">Importer</button>
+				ou
+				<button type="submit" class="btn btn-important" formaction="<?php echo Url::display (array ('c' => 'configure', 'a' => 'importExport', 'params' => array ('q' => 'export'))); ?>">Exporter</button>
+			</div>
+		</div>
 	</form>
 </div>
 <?php } ?>
diff --git a/app/views/configure/shortcut.phtml b/app/views/configure/shortcut.phtml
index dd29b5f99..efc637141 100644
--- a/app/views/configure/shortcut.phtml
+++ b/app/views/configure/shortcut.phtml
@@ -1,6 +1,6 @@
 <?php $this->partial ('aside_configure'); ?>
 
-<div>
+<div class="post">
 	<datalist id="keys">
 		<?php foreach ($this->list_keys as $key) { ?>
 		<option value="<?php echo $key; ?>">
@@ -9,37 +9,68 @@
 
 	<?php $s = $this->conf->shortcuts (); ?>
 
-	<form method="post" action="">
-		<h1>Gérer les raccourcis</h1>
-	
-		<noscript>Le javascript doit être activé pour pouvoir utiliser les raccourcis</noscript>
-	
-		<label for="mark_read">Marquer l'article comme lu / non lu</label>
-		<input type="text" id="mark_read" name="shortcuts[mark_read]" list="keys" value="<?php echo $s['mark_read']; ?>" />
-		<p>+ <code>shift</code> pour marquer tous les articles comme non lus</p>
-	
-		<label for="mark_favorite">Mettre l'article  en favori</label>
-		<input type="text" id="mark_favorite" name="shortcuts[mark_favorite]" list="keys" value="<?php echo $s['mark_favorite']; ?>" />
-	
-		<label for="go_website">Afficher l'article sur le site d'origine</label>
-		<input type="text" id="go_website" name="shortcuts[go_website]" list="keys" value="<?php echo $s['go_website']; ?>" />
-	
-		<label for="next_entry">Passer à l'article suivant</label>
-		<input type="text" id="next_entry" name="shortcuts[next_entry]" list="keys" value="<?php echo $s['next_entry']; ?>" />
-		<p>+ <code>shift</code> pour passer au dernier article de la page</p>
-	
-		<label for="prev_entry">Passer à l'article précédent</label>
-		<input type="text" id="prev_entry" name="shortcuts[prev_entry]" list="keys" value="<?php echo $s['prev_entry']; ?>" />
-		<p>+ <code>shift</code> pour passer au premier article de la page</p>
-	
-		<label for="next_page">Passer à la page suivant</label>
-		<input type="text" id="next_page" name="shortcuts[next_page]" list="keys" value="<?php echo $s['next_page']; ?>" />
-		<p>+ <code>shift</code> pour passer à la dernière page</p>
-	
-		<label for="prev_page">Passer à la page précédente</label>
-		<input type="text" id="prev_page" name="shortcuts[prev_page]" list="keys" value="<?php echo $s['prev_page']; ?>" />
-		<p>+ <code>shift</code> pour passer à la première page</p>
-	
-		<button class="btn btn-important">Sauvegarder</button>
+	<form method="post" action="<?php echo _url ('configure', 'shortcut'); ?>">
+		<legend>Gestion des raccourcis</legend>
+
+		<noscript><b>Le javascript doit être activé pour pouvoir profiter des raccourcis</b></noscript>
+
+		<div class="form-group">
+			<label class="group-name" for="mark_read">Marquer l'article comme lu</label>
+			<div class="group-controls">
+				<input type="text" id="mark_read" name="shortcuts[mark_read]" list="keys" value="<?php echo $s['mark_read']; ?>" />
+				+ <code>shift</code> pour marquer tous les articles comme non lus
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label class="group-name" for="mark_favorite">Mettre l'article  en favori</label>
+			<div class="group-controls">
+				<input type="text" id="mark_favorite" name="shortcuts[mark_favorite]" list="keys" value="<?php echo $s['mark_favorite']; ?>" />
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label class="group-name" for="go_website">Voir l'article sur le site d'origine</label>
+			<div class="group-controls">
+				<input type="text" id="go_website" name="shortcuts[go_website]" list="keys" value="<?php echo $s['go_website']; ?>" />
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label class="group-name" for="next_entry">Passer à l'article suivant</label>
+			<div class="group-controls">
+				<input type="text" id="next_entry" name="shortcuts[next_entry]" list="keys" value="<?php echo $s['next_entry']; ?>" />
+				+ <code>shift</code> pour passer au dernier article de la page
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label class="group-name" for="prev_entry">Passer à l'article précédent</label>
+			<div class="group-controls">
+				<input type="text" id="prev_entry" name="shortcuts[prev_entry]" list="keys" value="<?php echo $s['prev_entry']; ?>" />
+				+ <code>shift</code> pour passer au premier article de la page
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label class="group-name" for="next_page">Passer à la page suivante</label>
+			<div class="group-controls">
+				<input type="text" id="next_page" name="shortcuts[next_page]" list="keys" value="<?php echo $s['next_page']; ?>" />
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label class="group-name" for="prev_page">Passer à la page précédente</label>
+			<div class="group-controls">
+				<input type="text" id="prev_page" name="shortcuts[prev_page]" list="keys" value="<?php echo $s['prev_page']; ?>" />
+			</div>
+		</div>
+
+		<div class="form-group form-actions">
+			<div class="group-controls">
+				<button type="submit" class="btn btn-important">Sauvegarder</button>
+				<button type="reset" class="btn">Annuler</button>
+			</div>
+		</div>
 	</form>
 </div>
diff --git a/app/views/index/index.phtml b/app/views/index/index.phtml
index 995e6738a..bccb6588b 100644
--- a/app/views/index/index.phtml
+++ b/app/views/index/index.phtml
@@ -17,7 +17,7 @@
 
 <div id="stream">
 	<?php foreach ($items as $item) { ?>
-	<div class="post flux<?php echo !$item->isRead () ? ' not_read' : ''; ?><?php echo $item->isFavorite () ? ' favorite' : ''; ?>" id="flux_<?php echo $item->id (); ?>">
+	<div class="flux<?php echo !$item->isRead () ? ' not_read' : ''; ?><?php echo $item->isFavorite () ? ' favorite' : ''; ?>" id="flux_<?php echo $item->id (); ?>">
 		<ul class="flux_header">
 			<li class="item manage">
 				<?php if (!login_is_conf ($this->conf) || is_logged ()) { ?>
diff --git a/app/views/javascript/main.phtml b/app/views/javascript/main.phtml
index 87af760d3..8eb7caf2a 100644
--- a/app/views/javascript/main.phtml
+++ b/app/views/javascript/main.phtml
@@ -104,7 +104,7 @@ function mark_favorite (active) {
 }
 
 function init_img () {
-	$(".post.flux .content img").each (function () {
+	$(".flux .content img").each (function () {
 		if ($(this).width () > ($("#stream").width()) / 2) {
 			$(this).addClass("big");
 		}
@@ -115,11 +115,11 @@ function init_posts () {
 	init_img ();
 
 	if (hide_posts) {
-		$(".post.flux:not(.active) .content").slideUp ();
+		$(".flux:not(.active) .content").slideUp ();
 	}
 
-	$(".post.flux").click (function () {
-		old_active = $(".post.flux.active");
+	$(".flux").click (function () {
+		old_active = $(".flux.active");
 		new_active = $(this);
 		
 		if (old_active[0] != new_active[0]) {
@@ -127,21 +127,21 @@ function init_posts () {
 		}
 	});
 
-	$(".post.flux a.read").click (function () {
-		active = $(this).parents (".post.flux");
+	$(".flux a.read").click (function () {
+		active = $(this).parents (".flux");
 		mark_read (active);
 	
 		return false;
 	});
 
-	$(".post.flux a.bookmark").click (function () {
-		active = $(this).parents (".post.flux");
+	$(".flux a.bookmark").click (function () {
+		active = $(this).parents (".flux");
 		mark_favorite (active);
 	
 		return false;
 	});
 
-	$(".post.flux .content a").click (function () {
+	$(".flux .content a").click (function () {
 		$(this).attr ('target', '_blank');
 	});
 }
@@ -152,7 +152,7 @@ $(document).ready (function () {
 	// Touches de manipulation
 	shortcut.add("<?php echo $s['mark_read']; ?>", function () {
 		// on marque comme lu ou non lu
-		active = $(".post.flux.active");
+		active = $(".flux.active");
 		mark_read (active);
 	});
 	shortcut.add("shift+<?php echo $s['mark_read']; ?>", function () {
@@ -162,14 +162,14 @@ $(document).ready (function () {
 	});
 	shortcut.add("<?php echo $s['mark_favorite']; ?>", function () {
 		// on marque comme favori ou non favori
-		active = $(".post.flux.active");
+		active = $(".flux.active");
 		mark_favorite (active);
 	});
 	
 	// Touches de navigation
 	shortcut.add("<?php echo $s['prev_entry']; ?>", function () {
-		old_active = $(".post.flux.active");
-		last_active = $(".post.flux:last");
+		old_active = $(".flux.active");
+		last_active = $(".flux:last");
 		new_active = old_active.prev ();
 		
 		if (new_active[0] instanceof HTMLDivElement) {
@@ -179,16 +179,16 @@ $(document).ready (function () {
 		}
 	});
 	shortcut.add("shift+<?php echo $s['prev_entry']; ?>", function () {
-		old_active = $(".post.flux.active");
-		first = $(".post.flux:first");
+		old_active = $(".flux.active");
+		first = $(".flux:first");
 		
 		if (first[0] instanceof HTMLDivElement) {
 			slide (first, old_active);
 		}
 	});
 	shortcut.add("<?php echo $s['next_entry']; ?>", function () {
-		old_active = $(".post.flux.active");
-		first_active = $(".post.flux:first");
+		old_active = $(".flux.active");
+		first_active = $(".flux:first");
 		new_active = old_active.next ();
 		
 		if (new_active[0] instanceof HTMLDivElement) {
@@ -198,8 +198,8 @@ $(document).ready (function () {
 		}
 	});
 	shortcut.add("shift+<?php echo $s['next_entry']; ?>", function () {
-		old_active = $(".post.flux.active");
-		last = $(".post.flux:last");
+		old_active = $(".flux.active");
+		last = $(".flux:last");
 		
 		if (last[0] instanceof HTMLDivElement) {
 			slide (last, old_active);
@@ -222,7 +222,7 @@ $(document).ready (function () {
 		redirect (url, false);
 	});
 	shortcut.add("<?php echo $s['go_website']; ?>", function () {
-		url = $(".post.flux.active .link a").attr ("href");
+		url = $(".flux.active .link a").attr ("href");
 		
 		redirect (url, true);
 	});