Tweak event-stripe component again

socreatory · Oct 7, 2024 · 5917704 · 5917704
1 parent bed1bbe
commit 5917704
Showing 1 changed file with 37 additions and 16 deletions.
diff --git a/lib/components/event-stripe/_event-stripe.scss b/lib/components/event-stripe/_event-stripe.scss
@@ -17,16 +17,24 @@
   list-style-type: none;
 }
 
+.event-stripe__wrapper {
+  .event-stripe {
+    @include for-desktop-up {
+      min-height: 8.5rem;
+    }
+  }
+}
+
 .event-stripe {
-  @include for-tablet-landscape-up {
+  @include for-tablet-portrait-up {
     padding: $spacer-xs $spacer-sm;
   }
 
   position: relative;
 
   display: grid;
   grid-column-gap: $spacer-sm;
-  grid-row-gap: $spacer-2xs;
+  grid-row-gap: $spacer-xs;
   grid-template-columns: auto 1fr auto;
   grid-template-rows: auto;
 
@@ -44,8 +52,8 @@
 
   .pills {
     grid-column: 3;
-    grid-row: 1;
-    // align-self: start;
+    grid-row: 2;
+    justify-self: end;
   }
 }
 
@@ -59,7 +67,7 @@
 
 .event-stripe__title {
   display: block;
-  grid-column-end: 3;
+  grid-column-end: 4;
   grid-column-start: 1;
   grid-row: 1;
 
@@ -118,30 +126,38 @@
 }
 
 .event-stripe__body {
+  @include for-tablet-portrait-up {
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 2;
+  }
+
   display: inline-grid;
   grid-column-end: 3;
   grid-column-gap: $spacer-xs;
   grid-column-start: 1;
   grid-row: auto;
   grid-row-gap: $spacer-2xs;
-  grid-template-columns: auto 1fr;
+  grid-template-columns: 1fr;
   grid-template-rows: 2;
-
-  padding: $spacer-2xs 0;
+  align-items: center;
 }
 
 .event-stripe__avatar {
+  @include for-tablet-portrait-up {
+    grid-column: 1;
+    grid-row: 1/3;
+  }
+
   display: flex;
-  grid-column: 1;
-  grid-row: 1/3;
+  grid-row: 3;
   flex-direction: row;
   flex-wrap: wrap;
   gap: $spacer-3xs;
   align-items: baseline;
   justify-content: baseline;
 
   .avatar {
-    display: inline-block;
+    display: block;
     align-self: flex-end;
 
     width: $spacer-lg;
@@ -152,19 +168,24 @@
 }
 
 .event-stripe__date {
+  @include for-tablet-portrait-up {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
   @extend %heading-font-bold;
 
-  grid-column: 2;
-  grid-row: 1;
   font-size: $font-size-md;
   line-height: $heading-line-height-sm;
 }
 
 .event-stripe__location {
-  display: block;
-  grid-column: 2;
-  grid-row: 2;
+  @include for-tablet-portrait-up {
+    grid-column: 2;
+    grid-row: 2;
+  }
 
+  display: block;
   font-size: $font-size-md;
   line-height: $heading-line-height-sm;
 }