News 47877: Improve Timeline Panel Visual Layout

components/ILIAS/Like/classes/class.ilLikeGUI.php

@@ -137,7 +137,7 @@ public function getHTML(): string
         $ctrl->setParameter($this, "repl_sig", $popover->getReplaceContentSignal()->getId());
         $asyn_url = $ctrl->getLinkTarget($this, "renderEmoticons", "", true, false);
         $popover = $popover->withAsyncContentUrl($asyn_url);
-        $button = $f->button()->shy($lng->txt("like"), '#')
+        $button = $f->button()->standard($lng->txt("react"), '#')
             ->withOnClick($popover->getShowSignal());
 
         $tpl->setVariable("LIKE", $r->render([$popover, $button]));
@@ -190,10 +190,6 @@ protected function renderEmoCounters(
             $tpl->setVariable("ID", $this->dom_id);
         }
 
-        if (count($comps) > 0 && $modal_signal !== null) {
-            $tpl->setVariable("SEP", $r->render($f->divider()->vertical()));
-        }
-
         return $tpl->get();
     }
 

components/ILIAS/Like/lang/like_de.po

@@ -11,5 +11,8 @@ msgstr ""
 msgid "like"
 msgstr "Like"
 
+msgid "react"
+msgstr "Reagieren"
+
 msgid "reaction"
 msgstr "Reaktion"

components/ILIAS/Like/lang/like_en.po

@@ -11,5 +11,8 @@ msgstr ""
 msgid "like"
 msgstr "Like"
 
+msgid "react"
+msgstr "React"
+
 msgid "reaction"
 msgstr "Reaction"

components/ILIAS/Like/templates/default/tpl.emo_counters.html

@@ -1 +1 @@
-<span id="{ID}_ec" style="text-align:left;">{MODAL_TRIGGER}{SEP}</span>
+<span id="{ID}_ec">{MODAL_TRIGGER}</span>

components/ILIAS/News/Timeline/templates/default/tpl.timeline.html

@@ -6,7 +6,7 @@
 		<!-- BEGIN badge --><div class="ilTimelineBadge"><p class="ilTimelineDay">{DAY}</p><p class="ilTimelineMonth">{MONTH}</p></div><!-- END badge -->
 		<div class="ilTimelinePanel">
 			{CONTENT}
-			<div style="position: relative;">
+			<div class="ilTimelinePanelFooter">
 				{FOOTER}
 			</div>
 		</div>

components/ILIAS/News/classes/class.ilNewsTimelineItemGUI.php

@@ -109,7 +109,7 @@ public function render(): string
         $obj_id = $this->news_item->getContextObjId();
 
         // edited?
-        if ($this->news_item->getCreationDate() !== $this->news_item->getUpdateDate()) {
+        if ($this->news_item->getCreationDate() != $this->news_item->getUpdateDate()) {
             $tpl->setCurrentBlock("edited");
             $update_date = new ilDateTime($this->news_item->getUpdateDate()->format('c'), IL_CAL_DATETIME);
             $tpl->setVariable("TXT_EDITED", $this->lng->txt("cont_news_edited"));

components/ILIAS/News/templates/default/tpl.timeline_item.html

@@ -1,4 +1,4 @@
-<div>
+<div class="ilNewsTimelineHeader">
 	<div class="ilNewsTimelineUserImage">
 		{USER_AVATAR}
 		<!-- <img class="media-object" src="{USER_IMAGE}" alt="{USER_TITLE}"> -->

components/ILIAS/Notes/Note/class.ilNoteGUI.php

@@ -342,10 +342,7 @@ protected function getNotes(): array
                 }
             }
 
-            $ascending = $this->manager->getSortAscending();
-            if ($this->only_latest) {
-                $order = false;
-            }
+            $ascending = !$this->only_latest && $this->manager->getSortAscending();
             $author_id = ($this->note_type === Note::PRIVATE)
                 ? $ilUser->getId()
                 : 0;
@@ -1508,34 +1505,34 @@ public function getWidget(): string
         $ctrl->setParameter($this, "hash", $hash);
         $update_url = $ctrl->getLinkTarget($this, "updateWidget", "", true, false);
         $query_url = $ctrl->getLinkTarget($this, "getListHtml", "", true, false);
-        $comps = array();
+
+        $additional_on_load_code = static fn(string $id): string => <<<JS
+            $('#$id').attr('data-note-key','{$hash}');
+            $('#$id').attr('data-note-ui-type','trigger');
+            $('#$id').attr('data-note-query-url','{$query_url}');
+            $('#$id').click((event) => ilNotes.clickTrigger(event));
+        JS;
+
         if ($cnt > 0) {
-            $c = $f->counter()->status((int) $cnt);
-            $comps[] = $f->button()->shy('', '#')
-                ->withSymbol($f->symbol()->glyph()->comment()->withCounter($c))
-                ->withAdditionalOnLoadCode(function ($id) use ($hash, $query_url) {
-                    $code = "$('#$id').attr('data-note-key','$hash');\n";
-                    $code .= "$('#$id').attr('data-note-ui-type','trigger');\n";
-                    $code .= "$('#$id').attr('data-note-query-url','" . $query_url . "');\n";
-                    $code .= "$(\"#$id\").click(function(event) { ilNotes.clickTrigger(event)});";
-                    return $code;
-                });
-            $comps[] = $f->divider()->vertical();
-            $tpl->setVariable("GLYPH", $r->render($comps));
-            $tpl->setVariable("TXT_LATEST", $this->getLatestItemText());
-        }
+            $b = $f
+                ->button()
+                ->shy('', '#')
+                ->withSymbol(
+                    $f->symbol()->glyph()->comment()->withCounter(
+                        $f->counter()->status((int) $cnt)
+                    )
+                )
+                ->withAdditionalOnLoadCode($additional_on_load_code);
 
-        $b = $f->button()->shy($this->getAddEditItemText(), "#")->withAdditionalOnLoadCode(function ($id) use ($hash, $query_url) {
-            $code = "$('#$id').attr('data-note-key','$hash');\n";
-            $code .= "$('#$id').attr('data-note-ui-type','trigger');\n";
-            $code .= "$('#$id').attr('data-note-query-url','" . $query_url . "');\n";
-            $code .= "$(\"#$id\").click(function(event) { ilNotes.clickTrigger(event)});";
-            return $code;
-        });
-        if ($ctrl->isAsynch()) {
-            $tpl->setVariable("SHY_BUTTON", $r->renderAsync($b));
+            $tpl->setVariable("GLYPH", $r->render($b));
+            $tpl->setVariable("TXT_LATEST", $this->getLatestItemText());
         } else {
-            $tpl->setVariable("SHY_BUTTON", $r->render($b));
+            $b = $f
+                ->button()
+                ->standard($this->getAddEditItemText(), '#')
+                ->withAdditionalOnLoadCode($additional_on_load_code);
+
+            $tpl->setVariable("SHY_BUTTON", $ctrl->isAsynch() ? $r->renderAsync($b) : $r->render($b));
         }
 
         $this->widget_header = $tpl->get();

components/ILIAS/Notes/lang/notes_de.po

@@ -45,7 +45,7 @@ msgid "notes_add_comment"
 msgstr "Kommentar hinzufügen"
 
 msgid "notes_add_edit_comment"
-msgstr "Kommentar hinzufügen/editieren"
+msgstr "Kommentieren"
 
 msgid "notes_add_edit_message"
 msgstr "Mitteilung hinzufügen/editieren"

components/ILIAS/Notes/lang/notes_en.po

@@ -45,7 +45,7 @@ msgid "notes_add_comment"
 msgstr "Add Comment"
 
 msgid "notes_add_edit_comment"
-msgstr "Add/Edit Comment"
+msgstr "Comment"
 
 msgid "notes_add_edit_message"
 msgstr "Add/Edit Message"

templates/default/070-components/legacy/Services/_component_like.scss

@@ -1,10 +1,5 @@
 @use "../../../010-settings/" as *;
 
-.ilLike {
-	padding: 5px 0px;
-	text-align: right;
-}
-
 .ilLike .modal {
 	text-align: left;
 }

templates/default/070-components/legacy/Services/_component_news.scss

@@ -118,6 +118,12 @@ span.ilNewsRssIcon {
 			.panel h2 {
 				display: none;
 			}
+			.ilTimelinePanelFooter {
+				display: flex;
+				flex-direction: column;
+				align-items: flex-end;
+				gap: 8px;
+			}
 		}
 		> .ilTimelineBadge {
 			color: white;
@@ -206,30 +212,27 @@ span.ilNewsRssIcon {
 	z-index: 500;
 }
 
-.ilNewsTimelineUserImage {
-	float: left;
-	overflow: hidden;
-	width: 100px;
+.ilNewsTimelineHeader {
+	display: flex;
+	gap: 20px;
 
-	@media only screen and (max-width: $il-grid-float-breakpoint-max) {
-		width: 50px;
-	}
-}
+	.ilNewsTimelineUserImage {
+		flex-shrink: 0;
 
-.ilNewsTimelineUserImage img {
-	width: 75px;
-	height: 75px;
+		img {
+			width: 75px;
+			height: 75px;
 
-	@media only screen and (max-width: $il-grid-float-breakpoint-max) {
-		width: 40px;
-		height: 40px;
+			@media only screen and (max-width: $il-grid-float-breakpoint-max) {
+				width: 40px;
+				height: 40px;
+			}
+		}
 	}
-}
 
-.ilNewsTimelineContentSection {
-	padding-left: 100px;
-	@media only screen and (max-width: $il-grid-float-breakpoint-max) {
-		padding-left: 50px;
+	.ilNewsTimelineContentSection {
+		flex: 1;
+		min-width: 0;
 	}
 }
 

templates/default/delos.css

@@ -20329,11 +20329,6 @@ div.ilStartupSection form.form-horizontal {
   padding: 3px 9px;
 }
 
-.ilLike {
-  padding: 5px 0px;
-  text-align: right;
-}
-
 .ilLike .modal {
   text-align: left;
 }
@@ -20913,6 +20908,12 @@ span.ilNewsRssIcon:hover {
 .ilTimeline > li > .ilTimelinePanel .panel h2 {
   display: none;
 }
+.ilTimeline > li > .ilTimelinePanel .ilTimelinePanelFooter {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8px;
+}
 .ilTimeline > li > .ilTimelineBadge {
   color: white;
   width: 50px;
@@ -21006,15 +21007,13 @@ span.ilNewsRssIcon:hover {
   z-index: 500;
 }
 
-.ilNewsTimelineUserImage {
-  float: left;
-  overflow: hidden;
-  width: 100px;
+.ilNewsTimelineHeader {
+  display: flex;
+  gap: 20px;
 }
-@media only screen and (max-width: 991px) {
-  .ilNewsTimelineUserImage {
-    width: 50px;
-  }
+
+.ilNewsTimelineUserImage {
+  flex-shrink: 0;
 }
 
 .ilNewsTimelineUserImage img {
@@ -21029,12 +21028,8 @@ span.ilNewsRssIcon:hover {
 }
 
 .ilNewsTimelineContentSection {
-  padding-left: 100px;
-}
-@media only screen and (max-width: 991px) {
-  .ilNewsTimelineContentSection {
-    padding-left: 50px;
-  }
+  flex: 1;
+  min-width: 0;
 }
 
 .ilNewsTimelineEditInfo {