13-08-2019, 09:19:21
En premier, j'ai commencé à virer les z-index car je comprenais pas leur raison d'être.
J'ai fait pareil pour les différentes tailles d'écran (media queries) avec des paramètrages spécifiques.
Cumuler plein de tailles d'écran, tu as dût t'en rendre compte, à modifier ça devient vite chronophage.
Une fois le travail de nettoyage terminé, j'ai attaqué l'organisation du html.
Le mieux, à mon sens était d'avoir une zone invisible de "drop" par dessus et une zone d'affichage des enclos indépendants.
Pareil, je pense que tu t'es embêté avec les placements des éléments tel que l'arbre et l'éolienne.
Le soucis de z-index la dessus était lié au fait que tu utilisais un placement avec flexbox ou tu avais des goutières non proportionnels.
La j'ai scindé en 2 tailles : portrait et paysage.
portrait : on resize en fonction de la largeur de l'écran et paysage en fonction de la hauteur.
Il y a encore du z-index sur la zone de drag et sur les animaux mais avec un peu d'astuce, je devrais pouvoir les enlever.
Dans tous les cas, je conseil de ne pas faire de css à la volée dans le js.
Le mieux c'est de donner des comportements avec des classes.
Le js ne s'occupe que d'ajouter ou enlever ces classes. ça à plusieurs avantages :
- tout ton css est au même endroit.
- moins de calcul de placement à la volée.
J'ai utilisé la propriété "clip-path" en css car elle permet de préciser une zone de drag non linéaire.
Oui, sans doute des détails.
J'ai eu vraiment peu de temps donc je suis allé à l'essentiel.
Je vais refaire un tour dessus dans les jours qui viennent.
J'ai fait pareil pour les différentes tailles d'écran (media queries) avec des paramètrages spécifiques.
Cumuler plein de tailles d'écran, tu as dût t'en rendre compte, à modifier ça devient vite chronophage.
Une fois le travail de nettoyage terminé, j'ai attaqué l'organisation du html.
Le mieux, à mon sens était d'avoir une zone invisible de "drop" par dessus et une zone d'affichage des enclos indépendants.
Pareil, je pense que tu t'es embêté avec les placements des éléments tel que l'arbre et l'éolienne.
Le soucis de z-index la dessus était lié au fait que tu utilisais un placement avec flexbox ou tu avais des goutières non proportionnels.
La j'ai scindé en 2 tailles : portrait et paysage.
portrait : on resize en fonction de la largeur de l'écran et paysage en fonction de la hauteur.
Il y a encore du z-index sur la zone de drag et sur les animaux mais avec un peu d'astuce, je devrais pouvoir les enlever.
Dans tous les cas, je conseil de ne pas faire de css à la volée dans le js.
Le mieux c'est de donner des comportements avec des classes.
Le js ne s'occupe que d'ajouter ou enlever ces classes. ça à plusieurs avantages :
- tout ton css est au même endroit.
- moins de calcul de placement à la volée.
J'ai utilisé la propriété "clip-path" en css car elle permet de préciser une zone de drag non linéaire.
Philippe a écrit :Je viens de jeter un oeil rapidement et j'ai plusieurs problèmes:
...
Oui, sans doute des détails.
J'ai eu vraiment peu de temps donc je suis allé à l'essentiel.
Je vais refaire un tour dessus dans les jours qui viennent.