Restructure day containers
This commit is contained in:
Andy Smith
@@ -1,15 +1,72 @@
|
||||
@layer components {
|
||||
.events {
|
||||
background-color: var(--color-ink-lighter);
|
||||
border-block-start: var(--grid-lines) solid var(--color-ink-lighter);
|
||||
border-inline-start: var(--grid-lines) solid var(--color-ink-lighter);
|
||||
display: grid;
|
||||
gap: 0 var(--grid-lines);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
--events-gap: 1ch;
|
||||
--events-border: 1px solid var(--color-ink-lighter)
|
||||
}
|
||||
|
||||
/* Day
|
||||
/* ------------------------------------------------------------------------ */
|
||||
|
||||
.events__day {
|
||||
align-items: end;
|
||||
column-gap: var(--events-gap);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
margin-block-end: var(--events-gap);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.events__day-header {
|
||||
background-color: gold;
|
||||
grid-column: 1 / -1;
|
||||
inset-block-start: 0;
|
||||
padding-block-start: 0.5ch;
|
||||
position: sticky;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
border-block-start: var(--events-border);
|
||||
position: absolute;
|
||||
inset: 50% 0 auto 0;
|
||||
translate: 0 -50%;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.events__day-header-content {
|
||||
background-color: var(--color-ink-lighter);
|
||||
border-radius: 0.2em;
|
||||
display: block;
|
||||
font-size: var(--text-small);
|
||||
inline-size: fit-content;
|
||||
line-height: 1.5;
|
||||
margin-inline: auto;
|
||||
padding: 0.2em 1.3em;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.events__none {
|
||||
background-color: var(--color-canvas);
|
||||
border-block-start: var(--events-border);
|
||||
grid-column: 1 / -1;
|
||||
padding-block: 3em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Column
|
||||
/* ------------------------------------------------------------------------ */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.events__container {
|
||||
--column-gap: clamp(var(--inline-space), 3cqmin, calc(var(--inline-space) * 3));
|
||||
--grid-lines: 1px;
|
||||
@@ -18,27 +75,6 @@
|
||||
max-inline-size: min(105ch, 100%);
|
||||
}
|
||||
|
||||
.events__day-header {
|
||||
background-color: var(--color-canvas);
|
||||
block-size: var(--grid-lines);
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.events__day-header-content {
|
||||
background-color: var(--color-ink-lighter);
|
||||
border-radius: 0.2em;
|
||||
display: inline-flex;
|
||||
font-size: 0.8em;
|
||||
inset: calc(var(--grid-lines) - 1em) auto -1em;
|
||||
line-height: 1.5;
|
||||
padding: 0.2em 1.3em;
|
||||
position: absolute;
|
||||
text-transform: uppercase;
|
||||
transform: translateX(calc(-50% - var(--grid-lines) / 2));
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.events__filter-btn {
|
||||
font-weight: 500;
|
||||
@@ -56,13 +92,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.events--none {
|
||||
background-color: var(--color-canvas);
|
||||
border-block-start: var(--grid-lines) solid var(--color-ink-lightest);
|
||||
padding-block: 3em;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.events__popup {
|
||||
margin-block-start: var(--block-space-double);
|
||||
}
|
||||
@@ -119,7 +148,7 @@
|
||||
|
||||
.event__title {
|
||||
--lines: 4;
|
||||
|
||||
|
||||
font-size: 1.1em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<div class="events--day" data-controller="related-element"
|
||||
<div class="events__day" data-controller="related-element"
|
||||
data-related-element-highlight-class="event--related">
|
||||
<% if day_timeline.has_activity? %>
|
||||
<h2 class="txt-medium events__day-header center">
|
||||
<h2 class="events__day-header">
|
||||
<span class="events__day-header-content">
|
||||
<%= local_datetime_tag day_timeline.day, style: :agoorweekday, class: "txt-ink" %>
|
||||
</span>
|
||||
|
||||
@@ -2,18 +2,18 @@
|
||||
|
||||
<% if earliest.present? %>
|
||||
<% if earliest == latest %>
|
||||
<div class="events--none txt-align-center">
|
||||
<div class="events__none">
|
||||
<h2 class="txt-medium margin-none"><%= local_datetime_tag earliest, style: :agoorweekday, class: "txt-ink txt-capitalize" %></h2>
|
||||
<p class="margin-none">No activity</p>
|
||||
</div>
|
||||
<% elsif earliest < latest %>
|
||||
<div class="events--none txt-align-center">
|
||||
<div class="events__none">
|
||||
<h2 class="txt-medium margin-none"><%= local_datetime_tag earliest, style: :agoorweekday, class: "txt-ink txt-capitalize" %> – <%= local_datetime_tag latest, style: :agoorweekday, class: "txt-ink txt-capitalize" %></h2>
|
||||
<p class="margin-none">No activity for <%= (latest - earliest).seconds.in_days.round + 1 %> days</p>
|
||||
</div>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<div class="events--none txt-align-center">
|
||||
<div class="events__none">
|
||||
<p class="margin-none">No more activity.</p>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
@@ -16,11 +16,7 @@
|
||||
</nav>
|
||||
<% end %>
|
||||
|
||||
<div class="events__container align-start gap">
|
||||
<div class="flex flex-column">
|
||||
<div id="activity" class="events__index flex flex-column">
|
||||
<%= render "events/day", day_timeline: @day_timeline %>
|
||||
</div>
|
||||
<%= event_next_page_link(@day_timeline.next_day) %>
|
||||
</div>
|
||||
<div class="events" id="activity">
|
||||
<%= render "events/day", day_timeline: @day_timeline %>
|
||||
<%= event_next_page_link(@day_timeline.next_day) %>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user