Fix alignment issues and further tweak layout

opf · Oct 1, 2024 · 762818d · 762818d
1 parent 6c06bb2
commit 762818d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 18 deletions.
diff --git a/modules/meeting/app/components/meeting_agenda_items/item_component/show_component.html.erb b/modules/meeting/app/components/meeting_agenda_items/item_component/show_component.html.erb
@@ -48,15 +48,15 @@
       end
 
       if @meeting_agenda_item.duration_in_minutes.present? && @meeting_agenda_item.duration_in_minutes > 0
-        grid.with_area(:duration, Primer::Beta::Text, color: duration_color_scheme, mr: 2, font_size: :small) do
+        grid.with_area(:duration, Primer::Beta::Text, color: duration_color_scheme, mr: 2) do
           I18n.t('datetime.distance_in_words.x_minutes_abbreviated', count: @meeting_agenda_item.duration_in_minutes)
         end
       end
 
       if @meeting_agenda_item.presenter
         grid.with_area(:presenter, tag: :div, classes: 'ellipsis') do
-          flex_layout do |flex|
-            flex.with_column(classes: 'ellipsis') do
+          flex_layout(align_items: :flex_end) do |flex|
+            flex.with_column(classes: 'ellipsis custom-presenter-flex') do
               render(Users::AvatarComponent.new(user: @meeting_agenda_item.presenter, size: 'mini', title:, classes: 'op-principal_flex'))
             end
           end

diff --git a/modules/meeting/app/components/meeting_agenda_items/item_component/show_component.sass b/modules/meeting/app/components/meeting_agenda_items/item_component/show_component.sass
@@ -1,6 +1,6 @@
 @import 'helpers'
 
-$meeting-agenda-item--presenter-width: 300px
+$meeting-agenda-item--presenter-width: 170px
 $meeting-agenda-item--presenter-width--mobile: 150px
 
 .op-meeting-agenda-item
@@ -11,36 +11,49 @@ $meeting-agenda-item--presenter-width--mobile: 150px
   &--drag-handle,
   &--duration,
   &--content,
-  &--presenter
+  &--presenter,
+  &--actions
     align-self: start
 
-  &--title
-    align-self: center
-
-  &--actions
+  &--duration
+    white-space: nowrap
     justify-self: end
 
+  &--content
+    overflow-wrap: anywhere
+
   &--presenter
     max-width: $meeting-agenda-item--presenter-width
     justify-self: end
 
-  &--duration
-    white-space: nowrap
+  &--actions
     justify-self: end
+    margin-top: -5px // Needed because the invisible effect makes the button look misaligned otherwise
 
   &--title
+    align-self: center
     overflow-wrap: anywhere
-    margin-bottom: 0
 
-  &--content
-    overflow-wrap: anywhere
+  .custom-presenter-flex
+    margin-left: auto
 
   @media screen and (max-width: $breakpoint-lg)
-    grid-template-columns: 20px auto 1fr 150px 50px
-    grid-template-areas: "drag-handle content content content actions" ". duration . presenter presenter" ". title title title title" ". notes notes notes notes"
+    grid-template-columns: 20px auto 1fr auto 50px
+    grid-template-areas: "drag-handle content content content actions" ". title title title title" ". presenter duration . ."  ". notes notes notes notes"
 
     &--author
       justify-self: stretch
 
     &--presenter
+      width: inherit
       max-width: $meeting-agenda-item--presenter-width--mobile
+      margin-left: 0
+      margin-top: 5px
+
+    &--duration
+      justify-self: start
+      margin-top: 5px
+      margin-left: 8px
+
+    .custom-presenter-flex
+      margin-left: 0
diff --git a/modules/meeting/app/components/meeting_sections/header_component.html.erb b/modules/meeting/app/components/meeting_sections/header_component.html.erb
@@ -13,8 +13,8 @@
           end
         end
         if @meeting_section.agenda_items_sum_duration_in_minutes > 0
-          grid.with_area(:duration, Primer::Beta::Text, color: :subtle, mr: 1, font_size: :small) do
-            render(Primer::Beta::Text.new(font_size: :small, font_weight: :normal, color: :subtle)) do
+          grid.with_area(:duration, Primer::Beta::Text, color: :subtle, mr: 1) do
+            render(Primer::Beta::Text.new(font_weight: :normal, color: :subtle)) do
               render(OpenProject::Common::DurationComponent.new(@meeting_section.agenda_items_sum_duration_in_minutes, :minutes, abbreviated: true))
             end
           end