* Use grid instead of flex * Use child margin instead of flex gap * use .grid instead of .flex.flex-column * Missed one conditional flex gap * gap-2 safely deleted since there’s only one element * Add class for crayons-btn-actions This pattern occurs pretty often. Easy class addition and easy swap out once flex gap is supported in target browsers * Use crayons-btn-actions * Adjust styling to use negative margins * apply crayons-btn-actions * use margin-right instead of gap * use .grid instead of .flex.flex-column * use margin instead of gap for indicators/tooltips in headings * remove unused class for clarity * use flex and add margin to small element * remove gap from flex container and add margin to figure * crayons-article__main has neither flex nor grid thus gap has no effect * fix typo * use actual grid columns * use gap instead of flex-column * Apply crayons-btn-actions * Fix modal window display * Safari bein a real pain here Apparently Safari uses a different model to calculate height than other browsers. who knew.
69 lines
2.6 KiB
Text
69 lines
2.6 KiB
Text
<div class="crayons-card crayons-card--content-rows">
|
|
<header>
|
|
<h2 class="crayons-subtitle-1">
|
|
Comment templates
|
|
</h2>
|
|
<p class="color-base-70">
|
|
Create and save <strong> comment templates</strong> that you can reuse.</p>
|
|
</p>
|
|
</header>
|
|
|
|
<% if @response_templates.present? %>
|
|
<section>
|
|
<h3 class="crayons-subtitle-3">
|
|
Saved templates
|
|
</h3>
|
|
<% @response_templates.each do |response_template| %>
|
|
<div class="<%= "github-repo-row-featured" if response_template.id == params[:id].to_i %> mb-4">
|
|
<div class="flex items-center py-2 mt-2">
|
|
<div class="flex-1 ff-monospace">
|
|
<%= response_template.title %>
|
|
</div>
|
|
<div class="flex">
|
|
<%= form_with url: response_template_path(response_template.id), method: :delete, local: true, html: { onsubmit: "return confirm('Are you sure you want to delete: #{response_template.title}?');" } do %>
|
|
<button type="submit" class="crayons-btn crayons-btn--secondary">Remove</button>
|
|
<% end %>
|
|
<a class="crayons-btn crayons-btn--secondary ml-2" href="/settings/response-templates/<%= response_template.id %>" role="button">Edit</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</section>
|
|
<% end %>
|
|
|
|
<%= form_with model: @response_template do |f| %>
|
|
<section class="grid gap-3">
|
|
<% if @response_template&.persisted? %>
|
|
<% title = params[:previous_title] || @response_template.title %>
|
|
<% content = params[:previous_content] || @response_template.content %>
|
|
<h3 class="crayons-subtitle-3">
|
|
Edit comment template
|
|
</h3>
|
|
<a href="/settings/response-templates">Create a new response template</a>
|
|
|
|
<% else %>
|
|
<% title = params[:previous_title] %>
|
|
<% content = params[:previous_content] %>
|
|
<h3 class="crayons-subtitle-3">
|
|
Add new comment template
|
|
</h3>
|
|
<% end %>
|
|
|
|
<div class="crayons-field">
|
|
<%= f.label :title, class: "crayons-field__label" %>
|
|
<p class="crayons-field__description">
|
|
Memorable cue for template
|
|
</p>
|
|
<%= f.text_field :title, placeholder: "...", value: title, class: "crayons-textfield" %>
|
|
</div>
|
|
<div class="crayons-field">
|
|
<%= f.label :content, "Comment body (Markdown)", class: "crayons-field__label" %>
|
|
<%= f.text_area :content, value: content, class: "crayons-textfield" %>
|
|
</div>
|
|
|
|
<div>
|
|
<button type="submit" class="crayons-btn">Save template</button>
|
|
</div>
|
|
</section>
|
|
<% end %>
|
|
</div>
|