Changeset 114558 in spip-zone for _squelettes_


Ignore:
Timestamp:
Mar 18, 2019, 9:43:02 AM (4 months ago)
Author:
root
Message:

sousnav des articles masquée ou pas au choix dans la config + styles en conséquence

Location:
_squelettes_/html5up_massively
Files:
7 edited

Legend:

Unmodified
Added
Removed
  • _squelettes_/html5up_massively/article.html

    r114429 r114558  
    2929                                <section class="post">
    3030                                       
    31                                         <BOUCLE_articles(ARTICLES){id_rubrique}{1,2}> </BOUCLE_articles>
    32                                         <a href="#sousnav" id="sousnavToggle">Articles</a>
    33                                         <div id="sousnav">
    34                                                 <INCLURE{fond=inclure/sousnav,env,ajax,id_rubrique} />
    35                                         </div>
     31                                        <BOUCLE_articles(ARTICLES){id_rubrique}{1,2}> </BOUCLE_articles>[(#CONFIG{html5up/sousnavmasquee}|=={on}|oui)
     32                                        <a href="#sousnavmasquee" id="sousnavmasqueeToggle">Articles</a>
     33                                        <div id="sousnavmasquee">
     34                                                <INCLURE{fond=inclure/sousnav,env,ajax,id_rubrique,id_article,masquee=oui} />
     35                                        </div>][(#CONFIG{html5up/sousnavmasquee}|=={on}|non)<div id="sousnav">
     36                                                <INCLURE{fond=inclure/sousnav,env,ajax,id_rubrique,id_article} />
     37                                        </div>]
    3638                                        </B_articles>
    3739                                       
  • _squelettes_/html5up_massively/css/spip.css

    r114490 r114558  
    1515#intro.hidden + #header .logo { opacity:1 !important; display:block; }
    1616
    17 
    18 /* on veut ajaxer la liste/articles donc on prend en compte une div de + dans les styles */
     17#main > .post {
     18    padding-top:4rem;
     19}
     20/* on veut ajaxer la liste/articles donc on prend en compte une div de + dans les styles "> div " */
    1921#main > * {
    2022
     
    3234}
    3335#main > div > #pagination_articles { padding:0; border:0; }
    34                 #main > div > .posts {
    35                         display: -moz-flex;
    36                         display: -webkit-flex;
    37                         display: -ms-flex;
    38                         display: flex;
    39                         -moz-flex-wrap: wrap;
    40                         -webkit-flex-wrap: wrap;
    41                         -ms-flex-wrap: wrap;
    42                         flex-wrap: wrap;
    43                         -moz-align-items: -moz-stretch;
    44                         -webkit-align-items: -webkit-stretch;
    45                         -ms-align-items: -ms-stretch;
    46                         align-items: stretch;
    47                         text-align: center;
    48                         width: 100%;
    49                         padding: 0;
    50                 }
    51 
    52                         #main > div > .posts > * {
    53                                 -moz-flex-shrink: 1;
    54                                 -webkit-flex-shrink: 1;
    55                                 -ms-flex-shrink: 1;
    56                                 flex-shrink: 1;
    57                                 -moz-flex-grow: 0;
    58                                 -webkit-flex-grow: 0;
    59                                 -ms-flex-grow: 0;
    60                                 flex-grow: 0;
    61                         }
    62 
    63                         #main > div > .posts > * {
    64                                 width: 50%;
    65                         }
    66 
    67                         #main > div > .posts > * {
    68                                 padding: 4rem;
    69                                 width: 50%;
    70                         }
    71 
    72                         #main > div > .posts > article {
    73                                 border-color: #eeeeee;
    74                                 border-left-width: 2px;
    75                                 border-style: solid;
    76                                 border-top-width: 2px;
    77                                 text-align: center;
    78                         }
    79 
    80                                 #main > div > .posts > article > :last-child {
    81                                         margin-bottom: 0;
    82                                 }
    83 
    84                                 #main > div > .posts > article:nth-child(2n - 1) {
    85                                         border-left-width: 0;
    86                                 }
    87 
    88                                 #main > div > .posts > article:nth-child(-n + 2) {
    89                                         border-top-width: 0;
    90                                 }
     36#main > div > .posts {
     37        display: -moz-flex;
     38        display: -webkit-flex;
     39        display: -ms-flex;
     40        display: flex;
     41        -moz-flex-wrap: wrap;
     42        -webkit-flex-wrap: wrap;
     43        -ms-flex-wrap: wrap;
     44        flex-wrap: wrap;
     45        -moz-align-items: -moz-stretch;
     46        -webkit-align-items: -webkit-stretch;
     47        -ms-align-items: -ms-stretch;
     48        align-items: stretch;
     49        text-align: center;
     50        width: 100%;
     51        padding: 0;
     52}
     53
     54#main > div > .posts > * {
     55        -moz-flex-shrink: 1;
     56        -webkit-flex-shrink: 1;
     57        -ms-flex-shrink: 1;
     58        flex-shrink: 1;
     59        -moz-flex-grow: 0;
     60        -webkit-flex-grow: 0;
     61        -ms-flex-grow: 0;
     62        flex-grow: 0;
     63}
     64
     65#main > div > .posts > * {
     66        width: 50%;
     67}
     68
     69#main > div > .posts > * {
     70        padding: 4rem;
     71        width: 50%;
     72}
     73
     74#main > div > .posts > article {
     75        border-color: #eeeeee;
     76        border-left-width: 2px;
     77        border-style: solid;
     78        border-top-width: 2px;
     79        text-align: center;
     80}
     81
     82#main > div > .posts > article > :last-child {
     83        margin-bottom: 0;
     84}
     85
     86#main > div > .posts > article:nth-child(2n - 1) {
     87        border-left-width: 0;
     88}
     89
     90#main > div > .posts > article:nth-child(-n + 2) {
     91        border-top-width: 0;
     92}
    9193
    9294.introduction { margin: 0 0 2rem 0; }
     
    101103
    102104
    103 #sousnavToggle { position:absolute; top:1em; right:2em; }
    104 #sousnavToggle:before {
     105#sousnavmasqueeToggle { position:absolute; top:1em; right:2em; }
     106#sousnavmasqueeToggle:before {
    105107        content: '\f0c9';
    106108        margin-right: 0.5rem;
     
    108110        font-family: FontAwesome; font-style: normal; font-weight: normal; text-transform: none !important;
    109111}
    110 #sousnav { overflow:hidden; position:relative; }
    111 #sousnav nav { margin-bottom:5em; margin-top:0; transition:margin 0.5s ease; }
    112 
    113 
     112#sousnavmasquee { overflow:hidden; position:relative; }
     113#sousnavmasquee nav { margin-bottom:5em; margin-top:0; transition:margin 0.5s ease; }
     114#sousnavmasquee nav ul li a { display:inline-block; padding:0.4rem; border-bottom:0; }
     115
     116#sousnav { margin-top:-3rem; margin-bottom:3rem; }
     117#sousnav nav ul { padding:0; margin:0; list-style:none; }
     118#sousnav nav ul:after { display:block; content:''; width:100%; clear:both; }
     119#sousnav nav ul li { float:left; padding:0; }
     120#sousnav nav ul li a { display:inline-block; padding:0.8rem 1.2rem; border-bottom:1px solid; }
     121#sousnav nav ul li a.active {  }
    114122
    115123
  • _squelettes_/html5up_massively/formulaires/configurer_html5up.html

    r114492 r114558  
    5858                </fieldset>
    5959                <fieldset>
     60                <legend><:html5up:menu:></legend>
     61                        <div class="editer-groupe">
     62                                [(#SAISIE{case, sousnavmasquee,
     63                                        label=<:massively:sousnavmasquee:>,
     64                                        explication=<:massively:sousnavmasquee_explications:>})]
     65                        </div>
     66                </fieldset>
     67                <fieldset>
    6068                <legend><:zcore:accueil:></legend>
    6169                        <div class="editer-groupe">
  • _squelettes_/html5up_massively/inclure/sousnav.html

    r114422 r114558  
    11<B_sousnav>
    2 <nav class="fermer">
     2<nav class="[(#ENV{masquee}|=={oui}|oui)fermer][(#ENV{masquee}|=={oui}|non)onglets]">
    33        <ul>
    44        <BOUCLE_sousnav(ARTICLES){id_rubrique}{par num titre}{!par date}>
    5                 <li><a href="#URL_ARTICLE">#TITRE</a></li>
     5                <li><a href="#URL_ARTICLE"[(#EXPOSE|oui) class="active"]>#TITRE</a></li>
    66        </BOUCLE_sousnav>
    77        </ul>
  • _squelettes_/html5up_massively/js/sousnav.js

    r114422 r114558  
    22
    33        // le menu des articles
    4         var h = $('#sousnav').height();
    5         $('body').prepend('<style>#sousnav nav.fermer { margin-top:-' + h + 'px; }</style>');
     4        var h = $('#sousnavmasquee').height();
     5        $('body').prepend('<style>#sousnavmasquee nav.fermer { margin-top:-' + h + 'px; }</style>');
    66        // afficher/masquer le menu
    7         $('#sousnavToggle').on('click', function(){
     7        $('#sousnavmasqueeToggle').on('click', function(){
    88                $(this).toggleClass('active');
    9                 $('#sousnav nav').toggleClass('fermer');
     9                $('#sousnavmasquee nav').toggleClass('fermer');
    1010                return false;
    1111        });
  • _squelettes_/html5up_massively/paquet.xml

    r114531 r114558  
    22        prefix="html5up_massively"
    33        categorie="squelette"
    4         version="0.4.2"
     4        version="0.4.3"
    55        schema="0.1.3"
    66        etat="test"
  • _squelettes_/html5up_massively/styles_config.css.html

    r114491 r114558  
    2424#footer input[type="button"]:hover, #footer button:hover, #footer .button:hover, #footer a:hover, .pagination a:hover,
    2525#footer ul.icons li a.icon:hover:before, #nav ul.icons li a.icon:hover:before, #nav a:hover, #header .logo:hover,
    26 #copyright a:hover, ul.icons li a.icon:hover::before, .reponse_formulaire_erreur, .erreur_message {[ color:(#CONFIG{html5up/couleur_accent}) !important; ]}
     26#copyright a:hover, ul.icons li a.icon:hover::before, .reponse_formulaire_erreur, .erreur_message#nav ul.links li a:hover,
     27#nav .icons a,  #nav ul.links li.active a, #sousnav nav ul li a.active {[ color:(#CONFIG{html5up/couleur_accent}) !important; ]}
    2728
    2829/* box-shadow */
Note: See TracChangeset for help on using the changeset viewer.