Ici on n'a que votre IP, votre pseudo et votre adresse mail que nous ne traitons pas.
Quand vous êtes enregistrés, une seule requête permet de vous afficher les messages que vous n'avez pas lus.
NOUVELLE ADRESSE PERMANENTE DU DÉPÔT: https://mirrors.o2switch.fr/primtux/repo/debs
ATTENTION, MERCI DE NE PAS METTRE À JOUR PRIMTUX7 UBUNTU 20.04 VERS LA 22.04, LES HANDYMENUS NE SONT PAS ENCORE COMPATIBLES!
Merci de cliquer ici si vous souhaitez vous inscrire sur le forum.

Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
ClicMenu : A la campagne
#26
Voilà : https://framagit.org/philippe-dpt35/alac...requests/1

C'est brouillon faute de temps mais y'a une esquisse pour la ligne 1. (la ligne 2 c'est strictement la même chose avec un décalage)
Y'a plusieurs modifs :
1. Le déplacement de noeuds
2. background-size: contain; // le svg prend la taille la plus grande possible selon la dimension de la fenêtre sans jamais être tronqué
3. utilisation de : @media screen and (orientation:portrait) {
tout ce qui est à l'intérieur ne concerne que l'écran quand il est en mode portrait
4. les unités vh correspondent à un pourcentage de la hauteur (vw de la largeur) : pratique pour définir une taille en mode paysage d'une zone proportionnelle à la hauteur

J'ai colorié volontairement les zones à caler le temps que tu fasses les ajustements.
Répondre
#27
Merci pour ton aide, mothsart !

Je termine une fonction permettant d'afficher une boîte de dialogue avec des images, ce qui n'est pas possible avec "alert()", et je m'y mets !
Répondre
#28
En quoi une iframe c'est du bricolage dans ce cas? De nombreux sites les utilisent, pour les clicmenus si j' n'imposais pas une taille à wine on perdrait la moitié des activités.
Répondre
#29
C'est pratique pour imposer un taille d'application, mais ça n'est pas adaptable à la taille d'affichage.

Quitte à refaire les applications, c'est mieux de les faire en responsive design de façon à ce qu'elles puissent s'adapter à n'importe quel format et taille d'écran.
Répondre
#30
Philippe a tout dis.

Les iframes ça sert à inclure du contenu que tu ne maitrises pas : genre des pubs dans un site.
Répondre
#31
Mon premier site (2001) était en html et contenait des iframes avec des pages que je maîtrisais, étant donné qu'il n'y avait évidemment pas de pubs. Testé dans de nombreuses résolutions d'affichage, elles m'ont évité bien des soucis.
Il est bien évident qu'il faut maintenant s'adapter aux smartphones et que ce n'est plus l'idéal, mais je ne faisais qu'émettre une idée. Comme PrimTux est destinée aux PC, imposer un 1024x768 en iframe ne me paraissait pas si abracadabrantesque.
Répondre
#32
C'est normal ces rectangles orange dans les enclos? On dirait que les animaux ont un filtre devant eux:

[Image: 1b616e6e0c39d47a9204c7110cd5a2ca.png]
Répondre
#33
Ce n'est pas terminé et en cours de mise en place.
Ces zones ne sont là que pour faciliter la mise en place, elles disparaîtront.

Il faut patienter pour tester, je referai un message pour indiquer quand ce sera bon.
Répondre
#34
Voilà, ça touche à sa fin.

Merci à tous ceux qui voudront bien tester pour remonter les éventuels bugs, et faire part de leurs idées d'amélioration.

Test en ligne ici: https://www.de-bric-et-de-broc.fr/test/a...pagne.html

ou en récupérant depuis les sources ici: https://framagit.org/philippe-dpt35/alac...ree/master
Répondre
#35
C'est beaucoup mieux ! Bravo ! Testé et approuvé sur Chrome et Firefox.

J'ai dessiné le tas de fumier pour remplacer le "trou" (ça à faire rire mon collège qui trouvais ça glauque).

Des points de détail (sans urgence) :
* Quand on resize la fenêtre, les boutons masque parfois le texte
* il y a une barre de scroll vertical indésirable : soit tu supprimes la propriété "height: 100%;" sur #reserve soit tu mets un "overflow: hidden;"

Je vais devoir terminer l'illustration. Y'a la grange qui me pose soucis : la tronquer c'est pas génial. Soit je la dessine en entier soit je la retire : dans les 2 cas, ça nécessitera sans doute de retoucher le positionnement du drag and drop, j'en ai peur.
Répondre
#36
mothsart a écrit :J'ai dessiné le tas de fumier pour remplacer le "trou" (ça à faire rire mon collège qui trouvais ça glauque).
On peut aussi tout simplement proposer de faire glisser sur le rocher ou l'un des potagers en bas de l'image.

Pour le glauque, j'avais même pensé un moment à un ogre ! :lol:
Répondre
#37
Autant mettre un petit enclos sous la liste des animaux.
Répondre
#38
Steph a écrit :Autant mettre un petit enclos sous la liste des animaux.
Oui, ça serait pas mal !
Répondre
#39
Je viens de me rendre compte que ce que j'avais pris pour un rocher est en réalité le tas de fumier ! Sad
Répondre
#40
Voilà, j'ai mis un petit enclos au-dessus des animaux.

Exit le trou glauque !
Répondre
#41
mothsart a écrit :Des points de détail (sans urgence) :
* Quand on resize la fenêtre, les boutons masque parfois le texte
* il y a une barre de scroll vertical indésirable : soit tu supprimes la propriété "height: 100%;" sur #reserve soit tu mets un "overflow: hidden;"
Corrigé.
Pour les très petites dimensions, j'élimine les consignes pour privilégier les boutons de commande.
Répondre
#42
Pour ceux qui veulent tester ce que donne l'affichage en fonction des divers appareils existants (smartphone, tablette, TV...) on peut le simuler facilement dans Firefox.
Il faut aller dans le menu principal --> développement Web --> vue adaptative.

Dans la fenêtre qui s'affiche, on choisit les différents dispositifs en haut à gauche (on peut en enlever ou en rajouter en cliquant sur "Modifier la liste"). On peut passer en mode portrait ou paysage du dispositif en cliquant sur le petit bouton de la résolution en haut au centre.

On peut modifier manuellement la résolution pour un appareil spécifique si on le souhaite.
Répondre
#43
Si je comprend bien : le fumier ne sert plus à rien (à la base, je savais qu'il y avait encore du taf pour que ça ressemble pas à un rocher mais je travaille toujours de manière général en affinant les détails en plusieurs passes)... je vais le supprimer.
En revanche, pour l'enclos, il faut que je l'inclus dans mon svg, non ? (là t'as fait une image à partir du svg)

1. Les images des animaux sont étirés : il faudrait leur donner un ratio fixe.
Faudrait sans doute partir sur vectoriel aussi (j'ai un peu de mal avec les mix) mais je chipote.
2. Tu t'ais embêter à créer une image poule et poule-mini. C'est bête car tu te retrouves avec une image mini qui charge pour rien.
En réalité, c'est la même image avec des tailles différentes. Ton navigateur l'a déjà en cache donc tu évites un appel http en mettant la même image mais avec des tailles plus petites dans ton css.
3. J'aurais fait la bulle en pure css mais ça reste du détail

Citation :Pour les très petites dimensions, j'élimine les consignes pour privilégier les boutons de commande.

Oui, c'est mieux. Dans l'idéal, faudrait mettre en place un bouton "?" avec une modal qui s'ouvre sur les petites résolutions.
Répondre
#44
Ca reste très bien dans l'état des choses : j'aurais tendance à dire, arrête toi jusqu'à obtention du svg finale. Tu fais les petits ajustages et tu t'arrêtes là. Ca permet de te concentrer sur un autre exercice.
Une fois qu'on aura une batterie suffisamment conséquente, on pourra toujours refaire une passe d'amélioration sur l'ensemble.

Surtout que tu as des briques que tu réutilises donc autant rester cohérent sur l'ensemble => même UX sur le groupe.
Répondre
#45
mothsart a écrit :En revanche, pour l'enclos, il faut que je l'inclus dans mon svg, non ? (là t'as fait une image à partir du svg)
Non, parce qu'on n'arrivera pas à l'avoir sur le bord gauche quelle que soit la résolution (ou plus difficilement). C'est plus simple de l'isoler.
Répondre
#46
j'ai enfin terminé l'illustration Philippe : https://openclipart.org/detail/318457/farm
J'ai exercé ta patience mais le rendu finale devrait te plaire.
Répondre
#47
Merci !
Je finis quelques autres développements et je me replonge dans le javascript que j'ai délaissé depuis quelques semaines (voire mois !). Il me faut également affiner la balance virtuelle.
Répondre
#48
Voilà, c'est mis à jour avec l'illustration terminée :
https://framagit.org/philippe-dpt35/alacampagne

J'en ai profité pour améliorer le responsive. N'hésitez pas à faire vos retours sur ce fil.
Répondre
#49
Dans l'ensemble, c'est très bien : fonctionnel.
Quelques petites retouches possibles :

- sous certaines tailles, les boutons sont partielles cachés. (tu devrais t'en sortir avec une police en pourcentage ou avec des media queries)
- sous chrome : les nombres dépassant la dizaine pose soucis (ça doit sans doute provenir des tailles de police par défaut : pas les mêmes selon les navigateurs)
- les animaux dans les infos bulles semblent étirés : mettre width:auto; devrait règler
- un peu de padding dans les infos bulles
- un choix de couleur plus appropriés pour les infos-bulles : fond blanc serait sans doute mieux.
dans l'idéal, ne pas utiliser d'image : tout en css.
Répondre
#50
mothsart a écrit :- sous certaines tailles, les boutons sont partielles cachés.
J'avais déjà corrigé ce problème en mettant des polices proportionnelles. Je n'ai pas réussi à reproduire le problème, même sous Chrome.
Peux-tu m'indiquer le navigateur utilisé et le ratio sous lequel tu as eu le problème ?

Pour les autres remarques, je pense avoir corrigé.

Sinon je galère pour maintenir les animaux dans les enclos en fonction des ratios largeur/longueur d'écran. Les possibilités en media queries sont trop nombreuses compte-tenu de l'importante modification de la taille des enclos dans l'illustration suivant les ratios.

Je viens de voir qu'il existait une propriété aspect-ratio. ça serait peut-être plus efficace que d'utiliser media screen avec des max-width et min-height. Ou as-tu peut-être une autre piste ?
Répondre


Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)