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..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 @@ -7,24 +7,16 @@ 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 - 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,16 +37,26 @@ 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) 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 7fe47c849a68..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,34 +1,59 @@ @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 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 - align-self: center - + &--presenter, &--actions + align-self: start + + &--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 - &--content - @include text-shortener + &--title + align-self: center + overflow-wrap: anywhere + + .custom-presenter-flex + margin-left: auto @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-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