Merge pull request #88 from GeotrekCE/bpo-style_improvements

fix: improve card image style
GeotrekCE · Mar 6, 2024 · a21c4e7 · a21c4e7
2 parents f4629b2 + e08c9c4
commit a21c4e7
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 3 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
@@ -166,6 +166,8 @@
   .touristic-content-img {
     width: 250px;
     height: 100%;
+    border-bottom-left-radius: var(--border-radius, 12px);
+    border-top-right-radius: var(--border-radius, 0px);
   }
 }
 

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
@@ -182,7 +182,13 @@ export class GrwTouristicContentCard {
                 loading="lazy"
               />
             ) : (
-              <div></div>
+              <img
+              /* @ts-ignore */
+              crossorigin="anonymous"
+              class="image default-touristic-content-img"
+              src={defaultImageSrc}
+              loading="lazy"
+            />
             )}
           </div>
           <div part="touristic-content-sub-container" class="touristic-content-sub-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
@@ -166,6 +166,8 @@
   .touristic-event-img {
     width: 250px;
     height: 100%;
+    border-bottom-left-radius: var(--border-radius, 12px);
+    border-top-right-radius: var(--border-radius, 0px);
   }
 }
 

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
@@ -173,7 +173,13 @@ export class GrwTouristicEvent {
                 loading="lazy"
               />
             ) : (
-              <div></div>
+              <img
+              /* @ts-ignore */
+              crossorigin="anonymous"
+              class="image default-touristic-event-img"
+              src={defaultImageSrc}
+              loading="lazy"
+            />
             )}
           </div>
           <div part="touristic-event-sub-container" class="touristic-event-sub-container">

diff --git a/src/components/grw-trek-card/grw-trek-card.scss b/src/components/grw-trek-card/grw-trek-card.scss
@@ -132,7 +132,9 @@
     height: 100%;
     .trek-img {
       width: 250px;
-      height: 200px;
+      height: inherit;
+      border-bottom-left-radius: var(--border-radius, 12px);
+      border-top-right-radius: var(--border-radius, 0px);
     }
   }
 }