diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css index 8eff63030..cf6756887 100644 --- a/app/assets/stylesheets/events.css +++ b/app/assets/stylesheets/events.css @@ -46,6 +46,33 @@ text-transform: uppercase; } + .events__column { + display: contents; + } + + .events__column-header { + background: tomato; + grid-row-start: 2; + position: sticky; + inset-block-start: 1lh; + } + + .events__time-block { + align-content: end; + display: grid; + gap: var(--events-gap); + justify-items: center; + padding: 0; + margin: 0; + /* margin: var(--grid-lines) var(--grid-lines) calc(var(--grid-lines) * 6) var(--grid-lines); + padding: var(--block-space) var(--inline-space-double); */ + + .event { + grid-column-start: unset !important; + grid-row-start: unset !important; + } + } + .events__none { background-color: var(--color-canvas); border-block-start: var(--events-border); @@ -153,20 +180,6 @@ line-height: 1.2; } - .event__wrapper { - align-content: end; - display: grid; - gap: var(--block-space-half); - justify-items: center; - margin: var(--grid-lines) var(--grid-lines) calc(var(--grid-lines) * 6) var(--grid-lines); - padding: var(--block-space) var(--inline-space-double); - - .event { - grid-column-start: unset !important; - grid-row-start: unset !important; - } - } - .event__icon { aspect-ratio: 1; background-color: var(--card-color); diff --git a/app/helpers/events_helper.rb b/app/helpers/events_helper.rb index b00408cc3..31979cf54 100644 --- a/app/helpers/events_helper.rb +++ b/app/helpers/events_helper.rb @@ -12,7 +12,7 @@ module EventsHelper def event_cluster_tag(hour, col, &) row = 25 - hour - tag.div class: "event__wrapper", style: "grid-area: #{row}/#{col}", & + tag.ul class: "events__time-block", style: "grid-area: #{row}/#{col}", & end def event_next_page_link(next_day) diff --git a/app/views/events/_day.html.erb b/app/views/events/_day.html.erb index 3b97d3cda..ff7937c07 100644 --- a/app/views/events/_day.html.erb +++ b/app/views/events/_day.html.erb @@ -7,7 +7,21 @@ -