Browse Source

1- Correction d'un bug qui empêchait le fonctionnement de zktx.css.html sur les header/*.html des pages autres que sommaire \n

* le - : plus de code redondant, déporté de body.html vers les differents header/*.html \n 
* le + : permet d'appliquer une grid css BS (.container ou .container-fluid) differente sur les header si besoin. (voir https://getbootstrap.com/css/#grid ) \n
Cette modif sera également déployée sur les autres blocs logiques Z) \n
\n
2- un peu de sémantique (role ARIA - déploiement à poursuivre également) + styles et autres broutilles manquantes + uniformisation d'affichages \n
\n
4- on vire les attributs automatiques (class & alt) appliqués à #LOGO (voir balises/logo.html) pour le rapprocher du fonctionnement natif des #LOGO_* de SPIP et aussi parce qu'il est préférable de pouvoir gérer au besoin les attributs en question dans ses /squelettes sans risquer de foutre le bronx dans la compil de la balise \n
\n
et on en profite accessoirement pour documenter un peu (mieux) le code et apprendre à faire un log de commit propre avec saut de ligne! :)
svn/root/trunk
l.oiseau2nuit@gmail.com 5 years ago
parent
commit
fd90307de3
  1. 2
      balises/logo.html
  2. 8
      body.html
  3. 24
      css/zktx.css.html
  4. 37
      header/article.html
  5. 47
      header/auteur.html
  6. 34
      header/dist.html
  7. 50
      header/mot.html
  8. 50
      header/rubrique.html
  9. 33
      header/sommaire.html

2
balises/logo.html

@ -4,4 +4,4 @@
<BOUCLE_rub(RUBRIQUES){id_rubrique=#ENV{id_rubrique,#GET{id_rubrique}}}>#SET{logo,#LOGO_RUBRIQUE_NORMAL}</BOUCLE_rub>
<//B_doc>
<//B_art>
[(#GET{logo}|sinon{[(#LOGO_SITE_SPIP_NORMAL|image_nb|image_alpha{90}|sinon{[<img src="(#CHEMIN{img/spip_logos.png})" alt="#NOM_SITE_SPIP" />]})]}|inserer_attribut{class,img-responsive}|inserer_attribut{alt, #TITRE})]
[(#GET{logo}|sinon{[(#LOGO_SITE_SPIP_NORMAL|image_nb|image_alpha{90}|sinon{[<img src="(#CHEMIN{img/spip_logos.png})" alt="#NOM_SITE_SPIP" />]})]})]

8
body.html

@ -1,8 +1,6 @@
<body id="top">
<body id="top" role="document">
<INCLURE{fond=inclure/sdk,env} />
<header class="bs-header" id="header">
<div class="container"><INCLURE{fond=header/#ENV{type-page},env} /></div>
</header>
<INCLURE{fond=header/#ENV{type-page},env} />
<section class="bs-content" id="content" role="main">
<div class="container"><INCLURE{fond=content/#ENV{type-page},env} /></div>
</section>
@ -15,7 +13,7 @@
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<INCLURE{fond=inclure/nav-bs,env} />
</nav>
<footer class="bs-footer" id="footer">
<footer class="bs-footer" id="footer" role="contentinfo">
<div class="container"><INCLURE{fond=footer/#ENV{type-page},env} /></div>
</footer>
[(#INCLURE{fond=inclure/remonter})]

24
css/zktx.css.html

@ -12,7 +12,16 @@
body { padding-top: 50px; [(#REM) padding-bottom: 30px; ] }
[(#REM) Liens hypertextes ]
a:link, a:visited, a:active, a:hover, a:focus, button, .btn, button:hover, .btn:hover {
-webkit-transition: All .6s ease-in;
moz-transition: All .6s ease-in;
o-transition: All .6s ease-in;
transition: All .6s ease-in;
}
a:link, a:visited { [color: #(#ID_RUBRIQUE
|couleur_rubrique
|sinon{ [(#ID_RUBRIQUE|couleur_site)] }
@ -21,7 +30,6 @@ body { padding-top: 50px; [(#REM) padding-bottom: 30px; ] }
);]
[(#REM) text-decoration:underline; ]
}
a:active, a:hover, a:focus {
[color: #(#ID_RUBRIQUE
|couleur_rubrique
@ -123,8 +131,8 @@ body { padding-top: 50px; [(#REM) padding-bottom: 30px; ] }
}
[(#REM) Pages articles ]
<BOUCLE_article_bs_header(ARTICLES){id_article = #ENV{id_article}}>
.page_article .bs-header {
<BOUCLE_article_bs_header(ARTICLES){tout}>
.bs-header.article#ID_ARTICLE {
background-color: [#(#ID_RUBRIQUE
|couleur_rubrique
|sinon{ [(#ID_RUBRIQUE|couleur_site)] }
@ -147,8 +155,8 @@ body { padding-top: 50px; [(#REM) padding-bottom: 30px; ] }
</BOUCLE_article_bs_header>
[(#REM) Pages rubriques ]
<BOUCLE_rubrique_bs_header(RUBRIQUES){id_rubrique = #ENV{id_rubrique}}>
.page_rubrique .bs-header {
<BOUCLE_rubrique_bs_header(RUBRIQUES){tout}>
.bs-header.rubrique#ID_RUBRIQUE {
background-color: [#(#ID_RUBRIQUE
|couleur_rubrique
|sinon{ [(#ID_RUBRIQUE|couleur_site)] }
@ -170,8 +178,8 @@ body { padding-top: 50px; [(#REM) padding-bottom: 30px; ] }
</BOUCLE_rubrique_bs_header>
[(#REM) Pages mots ]
<BOUCLE_mot_bs_header(MOTS){id_mot=#ENV{id_mot}}>
.bs-header {
<BOUCLE_mot_bs_header(MOTS){id_mot}>
.bs-header.mot#ID_MOT {
[background-image:url('(#LOGO_MOT
|sinon{ #LOGO_SITE_SPIP_SURVOL }
|image_reduire{1900,0}
@ -219,5 +227,3 @@ body { padding-top: 50px; [(#REM) padding-bottom: 30px; ] }
color: #FFFFFF;
}
.bs-footer a { color: #FFFFFF!important; text-decoration:underline; }
.bs-footer a:hover, .bs-footer a:active, .bs-footer a:focus {text-shadow:1px 1px 8px #EFEFEF;}

37
header/article.html

@ -1,24 +1,29 @@
<BOUCLE_header(ARTICLES){id_article}{id_rubrique}>
<div class="row">
<figure class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<header class="bs-header article#ID_ARTICLE" id="header" role="banner">
<div class="container">
<figure class="center-block">
[(#REM)
voir fichier /balises/logo :
et doc sur http://romy.tetue.net/logos-automatiques-articles-SPIP#forum2039
#LOGO n'est pas une balise native de SPIP. Voir fichier /balises/logo.html
Bootstrap :
Pour les logos on peut passer un |inserer_attribut{class,""}
avec, au choix, la class img-circle, img-square, ...
Mobile: La class img-responsive est ici appliquée par défaut
Logos & Bootstrap :
Pour les logos on peut passer une class supplémentaire à |inserer_attribut{class,""}
avec, au choix, la class img-thumbnail img-circle, img-square, ...
Mobile: vous disposez aussi de la class img-responsive
> voir http://getbootstrap.com/css/#images
]
[(#LOGO|image_reduire{260,260}|inserer_attribut{alt,[(#NOM_SITE_SPIP|textebrut) ][(#TITRE|textebrut)]})]
[(#LOGO
|image_reduire{260,260}
|inserer_attribut{alt,[(#TITRE|textebrut|attribut_html)]}
|inserer_attribut{class,"img-responsive"}
|inserer_attribut{role,"img"}
)]
<figcaption class="text-center">
[(#MENU_LANG)]
[<p class="text-muted #EDIT{surtitre} small">(#SURTITRE|abs_url)</p>]
<h1 class="h1 #EDIT{titre}">#TITRE</h1>
[<h2 class="h2 #EDIT{soustitre}">(#SOUSTITRE|abs_url)</h2>]
</figcaption>
</figure>
<section class="col-xs-12 col-sm-6 col-md-9 col-lg-9">
[<p class="#EDIT{surtitre} small">(#SURTITRE)</p>]
<h1 class="h1 #EDIT{titre}">#TITRE</h1>
[<p class="#EDIT{soustitre}">(#SOUSTITRE|PtoBR|abs_url)</p>]
</section>
</div>
</header>
</BOUCLE_header>

47
header/auteur.html

@ -1,23 +1,28 @@
<BOUCLE_header(AUTEURS){id_auteur}>
<div class="row">
<figure class="col-md-3">
[(#REM)
Logos & Bootstrap :
on peut passer un |inserer_attribut{class,""}
avec, au choix, la class img-thumbnail img-circle, img-square, ...
Mobile: vous disposez aussi de la class img-responsive
> voir http://getbootstrap.com/css/#images
]
[(#LOGO_AUTEUR
|image_reduire{160,160}
|inserer_attribut{alt,[(#NOM_SITE_SPIP|textebrut)][ (#NOM|textebrut)]}
|inserer_attribut{class,img-responsive}
)]
</figure>
<section class="col-md-9">
<h1 class="h1 #EDIT{qui}">#NOM</h1>
[<h2 class="#EDIT{auteur_baseline} h2">(#AUTEUR_BASELINE|PtoBR|abs_url)</p>]
[(#INCLURE{fond=inclure/socialtags,env})]
</section>
</div>
<header class="bs-header auteur#ID_AUTEUR" id="header" role="banner">
<div class="container">
<figure class="row">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
[(#REM)
Logos & Bootstrap :
on peut passer un |inserer_attribut{class,""}
avec, au choix, la class img-thumbnail img-circle, img-square, ...
Mobile: vous disposez aussi de la class img-responsive
> voir http://getbootstrap.com/css/#images
]
[(#LOGO_AUTEUR_NORMAL
|image_reduire{260,260}
|inserer_attribut{alt,[(#NOM|textebrut|attribut_html)]}
|inserer_attribut{class,"img-responsive"}
|inserer_attribut{role,"img"}
)]
</div>
<figcaption class="col-xs-12 col-sm-6 col-md-9 col-lg-9">
[(#MENU_LANG)]
<h1 class="h1 #EDIT{qui}">#NOM</h1>
[<h2 class="h2 #EDIT{auteur_baseline}">(#AUTEUR_BASELINE|PtoBR|abs_url)</p>][(#REM) Champ extra à créer en attendant que ZKTX le crée lui même à l'activation]
</figcaption>
</figure>
</div>
</header>
</BOUCLE_header>

34
header/dist.html

@ -1,16 +1,20 @@
<div class="row">
<figure class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
[<a rel="start home" href="#URL_SITE_SPIP/" title="<:accueil_site:>">(#LOGO_SITE_SPIP_NORMAL
|image_reduire{260,260}
|inserer_attribut{alt,[(#NOM_SITE_SPIP|textebrut)]}
|inserer_attribut{class,"img-responsive"}
)</a>]
</figure>
<section class="col-xs-12 col-sm-6 col-md-9 col-lg-9">
<h1 id="nom_site_spip" class="h1">#NOM_SITE_SPIP</h1>
[<p[ class="(#EDIT{meta-slogan_site})"]>(#SLOGAN_SITE_SPIP|PtoBR|abs_url)</p>]
<p><a href="#descriptif" class="btn btn-primary btn-lg" role="button">En savoir + ?</a></p>
</section>
</div>
<header class="bs-header dist" id="header" role="banner">
<div class="container">
<figure class="row">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
[(#LOGO_SITE_SPIP_NORMAL
|image_reduire{260,260}
|inserer_attribut{alt,[(#NOM_SITE_SPIP|textebrut|attribut_html)]}
|inserer_attribut{class,"img-responsive"}
|inserer_attribut{role,"img"}
)]
</div>
<figcaption class="col-xs-12 col-sm-6 col-md-9 col-lg-9">
[(#MENU_LANG)]
<h1 class="h1" id="nom_site_spip">#NOM_SITE_SPIP</h1>
[<h2[ class="(#EDIT{meta-slogan_site})"]>(#SLOGAN_SITE_SPIP|abs_url)</h2>]
</figcacption>
</figure>
</div>
</header>
[(#MENU_LANG)]

50
header/mot.html

@ -1,27 +1,27 @@
<BOUCLE_header(MOTS){id_mot}>
<div class="row">
<figure class="col-md-3">
[(#REM)
Logos & Bootstrap :
on peut passer un |inserer_attribut{class,""}
avec, au choix, la class img-thumbnail img-circle, img-square, ...
Mobile: vous disposez aussi de la class img-responsive
> voir http://getbootstrap.com/css/#images
]
[(#LOGO_MOT_NORMAL
|sinon{[(#LOGO_RUBRIQUE_NORMAL{0})]}
|image_reduire{260,260}
|inserer_attribut{alt,[(#NOM_SITE_SPIP|textebrut)][ (#TITRE|textebrut)]}
|inserer_attribut{class,"img-responsive"}
)]
</figure>
<section class="col-md-9">
<h1 class="h1 #EDIT{titre}">#TITRE</h1>
[<p class="#EDIT{soutitre}">(#SOUTITRE|PtoBR|abs_url)</p>]
<p><a href="#descriptif" class="btn btn-primary btn-lg" role="button">En savoir + ?</a></p>
[(#INCLURE{fond=inclure/socialtags,env})]
</section>
</div>
<header class="bs-header mot#ID_MOT" id="header" role="banner">
<div class="container">
<figure class="center-block">
[(#REM)
Logos & Bootstrap :
on peut passer un |inserer_attribut{class,""}
avec, au choix, la class img-thumbnail img-circle, img-square, ...
Mobile: vous disposez aussi de la class img-responsive
> voir http://getbootstrap.com/css/#images
]
[(#LOGO_MOT_NORMAL
|sinon{[(#LOGO_RUBRIQUE_NORMAL{0})]}
|image_reduire{260,260}
|inserer_attribut{alt,[(#TITRE|textebrut|attribut_html)]}
|inserer_attribut{class,"img-responsive"}
|inserer_attribut{role,"img"}
)]
<figcaption class="text-center">
[(#MENU_LANG)]
<h1 class="h1 #EDIT{titre}">#TITRE</h1>
[<div class="jumbotron #EDIT{descriptif}">(#DESCRIPTIF|abs_url)</div>]
</figcaption>
</figure>
</div>
</header>
</BOUCLE_header>

50
header/rubrique.html

@ -1,26 +1,28 @@
<BOUCLE_header(RUBRIQUES){id_rubrique}>
<figure class="center-block">
[(#REM)
Logos & Bootstrap :
on peut passer un |inserer_attribut{class,""}
avec, au choix, la class img-thumbnail img-circle, img-square, ...
Mobile: vous disposez aussi de la class img-responsive
> voir http://getbootstrap.com/css/#images
]
[(#LOGO_RUBRIQUE_NORMAL
|sinon{[(#LOGO_RUBRIQUE_NORMAL{0})]}
|sinon{[(#LOGO_SITE_SPIP_NORMAL)]}
|image_reduire{220,220}
|inserer_attribut{alt,[(#NOM_SITE_SPIP|textebrut|attribut_html)][ (#TITRE|textebrut|attribut_html)]}
|inserer_attribut{class,"img-responsive center-block"}
)]
</figure>
<section class="text-center">
<h1 class="h1 #EDIT{titre}">#TITRE</h1>
[<div class="jumbotron #EDIT{descriptif}">(#DESCRIPTIF|abs_url)</div>]
[(#INCLURE{fond=inclure/socialtags,env})]
</section>
<header class="bs-header rubrique#ID_RUBRIQUE" id="header" role="banner">
<div class="container">
<figure class="center-block">
[(#REM)
Logos & Bootstrap :
on peut passer un |inserer_attribut{class,""}
avec, au choix, la class img-thumbnail img-circle, img-square, ...
Mobile: vous disposez aussi de la class img-responsive
> voir http://getbootstrap.com/css/#images
]
[(#LOGO_RUBRIQUE_NORMAL
|sinon{[(#LOGO_RUBRIQUE_NORMAL{0})]}
|sinon{[(#LOGO_SITE_SPIP_NORMAL)]}
|image_reduire{220,220}
|inserer_attribut{alt,[(#TITRE|textebrut|attribut_html)]}
|inserer_attribut{class,"img-responsive"}
|inserer_attribut{role,"img"}
)]
<figcaption class="text-center">
[(#MENU_LANG)]
<h1 class="h1 #EDIT{titre}">#TITRE</h1>
[<div class="jumbotron #EDIT{descriptif}">(#DESCRIPTIF|abs_url)</div>]
</figcaption>
</figure>
</div>
</header>
</BOUCLE_header>

33
header/sommaire.html

@ -1,16 +1,19 @@
<div class="row">
<figure class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
[(#LOGO_SITE_SPIP_NORMAL
|image_reduire{260,260}
|inserer_attribut{alt,[(#NOM_SITE_SPIP|textebrut)]}
|inserer_attribut{class,"img-responsive"}
)]
</figure>
<section class="col-xs-12 col-sm-6 col-md-9 col-lg-9">
<h1 id="nom_site_spip" class="h1">#NOM_SITE_SPIP</h1>
[<p[ class="(#EDIT{meta-slogan_site})"]>(#SLOGAN_SITE_SPIP|PtoBR|abs_url)</p>]
<p><a href="#descriptif" class="btn btn-primary btn-lg" role="button">En savoir + ?</a></p>
</section>
</div>
<header class="bs-header sommaire" id="header" role="banner">
<div class="container">
<figure class="center-block">
[(#LOGO_SITE_SPIP_NORMAL
|image_reduire{260,260}
|inserer_attribut{alt,[(#NOM_SITE_SPIP|textebrut|attribut_html)]}
|inserer_attribut{class,"img-responsive"}
|inserer_attribut{role,"img"}
)]
<figcaption class="text-center">
[(#MENU_LANG)]
<h1 class="h1">#NOM_SITE_SPIP</h1>
[<h2[ class="h2 (#EDIT{meta-slogan_site})"]>(#SLOGAN_SITE_SPIP|PtoBR|abs_url)</h2>]
</figcaption>
</figure>
[<article class="jumbotron #EDIT{meta-descriptif_site}">(#DESCRIPTIF_SITE_SPIP|abs_url)</article>]
</div>
</header>
[(#MENU_LANG)]

Loading…
Cancel
Save