Improved modal on smaller screens

This commit is contained in:
Kieran Eglin 2024-03-10 12:06:04 -07:00
parent 17633cc072
commit a32f4ea3f4
No known key found for this signature in database
GPG key ID: 193984967FCF432D
2 changed files with 18 additions and 6 deletions

View file

@ -63,13 +63,13 @@ defmodule PinchflatWeb.CoreComponents do
tabindex="0" tabindex="0"
> >
<div class="flex min-h-full items-center justify-center"> <div class="flex min-h-full items-center justify-center">
<div class="w-full max-w-3xl p-4 sm:p-6 lg:py-8"> <div class="w-full max-w-3xl p-2 sm:p-6 lg:py-8">
<div <div
id={"#{@id}-container"} id={"#{@id}-container"}
phx-window-keydown={@allow_close && JS.exec("data-cancel", to: "##{@id}")} phx-window-keydown={@allow_close && JS.exec("data-cancel", to: "##{@id}")}
phx-key="escape" phx-key="escape"
phx-click-away={@allow_close && JS.exec("data-cancel", to: "##{@id}")} phx-click-away={@allow_close && JS.exec("data-cancel", to: "##{@id}")}
class="shadow-zinc-700/10 ring-zinc-700/10 relative hidden rounded-2xl bg-graydark p-14 shadow-lg ring-1 transition" class="shadow-zinc-700/10 ring-zinc-700/10 relative hidden rounded-2xl bg-graydark p-8 sm:p-14 shadow-lg ring-1 transition"
> >
<div :if={@allow_close} class="absolute top-6 right-5"> <div :if={@allow_close} class="absolute top-6 right-5">
<button <button
@ -244,6 +244,7 @@ defmodule PinchflatWeb.CoreComponents do
attr :id, :any, default: nil attr :id, :any, default: nil
attr :name, :any attr :name, :any
attr :label, :string, default: nil attr :label, :string, default: nil
attr :label_suffix, :string, default: nil
attr :value, :any attr :value, :any
attr :help, :string, default: nil attr :help, :string, default: nil
@ -295,6 +296,7 @@ defmodule PinchflatWeb.CoreComponents do
{@rest} {@rest}
/> />
<%= @label %> <%= @label %>
<span :if={@label_suffix} class="text-xs text-bodydark"><%= @label_suffix %></span>
</label> </label>
<.help :if={@help}><%= @help %></.help> <.help :if={@help}><%= @help %></.help>
<.error :for={msg <- @errors}><%= msg %></.error> <.error :for={msg <- @errors}><%= msg %></.error>
@ -310,7 +312,10 @@ defmodule PinchflatWeb.CoreComponents do
~H""" ~H"""
<div x-data={"{ enabled: #{@checked}}"}> <div x-data={"{ enabled: #{@checked}}"}>
<.label for={@id}><%= @label %></.label> <.label for={@id}>
<%= @label %>
<span :if={@label_suffix} class="text-xs text-bodydark"><%= @label_suffix %></span>
</.label>
<div class="relative"> <div class="relative">
<input type="hidden" name={@name} value="false" /> <input type="hidden" name={@name} value="false" />
<input <input
@ -344,7 +349,9 @@ defmodule PinchflatWeb.CoreComponents do
def input(%{type: "select"} = assigns) do def input(%{type: "select"} = assigns) do
~H""" ~H"""
<div phx-feedback-for={@name}> <div phx-feedback-for={@name}>
<.label for={@id}><%= @label %></.label> <.label for={@id}>
<%= @label %><span :if={@label_suffix} class="text-xs text-bodydark"><%= @label_suffix %></span>
</.label>
<select <select
id={@id} id={@id}
name={@name} name={@name}
@ -368,7 +375,9 @@ defmodule PinchflatWeb.CoreComponents do
def input(%{type: "textarea"} = assigns) do def input(%{type: "textarea"} = assigns) do
~H""" ~H"""
<div phx-feedback-for={@name}> <div phx-feedback-for={@name}>
<.label for={@id}><%= @label %></.label> <.label for={@id}>
<%= @label %><span :if={@label_suffix} class="text-xs text-bodydark"><%= @label_suffix %></span>
</.label>
<textarea <textarea
id={@id} id={@id}
name={@name} name={@name}
@ -391,7 +400,9 @@ defmodule PinchflatWeb.CoreComponents do
def input(assigns) do def input(assigns) do
~H""" ~H"""
<div phx-feedback-for={@name}> <div phx-feedback-for={@name}>
<.label for={@id}><%= @label %></.label> <.label for={@id}>
<%= @label %><span :if={@label_suffix} class="text-xs text-bodydark"><%= @label_suffix %></span>
</.label>
<input <input
type={@type} type={@type}
name={@name} name={@name}

View file

@ -41,6 +41,7 @@
field={f[:fast_index]} field={f[:fast_index]}
type="toggle" type="toggle"
label="Use Fast Indexing?" label="Use Fast Indexing?"
label_suffix="(pro)"
help="Experimental. Ignores 'Index Frequency'. Recommended for large channels that upload frequently. See below for more info" help="Experimental. Ignores 'Index Frequency'. Recommended for large channels that upload frequently. See below for more info"
/> />
</div> </div>