Changeset 108008 in spip-zone


Ignore:
Timestamp:
Dec 12, 2017, 12:48:01 AM (19 months ago)
Author:
l.oiseau2nuit@…
Message:

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! :)

Location:
_squelettes_/zktx-kore/trunk
Files:
9 edited

Legend:

Unmodified
Added
Removed
  • _squelettes_/zktx-kore/trunk/balises/logo.html

    r84512 r108008  
    55<//B_doc>
    66<//B_art>
    7 [(#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})]
     7[(#GET{logo}|sinon{[(#LOGO_SITE_SPIP_NORMAL|image_nb|image_alpha{90}|sinon{[<img src="(#CHEMIN{img/spip_logos.png})" alt="#NOM_SITE_SPIP" />]})]})]
  • _squelettes_/zktx-kore/trunk/body.html

    r107961 r108008  
    1 <body id="top">
     1<body id="top" role="document">
    22        <INCLURE{fond=inclure/sdk,env} />
    3         <header class="bs-header" id="header">
    4                 <div class="container"><INCLURE{fond=header/#ENV{type-page},env} /></div>
    5         </header>
     3        <INCLURE{fond=header/#ENV{type-page},env} />
    64        <section class="bs-content" id="content" role="main">
    75                <div class="container"><INCLURE{fond=content/#ENV{type-page},env} /></div>
     
    1614                <INCLURE{fond=inclure/nav-bs,env} />
    1715        </nav>
    18         <footer class="bs-footer" id="footer">
     16        <footer class="bs-footer" id="footer" role="contentinfo">
    1917                <div class="container"><INCLURE{fond=footer/#ENV{type-page},env} /></div>
    2018        </footer>
  • _squelettes_/zktx-kore/trunk/css/zktx.css.html

    r107971 r108008  
    1313body {  padding-top: 50px; [(#REM) padding-bottom: 30px; ] }
    1414
     15
    1516[(#REM) Liens hypertextes ]
     17 
     18  a:link, a:visited, a:active, a:hover, a:focus, button, .btn, button:hover, .btn:hover {
     19    -webkit-transition: All .6s ease-in;
     20    moz-transition: All .6s ease-in;
     21    o-transition: All .6s ease-in;
     22    transition: All .6s ease-in;
     23  }
     24
    1625  a:link, a:visited { [color: #(#ID_RUBRIQUE
    1726      |couleur_rubrique
     
    2231    [(#REM) text-decoration:underline; ]
    2332  }
    24 
    2533  a:active, a:hover, a:focus {
    2634    [color: #(#ID_RUBRIQUE
     
    124132
    125133      [(#REM) Pages articles ]
    126       <BOUCLE_article_bs_header(ARTICLES){id_article = #ENV{id_article}}>
    127         .page_article .bs-header {
     134      <BOUCLE_article_bs_header(ARTICLES){tout}>
     135        .bs-header.article#ID_ARTICLE {
    128136          background-color: [#(#ID_RUBRIQUE
    129137                              |couleur_rubrique
     
    148156
    149157      [(#REM) Pages rubriques ]
    150       <BOUCLE_rubrique_bs_header(RUBRIQUES){id_rubrique = #ENV{id_rubrique}}>
    151         .page_rubrique .bs-header {
     158      <BOUCLE_rubrique_bs_header(RUBRIQUES){tout}>
     159        .bs-header.rubrique#ID_RUBRIQUE {
    152160          background-color: [#(#ID_RUBRIQUE
    153161                              |couleur_rubrique
     
    171179
    172180    [(#REM) Pages mots ]
    173     <BOUCLE_mot_bs_header(MOTS){id_mot=#ENV{id_mot}}>
    174       .bs-header {
     181    <BOUCLE_mot_bs_header(MOTS){id_mot}>
     182      .bs-header.mot#ID_MOT {
    175183        [background-image:url('(#LOGO_MOT
    176184                                  |sinon{ #LOGO_SITE_SPIP_SURVOL }
     
    220228  }
    221229
    222   .bs-footer a { color: #FFFFFF!important; text-decoration:underline; }
    223   .bs-footer a:hover, .bs-footer a:active, .bs-footer a:focus {text-shadow:1px 1px 8px #EFEFEF;}
  • _squelettes_/zktx-kore/trunk/header/article.html

    r107969 r108008  
    11<BOUCLE_header(ARTICLES){id_article}{id_rubrique}>
     2<header class="bs-header article#ID_ARTICLE" id="header" role="banner">
     3        <div class="container">
     4                <figure class="center-block">
     5                        [(#REM)
     6                                #LOGO n'est pas une balise native de SPIP. Voir fichier /balises/logo.html
    27
    3         <div class="row">
    4                 <figure class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
    5                         [(#REM)
    6                                 voir fichier /balises/logo      :
    7                                 et doc sur http://romy.tetue.net/logos-automatiques-articles-SPIP#forum2039
    8 
    9                                 Bootstrap :
    10                                         Pour les logos on peut passer un |inserer_attribut{class,""} 
    11                                         avec, au choix, la class img-circle, img-square, ...
    12                                         Mobile: La class img-responsive est ici appliquée par défaut
     8                                Logos & Bootstrap :
     9                                        Pour les logos on peut passer une class supplémentaire à |inserer_attribut{class,""}
     10                                        avec, au choix, la class img-thumbnail img-circle, img-square, ...
     11                                        Mobile: vous disposez aussi de la class img-responsive
    1312                                        > voir http://getbootstrap.com/css/#images
    1413                        ]
    15                         [(#LOGO|image_reduire{260,260}|inserer_attribut{alt,[(#NOM_SITE_SPIP|textebrut) ][(#TITRE|textebrut)]})]
     14                        [(#LOGO
     15                                |image_reduire{260,260}
     16                                |inserer_attribut{alt,[(#TITRE|textebrut|attribut_html)]}
     17                                |inserer_attribut{class,"img-responsive"}
     18                                |inserer_attribut{role,"img"}
     19                        )]
     20                        <figcaption class="text-center">
     21                                [(#MENU_LANG)]
     22                                [<p class="text-muted #EDIT{surtitre} small">(#SURTITRE|abs_url)</p>]
     23                                <h1 class="h1 #EDIT{titre}">#TITRE</h1>
     24                                [<h2 class="h2 #EDIT{soustitre}">(#SOUSTITRE|abs_url)</h2>]
     25                        </figcaption>
    1626                </figure>
    17                 <section class="col-xs-12 col-sm-6 col-md-9 col-lg-9">
    18                         [<p class="#EDIT{surtitre} small">(#SURTITRE)</p>]
    19                         <h1 class="h1 #EDIT{titre}">#TITRE</h1>
    20                         [<p class="#EDIT{soustitre}">(#SOUSTITRE|PtoBR|abs_url)</p>]
    21                 </section>
    2227        </div>
    23 
     28</header>
    2429</BOUCLE_header>
  • _squelettes_/zktx-kore/trunk/header/auteur.html

    r105340 r108008  
    11<BOUCLE_header(AUTEURS){id_auteur}>
    2 <div class="row">
    3         <figure class="col-md-3">
    4                 [(#REM)
    5                         Logos & Bootstrap :
    6                                 on peut passer un |inserer_attribut{class,""} 
    7                                 avec, au choix, la class img-thumbnail img-circle, img-square, ...
    8                                 Mobile: vous disposez aussi de la class img-responsive
    9                                 > voir http://getbootstrap.com/css/#images
    10                 ]
    11                 [(#LOGO_AUTEUR
    12                         |image_reduire{160,160}
    13                         |inserer_attribut{alt,[(#NOM_SITE_SPIP|textebrut)][ (#NOM|textebrut)]}
    14                         |inserer_attribut{class,img-responsive}
    15                 )]
    16         </figure>
    17         <section class="col-md-9">
    18                 <h1 class="h1 #EDIT{qui}">#NOM</h1>
    19                 [<h2 class="#EDIT{auteur_baseline} h2">(#AUTEUR_BASELINE|PtoBR|abs_url)</p>]
    20                 [(#INCLURE{fond=inclure/socialtags,env})]
    21         </section>
    22 </div>
     2<header class="bs-header auteur#ID_AUTEUR" id="header" role="banner">
     3        <div class="container">
     4                <figure class="row">
     5                        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
     6                                [(#REM)
     7                                        Logos & Bootstrap :
     8                                                on peut passer un |inserer_attribut{class,""} 
     9                                                avec, au choix, la class img-thumbnail img-circle, img-square, ...
     10                                                Mobile: vous disposez aussi de la class img-responsive
     11                                                > voir http://getbootstrap.com/css/#images
     12                                ]
     13                                [(#LOGO_AUTEUR_NORMAL
     14                                        |image_reduire{260,260}
     15                                        |inserer_attribut{alt,[(#NOM|textebrut|attribut_html)]}
     16                                        |inserer_attribut{class,"img-responsive"}
     17                                        |inserer_attribut{role,"img"}
     18                                )]
     19                        </div>
     20                        <figcaption class="col-xs-12 col-sm-6 col-md-9 col-lg-9">
     21                                [(#MENU_LANG)]
     22                                <h1 class="h1 #EDIT{qui}">#NOM</h1>
     23                                [<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]
     24                        </figcaption>
     25                </figure>
     26        </div>
     27</header>
    2328</BOUCLE_header>
  • _squelettes_/zktx-kore/trunk/header/dist.html

    r107969 r108008  
    1 <div class="row">
    2         <figure class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
    3                 [<a rel="start home" href="#URL_SITE_SPIP/" title="<:accueil_site:>">(#LOGO_SITE_SPIP_NORMAL
    4                         |image_reduire{260,260}
    5                         |inserer_attribut{alt,[(#NOM_SITE_SPIP|textebrut)]}
    6                         |inserer_attribut{class,"img-responsive"}
    7                 )</a>]
    8         </figure>
    9         <section class="col-xs-12 col-sm-6 col-md-9 col-lg-9">
    10                 <h1 id="nom_site_spip" class="h1">#NOM_SITE_SPIP</h1>
    11                 [<p[ class="(#EDIT{meta-slogan_site})"]>(#SLOGAN_SITE_SPIP|PtoBR|abs_url)</p>]
    12                 <p><a href="#descriptif" class="btn btn-primary btn-lg" role="button">En savoir + ?</a></p>
    13         </section>
    14 </div>
     1<header class="bs-header dist" id="header" role="banner">
     2        <div class="container">
     3                <figure class="row">
     4                        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
     5                                [(#LOGO_SITE_SPIP_NORMAL
     6                                        |image_reduire{260,260}
     7                                        |inserer_attribut{alt,[(#NOM_SITE_SPIP|textebrut|attribut_html)]}
     8                                        |inserer_attribut{class,"img-responsive"}
     9                                        |inserer_attribut{role,"img"}
     10                                )]
     11                        </div>
     12                        <figcaption class="col-xs-12 col-sm-6 col-md-9 col-lg-9">
     13                                [(#MENU_LANG)]
     14                                <h1 class="h1" id="nom_site_spip">#NOM_SITE_SPIP</h1>
     15                                [<h2[ class="(#EDIT{meta-slogan_site})"]>(#SLOGAN_SITE_SPIP|abs_url)</h2>]
     16                        </figcacption>
     17                </figure>
     18        </div>
     19</header>
    1520
    16 [(#MENU_LANG)]
  • _squelettes_/zktx-kore/trunk/header/mot.html

    r105340 r108008  
    11<BOUCLE_header(MOTS){id_mot}>
    2 
    3 <div class="row">
    4         <figure class="col-md-3">
    5                 [(#REM)
    6                         Logos & Bootstrap :
    7                                 on peut passer un |inserer_attribut{class,""} 
    8                                 avec, au choix, la class img-thumbnail img-circle, img-square, ...
    9                                 Mobile: vous disposez aussi de la class img-responsive
    10                                 > voir http://getbootstrap.com/css/#images
    11                 ]
    12                 [(#LOGO_MOT_NORMAL
    13                         |sinon{[(#LOGO_RUBRIQUE_NORMAL{0})]}
    14                         |image_reduire{260,260}
    15                         |inserer_attribut{alt,[(#NOM_SITE_SPIP|textebrut)][ (#TITRE|textebrut)]}
    16                         |inserer_attribut{class,"img-responsive"}
    17                 )]
    18         </figure>
    19         <section class="col-md-9">
    20                 <h1 class="h1 #EDIT{titre}">#TITRE</h1>
    21                 [<p class="#EDIT{soutitre}">(#SOUTITRE|PtoBR|abs_url)</p>]
    22                 <p><a href="#descriptif" class="btn btn-primary btn-lg" role="button">En savoir + ?</a></p>
    23                 [(#INCLURE{fond=inclure/socialtags,env})]
    24         </section>
    25 </div>
    26 
     2<header class="bs-header mot#ID_MOT" id="header" role="banner">
     3        <div class="container">
     4                <figure class="center-block">
     5                        [(#REM)
     6                                Logos & Bootstrap :
     7                                        on peut passer un |inserer_attribut{class,""} 
     8                                        avec, au choix, la class img-thumbnail img-circle, img-square, ...
     9                                        Mobile: vous disposez aussi de la class img-responsive
     10                                        > voir http://getbootstrap.com/css/#images
     11                        ]
     12                        [(#LOGO_MOT_NORMAL
     13                                |sinon{[(#LOGO_RUBRIQUE_NORMAL{0})]}
     14                                |image_reduire{260,260}
     15                                |inserer_attribut{alt,[(#TITRE|textebrut|attribut_html)]}
     16                                |inserer_attribut{class,"img-responsive"}
     17                                |inserer_attribut{role,"img"}
     18                        )]
     19                        <figcaption class="text-center">
     20                                [(#MENU_LANG)]
     21                                <h1 class="h1 #EDIT{titre}">#TITRE</h1>
     22                                [<div class="jumbotron #EDIT{descriptif}">(#DESCRIPTIF|abs_url)</div>]
     23                        </figcaption>
     24                </figure>
     25        </div>
     26</header>
    2727</BOUCLE_header>
  • _squelettes_/zktx-kore/trunk/header/rubrique.html

    r105340 r108008  
    11<BOUCLE_header(RUBRIQUES){id_rubrique}>
    2 
    3         <figure class="center-block">
    4                 [(#REM)
    5                         Logos & Bootstrap :
    6                                 on peut passer un |inserer_attribut{class,""} 
    7                                 avec, au choix, la class img-thumbnail img-circle, img-square, ...
    8                                 Mobile: vous disposez aussi de la class img-responsive
    9                                 > voir http://getbootstrap.com/css/#images
    10                 ]
    11                 [(#LOGO_RUBRIQUE_NORMAL
    12                         |sinon{[(#LOGO_RUBRIQUE_NORMAL{0})]}
    13                         |sinon{[(#LOGO_SITE_SPIP_NORMAL)]}
    14                         |image_reduire{220,220}
    15                         |inserer_attribut{alt,[(#NOM_SITE_SPIP|textebrut|attribut_html)][ (#TITRE|textebrut|attribut_html)]}
    16                         |inserer_attribut{class,"img-responsive center-block"}
    17                 )]
    18         </figure>
    19         <section class="text-center">
    20                 <h1 class="h1 #EDIT{titre}">#TITRE</h1>
    21                 [<div class="jumbotron #EDIT{descriptif}">(#DESCRIPTIF|abs_url)</div>]
    22                 [(#INCLURE{fond=inclure/socialtags,env})]
    23         </section>
    24 
    25 
     2<header class="bs-header rubrique#ID_RUBRIQUE" id="header" role="banner">
     3        <div class="container">
     4                <figure class="center-block">
     5                        [(#REM)
     6                                Logos & Bootstrap :
     7                                        on peut passer un |inserer_attribut{class,""} 
     8                                        avec, au choix, la class img-thumbnail img-circle, img-square, ...
     9                                        Mobile: vous disposez aussi de la class img-responsive
     10                                        > voir http://getbootstrap.com/css/#images
     11                        ]
     12                        [(#LOGO_RUBRIQUE_NORMAL
     13                                |sinon{[(#LOGO_RUBRIQUE_NORMAL{0})]}
     14                                |sinon{[(#LOGO_SITE_SPIP_NORMAL)]}
     15                                |image_reduire{220,220}
     16                                |inserer_attribut{alt,[(#TITRE|textebrut|attribut_html)]}
     17                                |inserer_attribut{class,"img-responsive"}
     18                                |inserer_attribut{role,"img"}
     19                        )]
     20                        <figcaption class="text-center">
     21                                [(#MENU_LANG)]
     22                                <h1 class="h1 #EDIT{titre}">#TITRE</h1>
     23                                [<div class="jumbotron #EDIT{descriptif}">(#DESCRIPTIF|abs_url)</div>]
     24                        </figcaption>
     25                </figure>
     26        </div>
     27</header>
    2628</BOUCLE_header>
  • _squelettes_/zktx-kore/trunk/header/sommaire.html

    r107969 r108008  
    1 <div class="row">
    2         <figure class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
    3                 [(#LOGO_SITE_SPIP_NORMAL
    4                         |image_reduire{260,260}
    5                         |inserer_attribut{alt,[(#NOM_SITE_SPIP|textebrut)]}
    6                         |inserer_attribut{class,"img-responsive"}
    7                 )]
    8         </figure>
    9         <section class="col-xs-12 col-sm-6 col-md-9 col-lg-9">
    10                 <h1 id="nom_site_spip" class="h1">#NOM_SITE_SPIP</h1>
    11                 [<p[ class="(#EDIT{meta-slogan_site})"]>(#SLOGAN_SITE_SPIP|PtoBR|abs_url)</p>]
    12                 <p><a href="#descriptif" class="btn btn-primary btn-lg" role="button">En savoir + ?</a></p>
    13         </section>
    14 </div>
     1<header class="bs-header sommaire" id="header" role="banner">
     2        <div class="container">
     3                <figure class="center-block">
     4                        [(#LOGO_SITE_SPIP_NORMAL
     5                                |image_reduire{260,260}
     6                                |inserer_attribut{alt,[(#NOM_SITE_SPIP|textebrut|attribut_html)]}
     7                                |inserer_attribut{class,"img-responsive"}
     8                                |inserer_attribut{role,"img"}
     9                        )]
     10                        <figcaption class="text-center">
     11                                [(#MENU_LANG)]
     12                                <h1 class="h1">#NOM_SITE_SPIP</h1>
     13                                [<h2[ class="h2 (#EDIT{meta-slogan_site})"]>(#SLOGAN_SITE_SPIP|PtoBR|abs_url)</h2>]
     14                        </figcaption>
     15                </figure>
     16                [<article class="jumbotron #EDIT{meta-descriptif_site}">(#DESCRIPTIF_SITE_SPIP|abs_url)</article>]
     17        </div>
     18</header>
    1519
    16 [(#MENU_LANG)]
Note: See TracChangeset for help on using the changeset viewer.