From 4566562900c3cb6819cbdfd15e8de873c4306c0b Mon Sep 17 00:00:00 2001
From: Bastyen <bastien.alvez@makina-corpus.com>
Date: Wed, 24 Jan 2024 12:50:21 +0100
Subject: [PATCH] improve card list style

---
 .../grw-touristic-content-card.scss                  |  2 --
 .../grw-touristic-content-card.tsx                   | 12 +++++++-----
 .../grw-touristic-contents-list.scss                 |  4 +++-
 .../grw-touristic-event-card.scss                    |  4 +---
 .../grw-touristic-event-card.tsx                     | 12 +++++++-----
 .../grw-touristic-events-list.scss                   |  4 +++-
 6 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/components/grw-touristic-content-card/grw-touristic-content-card.scss b/src/components/grw-touristic-content-card/grw-touristic-content-card.scss
index d684e7b..e34810e 100644
--- a/src/components/grw-touristic-content-card/grw-touristic-content-card.scss
+++ b/src/components/grw-touristic-content-card/grw-touristic-content-card.scss
@@ -11,8 +11,6 @@
 }
 
 :host {
-  display: flex;
-  flex-direction: column;
   a {
     color: var(--color-primary-app);
   }
diff --git a/src/components/grw-touristic-content-card/grw-touristic-content-card.tsx b/src/components/grw-touristic-content-card/grw-touristic-content-card.tsx
index 3167cea..be39c38 100644
--- a/src/components/grw-touristic-content-card/grw-touristic-content-card.tsx
+++ b/src/components/grw-touristic-content-card/grw-touristic-content-card.tsx
@@ -138,11 +138,13 @@ export class GrwTouristicContentCard {
           </div>
           <div class="touristic-content-sub-container">
             <div class="touristic-content-category-container">
-              <img
-                /* @ts-ignore */
-                crossorigin="anonymous"
-                src={touristicContentCategory.pictogram}
-              />
+              {touristicContentCategory && touristicContentCategory.pictogram && (
+                <img
+                  /* @ts-ignore */
+                  crossorigin="anonymous"
+                  src={touristicContentCategory.pictogram}
+                />
+              )}
               <div class="touristic-content-category-name">{touristicContentCategory.label}</div>
             </div>
             <div class="touristic-content-name">{this.touristicContent.name}</div>
diff --git a/src/components/grw-touristic-contents-list/grw-touristic-contents-list.scss b/src/components/grw-touristic-contents-list/grw-touristic-contents-list.scss
index 35e6322..a54d8c4 100644
--- a/src/components/grw-touristic-contents-list/grw-touristic-contents-list.scss
+++ b/src/components/grw-touristic-contents-list/grw-touristic-contents-list.scss
@@ -10,11 +10,12 @@
   width: 100%;
   height: 100%;
   overflow-y: auto;
-  width: 100%;
 }
 
 grw-touristic-content-card {
   width: 100% !important;
+  display: flex;
+  justify-content: center;
   margin: 0px 8px 8px 8px;
 }
 
@@ -33,6 +34,7 @@ grw-touristic-content-card {
   font-size: 22px;
   line-height: 28px;
   font-weight: 400;
+  font-family: var(--font-family);
 }
 
 .touristic-contents-list-container {
diff --git a/src/components/grw-touristic-event-card/grw-touristic-event-card.scss b/src/components/grw-touristic-event-card/grw-touristic-event-card.scss
index 6c77c9f..184b999 100644
--- a/src/components/grw-touristic-event-card/grw-touristic-event-card.scss
+++ b/src/components/grw-touristic-event-card/grw-touristic-event-card.scss
@@ -11,8 +11,6 @@
 }
 
 :host {
-  display: flex;
-  flex-direction: column;
   a {
     color: var(--color-primary-app);
   }
@@ -144,7 +142,7 @@
   }
 }
 
-.touristic-event-container {
+.touristic-event-card-container {
   width: 100%;
   max-width: 350px;
   .image {
diff --git a/src/components/grw-touristic-event-card/grw-touristic-event-card.tsx b/src/components/grw-touristic-event-card/grw-touristic-event-card.tsx
index f9cc3dc..cbd4479 100644
--- a/src/components/grw-touristic-event-card/grw-touristic-event-card.tsx
+++ b/src/components/grw-touristic-event-card/grw-touristic-event-card.tsx
@@ -138,11 +138,13 @@ export class GrwTouristicEvent {
           </div>
           <div class="touristic-event-sub-container">
             <div class="touristic-event-type-container">
-              <img
-                /* @ts-ignore */
-                crossorigin="anonymous"
-                src={touristicEventType.pictogram}
-              />
+              {touristicEventType && touristicEventType.pictogram && (
+                <img
+                  /* @ts-ignore */
+                  crossorigin="anonymous"
+                  src={touristicEventType.pictogram}
+                />
+              )}
               <div class="touristic-event-type-name">{touristicEventType.type}</div>
             </div>
             <div class="touristic-event-name">{this.touristicEvent.name}</div>
diff --git a/src/components/grw-touristic-events-list/grw-touristic-events-list.scss b/src/components/grw-touristic-events-list/grw-touristic-events-list.scss
index 213ca39..10e1fc5 100644
--- a/src/components/grw-touristic-events-list/grw-touristic-events-list.scss
+++ b/src/components/grw-touristic-events-list/grw-touristic-events-list.scss
@@ -10,11 +10,12 @@
   width: 100%;
   height: 100%;
   overflow-y: auto;
-  width: 100%;
 }
 
 grw-touristic-event-card {
   width: 100% !important;
+  display: flex;
+  justify-content: center;
   margin: 0px 8px 8px 8px;
 }
 
@@ -33,6 +34,7 @@ grw-touristic-event-card {
   font-size: 22px;
   line-height: 28px;
   font-weight: 400;
+  font-family: var(--font-family);
 }
 
 .touristic-events-list-container {