Added UI for +/- buttons
This commit is contained in:
parent
f29079ea8d
commit
abfad585e8
@ -13,6 +13,16 @@ component InputNumber(id string, value float64, label string, placeholder string
|
|||||||
label(for=id)= label + ":"
|
label(for=id)= label + ":"
|
||||||
input.widget-ui-element.action(id=id, data-field=id, type="number", value=value, min=min, max=max, step=step, placeholder=placeholder, title=placeholder, data-action="save", data-trigger="change")
|
input.widget-ui-element.action(id=id, data-field=id, type="number", value=value, min=min, max=max, step=step, placeholder=placeholder, title=placeholder, data-action="save", data-trigger="change")
|
||||||
|
|
||||||
|
component InputNumberWithButtons(id string, value float64, label string, placeholder string, min string, max string, step string)
|
||||||
|
.widget-section
|
||||||
|
label(for=id)= label + ":"
|
||||||
|
.number-input-container
|
||||||
|
input.widget-ui-element.action(id=id, data-field=id, type="number", value=value, min=min, max=max, step=step, placeholder=placeholder, title=placeholder, data-action="save", data-trigger="change")
|
||||||
|
button
|
||||||
|
RawIcon("plus")
|
||||||
|
button
|
||||||
|
RawIcon("minus")
|
||||||
|
|
||||||
component InputSelection(id string, value string, label string, placeholder string, options []*arn.Option)
|
component InputSelection(id string, value string, label string, placeholder string, options []*arn.Option)
|
||||||
.widget-section
|
.widget-section
|
||||||
label(for=id)= label + ":"
|
label(for=id)= label + ":"
|
||||||
|
@ -5,7 +5,7 @@ component AnimeListItem(viewUser *arn.User, item *arn.AnimeListItem, anime *arn.
|
|||||||
|
|
||||||
.anime-list-item-progress-edit
|
.anime-list-item-progress-edit
|
||||||
.anime-list-item-episodes-edit
|
.anime-list-item-episodes-edit
|
||||||
InputNumber("Episodes", float64(item.Episodes), "Episodes", "Number of episodes you watched", "0", arn.EpisodeCountMax(anime.EpisodeCount), "1")
|
InputNumberWithButtons("Episodes", float64(item.Episodes), "Episodes", "Number of episodes you watched", "0", arn.EpisodeCountMax(anime.EpisodeCount), "1")
|
||||||
|
|
||||||
.widget-section.anime-list-item-status-edit
|
.widget-section.anime-list-item-status-edit
|
||||||
label(for="Status") Status:
|
label(for="Status") Status:
|
||||||
|
@ -26,6 +26,7 @@ ui-disabled-color = rgb(224, 224, 224)
|
|||||||
ui-element-border-radius = 3px
|
ui-element-border-radius = 3px
|
||||||
|
|
||||||
// Input
|
// Input
|
||||||
|
input-height = 2.4rem
|
||||||
input-focus-border-color = rgb(248, 165, 130)
|
input-focus-border-color = rgb(248, 165, 130)
|
||||||
|
|
||||||
// Button
|
// Button
|
||||||
|
@ -22,6 +22,8 @@ input, select
|
|||||||
padding 0.5rem 1rem
|
padding 0.5rem 1rem
|
||||||
|
|
||||||
input
|
input
|
||||||
|
height input-height
|
||||||
|
|
||||||
:active
|
:active
|
||||||
transform translateY(3px)
|
transform translateY(3px)
|
||||||
|
|
||||||
@ -56,3 +58,13 @@ textarea
|
|||||||
line-height 1.5em
|
line-height 1.5em
|
||||||
height 10rem
|
height 10rem
|
||||||
transition none
|
transition none
|
||||||
|
|
||||||
|
.number-input-container
|
||||||
|
horizontal
|
||||||
|
|
||||||
|
button
|
||||||
|
justify-content center
|
||||||
|
margin-left 0.2rem
|
||||||
|
padding 0
|
||||||
|
width 2.7rem
|
||||||
|
height input-height
|
@ -48,6 +48,7 @@
|
|||||||
font-size 1em
|
font-size 1em
|
||||||
padding 0
|
padding 0
|
||||||
width 0
|
width 0
|
||||||
|
height auto
|
||||||
flex-grow 1
|
flex-grow 1
|
||||||
|
|
||||||
// #search
|
// #search
|
||||||
|
Loading…
Reference in New Issue
Block a user