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

Further polish notification cards

Browse Source
This commit is contained in:
Jason Zimdars
2025-06-17 11:48:04 -05:00
parent 2be2b02803
commit 77ba1d81e2
6 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/cards.css
+11 -5
View File
@@ -64,7 +64,7 @@
border-radius: var(--border-radius) 0 0 0;
display: flex;
flex-wrap: nowrap;
gap: var(--inline-space-half);
gap: var(--inline-space);
margin-block-start: calc(-1 * var(--card-padding-block));
margin-inline-start: calc(-1 * var(--card-padding-inline));
max-inline-size: 100%;
@@ -353,15 +353,21 @@
padding-block-end: 0;
}
.card__notification-body {
font-size: var(--text-x-small);
}
.card__notification-meta {
font-size: var(--text-xx-small);
font-weight: 600;
text-transform: uppercase;
}
.card__title {
font-size: var(--text-small);
font-weight: bold;
min-block-size: 0;
}
.card__notification-meta {
font-size: var(--text-x-small);
}
}
.card__notification-unread-indicator {
app/assets/stylesheets/trays.css
-4
View File
@@ -409,10 +409,6 @@
--btn-size: 2em;
}
.card__notification-meta {
font-size: var(--text-x-small);
}
/* On mobile… */
@media (max-width: 799px) {
/* …add a border */
app/views/notifications/notification/event/_body.html.erb
+1 -1
View File
@@ -4,6 +4,6 @@
<%= event_notification_title(event) %>
</div>
<div class="card__notification-meta overflow-ellipsis">
<div class="card__notification-body overflow-ellipsis">
<%= event_notification_body(event) %></span>
</div>
app/views/notifications/notification/event/_header.html.erb
+2 -2
View File
@@ -5,10 +5,10 @@
</span>
</div>
<div class="card__notification-meta overflow-ellipsis flex-item-grow flex-item-no-shrink align-self-end">
<div class="card__notification-meta overflow-ellipsis flex-item-grow flex-item-no-shrink txt-align-end">
<span class="card__creator"><%= notification.creator.familiar_name %></span>
</div>
<div class="card__notification-meta overflow-ellipsis flex-item-no-shrink align-self-end">
<div class="card__notification-meta overflow-ellipsis flex-item-no-shrink">
<span class="card__timestamp"><%= local_datetime_tag(notification.created_at) %></span>
</div>
app/views/notifications/notification/mention/_body.html.erb
+1 -1
View File
@@ -1,6 +1,6 @@
<% mention = notification.source %>
<strong class="card__title overflow-ellipsis"><%= mention.mentioner.first_name %> mentioned you</strong>
<div class="card__notification-meta overflow-ellipsis">
<div class="card__notification-body overflow-ellipsis">
<%= mention.source.mentionable_content.truncate(200) %>
</div>
app/views/notifications/notification/mention/_header.html.erb
+2 -2
View File
@@ -5,11 +5,11 @@
</span>
</div>
<div class="card__notification-meta overflow-ellipsis flex-item-grow flex-item-no-shrink align-self-end">
<div class="card__notification-meta overflow-ellipsis flex-item-grow flex-item-no-shrink flex-item-justify-end">
<span class="card__creator"><%= notification.creator.familiar_name %></span>
</div>
<div class="card__notification-meta overflow-ellipsis flex-item-no-shrink align-self-end">
<div class="card__notification-meta overflow-ellipsis flex-item-no-shrink">
<span class="card__timestamp"><%= local_datetime_tag(notification.created_at) %></span>
</div>