Jeffrey Hardy
50 lines
2.2 KiB
Plaintext
50 lines
2.2 KiB
Plaintext
<%= form_with model: bubble, class: "flex flex-column gap full-width" do | form | %>
|
|
<%= form.label :title, class: "flex flex-column justify-start align-start" do %>
|
|
<%= form.text_field :title, class: "input full-width", required: true, placeholder: "Name it…" %>
|
|
<% end %>
|
|
|
|
<fieldset class="flex flex-column unpad margin-block-end borderless justify-space-between">
|
|
<legend class="for-screen-reader">Color</legend>
|
|
|
|
<div class="flex align-center gap">
|
|
<% Bubble.colors.keys.each do | color | %>
|
|
<label class="btn btn--circle txt-medium" style="--btn-background: <%= color -%>" >
|
|
<%= form.radio_button :color, color %>
|
|
<%= image_tag "check.svg", aria: { hidden: "true" }, size: 24, class: "checked" %>
|
|
<span class="for-screen-reader"><%= color %></span>
|
|
</label>
|
|
<% end %>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="flex flex-column unpad margin-block-end borderless justify-space-between">
|
|
<legend class="for-screen-reader">Tag</legend>
|
|
|
|
<div class="flex align-center gap flex-wrap">
|
|
<%= collection_check_boxes(:bubble, :tag_ids, Tag.all, :id, :title) do |f| %>
|
|
<%= f.label(class: "btn txt-medium") { f.checkbox + tag.span(f.text) } %>
|
|
<% end %>
|
|
|
|
<label class="btn txt-medium" >
|
|
<%= image_tag "add.svg", aria: { hidden: "true" }, size: 24 %>
|
|
<span class="for-screen-reader">Add a tag</span>
|
|
</label>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="flex flex-column unpad margin-block-end borderless justify-space-between">
|
|
<legend class="for-screen-reader">Attachment</legend>
|
|
<label class="input input--file input--picture unpad" data-controller="upload-preview">
|
|
<%= image_tag bubble.image.presence || "default-picture.webp", alt: "Picture",
|
|
data: { upload_preview_target: "image" } %>
|
|
<%= form.file_field :image, class: "input", accept: "image/png, image/jpeg, image/jpg, image/webp",
|
|
data: { upload_preview_target: "input", action: "upload-preview#previewImage" } %>
|
|
</label>
|
|
</fieldset>
|
|
|
|
<%= form.button class: "btn btn--reversed" do %>
|
|
<%= image_tag "check.svg", aria: { hidden: "true" }, size: 24%>
|
|
<span class="for-screen-reader">Save</span>
|
|
<% end %>
|
|
<% end %>
|