News 47877: Improve Timeline Panel Visual Layout#11689
Conversation
See: https://mantis.ilias.de/view.php?id=47877 The timeline panel header and footer used float-based spacing and shy buttons with vertical dividers, which produced an uneven layout. Switched the header to flexbox, aligned footer actions with `ilTimelinePanelFooter`, promoted Like and Notes triggers to standard buttons, removed the separators, and updated related language strings and styles.
|
The changes unfortunately couldn’t be limited to the news module. We also had to update the Like and Notes components to make this work, so you can expect some related changes in other areas as well. @alex40724 I’d kindly ask you to review these proposed changes. |
BettyFromHH
added
css/html
fhelfer
left a comment
fhelfer
left a comment
There was a problem hiding this comment.
Thank you @matheuszych,
changing the button to standard is definitely the right choice.
However the PR changes like#like from “Like” to “React” / “Reagieren”. That key is shared and must stay the label for the 👍 reaction type, not the popover trigger.
It is still used in:
- ilLikeGUI::getExpressionText() (components/ILIAS/Like/classes/class.ilLikeGUI.php, ~369) – maps TYPE_LIKE to $lng->txt("like"). Called from ilMembershipCronNotifications::parseNewsItem() (components/ILIAS/Membership/classes/Cron/class.ilMembershipCronNotifications.php, ~301) for course/group notification mails. After this change, thumbs-up reactions appear as “React” / “Reagieren” instead of “Like”.
Looks like this
Kurs "My Course": "sadfsdf" - sdfsdf
Neue Reaktionen (14)
[dummy5006], 26. Jun 2026, 12:04: Angry
[dummy5003], 26. Jun 2026, 12:04: Laugh
[dummy5002], 26. Jun 2026, 12:04: Love
[dummy5001], 26. Jun 2026, 12:04: Dislike
[dummy5000], 26. Jun 2026, 12:04: Reagieren
[dummy5005], 26. Jun 2026, 12:04: Sad
[dummy5004], 26. Jun 2026, 12:04: Astounded
- Emoji counter buttons – Button renderer sets aria-label via getSymbolLabel() → txt("like") for the like glyph (with counter).
The trigger button in getHTML() (~140) may use a new key (e.g. react / add_reaction); like should remain for the expression type.
See: https://mantis.ilias.de/view.php?id=47877 The edited hint was shown for every timeline item because creation and update dates were compared with `!==` on `DateTime` objects. Switched to value comparison with `!=`. The comment trigger is now rendered only when no comments exist yet, and the Like button uses the new `react` language string instead of overwriting `like`.
|
Hello @fhelfer , I added a new language variable Best regards |
4 participants
See: https://mantis.ilias.de/view.php?id=47877
The timeline panel header and footer used float-based spacing and shy
buttons with vertical dividers, which produced an uneven layout. Switched
the header to flexbox, aligned footer actions with
ilTimelinePanelFooter, promoted Like and Notes triggers to standardbuttons, removed the separators, and updated related language strings and
styles.
/cc @thojou