Contrib.social

Site hero flyout day links should be configurable

Open on Drupal.org →
Created on 6 April 2025, about 1 month 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
  • Comment 30 days ago →
    🇺🇸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?

  • Comment 3 days ago →
    🇨🇦Canada mandclu

    I'm not sure we should limit it to 3, since a camp with more than three days may want more values. I agree that using storage entities probably makes sense, and perhaps once those are defined we could even use them to make the tabs in the schedule display a little nicer.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024