improve card list style

GeotrekCE · Jan 24, 2024 · 4566562 · 4566562
1 parent 153fc2c
commit 4566562
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 {