Browse Source

Unifier les pages : titres, pas besoin de tout mettre dans des #BOITEs, et quelques détails.

pull/4/head
tcharlss 1 year ago committed by Cerdic
parent
commit
bc9118901f
  1. 2
      lang/charter_fr.php
  2. 2
      modeles/typo.html
  3. 75
      prive/squelettes/contenu/charte_alertes.html
  4. 75
      prive/squelettes/contenu/charte_boites.html
  5. 2
      prive/squelettes/contenu/charte_forms.html
  6. 21
      prive/squelettes/contenu/charte_layout.html
  7. 6
      prive/squelettes/contenu/charte_listes.html
  8. 15
      prive/squelettes/contenu/charte_onglets.html
  9. 7
      prive/squelettes/contenu/charte_php.html
  10. 137
      prive/squelettes/contenu/charte_temp.html
  11. 8
      prive/squelettes/contenu/charte_typo.html
  12. 6
      prive/style_prive_plugin_dev.html

2
lang/charter_fr.php

@ -67,7 +67,7 @@ $GLOBALS[$GLOBALS['idx_lang']] = array(
'titre_barreonglets_demo3' => 'Page 3',
'titre_boites' => 'Boîtes',
'titre_boutons' => 'Boutons',
'titre_boutons_icones' => 'Boutons & icônes',
'titre_boutons_icones' => 'Boutons « icônes »',
'titre_charte' => 'Charte',
'titre_formulaires' => 'Formulaires',
'titre_icones' => 'Icônes',

2
modeles/typo.html

@ -1,6 +1,4 @@
<a name="ancre" href="#ancre"></a>
<h1>Typographie</h1>
<h2>Paragraphes</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.

75
prive/squelettes/contenu/charte_alertes.html

@ -6,60 +6,63 @@
]
<h1 class="grostitre"><:charter:titre_charte:> / <:charter:titre_alertes:></h1>
<h1 class="grostitre"><:charter:titre_charte:> &mdash; <:charter:titre_alertes:></h1>
#BOITE_OUVRIR
Bla bla introduction
#BOITE_FERMER
<p>
Les alertes permettent d’afficher un message nécessitant de retenir l’attention.
<br>Elles ont un rôle <code>alert</code> ou <code>status</code> selon l’importance du message,
et sont par conséquence accessibles aux technologies d’assistance.
</p>
<h2>Alertes simples</h2>
<h2 class="h2">Fonctionnement</h2>
<div class="demo-code" data-toggable id="code-alerte">
[(#INCLURE{prive/squelettes/inclure/charte/alerte_syntaxe.html}|dev_afficher_code{spip})]
</div>
<p>
La balise <code>\#ALERTE</code> convient aux messages simples.
<br>Pour les messages plus longs, utilisez les balises <code>\#ALERTE_OUVRIR</code> et <code>\#ALERTE_FERMER</code>.
<br>Si le titre passé paramètre ne commence pas par une balise (<code>&lt;hn&gt;</code>, <code>&lt;span&gt;</code>…), il est automatiquement encapsulé dans un <code>&lt;h3></code>.
</p>
<h2 class="h2">Types d’alertes</h2>
[(#ALERTE{Quelque chose mérite votre attention., '', notice})]
[(#ALERTE{Une erreur s’est produite., '', error})]
[(#ALERTE{'Bravo, c’est une réussite !', '', success})]
[(#ALERTE{Il est important de se brosser régulièrement les dents., '', info})]
[(#ALERTE{Brossez vous les dents régulièrement., '', info})]
<h2>Alertes avec titres</h2>
[(#ALERTE{Quelque chose mérite votre attention., Notice, notice})]
[(#ALERTE{Une erreur s’est produite., Erreur, error})]
[(#ALERTE{'Bravo, c’est une réussite !', Succès, success})]
[(#ALERTE{Avez-vous penser à vous brosser les dents ?, Info, info})]
<h2>Alertes complexes</h2>
<h2 class="h2">Titres et contenus longs</h2>
#ALERTE_OUVRIR{Un message complexe., notice}
[(#ALERTE{'C’est indéniable, ce message a un titre.', Un message avec un titre., info})]
#ALERTE_OUVRIR{Un message complet., info}
<p>
Quelque chose ne vas pas, voici une explication complexe sur plusieurs lignes.
<br>Ci-dessous une liste de suggestions pour remédier au problème.
Ce message est long et s’étale sur plusieurs lignes.
<br>Il comprend même une liste de fruits :
</p>
<ul class="spip">
<li>Lisez <a href="https://spip.net">la documentation</a>.</li>
<li>Ouvrez un ticket.</li>
<li>Redémarrez.</li>
<li>Des pastèques.</li>
<li>Des poires.</li>
<li>Des pêches.</li>
</ul>
#ALERTE_FERMER
<h2>Variantes</h2>
<h3>Simples</h3>
[(#ALERTE{Quelque chose mérite votre attention., '', notice simple})]
[(#ALERTE{Une erreur s’est produite., '', error simple})]
[(#ALERTE{'Bravo, c’est une réussite !', '', success simple})]
[(#ALERTE{Il est important de se brosser régulièrement les dents., '', info simple})]
<h3>Petites</h3>
<h2 class="h2">Tailles</h2>
[(#ALERTE{Quelque chose mérite votre attention., '', notice mini})]
[(#ALERTE{Une erreur s’est produite., '', error mini})]
[(#ALERTE{'Bravo, c’est une réussite !', '', success mini})]
[(#ALERTE{Il est important de se brosser régulièrement les dents., '', info mini})]
[(#ALERTE{Une alerte plus petite., '', info mini})]
[(#ALERTE{Une alerte plus grande., '', info large})]
<h3>(WIP) Alertes fermables</h3>
<h2 class="h2">Alertes fermables (WIP)</h2>
<p>Si le message contient un bouton pour fermer, voici comment il s’affiche.</p>
<p>
Si le message contient un bouton pour fermer, voici comment il s’affiche
(la fonctionnalité de fermeture n’est pas implémentée).
</p>
#ALERTE_OUVRIR{'','fermable'}
#ALERTE_OUVRIR{'','info fermable'}
Ce message peut être fermé. <button type="button" class="msg-alert__close" aria-label="<:fermer|attribut_html:>"></button>
#ALERTE_FERMER

75
prive/squelettes/contenu/charte_boites.html

@ -6,26 +6,26 @@
]
<h1 class="grostitre"><:charter:titre_charte:> / <:charter:titre_boites:></h1>
#BOITE_OUVRIR
<p>«box» est le conteneur de <strong>base</strong> des boîtes. Tous les autres conteneurs sont hérités de celui-là.</p>
<h3><tt>&#35;BOITE_OUVRIR</tt></h3>
<p><tt>&#35;BOITE_OUVRIR</tt> ouvre une boîte HTML et accepte 3 arguments optionnels :</p>
<ul>
<li>le contenu du header en premier argument, en général un titre. Si il ne contient pas de balise &lt;hn> il est automatiquement «wrappé» par un &lt;h3>,</li>
<li>les classes de la boîte, qui peuvent être des classes d'habillages ou de fond, décrites ci-dessous,</li>
<li>les classes du header.</li>
</ul>
<h3><tt>&#35;BOITE_PIED</tt></h3>
<p><tt>&#35;BOITE_PIED</tt> ferme le corps de la boîte HTML et ouvre son pied</p>
<h3><tt>&#35;BOITE_FERMER</tt></h3>
<p><tt>&#35;BOITE_FERMER</tt> ferme la boîte HTML. Elle ne prend pas d'argument</p>
#BOITE_FERMER
<h1 class="grostitre"><:charter:titre_charte:> &mdash; <:charter:titre_boites:></h1>
<p>
Les boîtes sont des conteneurs génériques pouvant comprendre un entête, le contenu principal et un pied.
</p>
<h2>Habillage des boîtes</h2>
<h2 class="h2">Fonctionnement</h2>
<div class="demo-code" data-toggable id="code-alerte">
[(#INCLURE{prive/squelettes/inclure/charte/boite_syntaxe.html}|dev_afficher_code{spip})]
</div>
<p>
Tous les paramètres sont optionnels.
<br>Si le titre passé en 1er paramètre ne contient pas de balise <code>&lt;hn></code>, il est automatiquement encapsulé dans un <code>&lt;h3></code>.
</p>
<h3>Variantes de base</h3>
<h2 class="h2">Habillages de base</h2>
<div class="cols-2">
@ -60,13 +60,12 @@
</div>
<h3>Variantes d'états</h3>
<h2 class="h2">Habillages d'états</h2>
#ALERTE_OUVRIR{'', notice}
Ces variantes n’ont <strong>pas</strong> vocation à afficher de simples messages.
<br>Elles contiennent en principe des appels à action, par exemple en alternative à des formulaires.
<br>Pour des messages, utilisez <a href="[(#URL_ECRIRE{charte_alertes})]">le composant messages d’alerte</a>.
#ALERTE_FERMER
Ces variantes ne se substituent pas aux <a href="[(#URL_ECRIRE{charte_alertes})]">messages d’alertes</a>.
#ALERTE_FERMER
<div class="cols-2">
@ -91,33 +90,35 @@
</div>
<h2>Header de boîte</h2>
<h2 class="h2">Habillages divers</h2>
<ul class="spip">
<li><code>pop</code> ajoute ombre portée.</li>
<li><code>flat</code> la supprime.</li>
</ul>
#BOITE_OUVRIR{simple + pop,pop}
Odio iusto laboriosam aut consectetur dolorum.
#BOITE_FERMER
<h2 class="h2">Entêtes</h2>
<p>
<code>.titrem</code> sur le header pour forcer l'apparence par défaut, si le titre n’est pas en h3.
<br><code>.cadre-icône</code> dans le titre pour ajouter une icône.
</p>
#BOITE_OUVRIR{#CHEMIN_IMAGE{article-24.png}|balise_img{'',cadre-icone}|concat{'<h2>header en .titrem, titre en h2 avec icône</h2>'},simple,titrem}
#BOITE_OUVRIR{#CHEMIN_IMAGE{article-24.png}|balise_img{'',cadre-icone}|concat{'<h2>.titrem + &lt;h2&gt; + icône</h2>'},simple,titrem}
Odio iusto laboriosam aut consectetur dolorum nobis suscipit. Blanditiis velit quis.
#BOITE_FERMER
<h2>Pied de boîte</h2>
<h2 class="h2">Pieds</h2>
<p>Le pied de boîte est utilisé pour des boutons d'action</p>
<p>Le pied de boîte peut contenir des boutons d'action</p>
#BOITE_OUVRIR{'Boîte simple & titrem','simple','titrem'}
<tt>&#35;BOITE_OUVRIR{'Boîte simple & titrem','simple','titrem'}</tt>
<br><tt>&#35;BOITE_PIED</tt>
<br><tt>&#35;BOUTON_ACTION{demo,&#35;SELF}</tt>
<br><tt>&#35;BOITE_FERMER</tt>
Odio iusto laboriosam aut consectetur dolorum nobis suscipit. Blanditiis velit quis.
#BOITE_PIED
#BOUTON_ACTION{demo,#SELF}
#BOITE_FERMER
<h2>Boîte avec float dedans</h2>
#BOITE_OUVRIR{'Boîte simple','simple'}
<p>Odio iusto laboriosam aut consectetur dolorum nobis suscipit. Blanditiis velit quis.</p>
[(#SELF|icone_verticale{<:icone_modifier_article:>,article,new,right})]
#BOITE_FERMER

2
prive/squelettes/contenu/charte_forms.html

@ -1,4 +1,4 @@
<h1 class="grostitre"><:charter:titre_charte:> / <:charter:titre_formulaires:></h1>
<h1 class="grostitre"><:charter:titre_charte:> &mdash; <:charter:titre_formulaires:></h1>
#ALERTE_OUVRIR{'',info}
Cliquez sur <strong><q>Annuler</q></strong> pour tester les messages d'erreur

21
prive/squelettes/contenu/charte_layout.html

@ -1,12 +1,10 @@
<h1 class="grostitre"><:charter:titre_charte:> / <:charter:titre_layout:></h1>
<h1 class="grostitre"><:charter:titre_charte:> &mdash; <:charter:titre_layout:></h1>
#BOITE_OUVRIR
<h2>Pleine largeur</h2>
<h2 class="h2">Pleine largeur</h2>
<p>
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>
Lorsqu’une page n’a pas besoin de colonne 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>
@ -18,10 +16,10 @@
<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})]
[(#INCLURE{fond=prive/squelettes/inclure/charte/colonnes})]
</div>
<div class="demo-code" data-toggable id="code-colonnes">
[(#INCLURE{prive/squelettes/inclure/charte/code_colonnes.html}|dev_afficher_code{html5})]
[(#INCLURE{prive/squelettes/inclure/charte/colonnes.html}|dev_afficher_code)]
</div>
@ -32,8 +30,9 @@
<code class="spip">&lt;div class=&quot;nettoyeur&quot;&gt;&lt;/div&gt;</code> pour éviter les chevauchements <strong>après</strong> des éléments flottants.
</li>
<li>
<code class="spip">&lt;div class=&quot;clearfix&quot;&gt;</code> pour éviter que les éléments flottants contenus <strong>à l’intérieur</strong> ne débordent.
<code class="spip">.clearfix</code> sur un élément pour que ses contenus flottants ne débordent pas.
</li>
</ul>
#BOITE_FERMER
<li>
<code class="spip">.float-start</code> et <code class="spip">.float-end</code> pour faire flotter des éléments.
</li>
</ul>

6
prive/squelettes/contenu/charte_listes.html

@ -1,4 +1,4 @@
<h1 class="grostitre"><:charter:titre_charte:> / <:charter:titre_listes:></h1>
<h1 class="grostitre"><:charter:titre_charte:> &mdash; <:charter:titre_listes:></h1>
<h2 id="liste-objets">Liste d'objets</h2>
@ -8,8 +8,8 @@
<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})]
[(#INCLURE{fond=prive/squelettes/inclure/charte/liste_items})]
</div>
<div class="demo-code" data-toggable id="code-liste-items">
[(#INCLURE{prive/squelettes/inclure/charte/code_liste_items.html}|dev_afficher_code{html5})]
[(#INCLURE{prive/squelettes/inclure/charte/liste_items.html}|dev_afficher_code)]
</div>

15
prive/squelettes/contenu/charte_onglets.html

@ -5,9 +5,7 @@
Distribué sous licence GPL
]
<h1 class="grostitre"><:charter:titre_charte:> / <:charter:titre_onglets:></h1>
#BOITE_OUVRIR
<h1 class="grostitre"><:charter:titre_charte:> &mdash; <:charter:titre_onglets:></h1>
<h2 class="h2" id="barre-onglets">Barre d'onglets</h2>
@ -22,7 +20,7 @@
[(#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})]
[(#INCLURE{prive/squelettes/inclure/charte/barre_onglets.html}|dev_afficher_code{spip})]
</div>
@ -36,11 +34,8 @@
<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})]
[(#INCLURE{fond=prive/squelettes/inclure/charte/onglets})]
</div>
<div class="demo-code" data-toggable id="code-onglets">
[(#INCLURE{prive/squelettes/inclure/charte/code_onglets.html}|dev_afficher_code)]
</div>
#BOITE_FERMER
[(#INCLURE{prive/squelettes/inclure/charte/onglets.html}|dev_afficher_code)]
</div>

7
prive/squelettes/contenu/charte_php.html

@ -1,4 +1,9 @@
<h1 class="grostitre">Compatibilité des fonctions debut_cadre_xxx()</h1>
<h1 class="grostitre"><:charter:titre_charte:> &mdash; <:charter:titre_obsoletes:></h1>
#ALERTE{Composants et fonctionnalités dépréciées à ne plus utiliser., '', info}
<h2>Compatibilité des fonctions debut_cadre_xxx()</h2>
<?php
include_spip('inc/presentation');

137
prive/squelettes/contenu/charte_temp.html

@ -0,0 +1,137 @@
[(#ALERTE{Un super test, '', notice, status})]
[(#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,#CLE}
</BOUCLE_variantes3>
[(#BOUTON_ACTION{Pleine largeur,#SELF,btn_bloc}|ajouter_class{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

8
prive/squelettes/contenu/charte_typo.html

@ -5,10 +5,6 @@
Distribue sous licence GPL
]
<h1 class="grostitre"><:charter:titre_charte:> / <:charter:titre_typo:></h1>
<h1 class="grostitre"><:charter:titre_charte:> &mdash; <:charter:titre_typo:></h1>
#BOITE_OUVRIR
#MODELE{typo}
#BOITE_FERMER
#MODELE{typo}

6
prive/style_prive_plugin_dev.html

@ -74,9 +74,6 @@
}
/* Titraille */
[class^=charte_] .h1 {
margin-top: 3em;
}
[class^=charte_] .h2 {
margin-top: 2.5em;
}
@ -91,6 +88,9 @@
grid-template-columns: 1fr 1fr;
align-items: start;
}
[class^=charte_] .cols-2 .box {
margin: calc(var(--spip-box-spacing-y) / 2) 0;
}
/* Fonds de couleur */
[class*=bg_] {

Loading…
Cancel
Save