fix: event listing page styles (#157)

* fix: APPS-3340 adjust spacing and color of event listing page header

* fix: APPS-3182 change Film Format in filter dropdown to Screening Format

* fix: APPS-3190 adjust font size of title in blockCardThreeColumn

* fix: APPS-3192 adjust spacing between category pills in blockCardThreeColumn

* fix: APPS-3188 adjust spacing between date, image, and meta in blockCardThreeColumn

* fix: APPS-3199 change divider between events to be solid

* fix: APPS-3344 wrap blockCardThreeColumn pills and adjust row and column gaps

* fix: APPS-3184 adjust widths of the Done and Clear buttons in the filter dropdowns to match

* fix: APPS-3345 adjust padding around event list section to match design

* fix: remove blank lines

* fix: put updated styles in appropriate media queries

Author: axamei

composables/useIndexAggregator.js

@@ -23,7 +23,7 @@ export async function useIndexAggregator() {
                 size: 100
               }
             },
-            'Film Format': {
+            'Screening Format': {
               terms: {
                 field: 'ftvaScreeningFormatFilters.title.keyword',
                 size: 100

pages/events/index.vue

@@ -360,7 +360,7 @@ function transformEsResponseToFilterGroups(aggregations: Aggregations): FilterGr
     let searchField
     if (key === 'Event Type') {
       searchField = 'ftvaEventTypeFilters.title.keyword'
-    } else if (key === 'Film Format') {
+    } else if (key === 'Screening Format') {
       searchField = 'ftvaScreeningFormatFilters.title.keyword'
     }
 
@@ -521,6 +521,7 @@ const parseFirstEventMonth = computed(() => {
         :section-title="heading.titleGeneral"
       />
       <SectionWrapper
+        class="main"
         ref="el"
         theme="paleblue"
       >
@@ -642,10 +643,18 @@ const parseFirstEventMonth = computed(() => {
     align-items: center;
     text-align: center;
     max-width: 787px;
+    padding-top: var(--space-2xl);
+    padding-bottom: 0;
   }
 
   .header :deep(.section-title) {
-    color: var(--heading-grey);
+    color: $heading-grey;
+    line-height: 1;
+    margin-bottom: var(--space-l);
+  }
+
+  .main {
+    padding-top: var(--space-xl);
   }
 
   .full-width {
@@ -734,6 +743,24 @@ const parseFirstEventMonth = computed(() => {
     }
   }
 
+  .date-filter :deep(.vue-date-picker .action-row button),
+  .filters-dropdown :deep(.action-row button) {
+    padding: 10px 18px;
+    line-height: 15px;
+
+    >.label {
+      font-family: var(--font-secondary);
+      font-size: 15px;
+      line-height: 15px;
+      text-transform: capitalize;
+    }
+
+    .svg__icon-close {
+      height: 20px;
+      width: 20px;
+    }
+  }
+
   .remove-filters {
     margin-top: 0;
     margin-bottom: 0;
@@ -763,6 +790,12 @@ const parseFirstEventMonth = computed(() => {
     letter-spacing: 0.8px;
   }
 
+  :deep(.block-card-three-column .meta .floating-slot) {
+    flex-wrap: wrap;
+    column-gap: 10px;
+    row-gap: 8px;
+  }
+
   :deep(.base-calendar) {
     max-width: 1000px;
     padding-top: 32px;
@@ -779,6 +812,37 @@ const parseFirstEventMonth = computed(() => {
     padding: 2.5%;
   }
 
+  @media(min-width: 1025px) {
+    :deep(.section-teaser-list) {
+      padding: var(--space-xl);
+    }
+
+    :deep(.section-teaser-list .list-item) {
+      border-bottom: 1px solid $page-blue;
+
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+
+    :deep(.block-card-three-column) {
+      gap: 45px;
+    }
+
+    :deep(.block-card-three-column .day-month-date) {
+      flex: 0.7;
+    }
+
+    :deep(.block-card-three-column .card-meta) {
+      padding: 0;
+    }
+
+    :deep(.block-card-three-column .meta .title) {
+      font-size: 30px;
+      line-height: 32px;
+    }
+  }
+
   @media(max-width: 1200px) {
     .base-calendar {
       max-width: 900px;
@@ -800,6 +864,7 @@ const parseFirstEventMonth = computed(() => {
         top: 65px;
         z-index: 1000;
         background-color: var(--pale-blue);
+        padding: 20px;
       }
     }
 
@@ -822,6 +887,15 @@ const parseFirstEventMonth = computed(() => {
         }
       }
     }
+
+    :deep(.block-card-three-column .image-block),
+    :deep(.block-card-three-column .image-block .image) {
+      aspect-ratio: 1.69 / 1;
+    }
+
+    :deep(.block-card-three-column .meta .title) {
+      font-size: 26px;
+    }
   }
 
   @media #{$small} {