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 + ":"
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)
.widget-section
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-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
label(for="Status") Status:

View File

@ -26,6 +26,7 @@ ui-disabled-color = rgb(224, 224, 224)
ui-element-border-radius = 3px
// Input
input-height = 2.4rem
input-focus-border-color = rgb(248, 165, 130)
// Button

View File

@ -22,6 +22,8 @@ input, select
padding 0.5rem 1rem
input
height input-height
:active
transform translateY(3px)
@ -55,4 +57,14 @@ textarea
padding 0.4em 0.8em
line-height 1.5em
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
padding 0
width 0
height auto
flex-grow 1
// #search
@ -55,7 +56,7 @@
// border-radius 0
// background transparent
// border none
// color nav-link-hover-color
// font-size 1em
// min-width 0
@ -84,10 +85,10 @@
// > 930px
// .navigation-button, #search
// font-size 1.2em
// #navigation
// justify-content flex-start
// .extra-navigation
// display block
@ -96,7 +97,7 @@
// vertical
// height 100%
// padding content-padding 0
// #container
// horizontal