Feature/timeline conversion2 by martinyde · Pull Request #593 · itk-dev/deltag.aarhus.dk

martinyde · 2026-01-22T09:00:26Z

Link to ticket

Please add a link to the ticket being addressed by this change.

Add project timeline
Add project reference fields to several node types to display on timeline
Add paragraph for adding custom elements to timeline
Add CLAUDE.md file to project
Remove old timeline extension
Add fixture for project with timeline

Note

@rimi-itk Code review of hoeringsportal_project module, config and added fixture

web/modules/custom/hoeringsportal_project/modules/hoeringsportal_project_fixtures
web/modules/custom/hoeringsportal_project

Note

@yepzdk Code review of theme

web/themes/custom/hoeringsportal

Note

The audit fail github action will be resoleved seperately

@for

- Replaced hardcoded hex colors with project color tokens - Removed font-family override to inherit from theme - Created SCSS mixins for status and accent variant styles - Used @for loop for z-index declarations - Replaced magic numbers with SCSS variables - Converted CSS comments to SCSS comments - Used SCSS nesting for better organization Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Converted var declarations to const/let - Replaced function callbacks with arrow functions - Used template literals for string interpolation - Extracted magic numbers to named constants (SWIPE_THRESHOLD, etc.) - Applied optional chaining for null checks - Used destructuring for cleaner property access - Used shorthand method syntax in Drupal behavior Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Standardized quote style to double quotes Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Addresses PR review feedback: - $timeline-max-width: uses lg container (960px) - Description max-width: uses sm container (540px) - Legend max-width: uses sm container (540px) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Refactor timeline CSS to follow project conventions

Modernize timeline JavaScript to ES6+ syntax

Planning document for replacing "I gang" with auto-generated "I dag" card that shows current project status from Drupal field. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Field name: use placeholder (exact field name TBD) - Empty field behavior: card shown without status text - Edge cases: card appears as first/last item when outside range - Convert open questions to resolved questions Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Change status label from "I gang" to "I dag" for current cards - Auto-generate today card with current date in Danish format - Insert today card at correct chronological position in timeline - Determine item status (completed/upcoming) based on date comparison - Pass project_status field to timeline for status display - Add min-height (200px) to current card to prevent overlap - Remove implementation plan document (no longer needed) The today card displays: - Status badge: "I dag" - Date: Current month and year in Danish (e.g., "Januar 2026") - Title: "Projektstatus" - Description: Project status from Drupal field (if set) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Add demo status text "Åben for borgerindragelse" for prototype - Hide both title and description when project status is empty - Add conditional check for title in card template Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Change default view from horizontal to vertical - Remove opacity (0.6) from upcoming cards to avoid contrast issues Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Add $timeline-shadow-default and $timeline-shadow-hover variables - Apply subtle default shadow (0 2px 4px rgb(0 0 0 / 6%)) - Apply prominent hover shadow (0 4px 12px rgb(0 0 0 / 12%)) - Use consistent shadows on: cards, mini-nav, and timeline dots Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

…tag.aarhus.dk into feature/timeline-conversion2

…ay-card

Timeline: Auto-generated 'I dag' card with date-based status

Creates a Timeline Demo Project with: - Timeline enabled (field_show_timeline = TRUE) - 4 timeline note paragraphs with varying dates - References to existing hearing, dialogue, decision, and public meeting fixtures Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Add timeline fixtures with demo project

- Add legend component with status labels (#602) - Skip today marker in carousel slides, show only as dot (#599) - Reorder horizontal view: dots first, cards, then pager (#601) - Add clickable dots with month/year labels on horizontal timeline (#600) - Fix card text content layout for horizontal view (#604) - Fix action button alignment with flex layout (#603) - Auto-navigate to latest non-upcoming card on load - Exclude timeline fields from raw content output Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Assign unique IDs to timeline notes (note-{paragraph_id}) instead of empty strings, so each note can be individually tracked - Improve scroll tracking to ignore hidden horizontal view duplicates by checking element dimensions before processing intersection events - Change scoring algorithm to prefer cards that contain the viewport center, ensuring small cards like notes are properly highlighted Fixes #609 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Add comprehensive documentation including project overview, development commands, architecture details, coding standards, and configuration. Includes core module descriptions and Docker service information. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

…es-after-implementation

Added vertical padding to the horizontal line container to prevent the active/hover scaled dots (1.5x) from being clipped by overflow hidden. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Default to horizontal view on mobile viewports (< 768px) - Update toggle buttons and panels to reflect viewport-based default - Add single-column vertical layout for mobile with timeline on left - Position dots correctly on timeline line with connector to cards Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

…d-dots Add windowed dot navigation on mobile horizontal timeline

- Add determineAccentColor() method for content-type based colors: - Green for hearing, decision, dialogue - Pink for course, public_meeting - Blue for notes - Improve fixtures with both past and future timeline content - Fix date handling for different content types in fixtures - Always apply accent class in timeline cards Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

The duplicate require("./accordion.js") statement was accidentally introduced in commit 720088d. This removes the unnecessary duplicate import that caused the accordion script to be loaded twice. Fixes #613 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

…te-accordion-import Remove duplicate accordion.js import

…l letters

rimi-itk

This is really good! Some suggestions added, some questions asked and a change requested.

yepzdk

Approved, some possible cleanup, might need to be addressed.

Co-authored-by: Mikkel Ricky <rimi@aarhus.dk>

…lper.php Co-authored-by: Mikkel Ricky <rimi@aarhus.dk>

Co-authored-by: Mikkel Ricky <rimi@aarhus.dk>

…lper.php Co-authored-by: Mikkel Ricky <rimi@aarhus.dk>

This commit addresses several issues with the mini-timeline navigation: 1. Remove static "Today" indicator from mini-nav - The duplicate indicator at the bottom was confusing since "today" already appears as a dot in the timeline list 2. Fix double-click issue for mini-nav dots - Added isProgrammaticScroll flag to prevent scroll tracking from overriding the active state during smooth scrolling - Active state is now set immediately on click, before scrolling starts 3. Fix scroll tracking skipping notes - Replaced IntersectionObserver with a scroll event listener - The new approach checks ALL cards on every scroll (debounced at ~60fps) - This ensures smaller cards like notes are properly detected when they're at the viewport center - The scoring logic remains the same: cards containing the viewport center get highest priority 4. Clean up unused CSS - Removed .project-timeline-mini-nav__today* styles Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

The file had unresolved git stash conflict markers that caused PHP parse errors, preventing the hoeringsportal_project_fixtures module's services from registering in the Drupal container. This broke fixtures:load because ProjectLandingPageFixture (a sibling service) was unavailable as a dependency. - Remove all conflict markers (<<<<<<, =======, >>>>>>>) - Move comprehensive project fixture code from updateNodeProjectReference() to load() where it belongs - Resolve getDependencies() to include all four fixture dependencies needed by the timeline demo

martinyde and others added 19 commits January 21, 2026 13:51

Merge branch 'feature/delete-old-timeline' into feature/timeline

5609903

Added 1st attempt

76a1717

Added styling, html and css for timeline

bc44259

Apply Prettier formatting to mini-timeline.js

feed8f1

- Standardized quote style to double quotes Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Merge pull request #594 from itk-dev/feature/timeline-css-optimization

9d53907

Refactor timeline CSS to follow project conventions

Merge pull request #595 from itk-dev/feature/timeline-js-optimization

520fd6f

Modernize timeline JavaScript to ES6+ syntax

Add implementation plan for timeline "I dag" card

3ae66ee

Planning document for replacing "I gang" with auto-generated "I dag" card that shows current project status from Drupal field. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Fix default view and remove upcoming card opacity

af10963

- Change default view from horizontal to vertical - Remove opacity (0.6) from upcoming cards to avoid contrast issues Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Added data collection from drupal

0993cbe

Merge branch 'feature/timeline-conversion2' of github.com:itk-dev/del…

0d7e1bb

…tag.aarhus.dk into feature/timeline-conversion2

Merge branch 'feature/timeline-conversion2' into feature/timeline-tod…

52c2094

…ay-card

Merge pull request #596 from itk-dev/feature/timeline-today-card

8c659a0

Timeline: Auto-generated 'I dag' card with date-based status

yepzdk mentioned this pull request Jan 23, 2026

Redesign project timeline with card-based alternating layout #592

Closed

25 tasks

martinyde and others added 10 commits January 26, 2026 10:29

Updated config for note and different types

b35b956

Updated timeline and added show/hide timeline config

083e843

Merge pull request #608 from itk-dev/feature/timeline-fixtures

71a44cc

Add timeline fixtures with demo project

Updated presave function

dfcaf40

Updated code comments

eb73a96

Merge branch 'feature/timeline-conversion2' into feature/timeline-fix…

2df8a10

…es-after-implementation

yepzdk and others added 10 commits January 27, 2026 12:30

Fix scaled dots being clipped on mobile windowed view

fe5c653

Added vertical padding to the horizontal line container to prevent the active/hover scaled dots (1.5x) from being clipped by overflow hidden. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Merge pull request #620 from itk-dev/feature/issue-611-mobile-windowe…

c6d353d

…d-dots Add windowed dot navigation on mobile horizontal timeline

Merge pull request #621 from itk-dev/feature/issue-613-remove-duplica…

d77eaf1

…te-accordion-import Remove duplicate accordion.js import

Merge branch 'develop' into feature/timeline-conversion2

77bf934

Updated translation

4eb3394

Updated translations and fixed minor bugs in color display and capita…

98ad277

…l letters

Updated timeline css

38249fe

martinyde marked this pull request as ready for review January 28, 2026 09:54

Updated translation

a3e0856

martinyde requested review from rimi-itk and yepzdk January 28, 2026 10:03

rimi-itk requested changes Jan 28, 2026

View reviewed changes

yepzdk approved these changes Jan 28, 2026

View reviewed changes

Comment thread web/themes/custom/hoeringsportal/assets/timeline-data.json Outdated

martinyde and others added 12 commits January 28, 2026 15:19

Added fixture

55b1512

Update config/sync/core.entity_form_display.node.dialogue.default.yml

5c043d3

Co-authored-by: Mikkel Ricky <rimi@aarhus.dk>

Update web/modules/custom/hoeringsportal_project/src/Helper/ProjectHe…

1c7fe67

…lper.php Co-authored-by: Mikkel Ricky <rimi@aarhus.dk>

Update config/sync/field.field.node.course.field_project_reference.yml

e11130b

Co-authored-by: Mikkel Ricky <rimi@aarhus.dk>

Update web/modules/custom/hoeringsportal_project/src/Helper/ProjectHe…

94f1ab6

…lper.php Co-authored-by: Mikkel Ricky <rimi@aarhus.dk>

Merge branch 'develop' into feature/timeline-conversion2

9777329

Applied coding standards

746c56f

Updated translation

102c974

Updated code after review

a9a68d2

Updated code

ffc91d1

martinyde merged commit 7256630 into develop Feb 25, 2026
18 of 21 checks passed

martinyde deleted the feature/timeline-conversion2 branch February 25, 2026 12:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/timeline conversion2#593

Feature/timeline conversion2#593
martinyde merged 66 commits intodevelopfrom
feature/timeline-conversion2

martinyde commented Jan 22, 2026 •

edited

Loading

Uh oh!

rimi-itk left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

yepzdk left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

martinyde commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Link to ticket

Uh oh!

rimi-itk left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

yepzdk left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

martinyde commented Jan 22, 2026 •

edited

Loading