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

WIP

Browse Source
This commit is contained in:
Andy Smith
2025-09-10 12:15:31 -05:00
parent 3a129414af
commit 22f9c9d168
12 changed files with 222 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/buttons.css
-4
View File
@@ -39,10 +39,6 @@
opacity: 0.3;
pointer-events: none;
}
@media print {
display: none;
}
}
/* Variants
app/assets/stylesheets/card-columns.css
+2 -2
View File
@@ -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;
app/assets/stylesheets/comments.css
+19 -25
View File
@@ -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 {
app/assets/stylesheets/layout.css
-12
View File
@@ -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) {
app/assets/stylesheets/print.css
+192
View File
@@ -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;
}
}
app/views/cards/_messages.html.erb
+2 -2
View File
@@ -18,8 +18,8 @@
</div>
<% end %>
<div class="txt-align-center full-width flex flex-column margin-block-start-double">
<footer class="delete-card txt-align-center full-width flex flex-column margin-block-start-double">
<hr class="separator--horizontal full-width margin-block" style="--border-color: var(--color-ink-lighter)">
<%= button_to_delete_card(@card) %>
</div>
</footer>
<% end %>
app/views/cards/comments/_comment.html.erb
+1 -1
View File
@@ -33,7 +33,7 @@
<% end %>
</div>
<div class="comment__body rich-text-content txt-align-start" data-controller="syntax-highlight retarget-links">
<div class="comment__body rich-text-content" data-controller="syntax-highlight retarget-links">
<%= comment.body %>
</div>
app/views/cards/comments/_new.html.erb
+1 -1
View File
@@ -4,7 +4,7 @@
</figure>
<div class="comment__content flex-inline flex-column full-width">
<div class="comment__body rich-text-content txt-align-start">
<div class="comment__body rich-text-content">
<%= 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}",
app/views/cards/comments/edit.html.erb
+1 -1
View File
@@ -5,7 +5,7 @@
</figure>
<div class="comment__content flex flex-column flex-item-grow full-width">
<div class="comment__body rich-text-content txt-align-start">
<div class="comment__body rich-text-content">
<%= 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 %>
app/views/cards/container/_title.html.erb
+1 -1
View File
@@ -3,7 +3,7 @@
<h1 class="card__title flex align-start gap-half">
<%= link_to card.title, edit_collection_card_path(card.collection, card), class: "card__title-link" %>
</h1>
<div class="card__description rich-text-content margin-block-half" data-controller="syntax-highlight retarget-links">
<div class="card__description rich-text-content" data-controller="syntax-highlight retarget-links">
<%= card.description %>
</div>
<% end %>
app/views/cards/show.html.erb
+1
View File
@@ -1,4 +1,5 @@
<% @page_title = @card.title %>
<% @header_class = "header--card" %>
<%= turbo_stream_from @card %>
<% content_for :head do %>
app/views/public/cards/show/_title.html.erb
+2 -2
View File
@@ -2,7 +2,7 @@
<h1 class="card__title flex align-start gap-half">
<%= tag.span card.title, class: "card__title-link" %>
</h1>
<div class="card__description rich-text-content margin-block-half rich-text-content" data-controller="syntax-highlight">
<div class="card__description rich-text-content" data-controller="syntax-highlight">
<%= card.description %>
</div>
</div>
</div>