Problem/Motivation

The Live Feed ticker can only show items typed by hand into the page. Driving it from content (a views block placed in its items slot) fails in three ways:

  • No time of day. Drupal Canvas has no adapter that renders a time of day. Its only date adapter emits Y-m-d, so a Live Feed Item bound to a content date cannot show "9:20 AM" at all, and time is a required string.
  • A stacked list, not a ticker. A placed views block brings Drupal's .block and .block__content wrappers, plus Views' container, .view, .view-content and a per-row element. All are block-level, so the single-line ticker renders as a stacked list.
  • Too fast to read, and it changes with the item count. The animation travels one group width per cycle over a fixed 30s, so a longer feed scrolls faster. Measured at 160px/s on a 4788px track, about three times too fast to read, and it shifts again whenever an editor adds an item.

Steps to reproduce

  1. Install RightUp on the current 1.0.x-dev.
  2. In Canvas, place a views block that renders Live Feed Items inside the Live Feed items slot.
  3. Try to bind an item's time to the node's authored date. No adapter produces a 12-hour time.
  4. View the page. The items stack vertically instead of scrolling on one line.
  5. With a long feed, measure the scroll speed. It is well above a readable rate.

Proposed resolution

  • live-feed-item gains optional timestamp (integer) and time_format (default g:i A), formatted in Twig. time stays a string and is no longer required; a typed time still wins, so hand-placed items are unaffected.
  • live-feed sets display: contents on .block, .block__content, .views-element-container, .view, .view-content and .view-content > * inside the group, so each item is a direct flex child of the track. .view-content > * catches the row wrapper whether or not it has the default views-row class.
  • New scroll_speed prop on live-feed, in px/s (default 60). The duration is derived from the measured group width, so the reading speed holds however many items the feed carries. Verified in the browser at exactly 60px/s.
  • Hover, :focus-within and prefers-reduced-motion behaviour is unchanged. Verified paused on hover and running again after.

Heads-up: changing the component props mints a new component version. A Canvas placement pinned to the older version silently drops the new inputs.

Needed by #3624019 in the RightUp recipe, which drives the ticker from an entity queue. This theme change must merge first: without it that ticker renders as a stacked list.

Remaining tasks

  • ✅ File an issue
  • ✅ Addition/Change/Update/Fix
  • ❌ Testing to ensure no regression
  • ➖ Automated unit/functional testing coverage
  • ➖ Developer Documentation support
  • ➖ User Guide Documentation support
  • ❌ UX/UI designer responsibilities: the ticker height is 37px where the design says 43px. The design has 12px padding and a 19px row; ours has no feed padding and inherits 18px type instead of 14px. Not fixed here, since this issue is about making the feed content-driven.
  • ➖ Accessibility and Readability
  • ❌ Reviewed by a human
  • ❌ Code review by maintainers
  • ❌ Full testing and approval
  • ❌ Credit contributors
  • ❌ Review with the product owner
  • ✅ Update Release Notes
  • ✅ Release

User interface changes

  • A Live Feed filled from a views block scrolls on a single line, like a hand-placed one.
  • The ticker scrolls at a constant 60px/s by default instead of speeding up as items are added.

API changes

  • live-feed-item: new optional timestamp and time_format; time is no longer required.
  • live-feed: new scroll_speed prop (px/s, default 60).
  • Both components get a new Canvas component version.

Data model changes

  • N/A

Release notes snippet

  • The Live Feed ticker can now be driven by content: items take a timestamp, views wrappers no longer break the single line, and the scroll speed is set in pixels per second.
Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

rajab natshah created an issue. See original summary.

rajab natshah’s picture

rajab natshah’s picture

Assigned: rajab natshah » Unassigned
Issue summary: View changes
Status: Active » Fixed
Issue tags: +vartheme_bs5_rightup-1.0.0-alpha1

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.