RunDetails.vue

This component renders the run details as part for various other component blocks, e.g., the HeroRun and the run gallery on the welcome page

📄 View source on GitHub

Props

Name	Type	Required	Default
items	Object	✅	``
superFlex	Boolean	✅	true
ononLinks	String	✅	''
runDate	String	✅	''

Used by

• HeroRun
• RunCardPortrait
• /locations/id

Functions

getBgClass

Changes the background color of an item based on the item type. Used to highlight deviations in the start time of the run

Parameters:

• type: of the item

getIconColor

Changes the icon color of an item based on the item type. Used to highlight deviations in the start time of the run

Parameters:

• type: of the item

superFlex

Changes the behavior of the flex container for the item text based on the superflex prop. That allows a single items text to wrap in the textbox if the superflex prop is set to true

Parameters:

• superflex: boolean

Reactivity

(anonymous) (watch)

Watch the rundate and check if it is after 6pm on that rundate (in the users timezone). If so, show the OnOn links; function introduced to reduce confusion with the geolinks to runsite and OnOn restaurant

Parameters:

• runDate: - rundate in ISO format (2025-06-08)