From b08e34c112a774f43d8bcf015ba48ee723ebcb74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20B=C3=A4dorf?= <b.baedorf@openproject.com>
Date: Wed, 26 Jan 2022 13:19:35 +0100
Subject: [PATCH] Fix news headline avatar alignment

---
 app/views/homescreen/blocks/_news.html.erb    | 20 ++----
 .../grids/widgets/news/news.component.html    | 68 ++++++++++---------
 .../global_styles/content/_autocomplete.sass  |  9 +++
 frontend/src/global_styles/content/_news.sass |  7 +-
 .../global_styles/content/_widget_box.sass    | 46 +++++++------
 5 files changed, 83 insertions(+), 67 deletions(-)

diff --git a/app/views/homescreen/blocks/_news.html.erb b/app/views/homescreen/blocks/_news.html.erb
index c5aebfb7a4..17fd5c63df 100644
--- a/app/views/homescreen/blocks/_news.html.erb
+++ b/app/views/homescreen/blocks/_news.html.erb
@@ -2,20 +2,14 @@
 <% unless @news.empty? %>
   <ul class="widget-box--arrow-links">
   <% @news.each do |news| %>
-    <li class="-widget-box--arrow-multiline">
-      <div>
-        <%= avatar(news.author, class: 'news-author-avatar hidden-for-mobile') %>
-        <div class="news--project">
-          <%= link_to_project(news.project) + ': ' %>
-          <%= link_to h(news.title), news_path(news) %>
-        </div>
-        <div class="news-author">
-         <span><%= authoring_at Date.strptime(news.created_at.to_s), news.author %></span>
-        </div>
-       <div> 
-        <p class="widget-box--additional-info"><%=  news.summary %></p>
-       </div>
+    <li class="widget-box--arrow-multiline">
+      <%= avatar(news.author, class: 'widget-box--avatar news-author-avatar hidden-for-mobile') %>
+      <div class="widget-box--project news--project">
+        <%= link_to_project(news.project) + ': ' %>
+        <%= link_to h(news.title), news_path(news) %>
       </div>
+      <div class="widget-box--author news-author"><%= authoring_at Date.strptime(news.created_at.to_s), news.author %></div>
+      <p class="widget-box--additional-info"><%=  news.summary %></p>
     </li>
   <% end %>
   </ul>
diff --git a/frontend/src/app/shared/components/grids/widgets/news/news.component.html b/frontend/src/app/shared/components/grids/widgets/news/news.component.html
index ca366fdb97..8090daf854 100644
--- a/frontend/src/app/shared/components/grids/widgets/news/news.component.html
+++ b/frontend/src/app/shared/components/grids/widgets/news/news.component.html
@@ -1,5 +1,7 @@
-<widget-header [name]="widgetName"
-               [editable]="isEditable">
+<widget-header
+  [name]="widgetName"
+  [editable]="isEditable"
+>
 
   <widget-menu
     slot="menu"
@@ -8,37 +10,41 @@
 
 </widget-header>
 <div class="grid--widget-content">
-  <no-results *ngIf="noEntries" 
-              [title]="text.noResults">
-  </no-results>
+  <no-results
+    *ngIf="noEntries" 
+    [title]="text.noResults"
+  ></no-results>
   <ul class="widget-box--arrow-links">
-    <li class="-widget-box--arrow-multiline" 
-        *ngFor="let news of entries">
-      <div>
-        <op-principal
-          *ngIf="news.author"
-          [principal]="news.author"
-          [hideName]="true"
-          class="news-author-avatar hidden-for-mobile"
-        ></op-principal>
-        <div class="news--project">
-          <a [href]="newsProjectPath(news)"
-             [textContent]="newsProjectName(news)">
-          </a>:
-          <a [href]="newsPath(news)"
-             [textContent]="news.title">
-          </a>
-        </div>
-        <div *ngIf="news.author" 
-             class="news-author">
-          <span [innerHTML]="text.addedBy(news)"></span>
-        </div>
-        <div>
-          <p *ngIf="news.summary" 
-             [textContent]="news.summary"
-             class="widget-box--additional-info"></p>
-        </div>
+    <li
+      class="widget-box--arrow-multiline" 
+      *ngFor="let news of entries"
+    >
+      <op-principal
+        *ngIf="news.author"
+        [principal]="news.author"
+        [hideName]="true"
+        class="widget-box--avatar news-author-avatar hidden-for-mobile"
+      ></op-principal>
+      <div class="widget-box--project news--project">
+        <a
+          [href]="newsProjectPath(news)"
+          [textContent]="newsProjectName(news)"
+        ></a>:
+        <a
+          [href]="newsPath(news)"
+          [textContent]="news.title"
+        ></a>
       </div>
+      <div
+        *ngIf="news.author" 
+        class="widget-box--author news-author"
+        [innerHTML]="text.addedBy(news)"
+      ></div>
+      <p
+        *ngIf="news.summary" 
+        [textContent]="news.summary"
+        class="widget-box--additional-info"
+      ></p>
     </li>
   </ul>
 </div>
\ No newline at end of file
diff --git a/frontend/src/global_styles/content/_autocomplete.sass b/frontend/src/global_styles/content/_autocomplete.sass
index c75d1fd2e3..c88d9509f4 100644
--- a/frontend/src/global_styles/content/_autocomplete.sass
+++ b/frontend/src/global_styles/content/_autocomplete.sass
@@ -182,9 +182,18 @@ mark.ui-autocomplete-match
 .ng-dropdown-panel
   z-index: 9500 !important
 
+// This is such a big selector because we need to overwrite the ng-select defaults,
+// which comes with a 3-class selector by default.
+.ng-dropdown-panel .ng-dropdown-panel-items div.ng-option
+  display: flex
+
 .ng-option
   font-size: 14px
   line-height: 22px
+
+  .op-avatar 
+    margin-right: 8px
+
 .work-package-table--container .ng-dropdown-panel
   z-index: auto !important
 
diff --git a/frontend/src/global_styles/content/_news.sass b/frontend/src/global_styles/content/_news.sass
index ad4aff07ee..a20864528a 100644
--- a/frontend/src/global_styles/content/_news.sass
+++ b/frontend/src/global_styles/content/_news.sass
@@ -40,17 +40,16 @@
   font-size: 0.8rem
   color: var(--gray-dark)
   display: block
-  padding: 5px 0 5px 40px
+  padding: 5px 0 5px 0px
   line-height: 1.25
 
 .news-author-avatar
   line-height: 1
+
   .op-avatar
-    margin-right: 5px
-    float: left
+    margin-right: 10px
 
 .news--project
-  display: inline
 
 @media screen and (max-width: 679px)
   .news-author
diff --git a/frontend/src/global_styles/content/_widget_box.sass b/frontend/src/global_styles/content/_widget_box.sass
index 0e6555d93e..ead3e4fcb1 100644
--- a/frontend/src/global_styles/content/_widget_box.sass
+++ b/frontend/src/global_styles/content/_widget_box.sass
@@ -133,13 +133,9 @@ $widget-box--enumeration-width: 20px
     text-transform: uppercase
     font-weight: bold
 
-.widget-box--additional-info
-  font-style: italic
-  margin-bottom: 0.5rem
-
 .widget-box--arrow-links
   list-style: none
-  margin: 0.5rem 0 1rem 20px
+  margin: 0.5rem 0 1rem 0
 
   &:last-child
     margin-bottom: 0
@@ -152,24 +148,36 @@ $widget-box--enumeration-width: 20px
     font-size: 0.6rem
     color: var(--content-icon-link-color)
     width: $widget-box--enumeration-width
-    margin-left: -20px
 
-  .-widget-box--arrow-multiline
-    &:before
-      line-height: 2
-      float: left
+.widget-box--arrow-multiline
+  display: grid
+  grid-template-columns: auto auto 1fr
+  grid-template-rows: auto auto auto
+  margin-bottom: 10px
+
+  &:before
+    grid-column: 1/2
+    grid-row: 1/3
+    align-self: center
+    justify-self: center
 
-    &:after
-      clear: both
-      content: ""
-      display: table
+.widget-box--avatar
+  grid-column: 2/3
+  grid-row: 1/3
 
-    > div
-      float: left
-      margin-bottom: 10px
-      //necessary for correct alignment even with long texts
-      width: calc(100% - #{$widget-box--enumeration-width})
+.widget-box--project
+  grid-column: 3/4
+  grid-row: 1/2
 
+.widget-box--author
+  grid-column: 3/4
+  grid-row: 2/3
+
+.widget-box--additional-info
+  grid-column: 2/4
+  grid-row: 3/4
+  font-style: italic
+  margin-bottom: 0.5rem
 
 @include breakpoint(680px down)
   .widget-boxes