Changeset 122276 in spip-zone


Ignore:
Timestamp:
Feb 8, 2020, 12:02:04 AM (2 weeks ago)
Author:
Charles Razack
Message:

On reprend le layout de la branche de test prive_large qui est plus abouti, avec notamment un fallback pour les vieux navigateurs. Les colonnes latérales sont toujours présentes, mêmes quand il n'y a pas de contenu. Ça permet d'une part d'équilibrer un peu en resserant la colonne centrale, et ça évite des soucis avec les scripts à la sticky, comme sur la page des forums. Pour les formulaires, on revient à un truc le plus vanilla possible : on se contente d'élargir les labels, et basta.

Location:
_plugins_/prive_fluide/trunk
Files:
2 deleted
4 edited
2 copied
1 moved

Legend:

Unmodified
Added
Removed
  • _plugins_/prive_fluide/trunk

    • Property subgit:lock:69e7a31ee1ba001939d6f5c363bd2c261a037e2c deleted
    • Property subgit:lock:eb842a184ddb5016f2279305517470a5762f5a1c set to 2020-02-08T01:02:10.802
  • _plugins_/prive_fluide/trunk/images/logo_prive_fluide.svg

    • Property svn:eol-style set to native
  • _plugins_/prive_fluide/trunk/paquet.xml

    r119201 r122276  
    22        prefix="prive_fluide"
    33        categorie="edition"
    4         version="1.0.10"
     4        version="1.1.0"
    55        etat="stable"
    66        compatibilite="[3.0.0;3.2.*]"
    7         logo="prive/themes/spip/images/prive_fluide-128.png"
     7        logo="images/logo_prive_fluide.svg"
    88        documentation="https://contrib.spip.net/5112"
    99>
  • _plugins_/prive_fluide/trunk/prive/squelettes/body.html

    r110649 r122276  
    11[(#REM)
    22
    3         Surcharge de l'espace privé
    4 
    5         On change le markup de #contenu, #navigation et #extra :
    6         - pas de différence entre écran étroit et large
    7         - ordre : #contenu, #navigation, #extra
     3        Surcharge : on vire la préférence écran étroit/large
    84
    95]
     
    2420                        </div>
    2521                        <div id="conteneur" class="[(#LARGEUR_ECRAN)]">
    26                                 <div id="contenu" role='main'>
    27                                         <INCLURE{fond=prive/squelettes/contenu/#ENV{type-page},ajax=contenu,env}>
    28                                 </div>
    2922                                <div id="navigation" class='lat' role='contentinfo'>
    3023                                        <INCLURE{fond=prive/squelettes/navigation/#ENV{type-page},ajax=navigation,env}>
     
    3225                                <div id="extra" class='lat' role='complementary'>
    3326                                        <INCLURE{fond=prive/squelettes/extra/#ENV{type-page},ajax=extra,env}>
     27                                </div>
     28                                <div id="contenu" role='main'>
     29                                        <INCLURE{fond=prive/squelettes/contenu/#ENV{type-page},ajax=contenu,env}>
    3430                                </div>
    3531                        </div>
  • _plugins_/prive_fluide/trunk/prive/style_prive_plugin_prive_fluide.html

    r119201 r122276  
    11[(#REM)<style>/*
    22
    3   Nouveau markup identique pour le mode étroit et large dans body.html :
    4   - #conteneur
    5       - #contenu
    6       - #navigation
    7       - #extra
    8 
    9   On fait du mobile-first : pas de colonne à la base, puis on en met 2 ou 3 selon la largeur.
    10   On met du float comme en 40 pour les vieux navigateurs, et du CSS grid pour les nouveaux.
     3  Organisation :
     4  1. Layout général
     5  2. Contenus textes limités en largeur
     6  3. Formulaires
     7  4. Divers
     8
     9  Breakpoints : 780px / 1200px
     10
     11  Markup :
     12
     13  body
     14  |--#bando_haut
     15  |  |--#bando_xxx (x4)
     16  |     |--.largeur
     17  |--#page
     18  |  |--.largeur
     19  |  |  |--#haut
     20  |  |     |--#chemin
     21  |  |--#conteneur(.pleine_largeur)
     22  |     |--#navigation
     23  |     |--#extra
     24  |     |--#contenu
     25  |--#pied
     26  |--.largeur
    1127
    1228*/]#CACHE{3600*100,cache-client}
    1329#HTTP_HEADER{Content-Type: text/css;charset=utf-8}
    1430#HTTP_HEADER{Vary: Accept-Encoding}
    15 #SET{largeur_texte,42em}
     31
    1632
    1733/*
    18   ======
    19   LAYOUT
    20   ======
    21   Placement et dimensions des blocs principaux
     34  =================
     35  1. Layout général
     36  =================
    2237*/
    2338
    24 /* Containers en pleine largeur */
     39
     40/* 1.1 : D'abord un reset des styles de SPIP */
     41
    2542body,
    2643body.large {
    2744  min-width: auto;
    2845}
    29 .largeur,
    30 #conteneur,
    31 .table_page,
    32 .large .largeur,
    33 .large #conteneur,
    34 .large .table_page {
     46.largeur, #conteneur, .table_page,
     47.large .largeur, .large #conteneur, .large .table_page {
    3548  width: auto;
    3649}
    3750.largeur,
    3851.large .largeur {
    39   padding: 0 1.5vw;
    40 }
    41 
    42 /* Pas de colonne
    43    Obligé de mettre des !important à moins de cibler 50 variantes différentes
    44    (.large #contenu, body.large .edition #contenu, etc.)
    45 */
     52  padding: 0 1em;
     53}
     54
     55/* 1.2 : Ensuite on refait le layout */
     56
     57/**
     58 * Mobiles : 1 seule colonne
     59 */
    4660#contenu,
    4761#navigation,
     
    5367}
    5468
    55 /* Moyen écran : 2 colonnes */
     69/**
     70 * Écrans moyens : on passe en 2 colonnes.
     71 * Fallback vieux navigateurs : direct en 3 colonnes et basta.
     72 */
    5673@media (min-width: 780px) {
    57 
    58   /* D'abord le fallback pour les vieux navigateurs */
    59   /* [TODO] */
    60  
    61   /* Ensuite le layout en CSS grid : 2 colonnes */
    62   @supports (display: grid) {
    63     #conteneur {
    64       display: grid;
    65       grid-gap: 0 1.5vw;
    66       grid-template-columns: auto repeat(3, 1fr);
    67       grid-template-rows: auto 1fr; /* la 1ère ligne doit se collapser */
    68       grid-template-areas:
    69         "navigation contenu contenu contenu"
    70         "extra      contenu contenu contenu";
    71     }
    72     #contenu {
    73       grid-area: contenu;
    74     }
    75     #navigation {
    76       grid-area: navigation;
    77     }
    78     #extra {
    79       grid-area: extra;
    80     }
    81     /* Hack : on met une largeur au contenu des colonnes latérales,
    82     ainsi quand elles sont vides, elles se collapsent */
    83     #navigation > .ajaxbloc > *,
    84     #navigation > :not(.ajaxbloc),
    85     #extra > .ajaxbloc > *,
    86     #extra > :not(.ajaxbloc) {
    87       width: 20vw;
    88     }
    89   }
    90 }
    91 
    92 /* Grand écran : 3 colonnes */
     74        .largeur {
     75                padding-left: 1.5em;
     76                padding-right: 1.5em;
     77        }
     78        /* Navigateurs napthaline */
     79        #contenu {
     80                display: inline-block;
     81                width: 60%;
     82        }
     83        #navigation {
     84                width: 18%;
     85                float: left;
     86                margin-right: 2%;
     87        }
     88        #extra {
     89                width: 18%;
     90                float: right;
     91        }
     92        /* Navigateurs récents */
     93        @supports (display: grid) {
     94                /* Les pages qui demandent à être en pleine largeur (sans #nav ni #extra) */
     95                .pleine_largeur #contenu {
     96                        width: 100%;
     97                }
     98                /* Les pages "normales" */
     99                #conteneur:not(.pleine_largeur) {
     100                        display: grid;
     101                        grid-column-gap: 1.5em;
     102                        /*grid-template-columns:
     103                                min-content
     104                                minmax(auto, calc(100% - (8em + 8vw)));*/
     105                        grid-template-rows: auto 1fr; /* la 1ère ligne doit se collapser */
     106                        grid-template-columns:
     107                                calc(8em + 10%) /* navigation & extra */
     108                                1fr;           /* contenu */
     109                        grid-template-areas:
     110                                "navigation contenu "
     111                                "extra      contenu ";
     112                        -webkit-box-pack: center;
     113                                justify-content: center;
     114                }
     115                #contenu {
     116                        grid-area: contenu;
     117                        width: initial;
     118                }
     119                #navigation {
     120                        grid-area: navigation;
     121                        width: initial;
     122                        margin-right: 0;
     123                }
     124                #extra {
     125                        grid-area: extra;
     126                        width: initial;
     127                }
     128        }
     129}
     130
     131/**
     132 * Sur écrans larges : 3 colonnes.
     133 */
    93134@media (min-width: 1200px) {
    94 
    95   @supports (display: grid) {
    96     #conteneur {
    97       grid-template-columns: auto repeat(3, 1fr) auto;
    98       grid-template-rows: auto auto;
    99       grid-template-areas:
    100         "navigation contenu contenu contenu extra"
    101         "navigation contenu contenu contenu extra";
    102     }
    103   }
    104 
     135        @supports (display: grid) {
     136                #conteneur:not(.pleine_largeur) {
     137                        grid-template-columns:
     138                                calc(8em + 10%)  /* navigation */
     139                                1fr             /* contenu */
     140                                calc(8em + 10%); /* extra */
     141                        grid-template-areas:
     142                                "navigation contenu extra"
     143                                "navigation contenu extra";
     144                }
     145        }
    105146}
    106147
    107148
    108149/*
    109   ===========
    110   Formulaires
    111   ===========
    112   Saisies centrées, largeur limitée pour avoir ~75 caractèrs max par ligne.
     150  =====================================
     151  2. Contenus textes limités en largeur
     152  =====================================
    113153*/
    114154
    115 .formulaire_spip .editer-groupe,
    116 .formulaire_spip fieldset .editer-groupe {
    117   max-width: calc([(#GET{largeur_texte})] + 18vw);
    118   margin-left: auto;
    119   margin-right: auto;
    120 }
    121 .formulaire_spip > p,
    122 .formulaire_spip fieldset > p,
    123 .formulaire_spip fieldset .reponse_formulaire {
    124   max-width: [(#GET{largeur_texte})];
    125   margin-left: auto;
    126   margin-right: auto;
    127 }
    128 
    129 .formulaire_spip .editer,
    130 .formulaire_spip .editer.gauche {
    131   padding-left: 18vw;
    132 }
    133 
    134 .formulaire_spip .editer > label,
    135 .formulaire_spip .editer.gauche > label {
    136   width: 17vw;
    137   margin-left: -18vw;
    138 }
    139 
    140 .formulaire_spip .fieldset {
    141   margin: 1em 0;
    142 }
    143 
    144 .formulaire_spip .explication {
    145   font-size: 1em;
    146 }
    147 
    148 .formulaire_spip .pleine_largeur {
    149         padding-#ENV{left}:10px;
    150 }
    151 
    152 .formulaire_spip .pleine_largeur>label {
    153         width:auto;
    154         margin-#ENV{left}: 0;
    155 }
    156 
    157 /* Petit écran : tout en pleine largeur (pas mobile-first, car sinon ça peut péter des trucs avec les plugins qui stylent les saisies) */
    158 @media (max-width: 640px) {
    159   .formulaire_spip .editer {
    160     padding-left: 10px;
    161   }
    162   .formulaire_spip .editer > label {
    163     display: block;
    164     float: none;
    165     width: 100%;
    166     margin-left: 0;
    167     margin-bottom: 10px;
    168   }
    169 }
     155
     156/* Limiter à ~75 caractères max par ligne */
     157#wysiwyg .champ > * {
     158        max-width: 35rem; /* Fallback */
     159        max-width: 65ch;
     160        margin-left: auto;
     161        margin-right: auto;
     162}
     163
    170164
    171165/*
    172   ======
    173   Divers
    174   ======
    175   Des petits ajustements divers
     166  ==============
     167  3. Formulaires
     168  ==============
     169  On augmente la largeur des labels en proportion.
     170  Nb : obligé de compenser le margin-left avec un facteur arbitraire.
    176171*/
    177172
    178 /* Limiter en largeur pour obtenir ~75 caractères max par ligne */
    179 #wysiwyg {
    180   display: block;
    181   max-width: [(#GET{largeur_texte})];
    182   margin-left: auto;
    183   margin-right: auto;
    184 }
     173/* base */
     174.formulaire_spip .editer {
     175  padding-left: calc(5em + 15%);
     176}
     177.formulaire_spip .editer > label {
     178  margin-left: calc(0em - ((5em + 15%) * 1.15));
     179  width: calc((4em + 15%) * 1.15);
     180}
     181/* long_label */
     182.formulaire_spip .editer.long_label {
     183  padding-left: calc(5em + 33%);
     184}
     185.formulaire_spip .editer.long_label > label {
     186  margin-left: calc(0em - ((5em + 33%) * 1.46));
     187  width: calc((4em + 33%) * 1.46);
     188}
     189/* pleine_largeur */
     190.formulaire_spip .editer.pleine_largeur {
     191  padding-left: 10px;
     192}
     193.formulaire_spip .editer.pleine_largeur > label {
     194  margin-left: 0;
     195  width: auto;
     196}
     197
     198
     199/* =========
     200   4. Divers
     201   ========= */
     202
    185203
    186204/* Polices */
     
    214232}
    215233body {
    216   font-size: calc(0.8em + 0.175vw); /* mobile => 16px, 1920px => 18px */
     234  font-size: calc(0.8em + 0.175vw); /* mobile => 13px, 1920px => 15px */
    217235  font-family: "Source Sans Pro", sans-serif;
    218236}
Note: See TracChangeset for help on using the changeset viewer.