Changeset 122486 in spip-zone


Ignore:
Timestamp:
Feb 14, 2020, 11:31:08 PM (2 weeks ago)
Author:
Charles Razack
Message:

Un dernier tour de vis sur les formulaires. Objectifs : limiter la largeur des contenus pour ne pas avoir d'immenses lignes de texte, augmenter la largeur des labels, et essayer d'équilibrer le tout. Pour le 1er point, ça oblige à faire de bonnes acrobaties mais on y arrive. Pour le 2ème point, il y a le parti-pris de ne plus prendre en charge la classe .long_label : la largeur de base devrait suffire dans tous les cas, et ça fait un truc plus équilibré et lisible. Testé sur les formulaires de la dist et ceux de la charte, et on arrive enfin à quelque chose qui rend pas trop mal, sans éléments qui débordent, ou soient mal alignés, etc. Ah, et aussi une version pour mobiles, ça manquait.

Location:
_plugins_/prive_fluide/trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/prive_fluide/trunk

    • Property subgit:lock:de1e7bbc3f8d7f4dfdf94949d2679e3903529dbd deleted
    • Property subgit:lock:4c14990f29f99a64c0a0a5ac2783df00c989695d set to 2020-02-15T00:31:45.140
  • _plugins_/prive_fluide/trunk/prive/style_prive_plugin_prive_fluide.html

    r122485 r122486  
    174174  3. Formulaires
    175175  ==============
    176   On augmente la largeur des labels.
    177   Nb : obligé de compenser le margin-left avec un facteur arbitraire.
    178176*/
    179 
    180 /* base */
    181 .formulaire_spip .editer {
    182   padding-left: calc(5em + 15%);
    183 }
    184 .formulaire_spip .editer > label {
    185   margin-left: calc(0em - ((5em + 15%) * 1.15));
    186   width: calc((4em + 15%) * 1.15);
    187 }
    188 /* long_label */
    189 .formulaire_spip .editer.long_label {
    190   padding-left: calc(5em + 33%);
    191 }
    192 .formulaire_spip .editer.long_label > label {
    193   margin-left: calc(0em - ((5em + 33%) * 1.46));
    194   width: calc((4em + 33%) * 1.46);
    195 }
    196 /* pleine_largeur */
    197 .formulaire_spip .editer.pleine_largeur {
    198   padding-left: 10px;
    199 }
    200 .formulaire_spip .editer.pleine_largeur > label {
    201   margin-left: 0;
    202   width: auto;
     177@supports (display: grid) {
     178        /* reset */
     179        .formulaire_spip,
     180        .formulaire_spip * {
     181                box-sizing: border-box;
     182        }
     183        .formulaire_spip .editer,
     184        .formulaire_spip .editer.long_label {
     185                padding: 0.5em 1em;
     186        }
     187        .formulaire_spip .editer > label,
     188        .formulaire_spip .editer.long_label > label {
     189                display: block;
     190                margin: 0 0 0.5em;
     191                width: auto;
     192                float: none;
     193        }
     194        @media (min-width: 640px) {
     195                /* base */
     196                .formulaire_spip .editer,
     197                .formulaire_spip .editer.long_label {
     198                        padding: 1em 0;
     199                }
     200                .formulaire_spip .editer {
     201                        display: grid;
     202                        grid-column-gap: 1em;
     203                        grid-template-columns: 30% 1fr;
     204                }
     205                .formulaire_spip .editer > label {
     206                        grid-column: 1 / 2;
     207                        grid-row: 1 / span 1000; /* pas joli joli... */
     208                }
     209                .formulaire_spip .editer > label ~ *,
     210                .formulaire_spip .editer > :first-child:not(label),
     211                .formulaire_spip .editer > :first-child:not(label) ~ * {
     212                        grid-column: 2 / 3;
     213                }
     214                /* .long label */
     215                /* .formulaire_spip .editer.long_label {
     216                        grid-template-columns: 44% 1fr;
     217                } */
     218                /* .pleine_largeur + nombreuses exceptions */
     219                .formulaire_spip .editer.pleine_largeur,
     220                .formulaire_spip .editer_parent, .formulaire_spip .editer_groupe_mot, .formulaire_spip .editer_descriptif, .formulaire_spip .editer_chapo, .formulaire_spip .editer_texte, .formulaire_spip .editer_ps, .formulaire_spip .haut {
     221                        display: block;
     222                }
     223                /* Tentative pour limiter la largeur */
     224                .formulaire_spip form .editer-groupe,
     225                .formulaire_spip p.explication,
     226                .formulaire_spip .titrem ~ *:not(form):not(.boutons),
     227                .formulaire_spip fieldset > * {
     228                        max-width: 42rem;
     229                        margin-left: auto;
     230                        margin-right: auto;
     231                }
     232                .formulaire_spip .editer .explication {
     233                        max-width: initial;
     234                        margin-left: initial;
     235                        margin-right: initial;
     236                }
     237                /* Dans les colonnes */
     238                .lat .formulaire_spip .editer {
     239                        display: block;
     240                }
     241                /* Dommages collatéraux, exceptions et trucs pénibles */
     242                .formulaire_spip .editer_parent, .formulaire_spip .editer_groupe_mot, .formulaire_editer_auteur .editer_statut {
     243                        padding-left: 1em;
     244                        padding-right: 1em;
     245                }
     246                .formulaire_dater form .editer-groupe {
     247                        max-width: 100%;
     248                }
     249                .formulaire_dater .editer {
     250                        grid-template-columns: 30ch 1fr;
     251                }
     252        }
    203253}
    204254
Note: See TracChangeset for help on using the changeset viewer.