Valider 1687697c rédigé par marcimat's avatar marcimat
Parcourir les fichiers

Quelques corrections d'espacements sur le formulaire de date : 

- il faut utiliser une taille de decalage des labels en .rem (.editer et .editer.long_label) sinon si la taille de police du .label dedans est modifiée, le margin-left négatif pour mettre le label à gauche se vautre.
- on aligne (à peu près) le label avec la date et les inputs (mais comme il n'a pas la même font-size ce n'est pas parfait)
- le bouton changer revient en haut, moins perturbant notamment en petit écran (il passe d'ailleurs sous la date actuellement)

- todo: en petit écran, basculer le label en haut, la date en bas.

Il faudra probablement modifier le responsive de tous les labels de formulaires d'ailleurs : par défaut en pleine largeur, et si largeur suffisante (> 760px) alors basculer le label à gauche (sauf ceux ayant .pleine_largeur)
parent 63be5940

prive/formulaires/dater.html

+3 −3
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -14,12 +14,12 @@ 
		<div class="editer-groupe">

			#SET{name,date}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}

			<div class="editer long_label editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">

				<label for="#GET{name}_jour" id="#GET{name}_jour_#GET{id}"><span class="texte-label">[(#ENV{_label_date})]</span> #AIDER{artdate}</label>[

				<label for="#GET{name}_jour" id="#GET{name}_jour_#GET{id}">[(#ENV{_label_date})] #AIDER{artdate}</label>[

				<span class='erreur_message' id="erreur_#GET{id}">(#GET{erreurs})</span>

				]

				<span class="affiche"[(#ENV{_saisie_en_cours}|et{#ENV{_editer_date}}|oui)style="display:none;"]>[(#ENV*{afficher_#GET{name}}|affdate)]</span>

				<BOUCLE_editable(CONDITION){si #ENV{editable}}>

				<span class="toggle_box_link middle"[(#ENV{_saisie_en_cours}|oui)style="display:none;"]><button

				<span class="toggle_box_link"[(#ENV{_saisie_en_cours}|oui)style="display:none;"]><button

					  class="btn_mini btn_secondaire"

					  name="_saisie_en_cours" value="X"

						onclick="return formulaireDaterButtonChangeOnClick.apply(this)"
@@ -33,7 +33,7 @@ 
			<BOUCLE_editer_date_anterieure(CONDITION){si #ENV{_editer_date_anterieure}|oui}>

				#SET{name,date_redac}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}

				<div class="editer long_label editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">

					<label for="#GET{name}_jour" id="#GET{name}_jour_#GET{id}"><span class="texte-label">[(#ENV{_label_date_redac,<:texte_date_publication_anterieure:>})]</span> #AIDER{artdate_redac}</label>[

					<label for="#GET{name}_jour" id="#GET{name}_jour_#GET{id}">[(#ENV{_label_date_redac,<:texte_date_publication_anterieure:>})] #AIDER{artdate_redac}</label>[

					<span class='erreur_message'>(#GET{erreurs})</span>

					]

					<span class="affiche"[(#ENV{_saisie_en_cours}|oui)style="display:none;"]>[(#ENV*{afficher_#GET{name}}|affdate|sinon{<:jour_non_connu_nc:>})]</span>

prive/themes/spip/forms.css.html

+10 −5
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -62,8 +62,8 @@ 
	--spip-form-fieldset-offset: 1.5em; /* décalage quand imbriqué */

	--spip-form-fieldset-spacing: calc(var(--spip-form-spacing-y) / 2); /* espacement en plus */

	/* layout labels */

	--spip-form-label-width: 12em;

	--spip-form-label-long-width: 19em;

	--spip-form-label-width: 12rem;

	--spip-form-label-long-width: 19rem; /* ne pas dépendre de la taille de la font-size du label qui peut varier */

	/* couleurs */

	--spip-form-border-color: hsla(0, 0%, 0%, 0.2); /* couleur bordure inputs et cie */

	--spip-form-sep-color: hsla(0, 0%, 0%, 0.125); /* couleur trait de séparation */
@@ -1111,21 +1111,24 @@ 
}



/* dater */

.formulaire_dater .editer:nth-child(2n) {

.formulaire_dater .editer[class*=editer_date] {

	padding-top: 0;

}

.formulaire_dater .editer > label {

	font-weight: bold;

	text-transform: uppercase;

	display: flex;

	align-items: center;

	align-items: flex-start;

	padding-top: calc(var(--spip-form-padding-input-y) / 2);

}

.formulaire_dater .editer > label .texte-label {

.formulaire_dater .editer[class*=editer_date] > label {

	font-size: 0.85em;

}

.formulaire_dater .affiche {

	display:block;

	font-weight: bold;

	text-transform: uppercase;

	padding-top: calc(var(--spip-form-padding-input-y) / 2);

}

.formulaire_dater .saisie_redac {

	display: block;
@@ -1147,6 +1150,8 @@ 
}

.formulaire_spip.formulaire_dater .toggle_box_link {

	#RIGHT: var(--spip-form-spacing-x);

	top: calc(var(--spip-form-padding-input-y) / 2);

	transform: none;

}

.formulaire_spip.formulaire_dater .boutons {

	border-radius: 0px;

Forge communautaire SPIP | Charte d'utilisation | Signaler un problème sur ce site