Browse Source

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

svn/attic/html5up_massively/117919
chankalan@choc0.net 3 years ago
parent
commit
35960aa833
  1. 12
      article.html
  2. 138
      css/spip.css
  3. 8
      formulaires/configurer_html5up.html
  4. 4
      inclure/sousnav.html
  5. 8
      js/sousnav.js
  6. 2
      paquet.xml
  7. 3
      styles_config.css.html

12
article.html

@ -28,11 +28,13 @@
<div id="main">
<section class="post">
<BOUCLE_articles(ARTICLES){id_rubrique}{1,2}> </BOUCLE_articles>
<a href="#sousnav" id="sousnavToggle">Articles</a>
<div id="sousnav">
<INCLURE{fond=inclure/sousnav,env,ajax,id_rubrique} />
</div>
<BOUCLE_articles(ARTICLES){id_rubrique}{1,2}> </BOUCLE_articles>[(#CONFIG{html5up/sousnavmasquee}|=={on}|oui)
<a href="#sousnavmasquee" id="sousnavmasqueeToggle">Articles</a>
<div id="sousnavmasquee">
<INCLURE{fond=inclure/sousnav,env,ajax,id_rubrique,id_article,masquee=oui} />
</div>][(#CONFIG{html5up/sousnavmasquee}|=={on}|non)<div id="sousnav">
<INCLURE{fond=inclure/sousnav,env,ajax,id_rubrique,id_article} />
</div>]
</B_articles>
<header class="major">

138
css/spip.css

@ -14,8 +14,10 @@ img { height: auto; }
#intro + #header .logo { opacity:0 !important; display:none; }
#intro.hidden + #header .logo { opacity:1 !important; display:block; }
/* on veut ajaxer la liste/articles donc on prend en compte une div de + dans les styles */
#main > .post {
padding-top:4rem;
}
/* on veut ajaxer la liste/articles donc on prend en compte une div de + dans les styles "> div " */
#main > * {
padding:0;
@ -31,63 +33,63 @@ img { height: auto; }
}
#main > div > #pagination_articles { padding:0; border:0; }
#main > div > .posts {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-moz-align-items: -moz-stretch;
-webkit-align-items: -webkit-stretch;
-ms-align-items: -ms-stretch;
align-items: stretch;
text-align: center;
width: 100%;
padding: 0;
}
#main > div > .posts > * {
-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
-ms-flex-shrink: 1;
flex-shrink: 1;
-moz-flex-grow: 0;
-webkit-flex-grow: 0;
-ms-flex-grow: 0;
flex-grow: 0;
}
#main > div > .posts > * {
width: 50%;
}
#main > div > .posts > * {
padding: 4rem;
width: 50%;
}
#main > div > .posts > article {
border-color: #eeeeee;
border-left-width: 2px;
border-style: solid;
border-top-width: 2px;
text-align: center;
}
#main > div > .posts > article > :last-child {
margin-bottom: 0;
}
#main > div > .posts > article:nth-child(2n - 1) {
border-left-width: 0;
}
#main > div > .posts > article:nth-child(-n + 2) {
border-top-width: 0;
}
#main > div > .posts {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-moz-align-items: -moz-stretch;
-webkit-align-items: -webkit-stretch;
-ms-align-items: -ms-stretch;
align-items: stretch;
text-align: center;
width: 100%;
padding: 0;
}
#main > div > .posts > * {
-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
-ms-flex-shrink: 1;
flex-shrink: 1;
-moz-flex-grow: 0;
-webkit-flex-grow: 0;
-ms-flex-grow: 0;
flex-grow: 0;
}
#main > div > .posts > * {
width: 50%;
}
#main > div > .posts > * {
padding: 4rem;
width: 50%;
}
#main > div > .posts > article {
border-color: #eeeeee;
border-left-width: 2px;
border-style: solid;
border-top-width: 2px;
text-align: center;
}
#main > div > .posts > article > :last-child {
margin-bottom: 0;
}
#main > div > .posts > article:nth-child(2n - 1) {
border-left-width: 0;
}
#main > div > .posts > article:nth-child(-n + 2) {
border-top-width: 0;
}
.introduction { margin: 0 0 2rem 0; }
@ -100,17 +102,23 @@ img { height: auto; }
.pagination > span strong { display:inline-block; padding: 0 1.75rem; border:2px solid #eeeeee; height:3rem; color:#ddd; }
#sousnavToggle { position:absolute; top:1em; right:2em; }
#sousnavToggle:before {
#sousnavmasqueeToggle { position:absolute; top:1em; right:2em; }
#sousnavmasqueeToggle:before {
content: '\f0c9';
margin-right: 0.5rem;
-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
font-family: FontAwesome; font-style: normal; font-weight: normal; text-transform: none !important;
}
#sousnav { overflow:hidden; position:relative; }
#sousnav nav { margin-bottom:5em; margin-top:0; transition:margin 0.5s ease; }
#sousnavmasquee { overflow:hidden; position:relative; }
#sousnavmasquee nav { margin-bottom:5em; margin-top:0; transition:margin 0.5s ease; }
#sousnavmasquee nav ul li a { display:inline-block; padding:0.4rem; border-bottom:0; }
#sousnav { margin-top:-3rem; margin-bottom:3rem; }
#sousnav nav ul { padding:0; margin:0; list-style:none; }
#sousnav nav ul:after { display:block; content:''; width:100%; clear:both; }
#sousnav nav ul li { float:left; padding:0; }
#sousnav nav ul li a { display:inline-block; padding:0.8rem 1.2rem; border-bottom:1px solid; }
#sousnav nav ul li a.active { }
/* footer */

8
formulaires/configurer_html5up.html

@ -57,6 +57,14 @@
</div>
</fieldset>
<fieldset>
<legend><:html5up:menu:></legend>
<div class="editer-groupe">
[(#SAISIE{case, sousnavmasquee,
label=<:massively:sousnavmasquee:>,
explication=<:massively:sousnavmasquee_explications:>})]
</div>
</fieldset>
<fieldset>
<legend><:zcore:accueil:></legend>
<div class="editer-groupe">
[(#SAISIE{input, titre_sommaire,

4
inclure/sousnav.html

@ -1,8 +1,8 @@
<B_sousnav>
<nav class="fermer">
<nav class="[(#ENV{masquee}|=={oui}|oui)fermer][(#ENV{masquee}|=={oui}|non)onglets]">
<ul>
<BOUCLE_sousnav(ARTICLES){id_rubrique}{par num titre}{!par date}>
<li><a href="#URL_ARTICLE">#TITRE</a></li>
<li><a href="#URL_ARTICLE"[(#EXPOSE|oui) class="active"]>#TITRE</a></li>
</BOUCLE_sousnav>
</ul>
</nav>

8
js/sousnav.js

@ -1,12 +1,12 @@
jQuery(function($){
// le menu des articles
var h = $('#sousnav').height();
$('body').prepend('<style>#sousnav nav.fermer { margin-top:-' + h + 'px; }</style>');
var h = $('#sousnavmasquee').height();
$('body').prepend('<style>#sousnavmasquee nav.fermer { margin-top:-' + h + 'px; }</style>');
// afficher/masquer le menu
$('#sousnavToggle').on('click', function(){
$('#sousnavmasqueeToggle').on('click', function(){
$(this).toggleClass('active');
$('#sousnav nav').toggleClass('fermer');
$('#sousnavmasquee nav').toggleClass('fermer');
return false;
});

2
paquet.xml

@ -1,7 +1,7 @@
<paquet
prefix="html5up_massively"
categorie="squelette"
version="0.4.2"
version="0.4.3"
schema="0.1.3"
etat="test"
compatibilite="[3.2.0;3.2.*]"

3
styles_config.css.html

@ -23,7 +23,8 @@ a:hover, a:active, a:focus, a.on, .formulaire_contact form > fieldset.previsu >
button:hover, .button:hover, #footer input[type="submit"]:hover, #footer input[type="reset"]:hover,
#footer input[type="button"]:hover, #footer button:hover, #footer .button:hover, #footer a:hover, .pagination a:hover,
#footer ul.icons li a.icon:hover:before, #nav ul.icons li a.icon:hover:before, #nav a:hover, #header .logo:hover,
#copyright a:hover, ul.icons li a.icon:hover::before, .reponse_formulaire_erreur, .erreur_message {[ color:(#CONFIG{html5up/couleur_accent}) !important; ]}
#copyright a:hover, ul.icons li a.icon:hover::before, .reponse_formulaire_erreur, .erreur_message#nav ul.links li a:hover,
#nav .icons a, #nav ul.links li.active a, #sousnav nav ul li a.active {[ color:(#CONFIG{html5up/couleur_accent}) !important; ]}
/* box-shadow */
#intro input[type="submit"]:hover, #intro input[type="reset"]:hover, #intro input[type="button"]:hover, #intro button:hover, #intro .button:hover,

Loading…
Cancel
Save