Site hero flyout day links should be configurable

Created on 6 April 2025, 9 days ago

Problem/Motivation

The flyout in the site hero includes link to specific days of the schedule, with descriptions. These links are not actually compatible with the Event Platform, so we need a way for a site builder to configure them in the UI.

Proposed resolution

The information would make most sense to be provided as part of the Event taxonomy term. The information is currently hard-coded into site-hero-details.twig:

    <div class="site-hero-details">
      {% if current_event.field_dates.0 %}
        <span class="site-hero-details__item">
          {{- current_event.field_dates.value|date('M  d') -}}
          -
          {{- current_event.field_dates.end_value|date('d, Y') -}}
        </span>
      {% endif %}
      {% if current_event.field_location_short.0 %}
        <span class="site-hero-details__item">
          {{ current_event.field_location_short.value }}
        </span>
      {% endif %}
      <button class="site-hero-details__button">
        <div class="visually-hidden">Show event details</div>
      </button>
      <div class="site-hero-details__flyout">
        <div class="site-hero-details__flyout-general">
          <div class="site-hero-details__flyout-general-date">
            {{- current_event.field_dates.value|date('M d') -}}
            -
            {{- current_event.field_dates.end_value|date('d, Y') -}}
          </div>
          <div class="site-hero-details__flyout-general-location">{{ current_event.field_location_short.value }}</div>
        </div>
        <div class="site-hero-details__flyout-day">
          <a href="/schedule/day-1">
            <div class="site-hero-details__flyout-day-heading">
              Day One
            </div>
            <div class="site-hero-details__flyout-day-info">
              Drupal Trainings
            </div>
          </a>
        </div>
        <div class="site-hero-details__flyout-day">
          <a href="/schedule/day-2">
            <div class="site-hero-details__flyout-day-heading">
              Day Two
            </div>
            <div class="site-hero-details__flyout-day-info">
              Sessions
            </div>
          </a>
        </div>
        <div class="site-hero-details__flyout-day">
          <a href="/schedule/day-3">
            <div class="site-hero-details__flyout-day-heading">
              Day Three
            </div>
            <div class="site-hero-details__flyout-day-info">
              Contribution Day
            </div>
          </a>
        </div>
      </div>
    </div>

Ideally we could use simpler markup. Maybe a definition list could provide a similar structure that would be supported in a WYSIWYG.

✨ Feature request
Status

Active

Version

1.0

Component

Code

Created by

πŸ‡¨πŸ‡¦Canada mandclu

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @mandclu
  • πŸ‡ΊπŸ‡ΈUnited States bernardm28 Tennessee


    We could add this the same way Stats was added, but with a hard limit of 3 elements. Or we could let people add as many elements as they want, and Twig will only parse the first 3 due to space constraints.
    thoughts?

Production build 0.71.5 2024