Browse Source

Tant qu'à faire on utilise le nouveau filtre pour tous les exemples de codes et plus besoin d'avoir les pages en pleine largeur, ça rend beaucoup moins lisible.

pull/4/head
tcharlss 2 years ago
parent
commit
ce25567a30
  1. 2
      formulaires/charter.html
  2. 2
      formulaires/charter_compat.html
  3. 2
      prive/squelettes/contenu/charte_forms.html
  4. 26
      prive/squelettes/contenu/charte_layout.html
  5. 26
      prive/squelettes/contenu/charte_listes.html
  6. 45
      prive/squelettes/contenu/charte_onglets.html
  7. 134
      prive/squelettes/contenu/charte_temporaire.html
  8. 1
      prive/squelettes/inclure/charte/code_barre_onglets.html
  9. 11
      prive/squelettes/inclure/charte/code_colonnes.html
  10. 10
      prive/squelettes/inclure/charte/code_liste_items.html
  11. 2
      prive/squelettes/top/charte.html
  12. 6
      prive/squelettes/top/charte_boites.html
  13. 6
      prive/squelettes/top/charte_forms.html
  14. 6
      prive/squelettes/top/charte_layout.html
  15. 6
      prive/squelettes/top/charte_listes.html
  16. 6
      prive/squelettes/top/charte_onglets.html
  17. 6
      prive/squelettes/top/charte_typo.html

2
formulaires/charter.html

@ -199,7 +199,7 @@
<!--extra-->
<p class="explication">Cliquez sur <q>Annuler</q> pour tester les messages d'erreur et sur <q>Enregistrer</q> pour tester les messages de succès.</p>
<p class='boutons'><span class='image_loading'>&nbsp;</span>
<input type='submit' name="cancel" class='submit' value='<:bouton_annuler|attribut_html:>' />
<input type='submit' name="cancel" class='submit btn_secondaire' value='<:bouton_annuler|attribut_html:>' />
<input type='submit' class='submit' value='<:bouton_enregistrer|attribut_html:>' /></p>
</div></form>
]

2
formulaires/charter_compat.html

@ -199,7 +199,7 @@
<!--extra-->
<p class="explication">Cliquez sur <q>Annuler</q> pour tester les messages d'erreur et sur <q>Enregistrer</q> pour tester les messages de succès.</p>
<p class='boutons'><span class='image_loading'>&nbsp;</span>
<input type='submit' name="cancel" class='submit' value='<:bouton_annuler|attribut_html:>' />
<input type='submit' name="cancel" class='submit btn_secondaire' value='<:bouton_annuler|attribut_html:>' />
<input type='submit' class='submit' value='<:bouton_enregistrer|attribut_html:>' /></p>
</div></form>
]

2
prive/squelettes/contenu/charte_forms.html

@ -1,6 +1,6 @@
<h1 class="grostitre">Formulaires</h1>
<p>Nb &ndash; Voir également la page spécifique aux boutons : <a href="[(#URL_ECRIRE{charte_icones}|ancre_url{boutons_formulaires})]" class="bouton">boutons de formulaires</a></p>
<p>Nb &ndash; Voir également la page spécifique aux <a href="[(#URL_ECRIRE{charte_boutons}|ancre_url{boutons_formulaires})]">boutons de formulaires</a></p>.
<h2>Formulaire structure recommandée</h2>
#FORMULAIRE_CHARTER

26
prive/squelettes/contenu/charte_layout.html

@ -1,5 +1,3 @@
#SET{class_pre,#PLUGIN{coloration_code}|?{color,dark}}
<h1 class="grostitre">Layout</h1>
<h2>Pleine largeur</h2>
@ -8,29 +6,21 @@
Lorsqu’une page n’utilise pas la navigation latérale, il est possible d’utiliser toute la largeur disponible au moyen de la balise <code class="spip">&#35;LARGEUR_ECRAN{pleine_largeur}</code>, à placer dans <code>squelettes/top/[page].html</code>
</p>
<h2>Colonnes</h2>
<h2 class="h2" id="colonnes">Colonnes</h2>
<p>
Il est possible d’afficher deux blocs côte-à-côte.
<code>.gauche</code> et <code>.droite</code> pour afficher deux blocs côte-à-côte.
</p>
<div class="gauche">
#BOITE_OUVRIR
Je suis le bloc de gauche
#BOITE_FERMER
<a class="btn btn_link btn_mini float-end toggle" data-toggle="code" href="#code-colonnes"><span class="spicon">&#43;</span> Voir le code</a>
<div class="demo-preview clearfix">
[(#INCLURE{fond=prive/squelettes/inclure/charte/code_colonnes})]
</div>
<div class="droite">
#BOITE_OUVRIR
Je suis le bloc de droite
#BOITE_FERMER
<div class="demo-code" data-toggable id="code-colonnes">
[(#INCLURE{prive/squelettes/inclure/charte/code_colonnes.html}|dev_afficher_code{html5})]
</div>
<div class="nettoyeur"></div>
<pre[ class="(#GET{class_pre})"]><code>[(#INCLURE{fond=prive/squelettes/inclure/charte/code_layout}|appliquer_filtre{#PLUGIN{coloration_code}|?{coloration_code_color,htmlentities},#PLUGIN{coloration_code}|?{html5,#CONST{ENT_COMPAT}}})]</code></pre>
<h2>Helpers</h2>
<h2 class="h2" id="helpers">Helpers</h2>
<ul class="spip">
<li>

26
prive/squelettes/contenu/charte_listes.html

@ -1,17 +1,15 @@
<h1 class="grostitre">Listes</h1>
<h2>Liste d'objets</h2>
<INCLURE{fond=prive/objets/liste/articles,titre=<:articles_recents:>,par=date,nb=20,env,ajax} />
<h2>Liste d'items</h2>
<p>un paragraphe avant pour voir</p>
<div class="liste">
<h4>Un titre pour la liste : peut être un &lt;hn> quelconque</h4>
<ul class="liste-items">
<li class="item"><a href="#SELF">Un lien ici</a></li>
<li class="item"><a href="#SELF">Un autre lien ici avec un très long texte sur plusieurs lignes. Un autre lien ici avec un très long texte sur plusieurs lignes .Un autre lien ici avec un très long texte sur plusieurs lignes</a></li>
<li class="item on"><a href="#SELF">Un item exposé, mais avec un lien clicable quand même</a></li>
<li class="item"><strong class="on">Le contenu de l'item exposé par un strong</strong></li>
<li class="item"><a href="#SELF">Un lien normal pour finir</a></li>
</ul>
<h2 id="liste-objets">Liste d'objets</h2>
<INCLURE{fond=prive/objets/liste/articles,titre=<:articles_recents:>,par=date,nb=10,env,ajax} />
<h2 id="liste-items">Liste d'items</h2>
<a class="btn btn_link btn_mini float-end toggle" data-toggle="code" href="#code-liste-items"><span class="spicon">&#43;</span> Voir le code</a>
<div class="demo-preview clearfix">
[(#INCLURE{fond=prive/squelettes/inclure/charte/code_liste_items})]
</div>
<pre class="spip"><code>&lt;div class=&quot;liste&quot;&gt;&#10; &lt;h4&gt;Un titre pour la liste : peut &ecirc;tre un &lt;hn&gt; quelconque&lt;/h4&gt;&#10; &lt;ul class=&quot;liste-items&quot;&gt;&#10; &lt;li class=&quot;item&quot;&gt;&lt;a href=&quot;#SELF&quot;&gt;Un lien ici&lt;/a&gt;&lt;/li&gt;&#10; &lt;li class=&quot;item&quot;&gt;&lt;a href=&quot;#SELF&quot;&gt;Un autre lien ici avec un tr&egrave;s long texte sur plusieurs lignes. Un autre lien ici avec un tr&egrave;s long texte sur plusieurs lignes .Un autre lien ici avec un tr&egrave;s long texte sur plusieurs lignes&lt;/a&gt;&lt;/li&gt;&#10; &lt;li class=&quot;item on&quot;&gt;&lt;a href=&quot;#SELF&quot;&gt;Un item expos&eacute;, mais avec un lien clicable quand m&ecirc;me&lt;/a&gt;&lt;/li&gt;&#10; &lt;li class=&quot;item&quot;&gt;&lt;strong class=&quot;on&quot;&gt;Le contenu de l&apos;item expos&eacute; par un strong&lt;/strong&gt;&lt;/li&gt;&#10; &lt;li class=&quot;item&quot;&gt;&lt;a href=&quot;#SELF&quot;&gt;Un lien normal pour finir&lt;/a&gt;&lt;/li&gt;&#10; &lt;/ul&gt;&#10;&lt;/div&gt;</code></pre>
<div class="demo-code" data-toggable id="code-liste-items">
[(#INCLURE{prive/squelettes/inclure/charte/code_liste_items.html}|dev_afficher_code{html5})]
</div>

45
prive/squelettes/contenu/charte_onglets.html

@ -9,38 +9,35 @@
<h1 class="grostitre">Onglets</h1>
<h2>Barre d'onglets</h2>
<h2 class="h2" id="barre-onglets">Barre d'onglets</h2>
<p>
Malgré son nom, ce menu constitue une navigation avec changement de page, fonctionnellement il ne s'agit pas de vrais onglets.
<br>Chaque menu est identifié par un nom, et la liste des pages le constituant est décrite dans <code>paquet.xml</code>, elle peut être étendue par les plugins.
</p>
[(#VAL{demo}|barre_onglets{demo})]
<pre class="spip"><code>[(&#35;VAL{nomdelabarreonglet}|barre_onglets{pagecourante})]</code></pre>
<a class="btn btn_link btn_mini float-end toggle" data-toggle="code" href="#code-bare-onglets"><span class="spicon">&#43;</span> Voir le code</a>
<div class="demo-preview clearfix">
[(#VAL{demo}|barre_onglets{demo})]
</div>
<div class="demo-code" data-toggable id="code-bare-onglets">
[(#INCLURE{prive/squelettes/inclure/charte/code_barre_onglets.html}|dev_afficher_code{spip})]
</div>
<h2>Onglets simples à deux niveaux</h2>
<p>Les onglets simples sont utilisés préférentiellement pour de la navigation ou du filtrage au sein de la même page. Ils sont utilisés avec des liens ajax pour être plus réactifs, ce qui est attendu par les utilisateurs confrontés à un onglet.
<br />
Il n'y a pas de filtre pour les construire car leur structure HTML est très simple.</p>
<h2 class="h2" id="onglets">Onglets simples à deux niveaux</h2>
<div class='onglets_simple clearfix'>
<ul>
<li><strong>Onglet expos&eacute;</strong></li>
<li><a>Onglet cliquable</a></li>
<li><a>Onglet cliquable</a></li>
</ul>
</div>
<p>
Les onglets simples sont utilisés préférentiellement pour de la navigation ou du filtrage au sein de la même page. Ils sont utilisés avec des liens ajax pour être plus réactifs, ce qui est attendu par les utilisateurs confrontés à un onglet.
<br>
Il n'y a pas de filtre pour les construire car leur structure HTML est très simple.
</p>
<div class='onglets_simple second clearfix'>
<ul>
<li><strong>Onglet expos&eacute;</strong></li>
<li><a>Onglet cliquable</a></li>
<li><a>Onglet cliquable</a></li>
</ul>
<a class="btn btn_link btn_mini float-end toggle" data-toggle="code" href="#code-onglets"><span class="spicon">&#43;</span> Voir le code</a>
<div class="demo-preview clearfix">
[(#INCLURE{fond=prive/squelettes/inclure/charte/code_onglets})]
</div>
<pre[ class="(#GET{class_pre})"]><code>[(#INCLURE{fond=prive/squelettes/inclure/charte/code_onglets}|appliquer_filtre{#PLUGIN{coloration_code}|?{coloration_code_color,htmlentities},#PLUGIN{coloration_code}|?{html5,#CONST{ENT_COMPAT}}})]</code></pre>
<div class="demo-code" data-toggable id="code-onglets">
[(#INCLURE{prive/squelettes/inclure/charte/code_onglets.html}|dev_afficher_code)]
</div>

134
prive/squelettes/contenu/charte_temporaire.html

@ -0,0 +1,134 @@
[(#SELF|bouton_action_horizontal{Class texte,article,add,super,Vraiment ?})]
[(#SELF|bouton_action_horizontal{Class array,article,add,right,Vraiment ?})]
[(#SELF|icone_verticale{Class texte,article,add,super})]
<hr>
#BOUTON_ACTION{Défaut,#SELF}
<BOUCLE_variantes3(DATA) {source table, #GET{variantes}} {cle != btn_bloc}>
#BOUTON_ACTION{#VALEUR,#SELF,#ARRAY{bouton,#CLE}}
</BOUCLE_variantes3>
#BOUTON_ACTION{Pleine largeur,#SELF,#ARRAY{formulaire,bloc,bouton,btn_bloc}}
<BOUCLE_groupes2(DATA) {source table, #LISTE{'',bloc,vertical}}>
<div class="groupe-btns groupe-btns_#VALEUR">
#BOUTON_ACTION{Bouton,#SELF}
#BOUTON_ACTION{Bouton,#SELF}
#BOUTON_ACTION{Bouton,#SELF}
</div>
</BOUCLE_groupes2>
<hr>
[(#BOITE_OUVRIR{Boutons de formulaires et de boîtes}|inserer_attribut{id,boutons_formulaires})]
<p>
Les boutons des formulaires acceptent également toutes les variantes du composant <code class="spip">.btn</code>.
</p>
<dl class="spip">
<dt>Syntaxe et exemples</dt>
<dd class="clearfix">
<div class="formulaire_spip" style="margin: 0">
<h3 class="titrem">Un formulaire</h3>
<form><div>
<div class="editer-groupe">
<div class="editer">
<label>Boutons :</label>
<input type="submit" class="submit" value="Défaut" />
<button type="submit" class="submit">&lt;button&gt;</button>
</div>
<div class="editer">
<label>Obsolète :</label>
<button type="submit" class="delete">&lt;button.delete&gt;[ (#CHEMIN_IMAGE{supprimer-16.png}|balise_img)]</button>
</div>
</div>
<div class="boutons">
<button type="submit" class="submit">Bouton</button>
</div>
<div class="boutons groupe-btns">
<input type="submit" class="submit" value="Bouton" />
<input type="submit" class="submit" value="Bouton" />
</div>
<div class="boutons groupe-btns groupe-btns_bloc">
<input type="submit" class="submit" value="Bouton" />
<input type="submit" class="submit" value="Bouton" />
</div>
</div></form>
</div>
#BOITE_OUVRIR{Une boîte}
#BOITE_PIED
#BOUTON_ACTION{Bouton d’action,#SELF}
#BOITE_FERMER
</dd>
</dl>
#BOITE_FERMER
[(#BOITE_OUVRIR{Divers}|inserer_attribut{id,boutons_deprecies})]
<dl class="spip">
<dt>Formulaire editer_liens</dt>
<dd class="clearfix">
<div class="gauche">
<p>
Le formulaire <code>editer_liens</code> utilise 2 listes pour retirer ou ajouter des objets :
<ul class="spip">
<li>prive/objets/liste/{objet}-lies.html</li>
<li>prive/objets/liste/{objet}-associer.html</li>
</ul>
Dans ces listes, il est conseillé d’utiliser les classes appropriées pour les boutons d’ajout et de retrait.
<br>Il n’est plus nécessaire d’y inclure les images/icônes.
</p>
<p>
[(#INCLURE{fond=prive/squelettes/inclure/charte/code_bouton_editer_liens}|dev_afficher_code)]
</p>
</div>
<div class="droite fiche_objet">
<div class="liste-objets liste-objets-lies auteurs">
<table class="spip liste">
<caption>
<strong class="caption">
[(#VAL{2}|objet_afficher_nb{auteur})]
</strong>
</caption>
<tbody>
<tr class="row_odd">
<td>
<td class="statut">[(#CHEMIN_IMAGE{auteur-0minirezo-16.png}|balise_img)]</td>
<td class="nom"><a href="#">Spip</a></td>
<td class="logo">[(#CHEMIN_IMAGE{favicon-spip.png}|image_reduire{24})]</td>
<td class="email"><a href="#">spip@spip.net</a></td>
<td class="nombre">[(#VAL{999}|objet_afficher_nb{article})]</td>
<td class="action">
<button class="supprimer btn_link btn_mini"><:lien_retirer_auteur:></button>
</td>
</td>
</tr>
<tr class="row_even">
<td>
<td class="statut">[(#CHEMIN_IMAGE{auteur-0minirezo-16.png}|balise_img)]</td>
<td class="nom"><a href="#">Spip</a></td>
<td class="logo">[(#CHEMIN_IMAGE{favicon-spip.png}|image_reduire{24})]</td>
<td class="email"><a href="#">spip@spip.net</a></td>
<td class="nombre">[(#VAL{999}|objet_afficher_nb{article})]</td>
<td class="action">
<button class="ajouter btn_mini"><:lien_ajouter_auteur:></button>
</td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</dd>
</dl>
#BOITE_FERMER

1
prive/squelettes/inclure/charte/code_barre_onglets.html

@ -0,0 +1 @@
[(#VAL{identifiant_barre}|barre_onglets{page_courante})]

11
prive/squelettes/inclure/charte/code_colonnes.html

@ -0,0 +1,11 @@
<div class="gauche">
#BOITE_OUVRIR
Je suis le bloc de gauche
#BOITE_FERMER
</div>
<div class="droite">
#BOITE_OUVRIR
Je suis le bloc de droite
#BOITE_FERMER
</div>

10
prive/squelettes/inclure/charte/code_liste_items.html

@ -0,0 +1,10 @@
<div class="liste">
<h4>Un titre pour la liste : peut être un &lt;hn> quelconque</h4>
<ul class="liste-items">
<li class="item"><a href="#SELF">Un lien ici</a></li>
<li class="item"><a href="#SELF">Un autre lien ici avec un très long texte sur plusieurs lignes. Un autre lien ici avec un très long texte sur plusieurs lignes .Un autre lien ici avec un très long texte sur plusieurs lignes</a></li>
<li class="item on"><a href="#SELF">Un item exposé, mais avec un lien clicable quand même</a></li>
<li class="item"><strong class="on">Le contenu de l'item exposé par un strong</strong></li>
<li class="item"><a href="#SELF">Un lien normal pour finir</a></li>
</ul>
</div>

2
prive/squelettes/top/charte.html

@ -1,3 +1 @@
#LARGEUR_ECRAN{pleine_largeur}
[(#VAL{charte}|barre_onglets{charte})]

6
prive/squelettes/top/charte_boites.html

@ -1,3 +1,5 @@
#LARGEUR_ECRAN{pleine_largeur}
[(#VAL{charte}|barre_onglets{charte_boites})]
[(#VAL{charte}|barre_onglets{charte_boites})]
<script type="text/javascript">
[(#INCLURE{prive/javascript/dev.js}|compacte{js})]
</script>

6
prive/squelettes/top/charte_forms.html

@ -1,3 +1,5 @@
#LARGEUR_ECRAN{pleine_largeur}
[(#VAL{charte}|barre_onglets{charte_forms})]
[(#VAL{charte}|barre_onglets{charte_forms})]
<script type="text/javascript">
[(#INCLURE{prive/javascript/dev.js}|compacte{js})]
</script>

6
prive/squelettes/top/charte_layout.html

@ -1,3 +1,5 @@
#LARGEUR_ECRAN{pleine_largeur}
[(#VAL{charte}|barre_onglets{charte_layout})]
[(#VAL{charte}|barre_onglets{charte_layout})]
<script type="text/javascript">
[(#INCLURE{prive/javascript/dev.js}|compacte{js})]
</script>

6
prive/squelettes/top/charte_listes.html

@ -1,3 +1,5 @@
#LARGEUR_ECRAN{pleine_largeur}
[(#VAL{charte}|barre_onglets{charte_listes})]
[(#VAL{charte}|barre_onglets{charte_listes})]
<script type="text/javascript">
[(#INCLURE{prive/javascript/dev.js}|compacte{js})]
</script>

6
prive/squelettes/top/charte_onglets.html

@ -1,3 +1,5 @@
#LARGEUR_ECRAN{pleine_largeur}
[(#VAL{charte}|barre_onglets{charte_onglets})]
[(#VAL{charte}|barre_onglets{charte_onglets})]
<script type="text/javascript">
[(#INCLURE{prive/javascript/dev.js}|compacte{js})]
</script>

6
prive/squelettes/top/charte_typo.html

@ -1,3 +1,5 @@
#LARGEUR_ECRAN{pleine_largeur}
[(#VAL{charte}|barre_onglets{charte_typo})]
[(#VAL{charte}|barre_onglets{charte_typo})]
<script type="text/javascript">
[(#INCLURE{prive/javascript/dev.js}|compacte{js})]
</script>
Loading…
Cancel
Save