Browse Source
* 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
9 changed files with 154 additions and 131 deletions
@ -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> |
||||
|
||||
@ -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> |
||||
@ -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> |
||||
@ -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> |
||||
Loading…
Reference in new issue