Changeset 110649 in spip-zone for _plugins_/prive_fluide


Ignore:
Timestamp:
Jun 13, 2018, 11:51:01 PM (21 months ago)
Author:
tcharlss@…
Message:

On commence à implémenter les idées exprimées dans le ticket #4148. Le nombre de colonnes est choisi automatiquement en fonction de la largeur disponible : 1 seule à la base, 2 au-delà de 780px, 3 au-delà de 1200px. Et on fait ça avec CSS Grid, c'est infiniment plus simple. Pour l'instant il n'y a pas de fallback pour les vieux navigateurs, à implémenter + tard. Du coup la préférence utilisateur « petit/grand écran» n'a plus aucun effet, forcément. On surcharge body.html dans ce sens pour ne pas modifier le markup selon le mode choisi. Il reste un problème un peu pénible : les colonnes #navigation et #extra sont toujours présentes, même si elles n'ont aucun contenu. Du coup c'est compliqué de donner une largeur par défaut ET de faire en sorte qu'elles se collapsent quand elles sont vides. En tout je n'ai pas trouvé comment faire, pour l'instant elles ont une largeur 'auto' pour s'adapter au contenu.

Location:
_plugins_/prive_fluide/trunk
Files:
2 added
3 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/prive_fluide/trunk/lang/prive_fluide_fr.php

    r104948 r110649  
    99
    1010        // M
    11         'message_configurer_largeur_ecran' => '[Plugin espace privé fluide] Ces options n\'ont pas d\'incidence sur la largeur de l\'écran. L\'option « Grand écran » place la colonne #extra à droite.',
     11        'message_configurer_largeur_ecran' => '[Plugin espace privé fluide] Cette option n\'a plus d\'effet !',
    1212
    1313);
  • _plugins_/prive_fluide/trunk/paquet.xml

    r105525 r110649  
    22        prefix="prive_fluide"
    33        categorie="edition"
    4         version="0.1.4"
     4        version="0.1.5"
    55        etat="test"
    66        compatibilite="[3.0.0;3.2.*]"
     
    1111        <!-- Ce plugin fait en sorte que l'espace privé de SPIP occupe toute la largeur disponible. -->
    1212
    13         <auteur lien="http://razack.wordpress.com">tcharlss</auteur>
     13        <auteur lien="http://www.bravecassine.com">tcharlss</auteur>
    1414
    1515        <licence>GNU/GPL</licence>
  • _plugins_/prive_fluide/trunk/prive/style_prive_plugin_prive_fluide.html

    r105627 r110649  
    11[(#REM)<style>/*
    2   Ce squelette definit les styles de l'espace prive
    32
    4   Note: l'entete "Vary:" sert a repousser l'entete par
    5   defaut "Vary: Cookie,Accept-Encoding", qui est (un peu)
    6   genant en cas de "rotation du cookie de session" apres
    7   un changement d'IP (effet de clignotement).
     3  Nouveau markup identique pour le mode étroit et large dans body.html :
     4  - #conteneur
     5      - #contenu
     6      - #navigation
     7      - #extra
    88
    9   ATTENTION: il faut absolument le charset sinon Firefox croit que
    10   c'est du text/html !
     9  On fait du mobile-first : pas de colonne à la base, puis on en met 2 ou 3 selon la largeur.
     10  Pour les vieux navigateurs, on met du float comme en 40e,
     11  et du CSS grid pur les nouveaux.
     12
    1113*/]#CACHE{3600*100,cache-client}
    12 #HTTP_HEADER{Content-Type: text/css;charset=iso-8859-15}
     14#HTTP_HEADER{Content-Type: text/css;charset=utf-8}
    1315#HTTP_HEADER{Vary: Accept-Encoding}
    1416
    1517/*
    16   ==========
    17   conteneurs
    18   ==========
    19   Pleine largeur pour tout le monde !
    20   Oui, on ignore les préférences utilisateur (de toute façon le mode « écran large » rendait le contenu central... plus étroit !).
     18  ====
     19  Base
     20  ====
     21  - On met tout en pleine largeur
     22  - Pas de colonne (mobile first)
    2123*/
    2224
     25/* Containers en pleine largeur */
    2326body,
    2427body.large {
    2528  min-width: auto;
    2629}
    27 
    28 .largeur, #conteneur, .table_page,
    29 .large .largeur, .large #conteneur, .large .table_page {
    30   width: auto !important;
     30.largeur,
     31#conteneur,
     32.table_page,
     33.large .largeur,
     34.large #conteneur,
     35.large .table_page {
     36  width: auto;
     37}
     38.largeur,
     39.large .largeur {
     40  padding: 0 1.5vw;
    3141}
    3242
    33 #bando_haut .largeur,
    34 #haut,
    35 #conteneur,
    36 #pied .largeur,
    37 .table_page {
    38   padding: 0 30px; /* = margin-left de #contenu */
     43/* Pas de colonne */
     44#contenu,
     45#navigation,
     46#extra {
     47  width: 100%;
     48  float: none;
     49  margin-left: auto;
     50  margin-right: auto;
    3951}
    4052
    41 .large #bando_haut .largeur,
    42 .large #conteneur,
    43 .large #haut,
    44 .large #pied .largeur,
    45 .large .table_page {
    46   padding: 0 24px; /* = margin-left de #contenu */
    47 }
    48 
    49 
    50 /*
    51   ======
    52   layout
    53   ======
    54   On passe les 3 items #contenu, #navigation et #extra en flexbox.
    55   De base, une colonne et on place #contenu en premier.
    56 */
    57 
    58 #conteneur {
    59   display: -webkit-box;
    60   display: -ms-flexbox;
    61   display: flex;
    62   -webkit-box-orient: vertical;
    63   -webkit-box-direction: normal;
    64       -ms-flex-direction: column;
    65           flex-direction: column;
    66 }
    67 
    68 #contenu, #navigation, #extra,
    69 .large #contenu, .large #navigation, .large #extra {
    70   float: none;
    71   width: auto;
    72 }
    73 
    74 /* ordre des items */
    75 #contenu {
    76   -webkit-box-ordinal-group: 2;
    77       -ms-flex-order: 1;
    78           order: 1;
    79   margin-left: 0;
    80 }
    81 .large #contenu {
    82   margin-left: 0;
    83 }
    84 #navigation {
    85   -webkit-box-ordinal-group: 3;
    86       -ms-flex-order: 2;
    87           order: 2;
    88 }
    89 #extra {
    90   -webkit-box-ordinal-group: 4;
    91       -ms-flex-order: 3;
    92           order: 3;
    93 }
    94 
    95 /* prévisualisation du contenu éditorial */
    96 #wysiwyg {
    97   max-width: 50em; /* ~70 caractères par ligne */
     53/* Des blocs à limiter en largeur pour obtenir ~80 caractères max par ligne */
     54#wysiwyg,
     55/* .cadre-formulaire-editer, */
     56.formulaire_spip textarea,
     57.formulaire_spip .edition {
     58  display: block;
     59  max-width: 45em;
    9860  margin-left: auto;
    9961  margin-right: auto;
     
    10264
    10365/*
    104     ==========
    105     Responsive
    106     ==========
    107     On passe en colonnes au-delà de 780px
    108     Cette valeur est tirée de la largeur minimale de la page par défaut dans les styles vanilla de SPIP.
    109     Quand #navigation ou #extra sont vides, le contenu central s'adapte pour prendre tout l'espace disponible.
    110     Malheureusement on ne peut pas mettre de largeur en pourcentage pour les colonnes, sinon on a des colonnes fantomes en absence de contenu.
     66  ==========
     67  Responsive
     68  ==========
    11169*/
    11270
     71
     72/* 2 colonnes */
    11373@media (min-width: 780px) {
    11474
    115   /* Conteneur */
    116   #conteneur {
    117     -webkit-box-orient: horizontal;
    118     -webkit-box-direction: normal;
    119         -ms-flex-direction: row;
    120             flex-direction: row;
     75  /* D'abord le fallback pour les vieux navigateurs */
     76  /* [TODO] */
     77 
     78  /* Ensuite le layout en CSS grid : 2 colonnes */
     79  @supports (display: grid) {
     80    #conteneur {
     81      display: grid;
     82      grid-gap: 0 1.5vw;
     83      grid-template-columns: auto repeat(3, 1fr);
     84      grid-template-rows: auto 1fr; /* la 1ère ligne doit se collapser */
     85      grid-template-areas:
     86        "navigation contenu contenu contenu"
     87        "extra      contenu contenu contenu";
     88    }
     89    #contenu {
     90      grid-area: contenu;
     91    }
     92    #navigation {
     93      grid-area: navigation;
     94    }
     95    #extra {
     96      grid-area: extra;
     97    }
    12198  }
     99}
    122100
    123    #contenu, #navigation, #extra {
    124      width: auto !important;
    125    }
     101/* 3 colonnes */
     102@media (min-width: 1200px) {
    126103
    127   /* contenu principal */
    128   #contenu {
    129     -webkit-box-flex: 1;
    130     -ms-flex-positive: 1;
    131     flex-grow: 1;
    132     -webkit-box-ordinal-group: 3;
    133         -ms-flex-order: 2;
    134             order: 2;
    135     margin-left: 30px !important;
    136   }
    137 
    138   /* colonne */
    139   #navigation, #extra {
    140     width: initial !important; /* pas de colonne fantome en abscence de contenu */
    141     max-width: 33%;
    142     -webkit-box-flex: 0;
    143     -ms-flex-positive: 0;
    144     flex-grow: 0; /* pas de colonne fantome en abscence de contenu */
    145     -ms-flex-negative: 1;
    146     flex-shrink: 1;
    147     -webkit-box-ordinal-group: 2;
    148         -ms-flex-order: 1;
    149             order: 1;
    150   }
    151   /* largeur de colonne : on cible le premier contenu pour éviter une colonne fantome en abscence de contenu */
    152   #navigation > .ajaxbloc:first-child > * {
    153     width: 22rem;
    154   }
    155 
    156   /* mode large : on place #extra à droite */
    157   .large #extra {
    158     -webkit-box-ordinal-group: 4;
    159     -ms-flex-order: 3;
    160     order: 3;
    161     margin-left: 24px !important; /* = margin-left de #contenu */
    162   }
    163   .large #contenu {
    164     margin-left: 24px !important;
     104  @supports (display: grid) {
     105    #conteneur {
     106      grid-template-columns: auto repeat(3, 1fr) auto;
     107      grid-template-rows: auto auto;
     108      grid-template-areas:
     109        "navigation contenu contenu contenu extra"
     110        "navigation contenu contenu contenu extra";
     111    }
    165112  }
    166113
Note: See TracChangeset for help on using the changeset viewer.