Added UI for +/- buttons

mixins/Input.pixy

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

pages/animelistitem/animelistitem.pixy

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

styles/include/config.scarlet

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

styles/input.scarlet

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

styles/navigation.scarlet

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