Un peu d'UI pour l'interface d'administration

stephane-leroy · 16 juil.

Salut la communauté !

Ancien utilisateur de PluXml, j'aimerais à compter de la rentrée 2024 m'impliquer un peu plus sérieusement dans le logiciel : il a selon moi un rôle intéressant à jouer sur le thème de l'écoconception de sites .. !

Du coup je vous partage mon idée :

Pourquoi pas re-carrosser un peu l'UI de l'interface d'administration ?

Cette UI mériterait je trouve

d'être un peu rafraîchie et mise au goût du jour ( déjà juste des paddings un peu plus généreux, caractères un peu plus grands , des aplats de couleur un peu plus "material design " .. )
d'être vraiment responsive, avec l'objectif de la rendre utilisable depuis un mobile ( ce qui constituerait un avantage intéressant vis à vis de la quasi totalité des CMS dispos sur le marché ).

Qu'en pensez-vous ?

A qui puis-je m'adresser pour proposer ma contrib' ?

Bonne journée,
au plaisir de vous lire

kowalsky · 16 juil.

Bonjour @stephane-leroy

tu peux t'inspirer de ce qui a été fait il y a quelques années :

Pour le moment discutes en dans la section Création, @bazooka07 ou @gcyrillus-nomade t'indiqueront ensuite à quel endroit envoyer ton travail. Le lien vers les thèmes sur https://ressources.pluxml.org/ semble être désactivé, ce sera sans doute sur https://pluxopolis.net/themes.html

bazooka07 · 16 juil.

Bonjour @stephane-leroy ,

Effectivement l'interface admin de PluXml aurait besoin d'un relookage pour rester dans l'air du temps.

Je ne sais pas trop ce qu'il faut comprendre par mobile. Perso, je n'ai jamais pris le temps de tester cet interface sur un smartphone car je ne suis pas très à l'aise avec un clavier virtuel.
Beaucoup de gens n'ont pas les moyens de s'offrir un PC ultra-portable pour gérer leur site avec PluXml. Dans ce cas-là, une tablette Android ou IOS est une bonne alternative.

Une tentative de relookage de cet interface avait été faite il y a 2 ou 3 ans en utilisant KnaCSS. Le résultat était assez élégant et traîne sur le dépôt Github de PluXml ( voir la branche 6.0 ). Malheureusement suite à une mauvaise gestion des branches sur le dépôt, et le très peu de contributeurs, l'essai a été abandonné.

Depuis le core de PluXml a beaucoup évolué ( voir branche master ) et la fusion (merge) de cette tentative sera très chronophage. De plus, KnaCSS est passé à une version supérieure et la version 8.0 de PHP pose quelques petits soucis.

Pour ce relookage, il convient de repartir depuis la branche master du dépôt qui correspond à la prochaine version de PluXml. On peut éventuellement créer une branche 6.1 pour tester tes propositions. Je suppose que tu as un minimum de pratique de Git pour faciliter l'intégration.

Actuellement l'interface admin est basé sur PluCSS qui n'est utilisé que par PluXml. Ce qui pose un problème de maintenance et d'évolution. KnaCSS est libre, assez simple et fortement supporté par AlsaCreations.

Vu l'évolution de CSS, l'utilisation de "float: left;" comme avec PluCSS est à remplacer par des "display: grid" ou "display: flex" comme le fait la dernière version de KnaCSS.

Si tu es plus à l'aise avec un autre gestionnaire CSS, pourquoi pas s'il reste simple et à la portée de tous.

Une autre approche serait d'utiliser des outils comme Vue.js pour rendre PluXml plus réactif en limitant les échanges à travers le net. Mais il y a un "gap" à franchir.

Mes disponibilités pour PluXml sont inversement proportionnels à l'ensoleillement. La rentrée est une bonne opportunité pour remettre l'ouvrage sur le métier.

N'hésite pas à nous faire un retour pour clarifier tes intentions. Toute bonne volonté est la bienvenue.

Pour voir la version 6.0 de PluXml :

git clone https://github.com/pluxml/PluXml.git
git checkout 6.0

Cordialement.

gcyrillus-nomade · 16 juil.

Bonsoir,

Superbe idée !! c'est vrai que l'interface de l'admin est viellotte et peu responsive.

Que souhaite tu faire ?
1. modifier uniquement la feuille de style ?
2. Utiliser un autre framework et modifier aussi la structure HTML avec au minimum les attributs class

Note que Knacss n'est plus en développement depuis environ 2020, à terme ce sera comme PluCss , une rareté sans support.
https://www.knacss.com/ avec une dernière mise à jour il y a environ deux ans https://github.com/alsacreations/KNACSS En tout cas, c'est bien mieux que PluCss

Aux besoins, si tu as besoin d'une nouvelle catégorie/statique et d'un compte sur pluxopolis ou pluxthémes pour partager et communiquer sur tes proposition , en plus du forum, c'est tout à fait possible.

cdt

bazooka07 · 16 juil.

Bonsoir,

KnaCSS a été créé en 2012. Après 10 ans, vu le nombre de contributeurs et le nombre d'étoiles sur le dépôt Github, on peut considérer ce framework CSS comme stable. Et il faudra certainement quelques années de plus pour qu'il devienne une rareté encore utilisée par une poignée d'irréductibles.

En parcourant les publications de AlsaCreations, il y a aussi TailwindCSS. Mais apparemment, c'est des class CSS à rallonge et une feuille de style CSS bien lourde, sauf à utiliser PurgeCSS.

Knacss utilise Sass. Ceux qui maîtrisent cet outil pourront aisément faire des retouches cosmétiques de leurs interfaces.

Ce sera aussi l'occasion d'actualiser le thème par défaut et de larguer définitivement PluCSS.

Autre point à considérer, c'est l'amélioration à l'accessibilité comme recommandé par un site officiel. L'aide de quelques personnes avec des déficiences visuelles sera bien utile. Il y avait eu un échange assez désagréable et peu constructif à ce sujet sur le dépôt Github.

Cordialement

stephane-leroy · 19 juil.

.. mmm.. intéressant ces retours.

@kowalsky le lien vers les thèmes admin me semble cassé ( .. ? )

@gcyrillus-nomade : oui modifier la feuille de style CSS me paraît un bon point de départ .. ce qui pourrait en limiter l'efficacité ce serait juste un manque d'identifiants html ( donc les attributs #id ) dans le rendu de l'interface, mais j'imagine que c'est peu de choses à modifier !

Je pense pas qu'il y ait beaucoup à faire de toute façon. L'interface est claire, propre .. mais elle gagnerait je trouve à ce qu'on augmente un peu les tailles de caractères et les espaces (pour tenir compte de l'augmentation de la résolution des écrans depuis la naissance de pluxml ) . Et ce qui pourrait être sympa aussi serait que les entrées du menu principal ( nouvel article / liste des articles / medias etc. ) soient illustrées par une petite icône qui donnerait un côté plus "app" à l'ensemble.
Une autre idée aussi ce serait de trouver un moyen technique pas trop compliqué qui puisse proposer un genre de mode "distraction free", une page de saisie d'article qui soit épurée , simple, un peu moins intimidante que la page d'édition d'article complète avec toutes ses options .
Que ça se rapproche un petit peu de wordpress/gutenberg par exemple.. Vous voyez ?

Au sujet de PluCSS vs Knacss : au fait ça me paraît pas déterminant .. De toute façon quand on fait un thème rien n'empêche d'écrire ses propres CSS, que ce soit pour les styles proprement dit ou pour créer un petit système de colonnes pour la mise en page.
( une remarque sur le sujet : je pense comme d'autres que l'arrivée de flexbox a rendu beaucoup moins nécessaire l'utilisation d'un framework CSS.. étant donné que flexbox permet de faire un affichage sur plusieurs colonnes finement contrôlé, et en peu de lignes de 'code' )

Cependant pourquoi pas désigner une feuille de style comme étant la référence en effet .. Tailwind a le vent en poupes , bulma est bien côté aussi .

Au fait je serais partisan de conserver PluCSS pour l'interface d'administration, quitte à bosser un peu dessus .. et de laisser le développeur de thème choisir son framework CSS .

Content en tout cas que mon post aie suscité quelques retours, franchement je pense que PluXml doit rester dans la course : WordPress est une usine à gaz, les autres CMS également .. faudrait juste le "pimper" un peu

@bientôt

bazooka07 · 19 juil.

Actuellement l'interface administration de PluXml est fortement liée à PluCSS par la valeur des "class" (grid, col, etc... ). Et PluCSS ignore les flexbox et grid. A la place il utilise au maximum "float: left". Et comme dit PluCSS est utilisé uniquement par PluXml et il n'y a plus de mainteneurs pour le faire évoluer.

KnaCSS et Bulma s'appuient sur SASS. Ce qui est intéressant pour modifier l'aspect visuel sans tout casser.

Je ne connais pas Bulma. Il est très populaire sur Github. Je vais y jeter un oeil.

A++

stephane-leroy · 19 juil.

.. oui Bulma est top , c'est un outil qui pourrait te plaire @bazooka07 !

côté "thème de base " il y a pico CSS qui pourrait aussi faire l'affaire .. il est ultra léger .. et a l'avantage de laisser un maximum de liberté au designer / intégrateur.

( je viens de voir qu'il intègre SASS aussi )

gcyrillus-nomade · 19 juil.

Bonjour,

Il ne faut pas oublié que les framework ne sont pas que des systèmes de grilles et qu'il y a toujours derrière beaucoup de travail et de réflexion.

Comme l'indique @bazooka07, il y a une part sur l'accessibilité dans knacss non négligeable et puis les reset css couvrent bien plus de navigateur et de situations que l'on peut tester seul. Il y a à prendre, à laisser et à s'en inspirer.

Pour les thèmes admin, Stephane en avait proposé,
https://download.pluxopolis.net/download.php?theme=admthemes-pack1
https://download.pluxopolis.net/download.php?theme=admthemes-pack2
Je ne les ai jamais tester bien que laisser en ligne, il me semble que ce n'était surtout à propos de couleurs.

Enfin épurer et simplifier n'est pas simple
En attendant de te relire;)

Un peu d'UI pour l'interface d'administration

Réponses