refonte visuelle des pages talks - #2362
Conversation
| <a class="talk-info-link" href="{{ talk.getJoindinUrl }}"><i class="fa fa-comments"></i> Fiche joind.in</a> | ||
| </li> | ||
| {% endif %} | ||
| {% macro sectionTitle(label) %} |
There was a problem hiding this comment.
I y a le composant SectionTitle maintenant pour ça.
| <div class="container speaker-title-container"> | ||
| <div class="col-md-12"> | ||
| <h2>{% if speakers|length > 1 %}Les speakers{% else %}Le speaker{% endif %}</h2> | ||
| <div class="w-full max-w-5xl mx-auto aspect-video rounded-2xl overflow-hidden bg-black"> |
There was a problem hiding this comment.
| <div class="w-full max-w-5xl mx-auto aspect-video rounded-2xl overflow-hidden bg-black"> | |
| <div class="w-full aspect-video rounded-2xl overflow-hidden bg-black"> |
Pas besoin de limiter vu que c'est déjà contenu dans un container.
| <div class="flex flex-wrap items-center gap-3 border-t border-neutre-300 pt-3"> | ||
| <div class="flex items-center gap-0.5" aria-label="Note : {{ comment.rating }} sur 5"> | ||
| {% for i in 1..5 %} | ||
| <twig:ux:icon name="mingcute:star-fill" |
There was a problem hiding this comment.
Il faut récupérer l'icône dans le repo avec bin/console ux:icon:import mingcute:star-fill et commit le fichier.
| </div> | ||
| {% endif %} | ||
|
|
||
| {% if talk.getTweetsHasArray|length > 0 %} |
There was a problem hiding this comment.
Les tweets et posts bluesky sont trop serrés dans ce bloc :
Je pense qu'il faudrait tester de les mettre en dessous du bloc qui contient la description et la sidebar, pour que ça fasse la largeur des deux.
| { shown: talk.hasSlidesUrl, url: talk.getSlidesurl, icon: 'mingcute:presentation-1-fill', label: 'Slides' }, | ||
| { shown: talk.hasBlogPostUrl, url: talk.getBlogPostUrl, icon: 'mingcute:rss-fill', label: 'Article de blog' }, | ||
| { shown: talk.hasInterviewUrl, url: talk.getInterviewUrl, icon: 'mingcute:news-2-fill', label: 'Interview' }, | ||
| { shown: talk.hasJoindinId, url: talk.getJoindinUrl, icon: 'mingcute:message-3-fill', label: 'Fiche joind.in' }, | ||
| { shown: talk.hasOpenfeedbackPath, url: talk.getOpenfeedbackUrl, icon: 'mingcute:message-3-fill', label: 'Fiche openfeedback.io' }, | ||
| ]|filter(link => link.shown) %} |
There was a problem hiding this comment.
Pareil ces icones il faut les importer en local dans le repo.
Sans ça, ils sont récupérés à la volée via un appel http pour chaque (avec du cache, mais qui saute à chaque deploy), et on pourrait se retrouver avec des icones qui changent.
https://symfony.com/bundles/ux-icons/current/index.html#imported-icons
| * sur `templates/site/news/list.html.twig` dont elle s'inspire. | ||
| */ | ||
|
|
||
| /* Icônes mingcute inlinées : on ne peut pas appeler <twig:ux:icon> depuis le JS. */ |
There was a problem hiding this comment.
Peut-être qu'avec les icones en local et en déplaçant ce js dans /assets y'aurait moyen d'éviter ce doublement.
Pas besoin dans cette PR mais à tester un jour.
bd3e828 to
5feca19
Compare
There was a problem hiding this comment.
On a déjà celle-là : https://github.com/afup/web/blob/master/assets/icons/mdi/linkedin.svg
Elle est différente mais peut-être pas besoin de faire de doublon ?
There was a problem hiding this comment.
C'est les icone que j'avais oublié que télécharger dans un précédente PR, et j'avais complètement zappé les icones déjà utilisées dans le footer.
C'est corrigé
There was a problem hiding this comment.
There was a problem hiding this comment.
There was a problem hiding this comment.
Ça fait doublon avec fa:twitter qui est dans cette PR déjà non ?
2 participants
Page de liste
Page d'un talk
Quelques infos
La pagination n'est pas visible sur la nouelle version a cause du nombre de talks disponibles en local, c'est la même que la page des meetups.
Je n'ai pas pu reproduire tous les cas possibles d'affichage, je ferai une passe en prod dans un second temps pour corriger d'éventuels problèmes.
P.S. j'ai prévu de revoir de JS des pages avec instantsearch, et il faudrait passer sur une version plus récente. La version que nous utilisons date de mai 2018