siteweb/libreavous
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source 
ok
This commit is contained in:
chankalan 2022-02-16 12:51:55 +01:00
parent f3ae5ab9f0
commit 91e59b196a
5 changed files with 101 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
formulaires/abomailman_mini_une_liste.html Normal file
View File

@ -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>

2
lang/libreavous_fr.php
View File

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

2
squelettes/header/dist.html
View File

@ -8,7 +8,7 @@
<div class="header_menu"> <div class="header_menu">
<INCLURE{fond=inclure/nav-secteurs, env} /> <INCLURE{fond=inclure/nav-secteurs, env} />
<div class="liens"> <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> <a href="/rss" class="btn"><i class="fas fa-rss left"></i>S'abonner au podcast</a>
<INCLURE{fond=inclure/rezo} /> <INCLURE{fond=inclure/rezo} />
</div> </div>

5
squelettes/javascript/perso.js
View File

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

59
squelettes/scss/styles/_perso.scss
View File

@ -69,14 +69,65 @@ span.btn {
} }
} }
} }
.liens { .liens {
text-align: right; text-align: right;
margin-top: 1.2rem; 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 { .btn {
float: right; float: right;
margin-top: 1.55rem; margin-top: 1.55rem;
.fas:before { .fas:before {
font-size:1rem; font-size: 1rem;
} }
&:hover, &:focus { &:hover, &:focus {
background: $couleurPrincipaleOn; background: $couleurPrincipaleOn;
@ -101,7 +152,8 @@ span.btn {
} }
} }
.formulaire_spip.formulaire_abomailman_mini_une_liste { .formulaire_spip.formulaire_abomailman_mini_une_liste {
width: 230px; min-width: 185px;
min-height: 1rem;
float: right; float: right;
position: relative; position: relative;
margin: 0 0 0 1rem; margin: 0 0 0 1rem;
@ -109,7 +161,10 @@ span.btn {
.reponse_formulaire { .reponse_formulaire {
position: absolute; position: absolute;
top: 100%; top: 100%;
right: 0;
margin: 0; margin: 0;
width: 300px;
z-index: 999;
} }
} }
} }