Added UI for +/- buttons

This commit is contained in:
Eduard Urbach 2017-11-16 22:37:18 +01:00
parent f29079ea8d
commit abfad585e8
5 changed files with 30 additions and 6 deletions

View File

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

View File

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

View File

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

View File

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

View File

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