From 399791bddb6f14c944236f5d41f7cd07de0ec9ce Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 24 Sep 2025 11:19:34 -0500 Subject: [PATCH] Card design tweaks --- app/assets/images/tag-outline.svg | 1 + app/assets/images/tag.svg | 2 +- app/assets/stylesheets/_global.css | 2 +- app/assets/stylesheets/card-columns.css | 77 +++++++++++-------- app/assets/stylesheets/cards.css | 72 ++++++++--------- app/assets/stylesheets/icons.css | 1 + app/views/cards/display/_preview.html.erb | 2 +- .../cards/display/_public_preview.html.erb | 1 - .../cards/display/common/_collection.html.erb | 2 +- app/views/cards/display/perma/_tags.html.erb | 25 +++--- .../cards/display/preview/_tags.html.erb | 16 ++-- 11 files changed, 109 insertions(+), 92 deletions(-) create mode 100644 app/assets/images/tag-outline.svg diff --git a/app/assets/images/tag-outline.svg b/app/assets/images/tag-outline.svg new file mode 100644 index 000000000..1c8fab206 --- /dev/null +++ b/app/assets/images/tag-outline.svg @@ -0,0 +1 @@ + diff --git a/app/assets/images/tag.svg b/app/assets/images/tag.svg index 76591fe36..aa0368613 100644 --- a/app/assets/images/tag.svg +++ b/app/assets/images/tag.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css index 0f6c4c2c1..5540cc1a0 100644 --- a/app/assets/stylesheets/_global.css +++ b/app/assets/stylesheets/_global.css @@ -206,7 +206,7 @@ /* Colors: Cards */ --color-card-default: oklch(var(--lch-blue-dark)); - --color-card-complete: var(--color-ink); + --color-card-complete: var(--color-ink-darker); --color-card-1: oklch(var(--lch-ink-medium)); --color-card-2: oklch(var(--lch-uncolor-medium)); --color-card-3: oklch(var(--lch-yellow-medium)); diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index fae632c5e..0dc828829 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -169,6 +169,13 @@ } } + .blank-slate--card { + box-shadow: none !important; + border: 2px dashed color-mix(in srgb, var(--card-color) 40%, var(--color-canvas));; + font-weight: 600; + rotate: 2deg; + } + /* TODO: I think this is legacy now? */ .cards__heading { display: flex; @@ -213,16 +220,10 @@ /* ------------------------------------------------------------------------ */ .cards { - .blank-slate--card { - box-shadow: none !important; - border: 2px dashed color-mix(in srgb, var(--card-color) 40%, var(--color-canvas));; - font-weight: 600; - rotate: 2deg; - } - .card { --block-space: 1em; --block-space-half: 0.5em; + --card-padding-inline: 1em; --text-xx-large: 1.6em; --text-x-small: 1em; @@ -230,12 +231,8 @@ font-size: clamp(0.6rem, 0.85cqi, 100px); } - .card__body { - margin-block: var(--block-space-half); - } - - .card__footer { - margin-block-start: var(--block-space-half); + .card__tags { + gap: calc(var(--card-header-space) / 2); } .card__title { @@ -251,6 +248,19 @@ display: none; } + .card__body { + padding-block: calc(var(--card-padding-block) * 0.75); + } + + .card__meta { + font-weight: 600; + + strong, + .local-time-value { + font-weight: inherit; + } + } + .card:has(.card__background img:not([src=""])) { .card__content, .card__meta, @@ -370,21 +380,35 @@ &:nth-child(4n) { rotate: 0.5deg; } } - .card__body { - padding-block-start: 0; - padding-inline: 0; - } - .card__collection { background-color: transparent; - color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink)); + color: var(--card-text-color); } - .card__collection-name { - 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)); + /* The following groups the header and title on considering cards */ + .card__header { + color: var(--color-ink); } + .card__collection, + .card__tags { + color: inherit; + } + + .card__body { + padding-block: 0 var(--card-padding-block); + } + /* End */ + + /* The Uncomment the following to add borders and such */ + /* + .card__collection { + border-block-end: var(--card-border); + border-inline-end: var(--card-border); + } + */ + /* End */ + .card--drafted { --card-color: var(--color-ink-medium) !important; @@ -393,11 +417,6 @@ box-shadow: none !important; } - .card__header { - color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink)); - margin-inline: calc(-0.5 * var(--card-padding-inline)) calc(-0.25 * var(--card-padding-inline)); - } - .card__people-label { display: none; } @@ -405,10 +424,6 @@ .card__title { min-block-size: 0; } - - .card__tags { - font-size: var(--text-small); - } } diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index f0ae80af0..bffd4211c 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -5,6 +5,9 @@ .card { --avatar-size: 2.75em; --card-bg-color: color-mix(in srgb, var(--card-color) 4%, var(--color-canvas)); + --card-text-color: color-mix(in srgb, var(--card-color) 75%, var(--color-ink)); + --card-border: 1px solid color-mix(in srgb, var(--card-color) 33%, var(--color-ink-inverted)); + --card-header-space: 1ch; --card-padding-inline: var(--inline-space-double); --card-padding-block: var(--block-space); --border-color: transparent; @@ -15,7 +18,7 @@ background-color: var(--card-bg-color); border-radius: var(--border-radius); box-shadow: var(--shadow); - color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink)); + color: var(--card-text-color); display: flex; flex-direction: column; inline-size: 100%; @@ -41,7 +44,7 @@ border-radius: var(--border-radius) 0 0 0; display: flex; flex-wrap: nowrap; - gap: var(--inline-space); + gap: var(--card-header-space); margin-block-start: calc(-1 * var(--card-padding-block)); margin-inline: calc(-1 * var(--card-padding-inline)) calc(-0.5 * var(--card-padding-inline)); max-inline-size: unset; @@ -52,25 +55,16 @@ } } - .card__id { - flex-shrink: 0; - margin-inline-start: calc(var(--inline-space) * -1); - - .card-perma &:before { - content: "No."; - opacity: 0.5; - } - } - .card__collection { background-color: var(--card-color); border-radius: var(--border-radius) 0 var(--border-radius) 0; color: var(--color-ink-inverted); display: inline-flex; - font-weight: 800; + font-weight: 600; max-inline-size: 100%; min-inline-size: 0; - padding: var(--block-space-half) var(--inline-space) var(--block-space-half) var(--card-padding-inline); + padding-block: 0.25lh; + padding-inline: var(--card-padding-inline) 1ch; &:has(.collection-picker__button) { cursor: pointer; @@ -89,34 +83,43 @@ } } - .card__collection-name { - border-inline-start: 1px solid color-mix(in srgb, var(--color-ink-inverted) 33%, var(--card-color)); - color: currentcolor; - display: flex; - margin-inline-start: var(--inline-space-half); - max-inline-size: 100%; - min-inline-size: 0; - padding-inline-start: calc(var(--inline-space) * 0.75); - text-transform: uppercase; + .card__id { + flex-shrink: 0; - .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-perma &:before { + content: "No."; + opacity: 0.5; } } - .card__tag { - color: var(--card-color); - font-weight: 700; + .card__collection-name { + border-inline-start: 1px solid color-mix(in hsl, transparent 75%, currentColor); + color: currentColor; + display: flex; + margin-inline-start: var(--card-header-space); + max-inline-size: 100%; + min-inline-size: 0; + padding-inline-start: var(--card-header-space); + text-transform: uppercase; } .card__tags { + --btn-color: var(--card-color); + align-items: center; - color: var(--card-color); + color: var(--card-text-color); display: flex; + gap: var(--card-header-space); min-inline-size: 0; } + .card__tag { + color: inherit; + font-weight: 600; + min-width: 0; + text-transform: uppercase; + } + /* Body /* ------------------------------------------------------------------------ */ @@ -140,10 +143,10 @@ .card__title { --input-border-radius: 0; - --input-color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink)); + --input-color: var(--card-text-color); --lines: 3; - color: inherit; + color: var(--color-ink); font-size: var(--text-xx-large); font-weight: 900; line-height: 1.3; @@ -199,7 +202,6 @@ /* ------------------------------------------------------------------------ */ .card__meta { - --meta-border: 1px solid color-mix(in srgb, var(--card-color) 50%, transparent); --meta-spacer-block: 0.5ch; --meta-spacer-inline: 0.75ch; @@ -259,7 +261,7 @@ /* Top */ .card__meta-text:nth-of-type(odd) { - border-block-end: var(--meta-border); + border-block-end: var(--card-border); padding-block-end: var(--meta-spacer-block); } @@ -270,7 +272,7 @@ /* Left */ .card__meta-text:nth-of-type(-n+2) { - border-inline-end: var(--meta-border); + border-inline-end: var(--card-border); padding-inline-end: var(--meta-spacer-inline); } diff --git a/app/assets/stylesheets/icons.css b/app/assets/stylesheets/icons.css index 6eab28b1b..3733ceb34 100644 --- a/app/assets/stylesheets/icons.css +++ b/app/assets/stylesheets/icons.css @@ -85,6 +85,7 @@ .icon--sliders { --svg: url("sliders.svg "); } .icon--switch { --svg: url("switch.svg "); } .icon--tag { --svg: url("tag.svg "); } + .icon--tag-outline { --svg: url("tag-outline.svg "); } .icon--thumb-up { --svg: url("thumb-up.svg "); } .icon--trash { --svg: url("trash.svg "); } .icon--unpinned { --svg: url("unpinned.svg"); } diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb index 2f580a519..70391db02 100644 --- a/app/views/cards/display/_preview.html.erb +++ b/app/views/cards/display/_preview.html.erb @@ -6,7 +6,7 @@ <%= render "cards/display/preview/collection", card: card %> <%= render "cards/display/preview/tags", card: card %> <%= render "cards/display/preview/steps", card: card %> - <%= icon_tag "attachment", class: "card__attachments-indicator translucent txt-x-small" if card.has_attachments? %> + <%= icon_tag "attachment", class: "card__attachments-indicator translucent" if card.has_attachments? %> <% if card.staged? && card.doing? %> diff --git a/app/views/cards/display/_public_preview.html.erb b/app/views/cards/display/_public_preview.html.erb index c35af99a8..b9180d94d 100644 --- a/app/views/cards/display/_public_preview.html.erb +++ b/app/views/cards/display/_public_preview.html.erb @@ -2,7 +2,6 @@ <%= card_article_tag card, class: "card" do %>
-
<%= card.id %> diff --git a/app/views/cards/display/common/_collection.html.erb b/app/views/cards/display/common/_collection.html.erb index 1482d1b51..9a69481c9 100644 --- a/app/views/cards/display/common/_collection.html.erb +++ b/app/views/cards/display/common/_collection.html.erb @@ -1,4 +1,4 @@ -