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

Card design tweaks

Browse Source
This commit is contained in:
Andy Smith
2025-09-24 11:19:34 -05:00
parent a817ee0831
commit 399791bddb
11 changed files with 109 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/images/tag-outline.svg
+1
View File
@@ -0,0 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2 13c0 .55.21985 1.0502.58984 1.4102l7 7 .14161.1289c.34435.2851.78735.4609 1.26855.4609s.9243-.1758 1.2754-.4609l.1445-.1289 8.9903-9c.37-.36.5898-.8602.5898-1.4102v-7c0-1.11-.89-2-2-2h-7c-.55 0-1.0502.22008-1.4102.58008l-8.99996 9.00002c-.35993.36-.58984.86-.58984 1.4199zm18-2.0088-8.9775 8.9873-.0205.0147-6.99809-6.9971v-.002l8.99409-8.9941h7.002z"/><circle cx="17.5" cy="6.5" r="1.5"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 468 B

app/assets/images/tag.svg
+1 -1
View File
@@ -1 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m5.5 7a1.5 1.5 0 0 1 -1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5 1.5 1.5 0 0 1 -1.5 1.5m15.91 4.58-9-9c-.36-.36-.86-.58-1.41-.58h-7c-1.11 0-2 .89-2 2v7c0 .55.22 1.05.59 1.41l8.99 9c.37.36.87.59 1.42.59s1.05-.23 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.56-.23-1.06-.59-1.42z"/></svg>
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m18.5 7c.3978 0 .7794-.15804 1.0607-.43934s.4393-.66284.4393-1.06066-.158-.77936-.4393-1.06066-.6629-.43934-1.0607-.43934-.7794.15804-1.0607.43934-.4393.66284-.4393 1.06066.158.77936.4393 1.06066.6629.43934 1.0607.43934zm-15.91 4.58 9-9c.36-.36.86-.58 1.41-.58h7c1.11 0 2 .89 2 2v7c0 .55-.22 1.05-.59 1.41l-8.99 9c-.37.36-.87.59-1.42.59s-1.05-.23-1.41-.59l-7-7c-.37-.36-.59-.86-.59-1.41 0-.56.23-1.06.59-1.42z" fill="#000"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 358 B

After

Width:  |  Height:  |  Size: 534 B

app/assets/stylesheets/_global.css
+1 -1
View File
@@ -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));
app/assets/stylesheets/card-columns.css
+46 -31
View File
@@ -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);
}
}
app/assets/stylesheets/cards.css
+37 -35
View File
@@ -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);
}
app/assets/stylesheets/icons.css
+1
View File
@@ -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"); }
app/views/cards/display/_preview.html.erb
+1 -1
View File
@@ -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? %>
<span class="btn justify-start workflow-stage workflow-stage--current txt-uppercase min-width max-width">
app/views/cards/display/_public_preview.html.erb
-1
View File
@@ -2,7 +2,6 @@
<%= card_article_tag card, class: "card" do %>
<div class="flex flex-column flex-item-grow max-inline-size">
<header class="card__header">
<div class="card__collection flex align-start">
<span class="card__id"><%= card.id %></span>
<span class="card__collection-name">
app/views/cards/display/common/_collection.html.erb
+1 -1
View File
@@ -1,4 +1,4 @@
<label class="card__collection flex align-center">
<label class="card__collection">
<span class="card__id"><%= card.id %></span>
<span class="card__collection-name">
<span class="overflow-ellipsis"><%= card.collection.name %></span>
app/views/cards/display/perma/_tags.html.erb
+12 -13
View File
@@ -1,16 +1,4 @@
<div id="<%= dom_id(card, :tags) %>" class="card__tags gap-half">
<div class="min-width overflow-ellipsis">
<% if card.tags.any? || card.creating? %>
<span class="margin-inline-start-half"># </span>
<% card.tags.each_with_index do |tag, index| %>
<%= link_to cards_path(collection_ids: [ card.collection ], tag_ids: [ tag.id ]),
class: "card__tag btn btn--plain min-width txt-uppercase fill-transparent" do %>
<span class="overflow-ellipsis"><%= tag.title %></span>
<% end %><%= ", " unless index == card.tags.size - 1 %>
<% end %>
<% end %>
</div>
<div id="<%= dom_id(card, :tags) %>" class="card__tags">
<div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
<button class="tag-picker__button btn card__hide-on-index tooltip" data-action="click->dialog#open:stop" style="--btn-background: var(--card-bg-color);">
<%= icon_tag "tag" %>
@@ -21,4 +9,15 @@
<%= turbo_frame_tag card, :tagging, src: new_card_tagging_path(card) %>
</dialog>
</div>
<% if card.tags.any? || card.creating? %>
<div class="min-width overflow-ellipsis">
<% card.tags.each_with_index do |tag, index| %>
<%= link_to cards_path(collection_ids: [ card.collection ], tag_ids: [ tag.id ]),
class: "card__tag btn btn--plain min-width txt-uppercase fill-transparent" do %>
<%= tag.title %>
<% end %><%= "," unless index == card.tags.size - 1 %>
<% end %>
</div>
<% end %>
</div>
app/views/cards/display/preview/_tags.html.erb
+8 -8
View File
@@ -1,12 +1,12 @@
<div class="card__tags">
<div class="min-width overflow-ellipsis">
<% if card.tags.any? %>
<span># </span>
<% if card.tags.any? %>
<div class="card__tags">
<%= icon_tag "tag-outline", class: "translucent" %>
<div class="min-width overflow-ellipsis">
<% card.tags.each_with_index do |tag, index| %>
<span class="card__tag btn btn--plain min-width txt-uppercase fill-transparent overflow-ellipsis">
<%= tag.title %>
<span class="card__tag btn btn--plain overflow-ellipsis">
<%= tag.title %><%= "," unless index == card.tags.size - 1 %>
</span>
<% end %>
<% end %>
</div>
</div>
</div>
<% end %>