Changeset 104948 in spip-zone for _plugins_/prive_fluide


Ignore:
Timestamp:
Jun 23, 2017, 2:17:15 PM (3 years ago)
Author:
tcharlss@…
Message:

version 0.1.2 : un peu de responsive pour un affichage décent sur mobile et tablettes (RealET)

Location:
_plugins_/prive_fluide/trunk
Files:
3 edited

Legend:

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

    r104938 r104948  
    99
    1010        // M
    11         'message_configurer_largeur_ecran' => '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] Ces options n\'ont pas d\'incidence sur la largeur de l\'écran. L\'option « Grand écran » place la colonne #extra à droite.',
    1212
    1313);
  • _plugins_/prive_fluide/trunk/paquet.xml

    r104942 r104948  
    22        prefix="prive_fluide"
    33        categorie="edition"
    4         version="0.1.1"
     4        version="0.1.2"
    55        etat="test"
    66        compatibilite="[3.0.0;3.2.*]"
  • _plugins_/prive_fluide/trunk/prive/style_prive_plugin_prive_fluide.html

    r104942 r104948  
    1313#HTTP_HEADER{Vary: Accept-Encoding}
    1414
    15 
    1615/*
    1716  ==========
     
    2221*/
    2322
     23body,
     24body.large {
     25  min-width: auto;
     26}
     27
    2428.largeur, #conteneur, .table_page,
    2529.large .largeur, .large #conteneur, .large .table_page {
     
    2731}
    2832
    29 .largeur, #conteneur, .table_page {
     33#bando_haut .largeur,
     34#haut,
     35#conteneur,
     36#pied .largeur,
     37.table_page {
    3038  padding: 0 30px; /* = margin-left de #contenu */
    3139}
    3240
    33 .large .largeur, .large #conteneur, .large .table_page {
     41.large #bando_haut .largeur,
     42.large #conteneur,
     43.large #haut,
     44.large #pied .largeur,
     45.large .table_page {
    3446  padding: 0 24px; /* = margin-left de #contenu */
    35 }
    36 
    37 .largeur #conteneur {
    38   padding: 0;
    3947}
    4048
     
    4553  ======
    4654  On passe les 3 items #contenu, #navigation et #extra en flexbox.
    47   Avantage : quand #navigation ou #extra sont vides, le contenu central s'adapte pour prendre tout l'espace disponible.
    48   On gère le ratio contenu/colonnes avec la propriété flex-grow.
    49   On met 4/1, mais ça ne fait pas 75%/25%, c'est plus compliqué : https://css-tricks.com/flex-grow-is-weird/
    50   Pas de largeur définie pour #navigation et #extra, sinon ça laisse un espace blanc quand ils sont vides.
     55  De base, une colonne et on place #contenu en premier.
    5156*/
    5257
     
    5560  display: -ms-flexbox;
    5661  display: flex;
     62  -webkit-box-orient: vertical;
     63  -webkit-box-direction: normal;
     64      -ms-flex-direction: column;
     65          flex-direction: column;
    5766}
    5867
     
    6372}
    6473
    65 #contenu {
    66   -webkit-box-flex: 4;
    67   -ms-flex-positive: 4;
    68   flex-grow: 4;
     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;
    6993}
    7094
    71 #navigation, #extra {
    72   -webkit-box-flex: 0;
    73   -ms-flex-positive: 0;
    74   flex-grow: 0;
    75   -ms-flex-negative: 1;
    76   flex-shrink: 1;
    77   max-width: 20%;
    78 }
    79 
     95/* prévisualisation du contenu éditorial */
    8096#wysiwyg {
    8197  max-width: 45em; /* ~70 caractères par ligne */
     
    84100}
    85101
    86 /* spécificités du mode large : on place #extra à droite */
    87102
    88 .large #navigation {
    89   -webkit-box-ordinal-group: 2;
    90   -ms-flex-order: 1;
    91   order: 1;
     103/*
     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    On gère le ratio contenu/colonnes avec la propriété flex-grow.
     111    On met 4/1, mais ça ne fait pas 75%/25%, c'est plus compliqué : https://css-tricks.com/flex-grow-is-weird/
     112    Pas de largeur définie pour #navigation et #extra, sinon ça laisse un espace blanc quand ils sont vides.
     113*/
     114
     115@media (min-width: 780px) {
     116
     117  /* Conteneur */
     118  #conteneur {
     119    -webkit-box-orient: horizontal;
     120    -webkit-box-direction: normal;
     121        -ms-flex-direction: row;
     122            flex-direction: row;
     123  }
     124
     125  /* contenu principal */
     126  #contenu {
     127    -webkit-box-flex: 4;
     128    -ms-flex-positive: 4;
     129    flex-grow: 4;
     130    -webkit-box-ordinal-group: 3;
     131        -ms-flex-order: 2;
     132            order: 2;
     133    margin-left: 30px;
     134  }
     135
     136  /* colonne */
     137  #navigation, #extra {
     138    -webkit-box-flex: 0;
     139    -ms-flex-positive: 0;
     140    flex-grow: 0;
     141    -ms-flex-negative: 1;
     142    flex-shrink: 1;
     143    max-width: 20%;
     144    -webkit-box-ordinal-group: 2;
     145        -ms-flex-order: 1;
     146            order: 1;
     147  }
     148
     149  /* mode large : on place #extra à droite */
     150  .large #extra {
     151    -webkit-box-ordinal-group: 4;
     152    -ms-flex-order: 3;
     153    order: 3;
     154    margin-left: 24px; /* = margin-left de #contenu */
     155  }
     156  .large #contenu {
     157    margin-left: 24px;
     158  }
     159
    92160}
    93 
    94 .large #contenu {
    95   -webkit-box-ordinal-group: 3;
    96   -ms-flex-order: 2;
    97   order: 2;
    98 }
    99 
    100 .large #extra {
    101   -webkit-box-ordinal-group: 4;
    102   -ms-flex-order: 3;
    103   order: 3;
    104   margin-left: 24px; /* = margin-left de #contenu */
    105 }
Note: See TracChangeset for help on using the changeset viewer.