Merge pull request #10109 from opf/fix/40363-news-avatar-alignment

[40363] Avatars misplaces in team planner dropdown (complete solution)

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">
+        <%= 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>

frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.html

@@ -170,7 +170,7 @@
         class="op-autocompleter--option-principal-avatar"
         size="mini"
       ></op-principal>
-      <span [ngOptionHighlight]="search">{{ item.name }}</span>
+      <span [ngOptionHighlight]="search" class="ellipsis">{{ item.name }}</span>
     </div>
   </ng-container>
 

frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.sass

@@ -52,6 +52,4 @@
   &--option-principal
     &-wrapper
       display: flex
-    
-    &-avatar
-      margin-right: 5px
+      overflow: hidden

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">
+        <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>

frontend/src/global_styles/content/_autocomplete.sass

@@ -183,9 +183,16 @@ mark.ui-autocomplete-match
 .ng-dropdown-panel
   z-index: 9500 !important
 
+.ng-option-label
+  vertical-align: top
+
 .ng-option
   font-size: 14px
   line-height: 22px
+
+  .op-avatar 
+    margin-right: 8px
+
 .work-package-table--container .ng-dropdown-panel
   z-index: auto !important
 

frontend/src/global_styles/content/_avatar.sass

@@ -24,7 +24,6 @@
     width: var(--user-avatar-mini-width)
     min-width: var(--user-avatar-mini-width)
     height: var(--user-avatar-mini-height)
-    margin-right: 10px -5px
     line-height: var(--user-avatar-mini-height)
     font-size: 10px
 

frontend/src/global_styles/content/_news.sass

@@ -40,17 +40,13 @@
   font-size: 0.8rem
   color: var(--gray-dark)
   display: block
-  padding: 5px 0 5px 40px
   line-height: 1.25
 
 .news-author-avatar
   line-height: 1
-  .op-avatar
-    margin-right: 5px
-    float: left
 
-.news--project
-  display: inline
+  .op-avatar
+    margin-right: 10px
 
 @media screen and (max-width: 679px)
   .news-author

frontend/src/global_styles/content/_principal.sass

@@ -1,6 +1,7 @@
 .op-principal
   display: inline-flex
   align-items: center
+  vertical-align: middle
 
   &--avatar
     flex-grow: 0

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