Changeset 122485 in spip-zone


Ignore:
Timestamp:
Feb 14, 2020, 9:19:17 PM (2 weeks ago)
Author:
Charles Razack
Message:

On revient sur le dernier changement : quand une colonne est « vide », c'est mieux quand le contenu central s'étale. Nb : une colonne n'étant jamais techniquement vide à cause du .ajaxbloc, ça oblige à faire un compromis, c'est expliqué en détail en commentaire de la feuille de style.

Location:
_plugins_/prive_fluide/trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/prive_fluide/trunk

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

    r122281 r122485  
    77  4. Divers
    88
    9   Breakpoints : 780px / 1200px
     9  Breakpoints : 640px / 1200px
    1010
    1111  Markup :
     
    3838
    3939
    40 /* 1.1 : D'abord un reset des styles de SPIP */
     40/* D'abord un reset des styles de SPIP */
    4141
    4242body,
     
    5353}
    5454
    55 /* 1.2 : Ensuite on refait le layout */
     55/* Ensuite on refait le layout */
    5656
    5757/**
     
    7171 * Fallback vieux navigateurs : direct en 3 colonnes et basta.
    7272 */
    73 @media (min-width: 780px) {
     73@media (min-width: 640px) {
    7474        .largeur {
    7575                padding-left: 1.5em;
     
    9292        /* Navigateurs récents */
    9393        @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) {
     94                #conteneur {
    10095                        display: grid;
    10196                        grid-column-gap: 1.5em;
    102                         /*grid-template-columns:
    103                                 min-content
    104                                 minmax(auto, calc(100% - (8em + 8vw)));*/
    10597                        grid-template-rows: auto 1fr; /* la 1ère ligne doit se collapser */
    10698                        grid-template-columns:
    107                                 calc(8em + 10%) /* navigation & extra */
    108                                 1fr;           /* contenu */
     99                                auto /* navigation & extra */
     100                                1fr; /* contenu */
    109101                        grid-template-areas:
    110102                                "navigation contenu "
     
    126118                        width: initial;
    127119                }
     120                /*
     121                Largeur des colonnes : obligé de faire un compromis.
     122                On veut 2 choses :
     123                - une dimension proportionnelle à celle de leur parent (#conteneur)
     124                - une dimension réduite à 0 quand elles sont vides
     125                Hors elles ne sont jamais techniquement vides : il y a toujours un .ajaxbloc en enfant direct.
     126                On ne peut donc ni définir la largeur au niveau de grid-template-columns,
     127                ni cibler les les colonnes elles-mêmes.
     128                La seule façon est de cibler les petits-enfants directs.
     129                Par contre ça veut dire qu'on ne peut plus utiliser de pourcentage,
     130                on se rabat donc sur une fraction de la largeur de la fenêtre.
     131                */
     132                #navigation > * > *,
     133                #extra > * > * {
     134                        width: 20vw; /* grosso modo 20% de #conteneur */
     135                }
    128136        }
    129137}
     
    134142@media (min-width: 1200px) {
    135143        @supports (display: grid) {
    136                 #conteneur:not(.pleine_largeur) {
     144                #conteneur {
    137145                        grid-template-columns:
    138                                 calc(8em + 10%)  /* navigation */
    139                                 1fr             /* contenu */
    140                                 calc(8em + 10%); /* extra */
     146                                auto  /* navigation */
     147                                1fr   /* contenu */
     148                                auto; /* extra */
    141149                        grid-template-areas:
    142150                                "navigation contenu extra"
     
    166174  3. Formulaires
    167175  ==============
    168   On augmente la largeur des labels en proportion.
     176  On augmente la largeur des labels.
    169177  Nb : obligé de compenser le margin-left avec un facteur arbitraire.
    170178*/
Note: See TracChangeset for help on using the changeset viewer.