From 07b3ae48229a85e8f3e8e0fd7fc76f1a9f618fd9 Mon Sep 17 00:00:00 2001 From: Mir Bhatia Date: Tue, 24 Sep 2024 14:17:16 +0200 Subject: [PATCH 1/5] [#57671] Improve display of work package and agenda titles in meetings https://community.openproject.org/work_packages/57671 From 6666d963915ced25bac7c96198efa12b31c6bdba Mon Sep 17 00:00:00 2001 From: Mir Bhatia Date: Thu, 26 Sep 2024 17:30:02 +0200 Subject: [PATCH 2/5] Update meeting agenda item layout --- .../item_component/show_component.html.erb | 35 +++++++++++++------ .../item_component/show_component.sass | 12 +++++-- 2 files changed, 33 insertions(+), 14 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 index 8c7414ca3035..afb322d7c23c 100644 --- 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 @@ -10,21 +10,21 @@ grid.with_area(:content, tag: :span) do if @meeting_agenda_item.visible_work_package? flex_layout(align_items: :center) do |flex| - flex.with_column(mr: 2, flex: 1, classes: 'ellipsis') do - render(Primer::Beta::Link.new(href: work_package_path(@meeting_agenda_item.work_package), underline: false, - test_selector: 'op-meeting-agenda-title', - font_size: :normal, font_weight: :bold, target: "_blank")) do - @meeting_agenda_item.work_package.subject - end - end + # flex.with_column(mr: 2, flex: 1, classes: 'ellipsis') do + # render(Primer::Beta::Link.new(href: work_package_path(@meeting_agenda_item.work_package), underline: false, + # test_selector: 'op-meeting-agenda-title', + # font_size: :normal, font_weight: :bold, target: "_blank")) do + # @meeting_agenda_item.work_package.subject + # end + # end - flex.with_column(mr: 2, classes: 'hidden-for-mobile') do + flex.with_column(mr: 2) do render(Primer::Beta::Text.new(font_size: :small, color: :subtle)) do - "#{@meeting_agenda_item.work_package.type.name} ##{@meeting_agenda_item.work_package.id}" + "##{@meeting_agenda_item.work_package.id} #{@meeting_agenda_item.work_package.type.name}" end end - flex.with_column(mr: 2, classes: 'hidden-for-mobile') do + flex.with_column(mr: 2) do render(Primer::Beta::Label.new(font_weight: :bold)) do @meeting_agenda_item.work_package.status.name end @@ -45,8 +45,19 @@ end end + grid.with_area(:title, tag: :div) do + if @meeting_agenda_item.visible_work_package? + render(Primer::Beta::Link.new(href: work_package_path(@meeting_agenda_item.work_package), underline: false, + test_selector: 'op-meeting-agenda-title', + font_size: :normal, font_weight: :bold, target: "_blank")) do + @meeting_agenda_item.work_package.subject + end + end + 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: 1, font_size: :small) do + grid.with_area(:duration, Primer::Beta::Text, color: duration_color_scheme, mr: 2, font_size: :small) do I18n.t('datetime.distance_in_words.x_minutes_abbreviated', count: @meeting_agenda_item.duration_in_minutes) end end @@ -61,6 +72,8 @@ end end + + grid.with_area(:actions, tag: :div, justify_self: :end, classes: "hide-when-print") do if edit_enabled? render(Primer::Alpha::ActionMenu.new) do |menu| 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 index 7fe47c849a68..254c6bb2483a 100644 --- 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 @@ -5,12 +5,13 @@ $meeting-agenda-item--presenter-width: 300px .op-meeting-agenda-item display: grid grid-template-columns: 20px auto 1fr fit-content($meeting-agenda-item--presenter-width) fit-content(40px) - grid-template-areas: "drag-handle content duration presenter actions" ".notes notes notes notes" + grid-template-areas: "drag-handle content duration presenter actions" ". title title title title" ". notes notes notes notes" &--drag-handle, &--duration, &--content, - &--presenter + &--presenter, + &--title align-self: center &--actions @@ -22,13 +23,18 @@ $meeting-agenda-item--presenter-width: 300px &--duration white-space: nowrap + justify-self: end + + &--title + overflow-wrap: anywhere + margin-bottom: 0 &--content @include text-shortener @media screen and (max-width: $breakpoint-lg) grid-template-columns: 20px auto 1fr calc($meeting-agenda-item--presenter-width - 50px) 50px - grid-template-areas: "drag-handle content content content actions" ". duration . presenter presenter" ". notes notes notes notes" + grid-template-areas: "drag-handle content content content actions" ". duration . presenter presenter" ". title title title title" ". notes notes notes notes" &--author justify-self: stretch From 56705731ab0b4cfdadddccf7dc62e07d6d6cd0d7 Mon Sep 17 00:00:00 2001 From: Mir Bhatia Date: Thu, 26 Sep 2024 18:25:13 +0200 Subject: [PATCH 3/5] Add misssing case --- .../meeting_agenda_items/item_component/show_component.html.erb | 2 +- .../meeting_agenda_items/item_component/show_component.sass | 2 +- 2 files changed, 2 insertions(+), 2 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 index afb322d7c23c..8e28ef923dd2 100644 --- 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 @@ -7,7 +7,7 @@ end end - grid.with_area(:content, tag: :span) do + grid.with_area(:content, tag: :span, mr: 2) do if @meeting_agenda_item.visible_work_package? flex_layout(align_items: :center) do |flex| # flex.with_column(mr: 2, flex: 1, classes: 'ellipsis') do 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 index 254c6bb2483a..99cd088513a0 100644 --- 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 @@ -30,7 +30,7 @@ $meeting-agenda-item--presenter-width: 300px margin-bottom: 0 &--content - @include text-shortener + overflow-wrap: anywhere @media screen and (max-width: $breakpoint-lg) grid-template-columns: 20px auto 1fr calc($meeting-agenda-item--presenter-width - 50px) 50px From 6c06bb28834c814e38c26b3996b038d472d3109a Mon Sep 17 00:00:00 2001 From: Mir Bhatia Date: Mon, 30 Sep 2024 15:49:45 +0200 Subject: [PATCH 4/5] Fix vertical align and mobile width --- .../item_component/show_component.html.erb | 11 ----------- .../item_component/show_component.sass | 10 ++++++++-- 2 files changed, 8 insertions(+), 13 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 index 8e28ef923dd2..072d443a07eb 100644 --- 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 @@ -10,14 +10,6 @@ grid.with_area(:content, tag: :span, mr: 2) do if @meeting_agenda_item.visible_work_package? flex_layout(align_items: :center) do |flex| - # flex.with_column(mr: 2, flex: 1, classes: 'ellipsis') do - # render(Primer::Beta::Link.new(href: work_package_path(@meeting_agenda_item.work_package), underline: false, - # test_selector: 'op-meeting-agenda-title', - # font_size: :normal, font_weight: :bold, target: "_blank")) do - # @meeting_agenda_item.work_package.subject - # end - # end - flex.with_column(mr: 2) do render(Primer::Beta::Text.new(font_size: :small, color: :subtle)) do "##{@meeting_agenda_item.work_package.id} #{@meeting_agenda_item.work_package.type.name}" @@ -55,7 +47,6 @@ end 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 I18n.t('datetime.distance_in_words.x_minutes_abbreviated', count: @meeting_agenda_item.duration_in_minutes) @@ -72,8 +63,6 @@ end end - - grid.with_area(:actions, tag: :div, justify_self: :end, classes: "hide-when-print") do if edit_enabled? render(Primer::Alpha::ActionMenu.new) do |menu| 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 index 99cd088513a0..1928b228ceac 100644 --- 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,7 @@ @import 'helpers' $meeting-agenda-item--presenter-width: 300px +$meeting-agenda-item--presenter-width--mobile: 150px .op-meeting-agenda-item display: grid @@ -10,7 +11,9 @@ $meeting-agenda-item--presenter-width: 300px &--drag-handle, &--duration, &--content, - &--presenter, + &--presenter + align-self: start + &--title align-self: center @@ -33,8 +36,11 @@ $meeting-agenda-item--presenter-width: 300px overflow-wrap: anywhere @media screen and (max-width: $breakpoint-lg) - grid-template-columns: 20px auto 1fr calc($meeting-agenda-item--presenter-width - 50px) 50px + 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" &--author justify-self: stretch + + &--presenter + max-width: $meeting-agenda-item--presenter-width--mobile From 762818d8082fcd9e4cfb1228afcb5d2c4078d701 Mon Sep 17 00:00:00 2001 From: Mir Bhatia Date: Tue, 1 Oct 2024 18:26:06 +0200 Subject: [PATCH 5/5] Fix alignment issues and further tweak layout --- .../item_component/show_component.html.erb | 6 +-- .../item_component/show_component.sass | 39 ++++++++++++------- .../header_component.html.erb | 4 +- 3 files changed, 31 insertions(+), 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 index 072d443a07eb..544eace1f353 100644 --- 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 index 1928b228ceac..bdc592222afd 100644 --- 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 index 6eeb23ad560a..4bda5a476f4e 100644 --- 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