Carousel / cards pour HomePage

[TomBor]

En remplacement de la section avec les boutons de topics, on aurait un système de carousel ou cards qui permettrait un accès direct à l'article. Voir ci-dessous le mockup

Demande :

• les titres de rubriques sont cliquables
• le carousel / cards contient touts les articles de la rubrique
• le carousel / cards affiche en image une ressource map
• l'odre d'affichage est aléatoire (différent à chaque refresh et pour chaque utilisateur)

Carousel ou cards Le site utilise actuellement bootstrap 3.3.7 qui supporte bien les carousels mais qui ne supporte pas directement le système de cards. L'aternative est le component thumbnails Exemple de carousel accessible

Par contre Bootstrap 4 à un component de cards qu'il faudrait combiner à un carousel. Voir cet exemple. Dans ce cas, le fonctionnement serait valable en Desktop (plusieurs cards afficher) et en mobile (une card à la fois). Sauf que passer à la version 4 comporte des risques et demande peut être du temps.

Pour résumé l'idée principale était d'afficher plusieurs articles à la fois en largeur desktop pour arriver à un seul article affiché sur mobile

[naholyr]

A priori en me basant sur cette astuce je devrais arriver à nos fins en restant sur bootstrap 3 et en utilisant le carousel intégré. Concernant l'accessibilité du carousel je vais appliquer les règles de base indiquées dans l'article sans aller très loin car il est possible qu'il y ait beaucoup de retours sur ce point.

[naholyr]

Après un moment à tourner en rond, à patcher bootstrap, et à chercher des alternatives, je pense que la meilleure solution est :

• en mode mobile, utiliser le carousel standard bootstrap (indicators, swipe, etc. déjà gérés)
• ne pas essayer de le modifier pour le passer en mode "cards" car ça casse le comportement sur mobile
• sur desktop utiliser des simples blocs alignés horizontalement et recoder le carousel en jquery
• afficher l'un ou l'autre selon la résolution

Je n'ai pu trouver aucune solution qui permette de marier les deux besoins sans casser l'un ou l'autre :(

[naholyr]

L'autre option que je n'ai pas encore explorée étant de larguer bootstrap pour cette partie carousel et d'ajouter une autre lib, j'ai particulièrement en tête slick qui m'a semblé faire très bien le job. http://kenwheeler.github.io/slick/

[TomBor]

Merci Nicolas pour ton retour !

À te lire, ta dernière solution semble la meilleure et les possibilités de slick répondent à nos besoins desktop et mobile. En plus l'accessibilité semble être prévu. Je pense au center mode pour mobile qui suggère bien un avant après et en ajoutant des dots ça serait vraiment bien. Et le mode multiple items pour desktop est parfait. Et le lazy loading serait intéressant sachant que tous ses carousel vont demander de charger une cinquantaine d'images... Déjà que l'on a la vidéo, si on peut limiter le poids de la homepage c'est encore mieux.

Le sam. 27 oct. 2018 18:21, Nicolas Chambrier notifications@github.com a écrit :

L'autre option que je n'ai pas encore explorée étant de larguer bootstrap pour cette partie carousel et d'ajouter une autre lib, j'ai particulièrement en tête slick qui m'a semblé faire très bien le job. http://kenwheeler.github.io/slick/

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/AtelierCartographie/eatlas/issues/181#issuecomment-433634345, or mute the thread https://github.com/notifications/unsubscribe-auth/AH7-mW0VMY8SjdE9geEOL6Lzgog2kQUEks5upIf-gaJpZM4X4R4J .

[naholyr]

Le résultat est très correct avec slick :D nos chemins se sont croisés et j'avais effectivement utilisé le centerMode. J'ai appliqué une bonne partie des styles et ça fonctionne bien même avec des données pourries :

Il me reste normalement juste à :

• [x] Définir les options responsive (cette librairie dispose d'une option "response" où l'on définit, breakpoint par breakpoint, les settings) où je jouerai avec le nb de slides à afficher
• [x] Trouver le bon filtre pour l'image de fond (éclaircir + flouter)
• [x] Explorer l'option "lazyLoading" Option non retenue à cause de son coût :
  • Nécessite jquery.animate, et donc de charger le package jQuery complet au lieu du "slim" actuel (cf. #170)
  • Force l'opacité à 1 (ce qui n'est pas un vrai problème, au pire !important à la rescousse, mais qui peut cacher d'autres personnalisations à ajouter, non documentées)
  • À la place, je vais utiliser les événements pour attribuer le background-image au moment où la slide est rendue visible ou sur le point de l'être (sur les bords)
• Corriger les bugs trouvés :
  • [x] quand il y a un nombre pair d'items, le centerMode ne fonctionne pas bien, à voir si je peux m'en sortir mieux qu'en dupliquant un article de la liste En fait ça ne concerne que le "slidesToShow" et pas le nb global d'items, et au final avec la bonne résolution ça n'est pas si choquant, à peaufiner
  • [x] quand on démarre sur le dernier slide il y a des bugs d'initialisation connus, il faudra simplement exclure cette valeur de départ de la randomisation (cf. kenwheeler/slick#1059)
• [x] Vérifier s'il n'y a pas d'autres bugs :)

[naholyr]

À noter le surcoût au chargement : 500 octets de CSS et 10 Ko de JS (légèrement supérieur au surcoût d'ajout du composant "carousel" à notre build de bootstrap, mais sans savoir ce qu'il aurait fallu ajouter au final comme code pour le faire fonctionner, donc je pense qu'on a une solution optimale).

[naholyr]

Normalement c'est tout bon, le lazy-loading "fait maison" est assez basique mais permet de décaler le chargement des images tout en prenant normalement en compte les différents edge-cases (nombre d'items visibles, etc). Si jamais il pose des problèmes, on peut le désactiver ligne 255 de HomePage.js, en définissant lazyLoading = false. Je n'ai pas mis de configuration spécifique pour ça, tout en le laissant assez facilement débrayable le temps qu'on soit sûr du chemin choisi :)

[TomBor]

Merci @naholyr ! Grâce au passage à slick, on répond et s'adapte du formal large au mobile. C'est top ! J'ai peaufiné dans le commit b2576c7 le rendu du carousel et le comportement des liens de topic et d'articles.

@jri-sp à tester en PPRD, la branche staging est à jour avec master

[jri-sp]

Hello! c'est déployé en pprd!

[TomBor]

Merci @jri-sp Rien à signaler, le comportement est bien celui attendu, du coup je propose de déployé en prod !

[jri-sp]

C'est maintenant déployé en prod aussi !

[TomBor]

Merci @jri-sp ! Je pense qu'il faut faire un yarn rebuild-site pour que la page d'accueil soit bien régénérée en public

[jri-sp]

Bonjour, J'ai cette erreur lorsque je lance un rebuild-site en prod (ça fonctionne pour la pprd):

$ docker-compose exec  backend npm run rebuild-site

> server@1.0.0 rebuild-site /eatlas/server
> cross-env 'NODE_CONFIG_DIR=${NODE_CONFIG_DIR:../config}' 'ES_AUTO_MIGRATION=0' node bin/rebuild-site.js | bunyan -o short

08:02:52.366Z  INFO eatlas: Adding connection to http://es:9200/ (domain=elasticsearch)
08:02:53.778Z  INFO eatlas: 1. Rebuild assets
08:02:53.780Z  INFO eatlas: 2. Rebuild all HTML contents
08:02:54.595Z  INFO eatlas: WRITE OK /eatlas/data/uploads/public/generated/fr/recherche.html
08:02:54.595Z  INFO eatlas: WRITE OK /eatlas/data/uploads/public/generated/fr/a-propos.html
08:02:54.595Z  INFO eatlas: WRITE OK /eatlas/data/uploads/public/generated/fr/introuvable.html
08:02:54.595Z  INFO eatlas: WRITE OK /eatlas/data/uploads/public/generated/fr/mentions-legales.html
  eatlas:path { resource:
  eatlas:path    { id: '6',
  eatlas:path      name: 'Tentatives de régulations',
  eatlas:path      resourceId: '',
  eatlas:path      description_fr: '<p>Pour gérer les interdépendances des acteurs transnationaux et la multiplication des problèmes transfrontières dans l’espace mondial, les tentatives de régulation portent sur un nombre croissant de domaines : commerce et finance, questions sociales, humanitaires et environnementales, etc. Aux côtés de la négociation et du droit international qui constituent les outils classiques du multilatéralisme international et régional, la régulation s’incarne aussi à travers les politiques d’intervention et le recours croissant au droit privé et aux instruments de marché. Mais la multiplication des régimes internationaux et des forums de négociation conduit à surinvestir certains enjeux, tandis que l’absence de leadership laisse d’autres questions en suspens.</p>\n',
  eatlas:path      description_en: '<p>To manage the interdependence of international actors and the increase in the world’s transborder issues, there are attempts to regulate in a growing number of areas: in trade and finance, in social, humanitarian, and environmental issues, and so on. While negotiation and international law are the traditional tools of international and regional multilateralism in attempting to regulate world issues, regulation is also contained in intervention policies, the increased use of private law and implementation of market devices. But the proliferation of international regimes and negotiation forums has led to overinvestment in certain spheres, while the absence of leadership leaves other questions unresolved.</p>\n' },
  eatlas:path   topics:
  eatlas:path    [ { id: '0',
  eatlas:path        name: 'Introduction',
  eatlas:path        resourceId: '',
  eatlas:path        description_fr: '',
  eatlas:path        description_en: '',
  eatlas:path        name_en: 'Introduction',
  eatlas:path        pageUrl: 'https://espace-mondial-atlas.sciencespo.fr/fr/rubrique-introduction.html' },
  eatlas:path      { id: '1',
  eatlas:path        name: 'Contrastes et inégalités',
  eatlas:path        resourceId: '',
  eatlas:path        description_fr: '<p></p>\n',
  eatlas:path        description_en: '<p></p>\n',
  eatlas:path        name_en: 'Contrasts and Inequalities',
  eatlas:path        pageUrl: 'https://espace-mondial-atlas.sciencespo.fr/fr/rubrique-contrastes-et-inegalites.html' },
  eatlas:path      { id: '2',
  eatlas:path        name: 'Mobilités',
  eatlas:path        resourceId: '',
  eatlas:path        description_fr: '<p>L’histoire de l’humanité est faite de déplacements permanents, volontaires ou forcés, dont l’héritage s’incarne dans un métissage incontestable. Croisés avec des évolutions démographiques contrastées à travers l’espace mondial, les flux migratoires transforment sociétés et territoires. Les défis de l’urbanisation, en termes d’inégalités sociales et de problèmes environnementaux, reflètent la complexité du phénomène migratoire, dont l’augmentation, la diversification et l’entrelacement excluent toute explication simple. La multicausalité des déplacements de population impose la (re)formulation de politiques publiques qui soient en mesure de protéger les plus vulnérables, à l’intérieur comme au-delà des frontières étatiques.</p>\n',
  eatlas:path        description_en: '<p>Human mobility is as complex as it is ancient. The history of humanity is one of permanent movement, voluntary or forced, and its heritage is undeniably manifested in a mix of origins and cultures. Crosscut by contrasting demographic developments throughout the world, migratory flows are transforming societies and territories. The challenges of growing urbanization, in terms of social inequalities and environmental problems, mirror the complexity of migration, whose increased, varied and interlinked causes defy any simple explanation. The multiple origins of population displacement necessitate a (re)formulation of public policies that are able to protect the most vulnerable, both within and without state borders.</p>\n',
  eatlas:path        name_en: 'Mobilities',
  eatlas:path        pageUrl: 'https://espace-mondial-atlas.sciencespo.fr/fr/rubrique-mobilites.html' },
  eatlas:path      { id: '3',
  eatlas:path        name: 'Stratégies des acteurs internationaux',
  eatlas:path        resourceId: '',
  eatlas:path        description_fr: '<p>Loin de se limiter aux seuls États, l’espace mondial met en relation un nombre croissant d’acteurs transnationaux aux intérêts et aux stratégies différenciés. Ils interagissent avec des pratiques étatiques que renouvellent les pays émergents, le multilatéralisme intergouvernemental et la persistance de liens historiques, notamment postcoloniaux. Aux organisations formelles, telles que les ONG, les firmes transnationales, les banques et les médias, s’ajoutent les structures informelles (sociétés civiles, réseaux de criminalité transnationale, etc.) et les individus (entrepreneurs identitaires et religieux, investisseurs financiers, etc.).</p>\n',
  eatlas:path        description_en: '<p>Far from being limited only to nation-states, the global space permits contact between a growing number of transnational actors with different interests and strategies. While state action is being renewed through emerging countries, intergovernmental multilateralism, and enduring historical ties, particularly post-colonial ones, the category of non-state actors is constantly expanding: formal organizations, such as NGOs, international companies, banks and media are being joined by informal structures (civil societies, transnational criminal networks, etc.) and individuals (identity and religious entrepreneurs, financial investors, and so on). But the increasing number of these actors does nothing to efface the power relationships that shape the global space.</p>\n',
  eatlas:path        pageUrl: 'https://espace-mondial-atlas.sciencespo.fr/fr/rubrique-strategies-des-acteurs-internationaux.html' },
  eatlas:path      { id: '4',
  eatlas:path        name: '(In)sécurités',
  eatlas:path        resourceId: '',
  eatlas:path        description_fr: '<p>L’espace mondial comprend des formes variées d’(in)sécurités qui s’émancipent du cadre étatique et militaire. À la guerre, dans toutes ses transformations contemporaines, s’ajoute la menace quotidienne d’insécurités multisectorielles et interdépendantes. Prendre en compte la notion de sécurité humaine permet de mieux saisir les recompositions de la puissance, les nouvelles formes de conflit, les enjeux de la prolifération d’armes, du terrorisme et des interventions internationales. La sécurité humaine autorise aussi une acception plus large de l’idée de paix, qui n’est plus seulement l’absence de conflit, mais englobe également la réduction des inégalités sociales et économiques et de la violence structurelle qui mettent le monde en tension(s).</p>\n',
  eatlas:path        description_en: '<p>The global space includes various forms of (in)security which are outside the state and military framework. In addition to war—in all its contemporary metamorphoses—there is the daily threat of multisectoral and interdependent insecurity. An approach focused on human security allows us to better understand the reconfiguration of power, new conflicts, and the challenges of proliferation, terrorism, and international peacekeeping and peacebuilding initiatives. In addition, it contributes to a fuller understanding of the idea of peace, which is not merely the absence of conflict but also includes the reduction of social and economic inequality and structural violence, all of which create tension(s) in the world.</p>\n',
  eatlas:path        name_en: '(In)securities',
  eatlas:path        pageUrl: 'https://espace-mondial-atlas.sciencespo.fr/fr/rubrique-(in)securites.html' },
  eatlas:path      { id: '5',
  eatlas:path        name: 'Ressources',
  eatlas:path        resourceId: '',
  eatlas:path        description_fr: '<p>Si les ressources, produites ou extraites, font l’objet d’appropriations, de convoitises et d’échanges depuis des millénaires, la mondialisation économique a complexifié les relations d’interdépendance autour de leur commerce et accéléré leur dégradation au détriment de communautés et d’écosystèmes vulnérables (insécurité alimentaire, stress hydrique, catastrophes naturelles, biodiversité menacée, etc.). Les ressources naturelles sont inégalement réparties à travers l’espace mondial, mais les effets de leur consommation et de leur dégradation dépassent les frontières. Problème complexe, transnational et multi-acteurs, le dérèglement climatique résulte de comportements individuels et collectifs et de choix énergétiques localisés aux conséquences globalisées.</p>\n',
  eatlas:path        description_en: '<p>Resources, whether produced or extracted, are essential to life and the mainsprings of all activity: as such, they have been envied, seized and exchanged for thousands of years. Economic globalization has made the interdependent relationships created by the trade in resources more complex, while accelerating their deterioration to the detriment of communities and vulnerable ecosystems (food insecurity, water stress, natural disasters, endangered biodiversity, and so on). Although natural resources are unequally divided throughout the world, the effects of their consumption and deterioration go beyond frontiers. Climate disturbance is a complex international problem involving numerous agents—the result of individual and collective behaviors and localized energy choices with global consequences.</p>\n',
  eatlas:path        name_en: 'Resources',
  eatlas:path        pageUrl: 'https://espace-mondial-atlas.sciencespo.fr/fr/rubrique-ressources.html' },
  eatlas:path      { id: '6',
  eatlas:path        name: 'Tentatives de régulations',
  eatlas:path        resourceId: '',
  eatlas:path        description_fr: '<p>Pour gérer les interdépendances des acteurs transnationaux et la multiplication des problèmes transfrontières dans l’espace mondial, les tentatives de régulation portent sur un nombre croissant de domaines : commerce et finance, questions sociales, humanitaires et environnementales, etc. Aux côtés de la négociation et du droit international qui constituent les outils classiques du multilatéralisme international et régional, la régulation s’incarne aussi à travers les politiques d’intervention et le recours croissant au droit privé et aux instruments de marché. Mais la multiplication des régimes internationaux et des forums de négociation conduit à surinvestir certains enjeux, tandis que l’absence de leadership laisse d’autres questions en suspens.</p>\n',
  eatlas:path        description_en: '<p>To manage the interdependence of international actors and the increase in the world’s transborder issues, there are attempts to regulate in a growing number of areas: in trade and finance, in social, humanitarian, and environmental issues, and so on. While negotiation and international law are the traditional tools of international and regional multilateralism in attempting to regulate world issues, regulation is also contained in intervention policies, the increased use of private law and implementation of market devices. But the proliferation of international regimes and negotiation forums has led to overinvestment in certain spheres, while the absence of leadership leaves other questions unresolved.</p>\n',
  eatlas:path        pageUrl: 'https://espace-mondial-atlas.sciencespo.fr/fr/rubrique-tentatives-de-regulations.html' } ] } +0ms
{"name":"eatlas","hostname":"65215912ec7e","pid":192,"level":60,"err":{"message":"Topic not found","name":"Error","stack":"Error: Topic not found\n    at getTopicSlug (/eatlas/server/lib/resource-path.js:21:11)\n    at exports.pagePath (/eatlas/server/lib/resource-path.js:37:11)\n    at resource (/eatlas/server/lib/generator-utils.js:86:19)\n    at exports.getUrl (/eatlas/server/lib/generator-utils.js:407:64)\n    at render (/eatlas/server/lib/html-generator.js:93:26)\n    at exports.generateTopicHTML (/eatlas/server/lib/html-generator.js:294:10)\n    at <anonymous>\n    at process._tickCallback (internal/process/next_tick.js:189:7)"},"msg":"Topic not found","time":"2018-10-30T08:02:59.159Z","v":0}
08:02:59.159Z FATAL eatlas: Topic not found
    Error: Topic not found
        at getTopicSlug (/eatlas/server/lib/resource-path.js:21:11)
        at exports.pagePath (/eatlas/server/lib/resource-path.js:37:11)
        at resource (/eatlas/server/lib/generator-utils.js:86:19)
        at exports.getUrl (/eatlas/server/lib/generator-utils.js:407:64)
        at render (/eatlas/server/lib/html-generator.js:93:26)
        at exports.generateTopicHTML (/eatlas/server/lib/html-generator.js:294:10)
        at <anonymous>
        at process._tickCallback (internal/process/next_tick.js:189:7)

[TomBor]

Merci @jri-sp C'est peut-être lié à l'erreur lorsque l'on veut publier un article qui touche aussi les topics. Peut être en réindexant les topics dans elastic search. J'ai plus la commande en tête. (@naholyr)

[jri-sp]

Commande rebuild-site bien passée, voir https://github.com/AtelierCartographie/eatlas/issues/183#issuecomment-434224156

[TomBor]

Merci ! Étonnamment la page d'accueil FR n'est pas à jour. Mais je ne comprends pas pourquoi, est-ce que c'est lié à la redirection. Il reste une page générée à l'adresse / et du coup la nouvelle page à l'adresse /fr/ se retrouve écrasé par la redirection / > /fr/ ? @jri-sp @naholyr

[TomBor]

Il faudrait alors faire le vide dans le dossier public/generated

Soit tout supprimer et relancer la génération du site ou ne garder que les dossiers/fichiers suivants :

/en
/fr
/media
robots.txt
sitemap.xml

[TomBor]

Désolé pour le dérangement à nouveau.

La page d'accueil est bien à jour ! Mais on a un nouveau problème, plus aucun média ne s'affiche. Les liens direct vers les jpeg affiche cette page

Et dans la console, les pages html renvoie cette erreur net::ERR_TOO_MANY_REDIRECTS

[jri-sp]

Je pense que ça devrait être bon maintenant. J'ai supprimé generated et recréé le contenu avec rebuild-site. Ça a fait apparaître deux problèmes que j'ai corrigé dans la config nginx.

[TomBor]

Merci beaucoup Jérémy !

@naholyr avant de clore l'issue et la bonne mise en place de cette nouvelle page d'accueil. Je remarque que l'aléatoire des carousels ne fonctionnent pas. Alors qu'en local c'était bien le cas.

[TomBor]

@naholyr j'ajoute un petit détail sur le lazy loading 'fait maison', il faudrait prendre en compte le cas où est affiché le dernier item et le premier.

[TomBor]

Le problème du LazyLoading vient du statut des slick, certaines sont current quand d'autres sont cloned pour permettre de boucler (infinite: true)

[naholyr]

Pour la randomization c'était très bête : j'appliquais un Math.random() dans le composant, qui est donc bien appelé à chaque chargement en preview… mais une seule fois lors de la génération. J'ai donc inclus un bout de code pour faire cette randomization côté client.

Je sèche un peu pour le lazy-loading, je ne me base pas sur les classes car effectivement elles sont difficiles à généraliser, mais sur l'index du slide (en l'occurrence l'attribut data-slick-index). En re-testant plusieurs scénarios j'ai trouvé un cas où je ratais un slide, mais c'est l'inverse du cas que tu montres (chez moi c'est avec slideToShow = 2 + centerMode = true, comme ici, mais c'est dans le cas où le dernier slide est actif, et donc celui de droite est le premier, et dans ce cas il n'est pas chargé).

Je n'ai donc pas réussi à reproduire le scénario présenté ici, mais j'ai changé la manière d'identifier le slide à afficher. Il faudrait re-tester. Est-il possible, dans le cas où il reste toujours un bug, de laisser le lazy-loading activé en prod afin que je puisse aller voir avec les détails que tu m'auras fourni (principalement quelle était la slide initiale, et quels mouvements avant d'avoir le bug) ?

[TomBor]

Merci @naholyr, on va tester en PPRD d'abord, pour voir si ça change quelque chose.