La carte des candidat-e-s du Rassemblement à Gauche
« 🔴 #CeSeraNupes !
Tu ne sais pas qui est ton ou ta future députée ? Tu veux donner un coup de main pour le / la faire élire ?
Clique sur cette super carte interactive !
Un grand bravo aux sympathisants #NUPES pour cette création. »
🔥Qui sera ton ou ta #député·e ?
🗺 La carte des candidat·es #NUPES, avec toutes les infos pour les suivre et faire leur campagne !
👉 ►http://ceseranupes.fr
#CeSeraNUPES
ainsi que les projections du collectif indivisibles :
▻https://indivisibles.fr
via @caroline_de_haas
C’est la semaine des livraisons #shameless_autopromo… on vient donc de mettre en ligne, avec Emmanuel, le site du Frac Paca :
▻https://www.fracpaca.org
Évidemment c’est du #SPIP. Graphiquement c’est lié à la charte de l’institution, que nous avons évidemment adaptée à un site Web.
Dans les trucs originaux :
1. Le bandeau supérieur prend différentes formes selon la taille de l’écran :
Ça se fait entièrement en CSS évidemment.
2. Le menu hamburger est plus classique, mais à nouveau tout se gère en CSS (animations, accordéons…) ?
3. Mes longforms, pour les expositions. Mais évidemment avec un traitement graphique beaucoup plus minimaliste que pour Fabre :
▻https://www.fracpaca.org/Des-marches-demarches-remarche
4. Un mini-agenda en page d’accueil, avec les prochains événements. L’aspect original, c’est que c’est responsive de façon un peu rigolote, puisque c’est un slider avec un nombre variable de cases, et que c’est réglé entièrement en CSS (si je te le dis : c’est plutôt astucieux…)
5. Une carte des déplacements de la collection en région. Pour l’affichage, c’est du classique : Leaflet avec des clusters. L’intérêt ici c’est que ça va chercher les œuvres dans une base de donnée spécialisée (Navigart), pour les afficher sur le site. Aspect SPIP-c’est-bon-mangez-en : l’interrogation et le traitement de l’API distante se fait directement dans une boucle DATA dans le squelette, sans rien faire en PHP.
6. Afficher automatiquement un portfolio des œuvres d’une exposition :
Même principe, interrogation et affichage d’infos tirées de Navigart directement dans un boucle DATA. Et pour l’affichage des lignes façon Google Image, c’est mon bon vieux script tel que tu peux le récupérer dans mon plugin medias_responsive_mod… (modèle ligne.html et script portfolio_ligne.js).
7. Une page d’agenda par semaine :
▻https://www.fracpaca.org/?page=tout_agenda&id_rubrique=1&date_p=2020-07-23
Pour le mini-calendrier en javascript, j’ai joué avec Pignose Calendar :
▻https://www.pigno.se/barn/PIGNOSE-Calendar
8. Pour les plugins importants ici :
– plugin agenda
– sélections éditoriales
– plugin GIS (mais l’affichage des cartes côté public, je le refais moi-même, comme ça je vois directement ce que je fais).
Et sinon, ma trousse à outil habituelle :
– image_reponsive
– centre image
– css imbriqués
– insertion avancée d’images
Comment as-tu géré l’activation de la carte au clic sur l’accueil ? Avec @b_b on avait commencé à regarder les différentes options pour voir la moins pire...
Pour info, nos échanges (oct 18) :
> ▻https://github.com/CliffCloud/Leaflet.Sleep
– sur ordi : le déclenchement au hover est sensible et peut donc se faire même si on est en train de scroller et qu’on s’arrête juste pour regarder la carte.
– sur tel (Android + FF et Chrome) : Ne fonctionne pas sur mon tel : j’ai bien le bouton « Clic or hover... » mais il ne disparait pas au clic et la carte se déplace dessous.
> ►https://github.com/elmarquis/Leaflet.GestureHandling
J’ai retrouvé mon retour de l’époque : ▻https://www.mail-archive.com/spip-zone@rezo.net/msg45809.html
C’est mieux aujourd’hui :
– sur ordi : le 1er ctrl+scroll ne déclenche plus le zoom de FF mais ne zoome pas la carte pour autant (c’est mieux qu’avant). Le 2e ctrl+scroll déclenche le zoom carte.
– sur tel (Android + FF et Chrome) : c’est ok sauf que le zoom à 2 doigts déclenche parfois (pas souvent mais je n’arrive tjs pas à reproduire) le zoom du navigateur
Donc je dirais que le 2nd (Leaflet.GestureHandling ) est mieux...
La carte est activée dans tous les cas, mais elle est sous un <label > qui recouvre toute sa surface, et qui est semi-transparent histoire de renforcer l’impression que la carte est inactive. Toucher ce label déclenche un <input checkbox> qui est positionné immédiatement avant. Et une fois cet input décoché par le label, le label lui-même disparait, par un simple CSS.
Sinon, la carte est en fin de page, à la fois parce que c’est logique dans la hiérarchie de l’information, mais aussi parce que ça évite que l’usager soit bloqué dans son scroll. Et aussi : la hauteur de la carte est proportionnelle à la hauteur de l’écran (60vh), ce qui fait que dans tous les cas (même sur smartphone), l’usager pourra toujours trouver moyen de scroller en attrapant une zone de l’écran en dehors de la carte.
@jeanmarie j’avais regardé, l’idée est bonne mais elle ne permet pas de désactiver la carte une fois qu’on l’a activé.
@b_b je en sais pas si c’est un autre système ou quoi : ►https://ceseranupes.fr
Sur smartphone, le déplacement à 2 doigts fonctionne moyen, il a plus tendance à zoomer qu’à déplacer mais y a peut-être moyen de régler la sensibilité.
D’après le source ça utilise ►https://github.com/elmarquis/Leaflet.GestureHandling qu’on a déjà repéré ;)
Too bad...
Bon, au moins ils ont amélioré la lib vu les retours que je faisais il y a 2 ans :)