tigor/Redmage
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

views: fix broken layout on devices put view

Browse source
This commit is contained in:
Tigor Hutasuhut 2024-05-29 12:05:40 +07:00
parent 55845b4b45
commit d6e8cd96b0
8 changed files with 17 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
views/devices/put/aspect_ratio_tolerance_input.templ
View file

@ -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"

10
views/devices/put/max_image_resolution_input.templ
View file

@ -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) }

4
views/devices/put/min_image_resolution_input.templ
View file

@ -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 != "",
) } ) }

4
views/devices/put/name_input.templ
View file

@ -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">

2
views/devices/put/nsfw_checkbox.templ
View file

@ -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"

4
views/devices/put/resolution_input.templ
View file

@ -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 != "",
) } ) }

8
views/devices/put/slug_input.templ
View file

@ -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"

4
views/devices/put/view.templ
View file

@ -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 {