[spip-dev] Un p'tit peu de graphisme pour la route

Dev
1

Salut,

J'ai commencé à reprendre le graphisme (pas l'ergonomie), parce que depuis des années, on a les trois colonnes qui ne s'alignent jamais correctement. Je viens de commiter un premier jet de petites corrections, et déjà ça s'aligne vachement beaucoup mieux.

En gros:
- on avait un traitement différent des «cadres» selon qu'ils étaient ornés d'une icone ou non; si icone, on balancait le cadre, si pas icone on ajoutait un margin-top de 20 pixels au-dessus;
- du coup, pour contrebalancer, pour de nombreux cadres qui n'avaient pas d'icones on ajoutait un <div>&nbsp;</div> avant.

Je simplifie:
- tous les cadres adoptent maintenant un margin-top de 20 pixels (on pourrait aussi bien mettre ça en .em si vous préférez), icone ou pas;
- je vire les <div></div> parasites.

En fait, il reste une grosse incohérence dans l'interface:
- historiquement, on a la structure:
      + éventuellement fil d'ariane (#chemin),
      + le gros_titre
      + les onglets éventuels
      + puis enfin les trois colonnes.
Ça permet d'aérer l'interface et d'obtenir un alignement élégant du haut des trois colonnes.

- sur de nombreuses pages, le gros_titre est inséré dans la colonne centrale; du coup alignement impossible des trois colonnes (voir par exemple «gérer les forums», qui a cette caractéristique, où la colonne de gauche est vachement haute et «écrase» l'information principale), alignement du gros titre à droite alors qu'il est centré ailleurs...

- apparition d'un système d'onglets différents, notamment sur «gérer les forums».

- sur de nombreuses pages, carrément pas de titre. Ça, on en a des tripotées comme ça.

À mon avis, on pourrait sans trop de douleur uniformiser tout ça et reprendre la structure «historique», c'est à dire:
      + fil d'ariane
      + gros_titre _systématique_
      + les onglets
      + puis les trois colonnes.
À partir de là, on pourra commencer à éventuellement retravailler l'aspect du gros_titre (aligné sur la gauche de la colonne centrale par exempe) et des onglets, si vous trouvez qu'ils sont trop envahissants (je suppose que c'est à cause de leur aspect un peu massif qu'ils sont parfois absents ou installés dans la colonne centrale).

2

Salut,

J'ai commencé à reprendre le graphisme (pas l'ergonomie), parce que
depuis des années, on a les trois colonnes qui ne s'alignent jamais
correctement. Je viens de commiter un premier jet de petites
corrections, et déjà ça s'aligne vachement beaucoup mieux.

Un peu de nettoyage ne peut jamais faire de mal ! Tes dernières interventions améliorent l'apparence, c'est bon à prendre !

À mon avis, on pourrait sans trop de douleur uniformiser tout ça

Oui… Il faut surtout indiquer une règle et s'y tenir, et en informer la Zone… Proposer aussi, dans un second temps, une méthode jolie pour les squelettes exec (prive/exec/) pour qu'ils puissent insérer ce qu'il faut sans de lourdes |fonctions_très_absconses{avec,paramètres,tout,autant} notamment les barres d'onglets ou les blocs dépliants donc… Le reste devant à mon avis être simplement des recommandations sur les nommages des classes CSS à utiliser.

Sinon, il y a vraiment un truc graphique qui ne me convient pas, c'est le fil d'ariane… J'ai vraiment l'impression d'un gros pavé dont on ne sait même pas qu'il est cliquable. Je serais vraiment partisan d'un truc moins encombrant, et plus… naturel. Je crois que celui de bonux me est déjà plus compréhensible. Enfin bon, j'en fais pas un drame, loin de là…

3

Ah, le bling bling! :-))

En fait, ce qu'il manque pour l'instant, c'est le «switcher» de thème, et la mise en place d'au moins un second thème.

Déjà, tu peux regarder ce que donne l'interface en désactivant le bling bling de cette manière:
- tu vas dans /prive/themes/spip
- tu prends le fichier "style_prive_bling.html" et tu le mets ailleurs (par exemple à la racine de /themes
- tu vides le cache.

Et voilà, tu as la même interface, sans le bling.

Tu verras que les formulaire changent déjà pas mal. Mais évidemment, il faudrait aller plus loin avec un autre thème. A partir du moment où l'on a un second thème actif, déjà, ça permettra de mieux voir ce qui relève du pot commun et ce qu'on passe dans les thèmes. Dans tous les cas ça revient un peu au même, mais ça permet de limiter la complexité de styles de thèmes (où il faudrait éviter de devoir trop «annuler» des styles déjà définis).

Et notamment: pour l'nstant, si tu désactives le bling, la présentation du chemin reste grosso modo identique, mais sans les flèches et les reliefs. Si on a un second thème («Bonux»?), ça permettra de encore dégager ce qui doit dégager à l'intérieur des thèmes.

ARNO*

4

Du coup, je viens de simplifier le «chemin» de la version «de base», qui adopte en gros le rendu de Bonux (texte simple, affichage du chevron, pas de fond de couleur...). Seule différence: un souligné au hover.

ARNO*

5

Martin Arnaud a écrit :

Avec la SPIP 2.1.0 dev SVN [14534] la route semble compromise avec Firefox. Tout es peté. Mas voir un p'tit coup c'est agréable :wink:
Trêve de conneries, c'est moi qui déconne ou ça a un pet de travers ?

A +

Luis

6

Ça marche très bien chez moi… Pense à vider les caches ou à mettre define('_INTERDIRE_COMPACTE_HEAD_ECRIRE',true);

C'est bonux qui a son apparence pétée, mais ça c'est pas grave, c'est le coup des padding 20px à lui mettre aussi entre autre je crois.

7

Oui mais il manque un container général car le gros titre et les onglets se retrouvent alignés sur la pleine largeur de la page, ce qui ne permet pas de faire autre chose que l'alignement center.

Cédric

8

Matthieu Marcillaud a écrit :

Martin Arnaud a écrit :

Avec la SPIP 2.1.0 dev SVN [14534] la route semble compromise avec
Firefox. Tout es peté. Mas voir un p'tit coup c'est agréable :wink:
Trêve de conneries, c'est moi qui déconne ou ça a un pet de travers ?

Ça marche très bien chez moi… Pense à vider les caches ou à mettre define('_INTERDIRE_COMPACTE_HEAD_ECRIRE',true);

C'est bonux qui a son apparence pétée, mais ça c'est pas grave, c'est le coup des padding 20px à lui mettre aussi entre autre je crois.

Merci pour ta réponse, MM. Et non, ce n'est pas ça. Le caches je les ai vidées et avant de poster j'ai installé une version sans rien (plugins) pour voir si c'était moi.

Avec Firebug, j'ai un

<body class="large navigation_sans_icone accueil accueil accueil">

qui a ça

body {
font-family:Verdana,Geneva,Sans,sans-serif;
font-size:0.625em;
}
spip.php...13&p=40cd (ligne 228)
body {
background-color:#F8F7F3;
border:0 none;
color:#000000;
margin:0;
}
spip.php...13&p=40cd (ligne 227)
body {
border:0 none;
}
style_pr...efaut.css (ligne 2)
body {
font-family:Verdana,Geneva,Sans,sans-serif;
}

Mais bon, ce n'est pas ça non plus

Et tous le éléments ont ce qui précede comme CSS et rien d'autre.

En réalité je suis arrivé là parce que sur autre config mais avec plein de plugins dont bonux j'avais à chaque fois que j'activais / desactivais un plugin la perte des CSS. Comme je ne trouvais pas je me suis dit on installe une from scratch et c'est là que ça pète.

As-tu essayé sur une nouvelle instal, nouvelle base ?

A +

Luis

9

Luis Speciale wrote:

<body class="large navigation_sans_icone accueil accueil accueil">

On est accueilli avec classe chez SPIP, et plutôt trois fois qu'une ^^

BoOz

10

Luis Speciale a écrit :

Avec la SPIP 2.1.0 dev SVN [14534]

Ouf j'ai trouvé : hier cette version ne créait que 24 tables !

Aujourd'hui ça marche.

Commentaire : dans la page Accueil on a pas la même disposition qu'avec les autres pages. C'est peut-être du à ce div vide ?

div id="contenu">
<a id="saut" accesskey="z" href="#saut"/>
<div> </div>
<a id="access-c" accesskey="c" href="#access-c"/>

Bug ? Quand je survole la nav rapide le li n'est pas en position absolute et ça fait que le bandeau gris s'agrandit pour le contenir.

Et regardant de près il me semble qu'il manque un ul avant le li <li class="toutsite">

<ul class="bandeau_rubriques deroulant">
  <li class="boussole">
    <a id="boutonbandeautoutsite" href="http://127.0.0.1/ayayay/ecrire/?exec=brouteur&quot;&gt;
      <img height="24" width="24" alt="" src="../prive/themes/spip/images/boussole-24.png"/>
    </a>
      <li class="toutsite">
        <a href="http://127.0.0.1/ayayay/ecrire/?exec=articles_tous&quot;&gt;
          Tout le site
        </a>
      </li>
  </li>
</ul>

Sinon c'est super

A +

Luis