diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css index adffe4101..0e8190d66 100644 --- a/app/assets/stylesheets/layout.css +++ b/app/assets/stylesheets/layout.css @@ -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)); diff --git a/app/assets/stylesheets/popover.css b/app/assets/stylesheets/popover.css new file mode 100644 index 000000000..cc72d9c07 --- /dev/null +++ b/app/assets/stylesheets/popover.css @@ -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; + } + } +} diff --git a/app/assets/stylesheets/splats.css b/app/assets/stylesheets/splats.css index 4e9343389..80155e028 100644 --- a/app/assets/stylesheets/splats.css +++ b/app/assets/stylesheets/splats.css @@ -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; > * { diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css index 61dde2d9a..d6f2dd0fa 100644 --- a/app/assets/stylesheets/utilities.css +++ b/app/assets/stylesheets/utilities.css @@ -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); } diff --git a/app/javascript/controllers/dialog_controller.js b/app/javascript/controllers/dialog_controller.js new file mode 100644 index 000000000..1949a1124 --- /dev/null +++ b/app/javascript/controllers/dialog_controller.js @@ -0,0 +1,9 @@ +import { Controller } from "@hotwired/stimulus" + +export default class extends Controller { + static targets = [ "dialog" ] + + open() { + this.dialogTarget.showModal() + } +} diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 2489ebe36..4846f0d3d 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -3,6 +3,8 @@ Splat + + <%= csrf_meta_tags %> <%= csp_meta_tag %> diff --git a/app/views/splats/_form.html.erb b/app/views/splats/_form.html.erb index 6f238b2e2..238cdca21 100644 --- a/app/views/splats/_form.html.erb +++ b/app/views/splats/_form.html.erb @@ -20,12 +20,17 @@
Tag -
+
<% Splat.tags.keys.each do | tag | %> <% end %> + +
diff --git a/app/views/splats/edit.html.erb b/app/views/splats/edit.html.erb index 147c6fbad..5ba22b764 100644 --- a/app/views/splats/edit.html.erb +++ b/app/views/splats/edit.html.erb @@ -1,12 +1,3 @@ -<% content_for :header do %> - -<% end %> - -
+<%= turbo_frame_tag @splat, :edit do %> <%= render "splats/form", splat: @splat %> -
+<% end %> diff --git a/app/views/splats/index.html.erb b/app/views/splats/index.html.erb index a538cc065..7110abb89 100644 --- a/app/views/splats/index.html.erb +++ b/app/views/splats/index.html.erb @@ -5,10 +5,18 @@ Settings - <%= 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 %> - Create a new splat - <% end %> +
+ <%= tag.button class: "btn flex-item-justify-end", popovertarget: "new-splat-panel" do %> + <%= image_tag "add.svg", aria: { hidden: true }, size: 24 %> + Create a new splat + <% end %> + + +
+ <%= turbo_frame_tag :new_splat, src: new_splat_path, target: "_top" %> +
+ +
<% end %> @@ -56,7 +64,7 @@ -
+