Jason Zimdars
5560976091
* main: Try a segmented toggle for engagement Fix tests Rework min card design and meta section for all cards Move `title` to the `img` element so we get hover in both cases Remove sorting filter UI Sort Considering and Doing by `updated_at` Restore comment action icon Fix dot escaping container Seen cards should be flat Ensure overflow cards are hidden Arrow needs to match derived color Dialog target needs to be present This isn't necessary in the mini card template Revert "The button and dialog need not render in previews"
114 lines
5.2 KiB
Plaintext
114 lines
5.2 KiB
Plaintext
<% @page_title = card_title(@card) %>
|
||
|
||
<% content_for :header do %>
|
||
<% if @card.creating? && @card.can_recover_abandoned_creation? %>
|
||
<div class="fill-selected position-sticky flex align-center gap-half justify-center border-block margin-block-end"
|
||
style="view-transition-name: draft-banner; --card-color: <%= @card.color %>;">
|
||
You have an unsaved work. Would you like to continue where you left off?
|
||
<%= button_to card_recover_path(@card), class: "btn btn--reversed", data: { turbo_action: "replace" } do %>
|
||
<span>Restore</span>
|
||
<% end %>
|
||
</div>
|
||
<% end %>
|
||
|
||
<% if @card.drafted? %>
|
||
<div class="fill-selected position-sticky flex align-center gap-half fill-highlight justify-center border-block margin-block-end"
|
||
style="view-transition-name: draft-banner;">
|
||
This is a draft, it’s only visible to you.
|
||
<%= render "cards/publish", card: @card %>
|
||
</div>
|
||
<% end %>
|
||
|
||
<nav class="align-start max-width">
|
||
<%= link_to_home %>
|
||
<%= link_to_back fallback_path: cards_path(collection_id: @card.collection) %>
|
||
|
||
<div class="card__actions-container card__actions-container--top center border-radius" style="--card-color: <%= @card.color %>;">
|
||
<div class="btn__group flex full-width">
|
||
<%= form_with url: card_engagement_path(@card), method: :delete, data: { controller: "form" } do |form| %>
|
||
<%= form.label :engagement, value: "considering", class: "btn", aria: { label: "Move to Doing"} do %>
|
||
<%= form.radio_button :engagement, "considering", checked: @card.considering?, class: "for-screen-reader", data: { action: "change->form#submit" } %>
|
||
<span>Considering</span>
|
||
<% end %>
|
||
<% end %>
|
||
|
||
<%= form_with url: card_engagement_path(@card), method: :post, data: { controller: "form" } do |form| %>
|
||
<%= form.label :engagement, value: "doing", class: "btn", aria: { label: "Move back to Considering"} do %>
|
||
<%= form.radio_button :engagement, "doing", checked: @card.doing?, class: "for-screen-reader", data: { action: "change->form#submit" } %>
|
||
<span>Doing</span>
|
||
<% end %>
|
||
<% end %>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="btn btn--placeholder flex-item-justify-end"></div>
|
||
<div class="btn btn--placeholder"></div>
|
||
</nav>
|
||
<% end %>
|
||
|
||
<div data-controller="beacon" data-beacon-url-value="<%= card_reading_url(@card) %>">
|
||
<div id="<%= dom_id(@card, :card_container) %>" class="card__container position-relative <%= "card__container--pointing" unless @card.published? %>" style="--card-color: <%= @card.color %>;">
|
||
<%= render "cards/display/perma", card: @card %>
|
||
|
||
<div class="card__actions flex flex-column gap-half">
|
||
<%= render "cards/golden_toggle", card: @card if @card.doing? %>
|
||
|
||
<%= render "cards/image", card: @card %>
|
||
<%= button_to collection_card_path(@card.collection, @card),
|
||
method: :delete,
|
||
class: "btn",
|
||
data: { turbo_confirm: "Are you sure you want to delete this?" } do %>
|
||
<%= icon_tag "trash" %>
|
||
<span class="for-screen-reader">Delete</span>
|
||
<% end %>
|
||
</div>
|
||
|
||
|
||
<% if @card.published? %>
|
||
<div class="card__actions card__actions--right flex flex-column gap-half">
|
||
<%= turbo_frame_tag dom_id(@card, :watch), src: card_watch_path(@card), refresh: :morph %>
|
||
<%= turbo_frame_tag dom_id(@card, :pin), src: card_pin_path(@card), refresh: :morph %>
|
||
</div>
|
||
<% end %>
|
||
</div>
|
||
|
||
<% unless @card.drafted? || @card.creating? %>
|
||
<div class="card__actions-wrapper">
|
||
<%= render "cards/closure_toggle", card: @card %>
|
||
</div>
|
||
<% end %>
|
||
|
||
<% if @card.published? %>
|
||
<%= render "cards/messages", card: @card %>
|
||
<% else %>
|
||
<div class="comments pad-block">
|
||
<div class="comment comment--new flex-inline align-start full-width">
|
||
<figure class="comment__avatar flex-item-no-shrink" aria-hidden="true">
|
||
<%= avatar_tag Current.user, hidden_for_screen_reader: true %>
|
||
</figure>
|
||
|
||
<div class="comment__content flex-inline flex-column full-width">
|
||
<div class="comment__body txt-align-start">
|
||
<form data-controller="outlet-auto-save paste"
|
||
class="flex flex-column gap full-width"
|
||
data-outlet-auto-save-auto-save-outlet="#card_form"
|
||
data-action="paste->paste#pasteFiles">
|
||
<%= tag.house_md @card.draft_comment, name: "card[draft_comment]", class: "input comment__input",
|
||
form: "card_form",
|
||
placeholder: new_comment_placeholder(@card),
|
||
data: { action: "house-md:change->outlet-auto-save#change focusout->outlet-auto-save#submit", uploads_url: uploads_url(format: "json") } %>
|
||
</form>
|
||
|
||
<% if @card.creating? %>
|
||
<div class="margin-block-start flex align-center gap">
|
||
<%= button_to "Create card", card_publish_path(@card), class: "btn btn--reversed" %>
|
||
<%= button_to "Save as draft", collection_card_path(@card.collection, @card), name: "card[status]", value: "drafted", method: :put, class: "btn" %>
|
||
</div>
|
||
<% end %>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<% end %>
|
||
</div>
|