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

Tighten cards

Browse Source
This commit is contained in:
Jason Zimdars
2025-05-20 18:11:18 -05:00
parent 46ca6f13f6
commit f5e3e58be4
3 changed files with 41 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/card-columns.css
+1
View File
@@ -194,6 +194,7 @@
.card__closed {
aspect-ratio: unset;
border-width: 0.5ch;
font-size: 0.75em;
inset: auto 0 auto auto;
transform: none;
}
app/assets/stylesheets/cards.css
+20 -7
View File
@@ -89,20 +89,38 @@
.card__header {
margin-block-start: calc(-1 * var(--card-padding-block));
margin-inline-start: calc(-1 * var(--card-padding-inline));
.cards--considering & {
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
margin: 0 0 calc(-0.5 * var(--card-padding-inline)) 0;
}
}
.card__collection {
background-color: var(--card-color);
border-radius: var(--border-radius) 0 var(--border-radius) 0;
color: var(--color-ink-inverted);
font-weight: 800;
padding: var(--block-space-half) var(--inline-space) var(--block-space-half) var(--inline-space-double);
.cards--considering & {
background-color: var(--color-canvas);
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
padding: 0 0 0 var(--inline-space);
}
}
.card__collection-name {
border-inline-start: 1px solid color-mix(in srgb, var(--color-ink-inverted) 33%, var(--card-color));
color: var(--color-ink-inverted);
display: inline-flex;
margin-inline-start: var(--inline-space-half);
padding-inline-start: calc(var(--inline-space) * 0.75);
.cards--considering & {
border-inline-start: 1px solid color-mix(in srgb, var(--color-ink) 33%, var(--color-canvas));
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
}
}
.card__tags {
@@ -151,13 +169,8 @@
font-size: var(--text-xx-large);
font-weight: 900;
line-height: 1.2;
min-block-size: 3lh;
text-wrap: balance;
.card-perma__bg & {
min-block-size: unset;
}
.card-field__title {
&:is(textarea)::placeholder {
color: inherit;
@@ -255,7 +268,7 @@
inset: auto var(--block-space) var(--block-space-double) auto;
justify-content: center;
max-inline-size: 25ch;
min-inline-size: 18ch;
min-inline-size: 16ch;
mix-blend-mode: multiply;
padding: 1ch;
position: absolute;
@@ -272,7 +285,7 @@
}
.card__closed-title {
font-size: 1.5em;
font-size: 1.3em;
font-weight: 900;
line-height: 1.2;
position: relative;
app/views/cards/display/_preview.html.erb
+20 -16
View File
@@ -1,23 +1,27 @@
<% cache card do %>
<%= card_article_tag card, class: "card" do %>
<header class="card__header flex align-center gap min-width">
<span class="card__collection">
<span class="card__id txt-reversed"><%= card.id %></span>
<%= link_to card.collection.name, cards_path(collection_ids: [ card.collection ]),
class: "card__collection-name txt-uppercase overflow-ellipsis txt-reversed" %>
</span>
<%= render "cards/display/preview/tags", card: card %>
</header>
<div class="flex gap">
<div class="flex flex-column flex-item-grow">
<header class="card__header flex align-center gap min-width">
<span class="card__collection">
<span class="card__id"><%= card.id %></span>
<%= link_to card.collection.name, cards_path(collection_ids: [ card.collection ]),
class: "card__collection-name txt-uppercase overflow-ellipsis" %>
</span>
<%= render "cards/display/preview/tags", card: card %>
</header>
<div class="card__body flex gap full-width flex-item-grow justify-space-between">
<div class="card__content">
<h1 class="card__title overflow-line-clamp">
<%= card.title %>
</h1>
<div class="card__body flex gap full-width flex-item-grow justify-space-between">
<div class="card__content">
<h1 class="card__title overflow-line-clamp">
<%= card.title %>
</h1>
<%= link_to collection_card_path(card.collection, card), class: "card__link", title: card_title_tag(card), data: { action: "dialog#close", turbo_frame: "_top" } do %>
<span class="for-screen-reader"><%= card.title %></span>
<% end %>
<%= link_to collection_card_path(card.collection, card), class: "card__link", title: card_title_tag(card), data: { action: "dialog#close", turbo_frame: "_top" } do %>
<span class="for-screen-reader"><%= card.title %></span>
<% end %>
</div>
</div>
</div>
<%= render "cards/stagings/stages", card: card if card.doing? %>