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 %>