diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css index 20fb53217..1dbdf0997 100644 --- a/app/assets/stylesheets/events.css +++ b/app/assets/stylesheets/events.css @@ -19,6 +19,33 @@ --events-day-header-height: 1.75rem; } + .events--grid { + --events-grid-gap: 1rem; + --events-grid-columns: 1; + + container-type: inline-size; + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: var(--events-grid-gap); + justify-content: center; + margin: var(--block-space) auto; + max-inline-size: var(--main-width); + + @media (min-width: 640px) { + --events-grid-columns: 2; + } + + @media (min-width: 960px) { + --events-grid-columns: 3; + } + + .event { + inline-size: calc((100% - var(--events-grid-gap) * (var(--events-grid-columns) - 1) ) / var(--events-grid-columns)) !important; + margin: 0 !important; + } + } + .events__activity-summary { border: solid var(--color-ink-lighter); border-width: 1px 1px 0 1px; @@ -206,6 +233,23 @@ padding: var(--block-space-half) var(--inline-space); } + .events__maximize-button { + inset: calc(var(--events-gap) * 3) 0 auto auto; + outline-offset: -2px; + position: absolute; + transform: translateY(-10%); + z-index: 1; + + @media (any-hover: hover ) { + opacity: 0; + + .events__column-header:hover &, + &:focus-visible { + opacity: 1; + } + } + } + .events__time-block { align-content: end; display: grid; diff --git a/app/controllers/events/day_timeline/columns_controller.rb b/app/controllers/events/day_timeline/columns_controller.rb new file mode 100644 index 000000000..362521634 --- /dev/null +++ b/app/controllers/events/day_timeline/columns_controller.rb @@ -0,0 +1,22 @@ +class Events::DayTimeline::ColumnsController < ApplicationController + include DayTimelinesScoped + + def show + @column = column_for_id(params[:id]) + fresh_when @day_timeline + end + + private + def column_for_id(id) + case id.to_s.downcase + when "added", "1" + @day_timeline.added_column + when "updated", "2" + @day_timeline.updated_column + when "closed", "3" + @day_timeline.closed_column + else + head :not_found + end + end +end diff --git a/app/models/user/day_timeline/column.rb b/app/models/user/day_timeline/column.rb index fe42c68dc..0331a83ff 100644 --- a/app/models/user/day_timeline/column.rb +++ b/app/models/user/day_timeline/column.rb @@ -1,7 +1,7 @@ class User::DayTimeline::Column include ActionView::Helpers::TagHelper, ActionView::Helpers::OutputSafetyHelper, TimeHelper - attr_reader :index + attr_reader :index, :base_title, :day_timeline, :events def initialize(day_timeline, base_title, index, events) @day_timeline = day_timeline @@ -30,8 +30,6 @@ class User::DayTimeline::Column end private - attr_reader :base_title, :day_timeline, :events - def limited_events @limited_events ||= events.limit(100).load end diff --git a/app/views/events/day_timeline/_column.html.erb b/app/views/events/day_timeline/_column.html.erb index 6e036a412..a9e14c558 100644 --- a/app/views/events/day_timeline/_column.html.erb +++ b/app/views/events/day_timeline/_column.html.erb @@ -1,5 +1,14 @@