views: fix broken layout on devices put view
This commit is contained in:
parent
55845b4b45
commit
d6e8cd96b0
|
@ -21,7 +21,7 @@ templ AspectRatioToleranceInput(data AspectRatioToleranceData) {
|
||||||
type="number"
|
type="number"
|
||||||
min="0"
|
min="0"
|
||||||
@change="$el.setCustomValidity(''); this.error = false"
|
@change="$el.setCustomValidity(''); this.error = false"
|
||||||
class="input input-bordered"
|
class="input input-bordered w-full"
|
||||||
:class="{'text-error': error, 'input-error': error}"
|
:class="{'text-error': error, 'input-error': error}"
|
||||||
value={ fmt.Sprintf("%.2f", data.Value) }
|
value={ fmt.Sprintf("%.2f", data.Value) }
|
||||||
placeholder="0.20"
|
placeholder="0.20"
|
||||||
|
|
|
@ -27,9 +27,8 @@ templ MaxImageResolutionXInput(data ResolutionData) {
|
||||||
min="0"
|
min="0"
|
||||||
@change="$el.setCustomValidity(''); this.error = false"
|
@change="$el.setCustomValidity(''); this.error = false"
|
||||||
class={ utils.CXX(
|
class={ utils.CXX(
|
||||||
"input input-bordered", true,
|
"input input-bordered w-full", true,
|
||||||
"text-error", data.Error != "",
|
"text-error input-error", data.Error != "",
|
||||||
"input-error", data.Error != "",
|
|
||||||
) }
|
) }
|
||||||
:class="{'text-error': error, 'input-error': error}"
|
:class="{'text-error': error, 'input-error': error}"
|
||||||
value={ strconv.Itoa(data.Value) }
|
value={ strconv.Itoa(data.Value) }
|
||||||
|
@ -74,9 +73,8 @@ templ MaxImageResolutionYInput(data ResolutionData) {
|
||||||
min="0"
|
min="0"
|
||||||
@change="$el.setCustomValidity(''); this.error = false"
|
@change="$el.setCustomValidity(''); this.error = false"
|
||||||
class={ utils.CXX(
|
class={ utils.CXX(
|
||||||
"input input-bordered", true,
|
"input input-bordered w-full", true,
|
||||||
"text-error", data.Error != "",
|
"text-error input-error", data.Error != "",
|
||||||
"input-error", data.Error != "",
|
|
||||||
) }
|
) }
|
||||||
:class="{'text-error': error, 'input-error': error}"
|
:class="{'text-error': error, 'input-error': error}"
|
||||||
value={ strconv.Itoa(data.Value) }
|
value={ strconv.Itoa(data.Value) }
|
||||||
|
|
|
@ -27,7 +27,7 @@ templ MinImageResolutionXInput(data ResolutionData) {
|
||||||
min="0"
|
min="0"
|
||||||
@change="$el.setCustomValidity(''); this.error = false"
|
@change="$el.setCustomValidity(''); this.error = false"
|
||||||
class={ utils.CXX(
|
class={ utils.CXX(
|
||||||
"input input-bordered", true,
|
"input input-bordered w-full", true,
|
||||||
"text-error", data.Error != "",
|
"text-error", data.Error != "",
|
||||||
"input-error", data.Error != "",
|
"input-error", data.Error != "",
|
||||||
) }
|
) }
|
||||||
|
@ -75,7 +75,7 @@ templ MinImageResolutionYInput(data ResolutionData) {
|
||||||
min="0"
|
min="0"
|
||||||
@change="$el.setCustomValidity(''); this.error = false"
|
@change="$el.setCustomValidity(''); this.error = false"
|
||||||
class={ utils.CXX(
|
class={ utils.CXX(
|
||||||
"input input-bordered", true,
|
"input input-bordered w-full", true,
|
||||||
"text-error", data.Error != "",
|
"text-error", data.Error != "",
|
||||||
"input-error", data.Error != "",
|
"input-error", data.Error != "",
|
||||||
) }
|
) }
|
||||||
|
|
|
@ -10,7 +10,7 @@ type NameInputData struct {
|
||||||
}
|
}
|
||||||
|
|
||||||
templ NameInput(data NameInputData) {
|
templ NameInput(data NameInputData) {
|
||||||
<label id="name-input-form" class={ utils.CXX("form-control", true, "col-span-2", data.EditMode) }>
|
<label id="name-input-form" class={ utils.CXX("form-control", true, "sm:col-span-2", data.EditMode) }>
|
||||||
<div class="label">
|
<div class="label">
|
||||||
<span
|
<span
|
||||||
class={ utils.CXX("label-text", true, "text-error", data.Error != "") }
|
class={ utils.CXX("label-text", true, "text-error", data.Error != "") }
|
||||||
|
@ -30,7 +30,7 @@ templ NameInput(data NameInputData) {
|
||||||
}
|
}
|
||||||
name="name"
|
name="name"
|
||||||
type="text"
|
type="text"
|
||||||
class={ utils.CXX("input input-bordered", true, "input-error", data.Error != "") }
|
class={ utils.CXX("input input-bordered w-full", true, "input-error", data.Error != "", "sm:col-span-2", data.EditMode) }
|
||||||
value={ data.Value }
|
value={ data.Value }
|
||||||
/>
|
/>
|
||||||
<div class="label">
|
<div class="label">
|
||||||
|
|
|
@ -11,7 +11,7 @@ type NSFWCheckboxData struct {
|
||||||
templ NSFWCheckbox(data NSFWCheckboxData) {
|
templ NSFWCheckbox(data NSFWCheckboxData) {
|
||||||
<div
|
<div
|
||||||
x-data={ fmt.Sprintf(`{checked: %t}`, data.Checked) }
|
x-data={ fmt.Sprintf(`{checked: %t}`, data.Checked) }
|
||||||
class={ utils.CXX("form-control", true, "col-span-2", data.EditMode) }
|
class={ utils.CXX("form-control w-full", true, "sm:col-span-2", data.EditMode) }
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
class="label cursor-pointer border input input-bordered"
|
class="label cursor-pointer border input input-bordered"
|
||||||
|
|
|
@ -33,7 +33,7 @@ templ ResolutionXInput(data ResolutionData) {
|
||||||
min="1"
|
min="1"
|
||||||
@change="$el.setCustomValidity(''); this.error = false"
|
@change="$el.setCustomValidity(''); this.error = false"
|
||||||
class={ utils.CXX(
|
class={ utils.CXX(
|
||||||
"input input-bordered", true,
|
"input input-bordered w-full", true,
|
||||||
"text-error", data.Error != "",
|
"text-error", data.Error != "",
|
||||||
"input-error", data.Error != "",
|
"input-error", data.Error != "",
|
||||||
) }
|
) }
|
||||||
|
@ -82,7 +82,7 @@ templ ResolutionYInput(data ResolutionData) {
|
||||||
min="1"
|
min="1"
|
||||||
@change="$el.setCustomValidity(''); this.error = false"
|
@change="$el.setCustomValidity(''); this.error = false"
|
||||||
class={ utils.CXX(
|
class={ utils.CXX(
|
||||||
"input input-bordered", true,
|
"input input-bordered w-full", true,
|
||||||
"text-error", data.Error != "",
|
"text-error", data.Error != "",
|
||||||
"input-error", data.Error != "",
|
"input-error", data.Error != "",
|
||||||
) }
|
) }
|
||||||
|
|
|
@ -35,11 +35,9 @@ templ SlugInput(data SlugInputData) {
|
||||||
type="text"
|
type="text"
|
||||||
@change="$el.setCustomValidity('')"
|
@change="$el.setCustomValidity('')"
|
||||||
class={ utils.CXX(
|
class={ utils.CXX(
|
||||||
"input input-bordered", true,
|
"input input-bordered w-full", true,
|
||||||
"text-error", data.Error != "",
|
"text-error input-error", data.Error != "",
|
||||||
"text-success", data.Valid != "",
|
"text-success input-success", data.Valid != "",
|
||||||
"input-error", data.Error != "",
|
|
||||||
"input-success", data.Valid != "",
|
|
||||||
) }
|
) }
|
||||||
hx-get="/htmx/devices/add/validate/slug"
|
hx-get="/htmx/devices/add/validate/slug"
|
||||||
hx-trigger="change, input delay:2s"
|
hx-trigger="change, input delay:2s"
|
||||||
|
|
|
@ -39,10 +39,10 @@ templ Content(c *views.Context, data Data) {
|
||||||
method="post"
|
method="post"
|
||||||
hx-post={ data.PostAction }
|
hx-post={ data.PostAction }
|
||||||
action={ templ.SafeURL(data.PostAction) }
|
action={ templ.SafeURL(data.PostAction) }
|
||||||
class="grid sm:grid-cols-2 gap-4 sm:gap-y-8"
|
|
||||||
hx-target={ components.NotificationContainerID }
|
hx-target={ components.NotificationContainerID }
|
||||||
hx-target-error={ components.NotificationContainerID }
|
hx-target-error={ components.NotificationContainerID }
|
||||||
hx-swap="afterbegin"
|
hx-swap="afterbegin"
|
||||||
|
class="grid sm:grid-cols-2 gap-4 sm:gap-y-8"
|
||||||
>
|
>
|
||||||
@NameInput(data.NameInput)
|
@NameInput(data.NameInput)
|
||||||
if !data.EditMode {
|
if !data.EditMode {
|
||||||
|
@ -50,7 +50,7 @@ templ Content(c *views.Context, data Data) {
|
||||||
}
|
}
|
||||||
@ResolutionXInput(data.ResolutionX)
|
@ResolutionXInput(data.ResolutionX)
|
||||||
@ResolutionYInput(data.ResolutionY)
|
@ResolutionYInput(data.ResolutionY)
|
||||||
<div class="divider my-auto sm:col-span-2 sm:my-8"><h3 class="m-0 p-0">Filter</h3></div>
|
<div class="divider my-auto sm:my-8 sm:col-span-2"><h3 class="m-0 p-0">Filter</h3></div>
|
||||||
@AspectRatioToleranceInput(data.AspectRatioTolerance)
|
@AspectRatioToleranceInput(data.AspectRatioTolerance)
|
||||||
@NSFWCheckbox(data.NSFWCheckbox)
|
@NSFWCheckbox(data.NSFWCheckbox)
|
||||||
if !data.EditMode {
|
if !data.EditMode {
|
||||||
|
|
Loading…
Reference in a new issue