Interface - Implémentation d'une première ébauche technique #40

florian_briand · 2024-08-05T00:24:12+02:00

florian_briand commented

2024-08-05 00:24:12 +02:00

Détails

Cette PR met concrètement en place une première interface combinant les technologies front choisies pour le projet.

Setup de tailwindcss (+ documentation basique sur son usage)
Implémentation d'un composant "complexe" de barre de navigation
Gestion du responsive
Combinaison de Askama (Jinja) + HTMX
Usage de AlpineJS pour les micro-interactions (affichage des menus)

À suivre, dans une seconde PR : une interface moins "random" et plus orientée vers nos besoins

Pourquoi ?

Contirbue à #8

Documentation

No response

### Détails Cette PR met concrètement en place une première interface combinant les technologies front choisies pour le projet. - Setup de tailwindcss (+ documentation basique sur son usage) - Implémentation d'un composant "complexe" de barre de navigation - Gestion du responsive - Combinaison de Askama (Jinja) + HTMX - Usage de AlpineJS pour les micro-interactions (affichage des menus) ![image](/attachments/3a7a4e94-f867-4d1f-97b5-eeff66ef40ee) ![image](/attachments/54c07007-721d-4f2e-af71-8316f7a66039) À suivre, dans une seconde PR : une interface moins "random" et plus orientée vers nos besoins ### Pourquoi ? Contirbue à #8 ### Documentation _No response_

image.png

28 KiB

image.png

30 KiB

florian_briand added the

enhancement

module/frontend

labels 2024-08-05 00:24:12 +02:00

florian_briand added 5 commits 2024-08-05 00:24:12 +02:00

feat: Setup Tailwind CSS 699978ad5e

refacto: nest axum templates routes a82e43ce7f

feat: add navbar layout with some JS controls (with Alpine.js) 5e5267210b

feat: replace vanilla JS by AlpineJS 84cd97bc5c

feat: make Nav and Profile menu dynamic d320bbcc1d

kosssi commented

2024-08-05 00:53:40 +02:00

J'ai 3 petites remarques :

devrions nous pas nous bloquer une version précise de TailwindCSS
Nous devrions pas gérer le code rust et le code html au même endroit en mode component parce que aller dans src/templates/hello.rs et templates/hello.html sur la longue je ne suis pas sur que ça soit une bonne idée après c'est peut être pas possible ? ou qu'il y a une raison ;)
le fichier crates/app/assets/css/style.css est un fichier généré non ? si c'est le cas nous ne devrions pas l'embarquer dans Git

J'ai 3 petites remarques : - devrions nous pas nous bloquer une version précise de TailwindCSS - Nous devrions pas gérer le code rust et le code html au même endroit en mode component parce que aller dans `src/templates/hello.rs` et `templates/hello.html` sur la longue je ne suis pas sur que ça soit une bonne idée après c'est peut être pas possible ? ou qu'il y a une raison ;) - le fichier `crates/app/assets/css/style.css` est un fichier généré non ? si c'est le cas nous ne devrions pas l'embarquer dans Git

florian_briand commented

2024-08-05 22:10:57 +02:00

J'ai 3 petites remarques :

devrions nous pas nous bloquer une version précise de TailwindCSS

J'avoue ; je n'y avais pas pensé, mais ça peut valoir le coup d'indiquer une version dans le README

Ajouter la version de tailwind dans le README

Nous devrions pas gérer le code rust et le code html au même endroit en mode component parce que aller dans src/templates/hello.rs et templates/hello.html sur la longue je ne suis pas sur que ça soit une bonne idée après c'est peut être pas possible ? ou qu'il y a une raison ;)

La raison "actuelle", c'est que la config' par défaut de Askama va chercher les templates HTML dans le dossier /templates ; ça se combine avec une "culture" visant à ne pas mélanger le code Rust du reste
Mais je trouve aussi que cette séparation est un peu dégueu / relou ; à explorer :/ Je vais garder ça en tête et p'tet faire des expérimentations dans la prochaine PR

le fichier crates/app/assets/css/style.css est un fichier généré non ? si c'est le cas nous ne devrions pas l'embarquer dans Git

Il est généré par la CLI tailwindcss. Idéalement, on configurerait le build.rs pour générer ce fichier à chaque build (mais ça demande à gérer le crossplatform de la CLI tailwind) et rendre ça transparent.
Mais pour l'instant, je préfère commit le style.css pour éviter à tout le monde de devoir installer la CLI et lancer manuellement la génération du style.css pour faire la moindre chose.

> J'ai 3 petites remarques : > - devrions nous pas nous bloquer une version précise de TailwindCSS J'avoue ; je n'y avais pas pensé, mais ça peut valoir le coup d'indiquer une version dans le README - [x] Ajouter la version de tailwind dans le README > - Nous devrions pas gérer le code rust et le code html au même endroit en mode component parce que aller dans `src/templates/hello.rs` et `templates/hello.html` sur la longue je ne suis pas sur que ça soit une bonne idée après c'est peut être pas possible ? ou qu'il y a une raison ;) La raison "actuelle", c'est que la config' par défaut de Askama va chercher les templates HTML dans le dossier `/templates` ; ça se combine avec une "culture" visant à ne pas mélanger le code Rust du reste Mais je trouve aussi que cette séparation est un peu dégueu / relou ; à explorer :/ Je vais garder ça en tête et p'tet faire des expérimentations dans la prochaine PR > - le fichier `crates/app/assets/css/style.css` est un fichier généré non ? si c'est le cas nous ne devrions pas l'embarquer dans Git Il est généré par la CLI tailwindcss. Idéalement, on configurerait le `build.rs` pour générer ce fichier à chaque build (mais ça demande à gérer le crossplatform de la CLI tailwind) et rendre ça transparent. Mais pour l'instant, je préfère commit le `style.css` pour éviter à tout le monde de devoir installer la CLI et lancer manuellement la génération du `style.css` pour faire la moindre chose.

👍 1

florian_briand added 2 commits 2024-08-05 22:33:54 +02:00

fixup! feat: Setup Tailwind CSS a0f35a6667

fixup! feat: make Nav and Profile menu dynamic 86f29c3169

kosssi approved these changes 2024-08-06 00:10:32 +02:00

kosssi left a comment

Le menu est quand même un bon exemple, qui permet de comprendre le fonctionnement même si je suis pas encore à l'aise avec la syntaxe de Rust, voir du HTML me rassure 👼 J'ai pris le temps en tout cas de bien lire le code plusieurs fois. Je commence à comprendre la logique 👍

Je trouve ça dommage pour le style.css ce n'est pas si complexe que ça a comprendre et nous sommes que 4 :p
Le top serait que Rust le lance automatiquement et que TailwindCSS soit un prérequis ou qu'il le télécharge automatiquement carrement ^. On verra ça plus tard, je n'ai pas assez d’expérience en tout cas pour l'implémenter et savoir si c'est faisable.

Le menu est quand même un bon exemple, qui permet de comprendre le fonctionnement même si je suis pas encore à l'aise avec la syntaxe de Rust, voir du HTML me rassure 👼 J'ai pris le temps en tout cas de bien lire le code plusieurs fois. Je commence à comprendre la logique 👍 Je trouve ça dommage pour le `style.css` ce n'est pas si complexe que ça a comprendre et nous sommes que 4 :p Le top serait que Rust le lance automatiquement et que TailwindCSS soit un prérequis ou qu'il le télécharge automatiquement carrement ^. On verra ça plus tard, je n'ai pas assez d’expérience en tout cas pour l'implémenter et savoir si c'est faisable.

florian_briand referenced this pull request

2024-08-06 00:26:16 +02:00

Ajout d'un système de pages pour la barre de navigation #42

florian_briand referenced this pull request

2024-08-06 00:41:03 +02:00

Configurer la génération automatique du style.css par la CLI tailwindcss #43

florian_briand commented

2024-08-06 00:41:52 +02:00

J'ai rajouté un ticket (#43) pour penser à implémenter ce build automatique

👍 1

theo approved these changes 2024-08-06 20:55:09 +02:00

florian_briand force-pushed feat/8_implement_main_ui from 86f29c3169 to f3495b8fb4