Rafraichissement du front : adminLTE v3 & darkmode
En préalable à une refonte de l'interface utilisateurice qui ne soit pas basée sur le template de l'interface admin (cf. discussion sur le salon [matrix]), je propose cette base de travail à peaufiner pour que l'interface de Hiboo prenne un petit coup de jeune.
🔴 attention
Je ne suis loin d'être un pro du front. J'adore bricoler, je suis assez à l'aise et je sais faire de plus en plus choses mais j'ai encore beaucoup de lacunes sur l'art du build js/css. Aussi j'ai eu un peu de mal avec certains changements. Notamment : adminLTE v3 a abandonné less
pour scss
. Ça a eu des implications dans webpack, et une des choses que je n'ai pas réussi à faire, c'est optimiser les importations de modules pour que ce soit le plus léger possible. Cf. les commentaires de mon auto-review.
travail le plus abouti
- mise à jour des template principaux
- mise à jour des macros
- mode sombre
reste à faire
Non exhaustif, il faudra tester toutes les pages en tant qu'admin et user :
- les tableaux (blocked profiles, requested profiles, utilisateurs etc.)
- corriger l'affichage des détails des services
- tout tester
- nettoyer le code là où c'est nécessaire
mode sombre
Si on le considère comme pas assez bon, ça pourra faire l'objet d'une merge request séparée.
Comment ça marche :
- Depuis la V3.1.0, adminLTE a introduit un dark mode natif qu'on peut activer tout simplement en ajoutant la classe
dark-mode
dans lebody
du template de base. - C'est super mais ça reste encore une décision application par application qui ne laisse pas le choix aux utilisateurices.
- Je crois qu'un switch natif est prévu pour la V4, en attendant j'ai piqué et adapté le code qui permet un switch sur le site d'adminLTE (voir dans les assets app.scss et theme.js)
- Limitation : j'ai l'impression que le script se recharge à chaque changement de page. Ça peut être agaçant mais c'est comme ça aussi sue le site de adminLTE. Ça donne une petite impression de "flash". Il faudrait voir si ça peut être mieux intégré
Aperçu :