bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'events-index-5-7'

Browse Source 
* events-index-5-7:
  Try a fresh activity design
  Remove leading space when avatar is hidden on pinned cards
  Display card number in notifications and events
This commit is contained in:
Jason Zimdars
2025-05-07 16:35:09 -05:00
parent 8fc077b181 9f2631d546
commit ff72674a80
7 changed files with 23 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/_global.css
-3
View File
@@ -153,7 +153,6 @@
--color-selected-dark: oklch(var(--lch-blue-light));
--color-highlight: oklch(var(--lch-yellow-lighter));
--color-marker: oklch(var(--lch-red-medium));
--color-container: oklch(var(--lch-aqua-light));
--color-terminal-bg: oklch(var(--lch-blue-darkest));
--color-terminal-text: oklch(var(--lch-green-medium));
@@ -261,8 +260,6 @@
--lch-pink-lighter: 30% 0.03 346;
--lch-pink-lightest: 25% 0.011 348;
--color-container: oklch(var(--lch-aqua-lighter));
--shadow: 0 0 0 1px oklch(var(--lch-black) / 0.42),
0 .2em 1.6em -0.8em oklch(var(--lch-black) / 0.6),
0 .4em 2.4em -1em oklch(var(--lch-black) / 0.7),
app/assets/stylesheets/cards.css
+1
View File
@@ -212,6 +212,7 @@
.card__meta-grid {
display: grid;
grid-template-columns: auto auto;
margin-inline-start: var(--inline-space);
}
.card__meta-item {
app/assets/stylesheets/events.css
+14 -10
View File
@@ -1,5 +1,8 @@
@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);
@@ -9,7 +12,7 @@
.events__container {
--column-gap: clamp(var(--inline-space), 3cqmin, calc(var(--inline-space) * 3));
--grid-lines: 0.1rem;
--grid-lines: 1px;
margin: auto;
max-inline-size: min(105ch, 100%);
@@ -24,7 +27,8 @@
}
.events__day-header-content {
background-color: var(--color-canvas);
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;
@@ -53,10 +57,10 @@
}
.events--none {
background-color: var(--color-container);
border-block-start: var(--grid-lines) solid var(--color-canvas);
background-color: var(--color-canvas);
border-block-start: var(--grid-lines) solid var(--color-ink-lightest);
padding-block: 3em;
margin: auto var(--grid-lines) calc(var(--grid-lines) * -1) auto;
margin: auto;
}
.events__popup {
@@ -66,7 +70,7 @@
.event {
--column-gap: 0.7ch;
--panel-border-color: transparent;
--panel-border-radius: var(--grid-lines);
--panel-border-radius: 0.2em;
--panel-padding: 0.6em 1.2em 0.6em 0.6em;
--panel-size: auto;
@@ -90,7 +94,7 @@
}
.event__grid-item {
background-color: var(--color-container);
background-color: var(--color-canvas);
block-size: 100%;
border-radius: 0;
display: flex;
@@ -100,7 +104,7 @@
.event__grid-column-title {
--z: 3;
background-color: var(--color-container);
background-color: var(--color-canvas);
font-size: 0.9em;
padding: 1.5em 0 1em;
text-transform: uppercase;
@@ -123,10 +127,10 @@
.event__wrapper {
align-content: end;
display: grid;
gap: calc(var(--grid-lines) * 2);
gap: var(--block-space-half);
justify-items: center;
margin: var(--grid-lines) var(--grid-lines) calc(var(--grid-lines) * 6) var(--grid-lines);
padding: 0 var(--grid-lines);
padding: var(--block-space) var(--inline-space-double);
.event {
grid-column-start: unset !important;
app/assets/stylesheets/pins.css
+4
View File
@@ -25,6 +25,10 @@
display: none;
}
.card__meta-grid {
margin-inline-start: 0;
}
.card {
--block-space: 1em;
--block-space-half: 0.5em;
app/views/cards/display/common/_meta.html.erb
+1 -1
View File
@@ -1,7 +1,7 @@
<div class="card__meta" id="<%= dom_id(card, :meta) %>">
<%= avatar_tag card.creator %>
<div class="card__meta-grid margin-inline-start">
<div class="card__meta-grid">
<span class="card__meta-item card__meta-item--added overflow-ellipsis">
Added <%= local_datetime_tag(card.created_at, style: :daysago) %>
<% if card.drafted? %>
app/views/events/event/_layout.html.erb
+2 -2
View File
@@ -1,7 +1,7 @@
<%= link_to event.notifiable_target,
class: "event event--#{ event.action } panel center center-block flex-inline align-start justify-start gap position-relative",
style: "--card-color: #{ card.color }; background-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas));
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));",
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink)); border: 1px solid color-mix(in srgb, var(--card-color) 20%, var(--color-canvas))",
data: { related_element_target: "related",
related_element_group_value: card.id,
action: "mouseover->related-element#highlight mouseout->related-element#unhighlight" } do %>
@@ -24,6 +24,6 @@
<%= yield %>
<span class="event__collection"><%= event.collection.name %></span>
<span class="event__collection"><span><%= card.id %></span> · <%= event.collection.name %></span>
</div>
<% end %>
app/views/notifications/notification/_event.html.erb
+1 -1
View File
@@ -4,4 +4,4 @@
<div class="overflow-ellipsis txt-small txt-tight-lines">
<%= event_notification_body(event) %>
</div>
<div class="tray__item-meta overflow-ellipsis translucent"><%= notification.source.collection.name %> · <%= local_datetime_tag(notification.created_at, style: :ago) %></div>
<div class="tray__item-meta overflow-ellipsis translucent"><%= event.eventable.id %> · <%= notification.source.collection.name %> · <%= local_datetime_tag(notification.created_at, style: :ago) %></div>