diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css index af825bb32..4f25c7810 100644 --- a/app/assets/stylesheets/card-perma.css +++ b/app/assets/stylesheets/card-perma.css @@ -100,7 +100,7 @@ z-index: 1; } - .btn:not(.popup__item, .btn--plain) { + .btn:not(.popup__item, .btn--plain, .btn--reversed) { --btn-background: var(--card-color); --btn-color: var(--color-ink-reversed); } @@ -110,6 +110,11 @@ text-decoration: underline; } + + .btn--reversed { + --btn-background: var(--color-bg); + --btn-color: var(--card-color); + } } .card-perma__closure-message { @@ -119,29 +124,4 @@ padding-left: 1ch; } } - - /* Variants - /* ------------------------------------------------------------------------ */ - - .card-perma--pointing { - --arrow-size: 20em; - --aspect-ratio: 7; - - position: relative; - margin-block-end: calc(var(--arrow-size) / var(--aspect-ratio)); - - &::after { - aspect-ratio: var(--aspect-ratio); - background-color: var(--color-container); - clip-path: polygon(50% 100%, 100% 0, 0 0); - inline-size: var(--arrow-size); - content: ""; - display: block; - inset-block-start: 99%; - inset-inline-start: 50%; - position: absolute; - transform: translateX(-50%); - z-index: -1; - } - } } diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index d8a484ab0..4be6b06ed 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -104,6 +104,16 @@ .house-md-content { color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink)); } + + .house-md-content { + min-block-size: 3lh; + padding: var(--block-space-half) var(--inline-space) 0 0; + } + + & ~ .btn { + --btn-background: var(--card-color); + --btn-color: var(--color-ink-reversed); + } } .card__title { diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css index 2db3016db..5ac91e94e 100644 --- a/app/assets/stylesheets/comments.css +++ b/app/assets/stylesheets/comments.css @@ -68,6 +68,7 @@ padding: var(--comment-padding-block) var(--comment-padding-inline); + word-wrap: break-word; } .comment__edit { diff --git a/app/views/cards/_container.html.erb b/app/views/cards/_container.html.erb index a817a21af..3a1620036 100644 --- a/app/views/cards/_container.html.erb +++ b/app/views/cards/_container.html.erb @@ -1,8 +1,14 @@
" style="--card-color: <%= card.color %>;"> + class="card-perma" style="--card-color: <%= card.color %>;"> <%= render "cards/container/engagement", card: card %> <%= render "cards/container/closure", card: card %> + <% elsif card.creating? %> +
+ <%= button_to "Create card", card_publish_path(card), class: "btn" %> + <%= button_to "Save as draft", collection_card_path(card.collection, card), name: "card[status]", value: "drafted", method: :put, class: "btn btn--reversed" %> +
<% end %>
diff --git a/app/views/cards/container/_closure.html.erb b/app/views/cards/container/_closure.html.erb index 661b8edea..e9006f3aa 100644 --- a/app/views/cards/container/_closure.html.erb +++ b/app/views/cards/container/_closure.html.erb @@ -1,4 +1,4 @@ -
+
<% if card.closed? %>
Completed by <%= card.closed_by.name %> on <%= local_datetime_tag(card.closed_at, style: :shortdate) %>. diff --git a/app/views/cards/container/_title.html.erb b/app/views/cards/container/_title.html.erb index b62eb2fb4..a959e888f 100644 --- a/app/views/cards/container/_title.html.erb +++ b/app/views/cards/container/_title.html.erb @@ -1,14 +1,27 @@ -

- <% if card.published? %> - <%= turbo_frame_tag card, :edit do %> - <%= link_to card.title, edit_collection_card_path(card.collection, card), class: "card__title-link overflow-line-clamp" %> - <% end %> - <% else %> - <%= form_with model: card, url: collection_card_path(card.collection, card), id: "card_form", data: { controller: "auto-save" } do |form| %> +<% if card.published? %> + <%= turbo_frame_tag card, :edit do %> +
+

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

+

+ <%= sanitize card.description_html %> +

+
+ <% end %> +<% else %> + <%= form_with model: card, url: collection_card_path(card.collection, card), id: "card_form", class: "full-width", data: { controller: "auto-save" } do |form| %> +

<%= form.text_area :title, placeholder: "Name it…", - class: "input input--textarea full-width borderless txt-align-start #{ "fill-highlight" if card.creating? }", + class: "input input--textarea full-width borderless txt-align-start", autofocus: card.title.blank?, data: { action: "auto-save#change blur->auto-save#submit keydown.enter->auto-save#submit:prevent keydown.ctrl+enter->auto-save#submit:prevent" } %> - <% end %> +

+
+ <%= form.markdown_area :description, class: "input input--textarea full-width borderless txt-align-start card-field__description", + placeholder: "Add some notes, context, pictures, or video about this…", + data: { action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop paste->paste#pasteFiles" } %> +
+ <%= form.button "Save changes", type: :submit, class: "btn"%> <% end %> - +<% end %> \ No newline at end of file diff --git a/app/views/cards/edit.html.erb b/app/views/cards/edit.html.erb index 9ebf63e8e..ad509b0e0 100644 --- a/app/views/cards/edit.html.erb +++ b/app/views/cards/edit.html.erb @@ -1,22 +1,19 @@ <%= turbo_frame_tag @card, :edit do %> <%= form_with model: @card, url: collection_card_path(@card.collection, @card), class: "full-width", data: { controller: "form paste" } do |form| %> -

+

<%= form.label :title, class: "flex flex-column align-center" do %> - <%= form.text_area :title, class: "input input--textarea full-width borderless fill-white txt-align-start card-field__title", + <%= form.text_area :title, class: "input input--textarea full-width borderless txt-align-start card-field__title", required: true, autofocus: true, placeholder: "Name it…", rows: 1, data: { action: "keydown.enter->form#submit:prevent keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel focus->form#select" } %> <% end %> - <%= form.button type: :submit, class: "btn txt-small margin-block-start-half" do %> - <%= icon_tag "check" %> - Save - <% end %>

- <%= form.markdown_area :description, class: "input input--textarea full-width fill-white borderless txt-align-start card-field__description", + <%= form.markdown_area :description, class: "input input--textarea full-width borderless txt-align-start card-field__description", placeholder: "Add some notes, context, pictures, or video about this…", data: { action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop paste->paste#pasteFiles" } %>
+ <%= form.button "Save changes", type: :submit, class: "btn"%> <%= link_to "Close editor and discard changes", collection_card_path(@card.collection, @card), data: { form_target: "cancel" }, hidden: true %> <% end %> <% end %>