From 22f9c9d1685279503e2ff8666d31d4a018eda2e2 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 10 Sep 2025 12:15:31 -0500 Subject: [PATCH] WIP --- app/assets/stylesheets/buttons.css | 4 - app/assets/stylesheets/card-columns.css | 4 +- app/assets/stylesheets/comments.css | 44 ++--- app/assets/stylesheets/layout.css | 12 -- app/assets/stylesheets/print.css | 192 ++++++++++++++++++++ app/views/cards/_messages.html.erb | 4 +- app/views/cards/comments/_comment.html.erb | 2 +- app/views/cards/comments/_new.html.erb | 2 +- app/views/cards/comments/edit.html.erb | 2 +- app/views/cards/container/_title.html.erb | 2 +- app/views/cards/show.html.erb | 1 + app/views/public/cards/show/_title.html.erb | 4 +- 12 files changed, 222 insertions(+), 51 deletions(-) create mode 100644 app/assets/stylesheets/print.css diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index 072ee1a1b..b8a30c7f6 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -39,10 +39,6 @@ opacity: 0.3; pointer-events: none; } - - @media print { - display: none; - } } /* Variants diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index ed7edab33..711b3a1e0 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -43,7 +43,7 @@ @media (min-width: 640px) { display: grid; - grid-template-columns: repeat(3, 33%); + grid-template-columns: repeat(3, 1fr); } } @@ -263,7 +263,7 @@ .card--new { --card-padding-block: var(--block-space-double); - + border: 1px solid var(--color-selected-dark); font-size: 0.8rem !important; rotate: 0 !important; diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css index 237eb4e4e..a89842811 100644 --- a/app/assets/stylesheets/comments.css +++ b/app/assets/stylesheets/comments.css @@ -39,16 +39,6 @@ .comment__author { margin-inline-end: calc(var(--comment-padding-inline) * -0.66); - .comment--system & { - h3 { - margin-inline: auto; - } - - strong { - display: none; - } - } - .btn { font-weight: inherit; } @@ -61,25 +51,17 @@ .comment--mine_ & { margin-inline: calc(var(--comment-padding-inline) * -0.75); } - - .comment--system & { - display: none; - } } .comment__body { - .comment--system & { - text-align: center; + text-align: start; + + :first-child { + margin-block-start: 0; } - * { - &:first-child { - margin-block-start: 0; - } - - &:last-child { - margin-block-end: 0; - } + :last-child { + margin-block-end: 0; } } @@ -133,14 +115,26 @@ inline-size: calc(var(--comment-padding-inline) * 0.75); } + .comment__avatar { + display: none; + } + .comment__author { a { margin: 0 auto; } + + h3 { + margin-inline: auto; + } + + strong { + display: none; + } } .comment__body { - text-align: center !important; + text-align: center; } .comment__content { diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css index c7e682e75..634e306ec 100644 --- a/app/assets/stylesheets/layout.css +++ b/app/assets/stylesheets/layout.css @@ -14,18 +14,6 @@ max-inline-size: 100dvw; padding-inline: var(--main-padding); text-align: center; - - @media print { - font-size: 11pt; - inline-size: unset; - line-height: 1.3; - margin: 0; - orphans: 3; - padding: 0; - text-align: justify; - text-justify: distribute; - widows: 2; - } } :where(#footer) { diff --git a/app/assets/stylesheets/print.css b/app/assets/stylesheets/print.css new file mode 100644 index 000000000..339d10e2e --- /dev/null +++ b/app/assets/stylesheets/print.css @@ -0,0 +1,192 @@ +@media print { + /* Global + /* ------------------------------------------------------------------------ */ + + :root { + --color-ink: black; + --color-canvas: white; + --border-dark: 1px solid var(--color-ink); + --border-light: 1px solid color-mix(in oklch, var(--color-ink), transparent 75%); + } + + @page { + margin: 0.5in; + } + + html { + font-size: 10pt; + } + + main { + inline-size: unset; + margin: 0; + orphans: 3; + padding: 0; + widows: 2; + } + + /* .fizzy-menu, */ + /* .fizzy-menu-trigger, */ + .header__actions { + display: none; + } + + .header { + padding: 0; + } + + /* Cards + /* -------------------------------------------------------------------------- */ + + .card { + --card-color: var(--color-ink) !important; + + background: var(--color-canvas); + border: var(--border-light); + box-shadow: none; + color: var(--color-ink); + } + + .card__collection { + background: var(--color-canvas); + border-block-end: var(--border-dark); + border-inline-end: var(--border-dark); + color: var(--color-ink); + } + + /* Events + /* ------------------------------------------------------------------------ */ + + .event { + + .avatar { + --avatar-size: 2lh; + } + } + + /* Collection + /* ------------------------------------------------------------------------ */ + + .filters { + form, + .btn--remove { + display: none; + } + } + + /* Collections + /* ------------------------------------------------------------------------ */ + + .filters, + .card--new, + .cards__decoration, + .card-columns:before, + .cards--closed:before { + display: none; + } + + .card-columns, + .cards--closed { + border-block-start: var(--border-light); + margin-block-start: 1lh; + min-block-size: unset; + } + + .cards--on-deck, + .cards--doing { + padding-inline: 0; + } + + .cards--considering { + background: none; + margin: 0; + padding-inline: 1ch; + + &:before { + display: none; + } + + .card__header { + margin-inline: calc(-1 * var(--card-padding-inline)); + } + + .card__body { + padding-block-start: calc(var(--card-padding-block) / 2); + } + } + + /* Card perma + /* ------------------------------------------------------------------------ */ + + /* Hide stuff */ + .card-perma__notch, + .card-perma__actions, + .comment--new, + .comments__subscribers, + .card__meta-avatars--assignees > div > div:last-child, + .steps > .step:last-child, + div:has(> .tag-picker__button), + div:has(> .collection-picker__button), + .delete-card, + .header--card .header__title { + display: none; + } + + .card-perma { + display: block; + inline-size: 100%; + margin: 0; + + .card { + aspect-ratio: unset; + } + + .card__title { + font-size: var(--text-x-large); + } + } + + .card-perma__bg { + background: transparent; + padding: 0; + } + + .comments { + --row-gap: 0; + --comment-padding-inline: 1.4lh; + + padding-inline: 0; + } + + .comment { + --comment-max: none; + + border-block-end: var(--border-light); + } + + .comment__content { + background: none; + } + + .comment__avatar { + --btn-size: 2lh; + + margin-inline-start: 0; + } + + .comment__author h3 { + margin-inline: 0; + } + + .comment__edit { + display: none; + } + + .comment__body { + text-align: start; + } + + .reactions { + margin-block-start: 0; + } +} diff --git a/app/views/cards/_messages.html.erb b/app/views/cards/_messages.html.erb index 042c25ed5..30a606141 100644 --- a/app/views/cards/_messages.html.erb +++ b/app/views/cards/_messages.html.erb @@ -18,8 +18,8 @@ <% end %> -
+
<%= button_to_delete_card(@card) %> -
+ <% end %> diff --git a/app/views/cards/comments/_comment.html.erb b/app/views/cards/comments/_comment.html.erb index 1f7f748de..2c5083eaa 100644 --- a/app/views/cards/comments/_comment.html.erb +++ b/app/views/cards/comments/_comment.html.erb @@ -33,7 +33,7 @@ <% end %> -
+
<%= comment.body %>
diff --git a/app/views/cards/comments/_new.html.erb b/app/views/cards/comments/_new.html.erb index 6309e8536..7931cd244 100644 --- a/app/views/cards/comments/_new.html.erb +++ b/app/views/cards/comments/_new.html.erb @@ -4,7 +4,7 @@
-
+
<%= form_with model: Comment.new, url: card_comments_path(card), class: "flex flex-column gap full-width", data: { controller: "form local-save", local_save_key_value: "comment-#{card.id}", diff --git a/app/views/cards/comments/edit.html.erb b/app/views/cards/comments/edit.html.erb index fe6709dd5..6feca97df 100644 --- a/app/views/cards/comments/edit.html.erb +++ b/app/views/cards/comments/edit.html.erb @@ -5,7 +5,7 @@
-
+
<%= form_with model: [ @card, @comment ], class: "flex flex-column gap full-width", data: { controller: "form", action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop" } do |form| %> <%= form.rich_textarea :body, required: true, autofocus: true, placeholder: new_comment_placeholder(@card) do %> diff --git a/app/views/cards/container/_title.html.erb b/app/views/cards/container/_title.html.erb index 6626119a2..176c70262 100644 --- a/app/views/cards/container/_title.html.erb +++ b/app/views/cards/container/_title.html.erb @@ -3,7 +3,7 @@

<%= link_to card.title, edit_collection_card_path(card.collection, card), class: "card__title-link" %>

-
+
<%= card.description %>
<% end %> diff --git a/app/views/cards/show.html.erb b/app/views/cards/show.html.erb index 7165b9df8..97cef304f 100644 --- a/app/views/cards/show.html.erb +++ b/app/views/cards/show.html.erb @@ -1,4 +1,5 @@ <% @page_title = @card.title %> +<% @header_class = "header--card" %> <%= turbo_stream_from @card %> <% content_for :head do %> diff --git a/app/views/public/cards/show/_title.html.erb b/app/views/public/cards/show/_title.html.erb index 9d4f2aa0f..cbdf7603f 100644 --- a/app/views/public/cards/show/_title.html.erb +++ b/app/views/public/cards/show/_title.html.erb @@ -2,7 +2,7 @@

<%= tag.span card.title, class: "card__title-link" %>

-
+
<%= card.description %>
-
\ No newline at end of file +