Issue #3491817 by pameeela: Implement designs for event teaser & listing page within Olivero

drupal_cms_olivero/css/components/card.css

@@ -3,6 +3,7 @@
       var(--grid-repeat, auto-fit),
       minmax(min(100%, var(--grid-min, 26ch)), 1fr)
     );
+  gap: var(--sp2);
 }
 
 .views-row:has(> .teaser--card) {

drupal_cms_olivero/css/layout/layout.css

-@media (min-width: 62.5rem) {
-  .layout--content-medium, .layout--pass--content-medium > * {
-    grid-column: 2 / 14;
+.main-content {
+  @media (min-width: 62.5rem) {
+    .layout--content-medium, .layout--pass--content-medium > * {
+      grid-column: 2 / 14;
+    }
   }
 }

recipes/drupal_cms_events/config/core.entity_view_display.node.event.card.yml

+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.node.card
+    - field.field.node.event.field_content
+    - field.field.node.event.field_description
+    - field.field.node.event.field_event__date
+    - field.field.node.event.field_event__file
+    - field.field.node.event.field_event__link
+    - field.field.node.event.field_event__location_address
+    - field.field.node.event.field_event__location_name
+    - field.field.node.event.field_featured_image
+    - field.field.node.event.field_geofield
+    - field.field.node.event.field_tags
+    - node.type.event
+  module:
+    - date_augmenter
+    - layout_builder
+    - media
+    - smart_date
+    - user
+third_party_settings:
+  layout_builder:
+    enabled: false
+    allow_custom: false
+id: node.event.card
+targetEntityType: node
+bundle: event
+mode: card
+content:
+  field_description:
+    type: basic_string
+    label: hidden
+    settings: {  }
+    third_party_settings: {  }
+    weight: 2
+    region: content
+  field_event__date:
+    type: smartdate_default
+    label: hidden
+    settings:
+      timezone_override: ''
+      format_type: medium
+      format: default
+      force_chronological: false
+      add_classes: false
+      time_wrapper: true
+      localize: false
+      parts:
+        start: start
+        end: end
+        duration: '0'
+      duration:
+        separator: ' | '
+        unit: ''
+        decimals: 2
+        suffix: h
+    third_party_settings:
+      date_augmenter:
+        instances:
+          status:
+            addtocal: false
+          weights:
+            order:
+              addtocal:
+                weight: 0
+          settings:
+            addtocal:
+              label: 'Add to calendar'
+              event_title: ''
+              location: ''
+              description: ''
+              retain_spacing: false
+              icons: true
+              max_desc: 60
+              ellipsis: true
+              past_events: false
+              target: ''
+              ignore_timezone_if_UTC: true
+          augmenter_settings:
+            fields__field_event__date__settings_edit_form__third_party_settings__date_augmenter__instances__augmenter_settings__active_tab: ''
+    weight: 1
+    region: content
+  field_featured_image:
+    type: media_thumbnail
+    label: hidden
+    settings:
+      image_link: ''
+      image_style: ''
+      image_loading:
+        attribute: eager
+    third_party_settings: {  }
+    weight: 0
+    region: content
+  field_when:
+    type: smartdate_default
+    label: above
+    settings: {  }
+    third_party_settings:
+      date_augmenter:
+        instances:
+          status:
+            addtocal: true
+          weights:
+            order:
+              addtocal:
+                weight: 0
+          settings:
+            addtocal:
+              label: 'Add to calendar'
+              event_title: ''
+              location: ''
+              description: ''
+              retain_spacing: false
+              icons: true
+              max_desc: 60
+              ellipsis: true
+              past_events: false
+              target: ''
+          augmenter_settings:
+            fields__field_when__settings_edit_form__third_party_settings__date_augmenter__augmenter_settings__active_tab: ''
+    weight: 1
+    region: content
+  field_where:
+    type: entity_reference_entity_view
+    label: above
+    settings:
+      view_mode: teaser
+      link: false
+    third_party_settings: {  }
+    weight: 2
+    region: content
+hidden:
+  content_moderation_control: true
+  field_content: true
+  field_event__file: true
+  field_event__link: true
+  field_event__location_address: true
+  field_event__location_name: true
+  field_geofield: true
+  field_tags: true
+  langcode: true
+  links: true

recipes/drupal_cms_events/config/core.entity_view_display.node.event.teaser.yml

@@ -4,37 +4,50 @@ dependencies:
   config:
     - core.entity_view_mode.node.teaser
     - field.field.node.event.field_content
-    - field.field.node.event.field_event__date
     - field.field.node.event.field_description
-    - field.field.node.event.field_featured_image
+    - field.field.node.event.field_event__date
     - field.field.node.event.field_event__file
-    - field.field.node.event.field_geofield
     - field.field.node.event.field_event__link
     - field.field.node.event.field_event__location_address
+    - field.field.node.event.field_event__location_name
+    - field.field.node.event.field_featured_image
+    - field.field.node.event.field_geofield
     - field.field.node.event.field_tags
     - node.type.event
   module:
-    - address
-    - media
-    - text
+    - smart_date
     - user
 id: node.event.teaser
 targetEntityType: node
 bundle: event
 mode: teaser
 content:
-  field_content:
-    type: text_trimmed
+  field_description:
+    type: basic_string
     label: hidden
-    settings:
-      trim_length: 600
+    settings: {  }
     third_party_settings: {  }
     weight: 2
     region: content
-  field_description:
-    type: basic_string
+  field_event__date:
+    type: smartdate_default
     label: hidden
-    settings: {  }
+    settings:
+      timezone_override: ''
+      format_type: medium
+      format: default
+      force_chronological: false
+      add_classes: false
+      time_wrapper: true
+      localize: false
+      parts:
+        - start
+        - end
+      duration:
+        separator: ' | '
+        unit: ''
+        decimals: 2
+        suffix: h
     third_party_settings: {  }
     weight: 1
     region: content
@@ -47,21 +60,6 @@ content:
     third_party_settings: {  }
     weight: 0
     region: content
-  field_event__location_address:
-    type: address_default
-    label: hidden
-    settings: {  }
-    third_party_settings: {  }
-    weight: 2
-    region: content
-  field_tags:
-    type: entity_reference_label
-    label: inline
-    settings:
-      link: true
-    third_party_settings: {  }
-    weight: 2
-    region: content
   field_when:
     type: smartdate_default
     label: inline
@@ -78,11 +76,17 @@ content:
     weight: 1
     region: content
   links:
-    weight: 100
+    settings: {  }
+    third_party_settings: {  }
+    weight: 3
     region: content
 hidden:
-  field_event__date: true
+  content_moderation_control: true
+  field_content: true
   field_event__file: true
-  field_geofield: true
   field_event__link: true
+  field_event__location_address: true
+  field_event__location_name: true
+  field_geofield: true
+  field_tags: true
   langcode: true

recipes/drupal_cms_events/config/views.view.events.yml

@@ -2,7 +2,7 @@ langcode: en
 status: true
 dependencies:
   config:
-    - core.entity_view_mode.node.teaser
+    - core.entity_view_mode.node.card
     - field.storage.node.field_event__date
     - node.type.event
   module:
@@ -242,7 +242,8 @@ display:
       row:
         type: 'entity:node'
         options:
-          view_mode: teaser
+          relationship: none
+          view_mode: card
       query:
         type: views_query
         options:
@@ -276,6 +277,7 @@ display:
         - 'languages:language_content'
         - 'languages:language_interface'
         - url.query_args
+        - user
         - 'user.node_grants:view'
         - user.permissions
       tags: {  }
@@ -293,6 +295,7 @@ display:
         - 'languages:language_content'
         - 'languages:language_interface'
         - url.query_args
+        - user
         - 'user.node_grants:view'
         - user.permissions
       tags: {  }
@@ -302,7 +305,7 @@ display:
     display_plugin: block
     position: 1
     display_options:
-      title: 'Past Events'
+      title: 'Past events'
       sorts:
         field_event__date_value:
           id: field_event__date_value
@@ -433,6 +436,7 @@ display:
         - 'languages:language_content'
         - 'languages:language_interface'
         - url.query_args
+        - user
         - 'user.node_grants:view'
         - user.permissions
       tags: {  }
@@ -600,6 +604,7 @@ display:
       contexts:
         - 'languages:language_content'
         - 'languages:language_interface'
+        - user
         - 'user.node_grants:view'
         - user.permissions
       tags: