Changeset 111131 in spip-zone

Timestamp:

Jul 14, 2018, 6:05:13 PM (21 months ago)

Author:

nicod@…

Message:

Masquer les colonnes vides, formulaires sur une colonne sur petits écrans, et ajustements

File:

• _plugins_/prive_fluide/branches/remix/prive/style_prive_plugin_prive_fluide_remix.html (modified) (7 diffs)

_plugins_/prive_fluide/branches/remix/prive/style_prive_plugin_prive_fluide_remix.html

@@ -78 +78 @@
 }
 
+/* prévisualisation du contenu éditorial */
+#wysiwyg {
+        max-width: 45em; /* ~70 caractères par ligne */
+}
 /* pas de justification, c'est mal, et pas de césure auto */
 #wysiwyg .champ,.preview {
@@ -262 +266 @@
         border-radius: 4px;
 }
+.formulaire_spip textarea {
+        line-height: 1.6;
+}
 .formulaire_spip .choix {
         border-bottom: none;
@@ -345 +352 @@
 
 /*-------------------------------------- 
-  formulaires sur une seule colonne
-----------------------------------------*/
-
-/*
-.formulaire_spip .editer-groupe, 
-.formulaire_spip fieldset, 
-.formulaire_spip fieldset .editer-groupe, 
-.formulaire_spip .editer .boutons,
-.formulaire_spip .legend {
-        margin-left: 0;
-        margin-right: 0;
-}
-
-.formulaire_spip .editer,
-.formulaire_spip .editer.gauche,
-.formulaire_spip .editer.droite {
-        padding: 0.5em 0;       
-}
-.formulaire_spip .editer_parent {
-        padding-left: 0.5em;
-        padding-right: 0.5em;
-}
-
-.formulaire_spip .editer label, 
-.formulaire_spip .editer.gauche label,
-.formulaire_spip .editer.droite label {
-        display: block;
-        width: auto;
-        float: none;
-        margin: 0 0 0.25em 0;
-}
-
-.formulaire_spip .choix {
-        border-top: none;
-        border-bottom: none;
-}
-.formulaire_spip .choix label {
-        display: inline-block;
-        margin-bottom: 0;
-        vertical-align: middle;
-        margin-#ENV{left}: 0.25em;
-}
-
-.formulaire_spip h3:not(.titrem) {
-        margin-top: 1em;
-        margin-bottom: 1em;
-}
-*/
+  En dessous de 980px, les formulaires 
+  passent sur une seule colonne 
+----------------------------------------*/
+
+@media (max-width: 980px) {
+        
+        .formulaire_spip .editer-groupe, 
+        .formulaire_spip fieldset, 
+        .formulaire_spip fieldset .editer-groupe, 
+        .formulaire_spip .editer .boutons,
+        .formulaire_spip .legend {
+                margin-left: 0;
+                margin-right: 0;
+        }
+        
+        .formulaire_spip .editer,
+        .formulaire_spip .editer.gauche,
+        .formulaire_spip .editer.droite {
+                padding: 0.5em 0;       
+        }
+        .formulaire_spip .editer_parent {
+                padding-left: 0.5em;
+                padding-right: 0.5em;
+        }
+        
+        .formulaire_spip .editer label, 
+        .formulaire_spip .editer.gauche label,
+        .formulaire_spip .editer.droite label {
+                display: block;
+                width: auto;
+                float: none;
+                margin: 0 0 0.25em 0;
+        }
+        
+        .formulaire_spip .choix {
+                border-top: none;
+                border-bottom: none;
+        }
+        .formulaire_spip .choix label {
+                display: inline-block;
+                margin-bottom: 0;
+                vertical-align: middle;
+                margin-#ENV{left}: 0.25em;
+        }
+        
+        .formulaire_spip h3:not(.titrem) {
+                margin-top: 1em;
+                margin-bottom: 1em;
+        }
+
+}
 
 
@@ -416 +426 @@
 .large .largeur, .large #conteneur, .large .table_page {
         width: auto !important;
-        max-width: 1200px;
+        max-width: 1100px;
 }
 
@@ -479 +489 @@
         -ms-flex-order: 3;
         order: 3;
-}
-
-/* prévisualisation du contenu éditorial */
-#wysiwyg {
-        max-width: 50em; /* ~70 caractères par ligne */
-        margin-left: auto;
-        margin-right: auto;
 }
 
@@ -527 +530 @@
         /* colonne */
         #navigation, #extra {
-                /*width: initial !important; !* pas de colonne fantome en abscence de contenu *!*/
-                width: 30% !important;
+                width: initial !important; /* pas de colonne fantome en abscence de contenu */
+                /*width: 30% !important;*/
                 -webkit-box-flex: 0;
                 -ms-flex-positive: 0;
@@ -538 +541 @@
                 order: 1;
         }
-
+        /* Hack : on met une largeur au contenu des colonnes latérales,
+        ainsi quand elles sont vides, elles se collapsent */
+        #navigation > .ajaxbloc > *,
+        #navigation > :not(.ajaxbloc),
+        #extra > .ajaxbloc > *,
+        #extra > :not(.ajaxbloc) {
+                width: calc(8em + 12vw);
+        }
+        
         /* largeur de colonne : on cible le premier contenu pour éviter une colonne fantome en abscence de contenu */
         #navigation > .ajaxbloc:first-child > * {