Events index cards: restore presence icons + clickable cards

[GeneralDido]

Summary

• Restores the previous presence icon treatment on /events index cards (left-side icon + label; mobile-friendly inline presence).
• Makes /events and /courses cards “click anywhere” using a CSS stretched-link pattern (no JS).
• Extracts a shared heading partial for consistent title+icons markup and improves card UI consistency (hover highlight + reduced height jitter).

Key details

• Removed the event type pill row from /events index cards (Option 2) to reduce clutter and card-height variance; event types/facets/show pages remain unchanged.
• Stretched-link overlay uses z-index layering so nested links (e.g. course “Next instance”) and tooltip icons remain clickable.
• Date + location are shown on one meta line on /events, with wrap behavior on narrow screens.

Tests

• docker-compose run --rm test bin/rails test test/controllers/events_controller_test.rb test/controllers/courses_controller_test.rb
• Manual QA
• Verify: clicking anywhere on a card navigates to the resource; “Next instance” link remains independently clickable; admin/status tooltip icons still work; mobile breakpoint hides the left presence column and shows the inline presence row.

---

---

Changes by file

app/views/common/_index_card_heading.html.erb

• New shared partial used by both /events and /courses index cards to keep the title + right-side icons markup consistent.
• Renders:
  • A title link (link_to resource) with class course-card__stretched-link (this link provides the “click anywhere” overlay via CSS).
  • A child wrapper span (.course-card__title-text) so we can clamp the text without putting overflow rules on the <a> (putting overflow: hidden on the stretched link can
    clip the overlay and break click-anywhere).
  • An icons container (.course-card__icons) populated by pre-rendered HTML passed in via icons: local.

app/views/events/_index_event.html.erb

• Restores the old-style presence icon + label on the left for events (onsite / online / hybrid), replacing the newer “presence pill” row.
• Adds a mobile-friendly presence line (.course-card__presence-mobile) that’s shown on small screens when the left column is hidden.
• Removes the event-type pills row from the /events index card (Option 2), reducing clutter + height variance; this does not remove facets or show-page display.
• Combines date + location into a single meta line using .course-card__meta--event + .course-card__meta-item wrappers:
  • Each icon+text pair stays visually “together” (tight spacing within the pair).
  • On narrow screens the location can naturally wrap under the date (without aggressive mid-word breaking).
• Uses show_scilifelab_badge?(event) helper instead of duplicating the slug check.

app/views/courses/_index_course.html.erb

• Standardizes collection_item handling via collection_item = local_assigns[:collection_item] and guards with present? to avoid shared-partial/local-variable pitfalls.
• Uses the shared heading partial for consistent title + icon markup.
• Keeps the “Next instance” nested link intact; it remains independently clickable because it’s elevated above the stretched-link overlay in CSS.
• Uses show_scilifelab_badge?(course) helper (deduped predicate).

app/helpers/application_helper.rb

• Adds show_scilifelab_badge?(resource) helper to dedupe the SciLifeLab badge condition across event/course index cards.
• Uses associated_nodes (which is preloaded on index pages), so it’s primarily about reuse/consistency rather than DB query reduction.

app/assets/stylesheets/courses/_index_cards.scss

• Implements “click anywhere” for cards using a CSS stretched-link pattern:
  • .course-card__stretched-link::after creates a full-card overlay (z-index: 1).
  • .course-card is position: relative so the overlay is correctly contained within the card.
• Ensures nested interactions still work by explicitly lifting interactive “islands” above the overlay:
  • This block sets position: relative; z-index: 2 on links/buttons/tooltips/etc. so they sit above the overlay and still receive clicks/hover.
  • Includes .course-card__interactive as an escape-hatch utility class: if someone adds a future clickable widget inside the card, adding this class guarantees it won’t be
    “dead under the overlay”.
  • Also includes form controls + [role="button"]/[role="link"] and both Bootstrap 3 (data-toggle) + Bootstrap 5 (data-bs-toggle) tooltip/popover hooks for robustness.
• Replaces title underline-on-hover with the old-style soft card highlight on hover/focus (#d2e5e7, matching the initial .link-overlay feel).
• Adds event-specific layout styles:
  • Two-column layout (.course-card__layout) with a fixed-width presence column on desktop.
  • Mobile behavior: hides left presence column and shows .course-card__presence-mobile.
  • Event meta row layout helpers (.course-card__meta--event, .course-card__meta-item) for tight icon→text pairing + clean wrap.
• Fixes /events right-side alignment: ensures .course-card__content grows to full width inside the two-column layout (prevents icons/badge from bunching next to the title).
• Adds a small desktop-only meta-row min-height normalization (min-height: 44px) to reduce card-height “jitter”; removed on mobile where the layout stacks.

test/controllers/events_controller_test.rb

• Adds a markup-level test ensuring:
  • stretched-link/title wrapper exists,
  • presence leading block renders,
  • event type pills are not rendered on index cards.
• Fixes the “nil presence” test so it actually tests nil:
  • Uses update_column(:presence, nil) to bypass before_validation :presence_default.
  • Asserts that exactly one card on the page omits both presence blocks (.course-card__leading and .course-card__presence-mobile).

test/controllers/courses_controller_test.rb

• Adds a markup-level test confirming stretched-link/title wrapper exists on /courses.
• Adds/keeps a “Next instance” positive-path test by creating a future, approved course event and asserting the nested link renders.