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

Style messages for account limits

Browse Source
This commit is contained in:
Andy Smith
2026-03-17 11:33:49 -05:00
parent a761d809ae
commit b5b3d1cd37
5 changed files with 96 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/card-perma.css
+8
View File
@@ -511,4 +511,12 @@
}
}
}
.card-perma__account-limit-message {
background-color: var(--color-canvas);
border: 2px solid var(--color-container);
border-radius: 4px;
margin-block-start: calc(var(--padding-block) / -2);
padding: 1ch 2ch;
}
}
app/assets/stylesheets/comments.css
+70 -50
View File
@@ -1,4 +1,7 @@
@layer components {
/* List
/* ------------------------------------------------------------------------ */
.comments {
--avatar-size: 2.33em;
--comment-padding-block: var(--block-space-half);
@@ -21,10 +24,8 @@
}
}
.comments__subscribers {
max-inline-size: var(--comment-max);
padding-inline: calc(var(--comment-padding-block) + var(--inline-space-double));
}
/* Comment
/* ------------------------------------------------------------------------ */
.comment {
/* Distinguish from the .comment class used for code formatting without extra specificity */
@@ -35,52 +36,6 @@
position: relative;
}
.comment-by-system & {
--comment-padding-block: var(--block-space-half);
text-align: center;
&::before {
/* Make up space for lack of avatar */
content: "";
display: flex;
inline-size: calc(var(--comment-padding-inline) * 0.9);
}
.comment__avatar {
display: none;
}
.comment__author {
a { margin: 0 auto; }
h3 { margin-inline: auto; }
strong { display: none; }
}
.comment__body {
padding: 0;
text-align: center;
}
.comment__content {
--stripe-color: var(--color-ink-lightest);
background-image: repeating-linear-gradient(
45deg in srgb,
var(--color-canvas) 0 1px,
var(--stripe-color) 1px 10px);
padding-inline: var(--comment-padding-inline);
.comments--system-expanded .comment-by-system & {
--stripe-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas));
}
}
.reactions {
display: none !important;
}
}
.reactions {
margin-block-start: var(--block-space-half);
margin-inline: calc(var(--column-gap) / -1);
@@ -195,7 +150,12 @@
}
}
/* System comment
/* ------------------------------------------------------------------------ */
.comment-by-system {
--stripe-color: var(--color-ink-lightest);
display: none;
transition: var(--dialog-duration) allow-discrete;
transition-property: display;
@@ -203,6 +163,50 @@
.comments--system-expanded & {
display: contents;
}
.comment {
--comment-padding-block: var(--block-space-half);
text-align: center;
&::before {
/* Make up space for lack of avatar */
content: "";
display: flex;
inline-size: calc(var(--comment-padding-inline) * 0.9);
}
}
.comment__avatar {
display: none;
}
.comment__author {
a { margin: 0 auto; }
h3 { margin-inline: auto; }
strong { display: none; }
}
.comment__body {
padding: 0;
text-align: center;
}
.comment__content {
background-image: repeating-linear-gradient(
45deg in srgb,
var(--color-canvas) 0 1px,
var(--stripe-color) 1px 10px);
padding-inline: var(--comment-padding-inline);
.comments--system-expanded .comment-by-system & {
--stripe-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas));
}
}
.reactions {
display: none !important;
}
}
/* Show the last system comment */
@@ -220,4 +224,20 @@
display: none;
}
}
.comment-by-system--account-limit {
--stripe-color: oklch(var(--lch-blue-lightest));
.comment__content {
padding: 3ch;
}
}
/* Subscribers
/* ------------------------------------------------------------------------ */
.comments__subscribers {
max-inline-size: var(--comment-max);
padding-inline: calc(var(--comment-padding-block) + var(--inline-space-double));
}
}
saas/app/views/cards/comments/saas/_storage_limit_exceeded.html.erb
+11 -3
View File
@@ -1,4 +1,12 @@
<div class="full-width pad-inline center margin-block txt-small txt-ink-medium">
<strong>This account has used all <%= number_to_human_size(Account::StorageLimited::STORAGE_LIMIT) %> of free storage.</strong>
<%= link_to "Self-host Fizzy", "https://github.com/basecamp/fizzy", target: "_blank" %> for unlimited storage.
<div class="comment-by-system comment-by-system--account-limit">
<div class="comment align-start full-width">
<div class="comment__content flex flex-column flex-item-grow full-width">
<div class="comment__body lexxy-content">
<div class="action-text-content">
<strong>This account has used all the included free storage (<%= number_to_human_size(Account::StorageLimited::STORAGE_LIMIT) %>).</strong>
<div><%= link_to "Self-host Fizzy", "https://github.com/basecamp/fizzy", target: "_blank" %> for unlimited storage.</div>
</div>
</div>
</div>
</div>
</div>
saas/app/views/cards/container/footer/saas/_storage_limit_exceeded.html.erb
+4 -4
View File
@@ -1,7 +1,7 @@
<div class="card-perma__notch card-perma__notch--bottom flex-column center">
<div class="pad-inline pad-block-half">
<strong>This account has used all <%= number_to_human_size(Account::StorageLimited::STORAGE_LIMIT) %> of free storage.</strong>
<div class="margin-block-start-quarter txt-small">
<div class="card-perma__notch card-perma__notch--bottom">
<div class="card-perma__account-limit-message">
<strong>This account has used all the included free storage (<%= number_to_human_size(Account::StorageLimited::STORAGE_LIMIT) %>).</strong>
<div>
<%= link_to "Self-host Fizzy", "https://github.com/basecamp/fizzy", target: "_blank" %> for unlimited storage.
</div>
</div>
saas/app/views/cards/container/footer/saas/_storage_limit_notice.html.erb
+3 -2
View File
@@ -1,5 +1,6 @@
<% if Current.account.nearing_storage_limit? %>
<div class="full-width pad-inline center margin-block-half txt-small txt-ink-medium">
This account has used <%= number_to_human_size(Current.account.bytes_used) %> of <%= number_to_human_size(Account::StorageLimited::STORAGE_LIMIT) %> storage.
<div class="txt-small">
This account has used <strong><%= number_to_human_size(Current.account.bytes_used) %></strong> of <strong><%= number_to_human_size(Account::StorageLimited::STORAGE_LIMIT) %></strong> storage.
<div><%= link_to "Self-host Fizzy", "https://github.com/basecamp/fizzy", class: "txt-current txt-underline", target: "_blank" %> for unlimited storage.</div>
</div>
<% end %>