initial commit

2021-05-17 09:26:09 +02:00
commit 5a9c6947bc
13 changed files with 2089 additions and 0 deletions
@@ -0,0 +1,39 @@
+
+## Objectif
+
+Rendre un tableau sans utiliser de balises <table>, 
+en utilisant des balises <div> + du positionnement flexbox
+et qui adopte un positionnement responsive 
+avec basculement pour les 3 tailles large (L), medium (M) et small (S).
+
+Taille par défaut: Large.
+
+La solution prévoit de gérer avec du javascript l'entête (thead) qui se déploie différemment pour les tailles M et S
+
+## Nodejs
+* mise en place de sass
+  * bash docker-node.sh
+  * yarn install
+* compiler les fichiers sass
+  * yarn run scss
+
+## Let's go 
+* lancer un serveur web
+  * bash run.sh
+  * http://localhost:8000/index3.html
+
+## TODO
+* prévoir plusieurs tableaux sur une seule page
+* se rapprocher davantage de la structure html d'un tableau (ajouter thead et tbody)
+* BUG: js l.57:  la règle 'not small' est jouée pour écran L, alors qu'elle est prévue pour le basculement de S vers M
+
+## Limites
+* En taille par défaut (L), la largeur des colonnes du tableau est déterminée par des propriétés flex côté css, pour personnaliser il faut donc surcharger en insérant dans le html :
+```html
+<style>
+#my-table .td:nth-child(1) { flex: 1; } 
+#my-table .td:nth-child(2) { flex: 4; }
+#my-table .td:nth-child(3) { flex: 6; }
+#my-table .td:nth-child(4) { flex: 2; }
+</style>
+```