docbrown/app/views/users/_response_templates.html.erb
Dan Ott 544fa8d33e
Fixing gap property for all occurrences of flex to work in Safari (#12667)
* 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.
2021-02-17 11:40:38 +01:00

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>