Changeset 111131 in spip-zone for _plugins_/prive_fluide/branches


Ignore:
Timestamp:
Jul 14, 2018, 6:05:13 PM (2 years ago)
Author:
nicod@…
Message:

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

File:
1 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/prive_fluide/branches/remix/prive/style_prive_plugin_prive_fluide_remix.html

    r111129 r111131  
    7878}
    7979
     80/* prévisualisation du contenu éditorial */
     81#wysiwyg {
     82        max-width: 45em; /* ~70 caractères par ligne */
     83}
    8084/* pas de justification, c'est mal, et pas de césure auto */
    8185#wysiwyg .champ,.preview {
     
    262266        border-radius: 4px;
    263267}
     268.formulaire_spip textarea {
     269        line-height: 1.6;
     270}
    264271.formulaire_spip .choix {
    265272        border-bottom: none;
     
    345352
    346353/*--------------------------------------
    347   formulaires sur une seule colonne
    348 ----------------------------------------*/
    349 
    350 /*
    351 .formulaire_spip .editer-groupe,
    352 .formulaire_spip fieldset,
    353 .formulaire_spip fieldset .editer-groupe,
    354 .formulaire_spip .editer .boutons,
    355 .formulaire_spip .legend {
    356         margin-left: 0;
    357         margin-right: 0;
    358 }
    359 
    360 .formulaire_spip .editer,
    361 .formulaire_spip .editer.gauche,
    362 .formulaire_spip .editer.droite {
    363         padding: 0.5em 0;       
    364 }
    365 .formulaire_spip .editer_parent {
    366         padding-left: 0.5em;
    367         padding-right: 0.5em;
    368 }
    369 
    370 .formulaire_spip .editer label,
    371 .formulaire_spip .editer.gauche label,
    372 .formulaire_spip .editer.droite label {
    373         display: block;
    374         width: auto;
    375         float: none;
    376         margin: 0 0 0.25em 0;
    377 }
    378 
    379 .formulaire_spip .choix {
    380         border-top: none;
    381         border-bottom: none;
    382 }
    383 .formulaire_spip .choix label {
    384         display: inline-block;
    385         margin-bottom: 0;
    386         vertical-align: middle;
    387         margin-#ENV{left}: 0.25em;
    388 }
    389 
    390 .formulaire_spip h3:not(.titrem) {
    391         margin-top: 1em;
    392         margin-bottom: 1em;
    393 }
    394 */
     354  En dessous de 980px, les formulaires
     355  passent sur une seule colonne
     356----------------------------------------*/
     357
     358@media (max-width: 980px) {
     359       
     360        .formulaire_spip .editer-groupe,
     361        .formulaire_spip fieldset,
     362        .formulaire_spip fieldset .editer-groupe,
     363        .formulaire_spip .editer .boutons,
     364        .formulaire_spip .legend {
     365                margin-left: 0;
     366                margin-right: 0;
     367        }
     368       
     369        .formulaire_spip .editer,
     370        .formulaire_spip .editer.gauche,
     371        .formulaire_spip .editer.droite {
     372                padding: 0.5em 0;       
     373        }
     374        .formulaire_spip .editer_parent {
     375                padding-left: 0.5em;
     376                padding-right: 0.5em;
     377        }
     378       
     379        .formulaire_spip .editer label,
     380        .formulaire_spip .editer.gauche label,
     381        .formulaire_spip .editer.droite label {
     382                display: block;
     383                width: auto;
     384                float: none;
     385                margin: 0 0 0.25em 0;
     386        }
     387       
     388        .formulaire_spip .choix {
     389                border-top: none;
     390                border-bottom: none;
     391        }
     392        .formulaire_spip .choix label {
     393                display: inline-block;
     394                margin-bottom: 0;
     395                vertical-align: middle;
     396                margin-#ENV{left}: 0.25em;
     397        }
     398       
     399        .formulaire_spip h3:not(.titrem) {
     400                margin-top: 1em;
     401                margin-bottom: 1em;
     402        }
     403
     404}
    395405
    396406
     
    416426.large .largeur, .large #conteneur, .large .table_page {
    417427        width: auto !important;
    418         max-width: 1200px;
     428        max-width: 1100px;
    419429}
    420430
     
    479489        -ms-flex-order: 3;
    480490        order: 3;
    481 }
    482 
    483 /* prévisualisation du contenu éditorial */
    484 #wysiwyg {
    485         max-width: 50em; /* ~70 caractères par ligne */
    486         margin-left: auto;
    487         margin-right: auto;
    488491}
    489492
     
    527530        /* colonne */
    528531        #navigation, #extra {
    529                 /*width: initial !important; !* pas de colonne fantome en abscence de contenu *!*/
    530                 width: 30% !important;
     532                width: initial !important; /* pas de colonne fantome en abscence de contenu */
     533                /*width: 30% !important;*/
    531534                -webkit-box-flex: 0;
    532535                -ms-flex-positive: 0;
     
    538541                order: 1;
    539542        }
    540 
     543        /* Hack : on met une largeur au contenu des colonnes latérales,
     544        ainsi quand elles sont vides, elles se collapsent */
     545        #navigation > .ajaxbloc > *,
     546        #navigation > :not(.ajaxbloc),
     547        #extra > .ajaxbloc > *,
     548        #extra > :not(.ajaxbloc) {
     549                width: calc(8em + 12vw);
     550        }
     551       
    541552        /* largeur de colonne : on cible le premier contenu pour éviter une colonne fantome en abscence de contenu */
    542553        #navigation > .ajaxbloc:first-child > * {
Note: See TracChangeset for help on using the changeset viewer.