L'agrandissement pour les images d'évènements est moche :
ll faut donc changer ça.
Definition of done
The ticket can be considered as done if all theses criteria are completed:
[ ] L'image est centrée en mode plen écran
[ ] Si l'image d'origine est plus petite que l'écran, elle n'est pas agrandie plus que sa taille d'origine (éviter la pixellisation)
[ ] Si l'image d'origine est plus grande que la taille de l'écran, alors elle est réduite pour ne pas dépasser de l'écran
[ ] L'image est directement affichée sur un fond noir transparent (pas de modal)
[ ] J'ai une croix pour fermer l'image en haut à droite
[ ] Je peux fermer l'image en cliquant sur la zone noire
Mock-Up and Designs
Le résultat devrait ressembler à ça (avec la croix en haut à droite en plus - utiliser la même croix que l'actuel, juste adapter la transparence et sans fond)
[ ] Corriger le backdrop (ie la zone noire d'arrière plan) pour le rendre plus sombre
[ ] Afficher l'image avec <img>
[ ] Ajouter un max-height et max-width pour que l'image soit retailée automatiquement si l'écran est trop petit (tester avec des écrans très petits - utiliser le simulateur de portable sur navigateur)
[ ] Encadrer le bloc <img> dans un bloc <Paper> pour ajouter une ombre sous l'image avec la prop elevation
[ ] Ajouter la croix en haut à droite avec une position absolute
Description
L'agrandissement pour les images d'évènements est moche :
ll faut donc changer ça.
Definition of done
The ticket can be considered as done if all theses criteria are completed:
Mock-Up and Designs
Le résultat devrait ressembler à ça (avec la croix en haut à droite en plus - utiliser la même croix que l'actuel, juste adapter la transparence et sans fond)
Technical strategy
<img>
<img>
dans un bloc<Paper>
pour ajouter une ombre sous l'image avec la prop elevation