bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add an edit splats in modal

Browse Source
This commit is contained in:
Jason Zimdars
2024-07-24 10:07:11 -05:00
parent 932a83197b
commit 89a02fc960
11 changed files with 93 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/layout.css
+1 -2
View File
@@ -6,8 +6,7 @@ body {
:where(#main) {
container-type: inline-size;
font-size: var(--font-medium-responsive);
/* inline-size: 67ch; */
inline-size: 90vw;
inline-size: 100vw;
margin-inline: auto;
max-inline-size: 100vw;
padding-block-end: clamp(var(--block-space), 5%, calc(var(--block-space) * 3));
app/assets/stylesheets/popover.css
+44
View File
@@ -0,0 +1,44 @@
:is([popover]) {
--backdrop-speed: 150ms;
--speed: 150ms;
border: 0;
opacity: 0;
transform: translateY(50%);
transform-origin: bottom center;
transition:
display var(--speed) allow-discrete,
opacity var(--speed),
overlay var(--speed) allow-discrete,
transform var(--speed);
&::backdrop {
background-color: var(--color-ink);
opacity: 0;
transform: translateY(0);
transition:
display var(--backdrop-speed) allow-discrete,
opacity var(--backdrop-speed),
overlay var(--backdrop-speed) allow-discrete;
}
&:popover-open {
opacity: 1;
transform: translateY(0);
&::backdrop {
opacity: 0.5;
}
}
@starting-style {
&:popover-open {
opacity: 0;
transform: translateY(50%);
}
&:popover-open::backdrop {
opacity: 0;
}
}
}
app/assets/stylesheets/splats.css
+1 -1
View File
@@ -1,6 +1,6 @@
.windshield {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
grid-template-columns: repeat(auto-fit, minmax(15vw, 1fr));
justify-items: center;
> * {
app/assets/stylesheets/utilities.css
+1
View File
@@ -120,6 +120,7 @@
.pad-inline-double { padding-inline: var(--inline-space-double); }
.unpad { padding: 0; }
.unpad-inline { padding-inline: 0; }
/* Margins */
.margin { margin: var(--block-space) var(--inline-space); }
app/javascript/controllers/dialog_controller.js
+9
View File
@@ -0,0 +1,9 @@
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = [ "dialog" ]
open() {
this.dialogTarget.showModal()
}
}
app/views/layouts/application.html.erb
+2
View File
@@ -3,6 +3,8 @@
<head>
<title>Splat</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="view-transition" content="same-origin">
<meta name="color-scheme" content="light dark">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
app/views/splats/_form.html.erb
+6 -1
View File
@@ -20,12 +20,17 @@
<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">
<div class="flex align-center gap flex-wrap">
<% Splat.tags.keys.each do | tag | %>
<label class="btn txt-medium" style="--btn-background: <%= tag -%>" >
<span><%= tag %></span>
</label>
<% end %>
<label class="btn txt-medium" >
<%= image_tag "add.svg", aria: { hidden: "true" }, size: 24 %>
<span class="for-screen-reader">Add a category</span>
</label>
</div>
</fieldset>
app/views/splats/edit.html.erb
+2 -11
View File
@@ -1,12 +1,3 @@
<% content_for :header do %>
<nav>
<%= link_to splats_path, class: "btn flex-item-justify-start" do %>
<%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">All Splats</span>
<% end %>
</nav>
<% end %>
<div class="panel borderless pad margin center">
<%= turbo_frame_tag @splat, :edit do %>
<%= render "splats/form", splat: @splat %>
</div>
<% end %>
app/views/splats/index.html.erb
+13 -5
View File
@@ -5,10 +5,18 @@
<span class="for-screen-reader">Settings</span>
</button>
<%= link_to new_splat_path, class: "btn flex-item-justify-end", style: "view-transition-name: new-splat" do %>
<%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Create a new splat</span>
<% end %>
<div class="flex-item-justify-end" data-controller="dialog">
<%= tag.button class: "btn flex-item-justify-end", popovertarget: "new-splat-panel" do %>
<%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Create a new splat</span>
<% end %>
<dialog class="panel" id="new-splat-panel" data-dialog-target="dialog" popover>
<div class="flex pad">
<%= turbo_frame_tag :new_splat, src: new_splat_path, target: "_top" %>
</div>
</dialog>
</div>
</nav>
<% end %>
@@ -56,7 +64,7 @@
</li>
</menu>
<section class="splats-list panel center borderless">
<section class="splats-list unpad-inline center">
<ul class="unpad margin-none flex flex-column txt-align-start center">
<% @splats.each do | splat | %>
<li class="flex align-center gap margin-none">
app/views/splats/new.html.erb
+2 -11
View File
@@ -1,12 +1,3 @@
<% content_for :header do %>
<nav>
<%= link_to splats_path, class: "btn flex-item-justify-start" do %>
<%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">All Splats</span>
<% end %>
</nav>
<% end %>
<div class="panel borderless pad margin center" style="view-transition-name: new-splat">
<%= turbo_frame_tag :new_splat do %>
<%= render "splats/form", splat: @splat %>
</div>
<% end %>
app/views/splats/show.html.erb
+12 -4
View File
@@ -5,10 +5,18 @@
<span class="for-screen-reader">All Splats</span>
<% end %>
<%= link_to edit_splat_path, class: "btn flex-item-justify-end" do %>
<%= image_tag "pencil.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Edit <%= @splat.title %></span>
<% end %>
<div class="flex-item-justify-end" data-controller="dialog">
<%= tag.button class: "btn flex-item-justify-end", popovertarget: "splat-edit-panel" do %>
<%= image_tag "pencil.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Edit <%= @splat.title %></span>
<% end %>
<dialog class="panel" id="splat-edit-panel" data-dialog-target="dialog" popover>
<div class="flex pad">
<%= turbo_frame_tag @splat, :edit, src: edit_splat_path(@splat), target: "_top" %>
</div>
</dialog>
</div>
</nav>
<% end %>