formulaire abomailman mini une liste : mise en forme et message retour

ok

formulaires/abomailman_mini_une_liste.html

@@ -0,0 +1,37 @@
+#CACHE{0}
+<div class="formulaire_spip formulaire_#FORM" id="formulaire_#FORM[_(#ENV{id_abomailman})]">
+
+	[<div class="reponse_formulaire reponse_formulaire_ok">(#ENV*{message_ok})</div>]
+	[<div class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</div>]
+
+   [(#ENV*{editable}|oui)
+      <form method='post' action='#ENV{action}'>
+         <div class="abonnement editer-groupe">
+            #ACTION_FORMULAIRE{#ENV{action}}
+			#SET{erreurs,#ENV**{erreurs}|table_valeur{la_demo}}
+			<div class="editer_email obligatoire[ (#GET{erreurs}|oui)erreur]">
+				<label for="email" class="btn"><:libreavous:s_abonner_aux_actus:></label>
+				[<span class='erreur_message'>(#GET{erreurs})</span>]
+				<input name="email" id="email" class="text" type="text" placeholder="<:baz_april:s_inscrire_a_la_lettre_d_information:>" />
+			</div>
+            [(#REM) Piege a robots spammeurs, du moins on essaie]
+			<p class="visuallyhidden">
+				<label for="nobot_abomailman"><:antispam_champ_vide:></label>
+				<input type="text" class="text" name="nobot" id="nobot_abomailman" value="#ENV{nobot}" size="10" />
+			</p>
+            <button type="submit" class="submit"><:bouton_valider:></button>
+         </div>
+      </form>
+   ]
+</div>
+
+<script>
+$(function() {
+	
+	$('.header_menu .abonnement label.btn').on('click', function(){
+		$(this).siblings('#email').toggleClass('vu');
+		$(this).parent().siblings('button').toggleClass('vu');
+	});
+
+});
+</script>

lang/libreavous_fr.php

@@ -59,4 +59,6 @@ $GLOBALS[$GLOBALS['idx_lang']] = array(
 	
 	'duree' => 'Durée',
 	
+	's_abonner_aux_actus' => 'S’abonner aux actus',
+	
 );

squelettes/header/dist.html

@@ -8,7 +8,7 @@
 <div class="header_menu">
 	<INCLURE{fond=inclure/nav-secteurs, env} />
 	<div class="liens">
-		[(#FORMULAIRE_ABOMAILMAN_MINI_UNE_LISTE{2})]
+		[<div class="ajax">(#FORMULAIRE_ABOMAILMAN_MINI_UNE_LISTE{2})</div>]
 		<a href="/rss" class="btn"><i class="fas fa-rss left"></i>S'abonner au podcast</a>
 		<INCLURE{fond=inclure/rezo} />
 	</div>

squelettes/javascript/perso.js

@@ -1,5 +1,8 @@
 $(function() {
 	
-	
+// 	$('.header_menu .abonnement label.btn').on('click', function(){
+// 		$(this).siblings('#email').toggleClass('vu');
+// 		$(this).parent().siblings('button').toggleClass('vu');
+// 	});
 
 });

squelettes/scss/styles/_perso.scss

@@ -69,9 +69,60 @@ span.btn {
 				}
 			}
 		}
+		
 		.liens {
 			text-align: right;
 			margin-top: 1.2rem;
+			.abonnement {
+				position: relative;
+				label {
+					position: relative;
+					font-size: 1rem;
+					padding-right: 2rem;
+					font-weight: 400;
+					&:after {
+						@include triangle(right, white, 8px);
+						position: absolute;
+						right: 0.6rem;
+						top: 50%;
+						margin-top: -8px;
+					}
+					&:hover:after {
+						@include triangle(right, $couleurPrincipale, 8px);
+					}
+				}
+				#email {
+					position: absolute;
+					top: 4.19em;
+					width: 260px;
+					right: 0;
+					.js & {
+						transform: scale(0);
+					}
+					border: 2px solid $grayLighter;
+					transition: transform 0.15s ease-in-out;
+					padding: 0.3em 0.8em;
+					&:focus-visible { // styles firefox indesirables
+						outline: 0;
+					}
+					&.vu {
+						transform: scale(100%);
+						box-shadow: 0 0 5px #d0e2f3;
+					}
+				}
+			}
+			.formulaire_spip .abonnement button {
+				bottom: auto;
+				top: 4.8em;
+				height: 2rem;
+				transition: transform 0.15s ease-in-out;
+				.js & {
+					transform: scale(0);
+				}
+				&.vu {
+					transform: scale(100%);
+				}
+			}
 			.btn {
 				float: right;
 				margin-top: 1.55rem;
@@ -101,7 +152,8 @@ span.btn {
 				}
 			}
 			.formulaire_spip.formulaire_abomailman_mini_une_liste {
-				width: 230px;
+				min-width: 185px;
+				min-height: 1rem;
 				float: right;
 				position: relative;
 				margin: 0 0 0 1rem;
@@ -109,7 +161,10 @@ span.btn {
 				.reponse_formulaire {
 					position: absolute;
 					top: 100%;
+					right: 0;
 					margin: 0;
+					width: 300px;
+					z-index: 999;
 				}
 			}
 		}