From 1c2ced321b2d85a3a6a4b2c88f3866e304a4f2f8 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Oliver.akins1999@gmail.com>
Date: Mon, 1 Apr 2024 21:08:59 -0600
Subject: [PATCH] Add the quantity input to the item details tab (closes #154)

---
 styles/v3/elements/label.scss                 |  4 ++
 styles/v3/elements/number-input.scss          |  3 +-
 styles/v3/elements/panel.scss                 |  4 ++
 styles/v3/elements/select.scss                |  1 +
 styles/v3/index.scss                          |  1 +
 styles/v3/layouts/items/untyped/v2.scss       |  6 +++
 .../untyped/v2/tabs/details.v2.untyped.hbs    | 42 ++++++++++++-------
 7 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/styles/v3/elements/label.scss b/styles/v3/elements/label.scss
index cd8fdfb..12e3afb 100644
--- a/styles/v3/elements/label.scss
+++ b/styles/v3/elements/label.scss
@@ -2,4 +2,8 @@
 
 .dotdungeon.style-v3 > .window-content label {
 	cursor: pointer;
+
+	&.justify-start {
+		justify-self: start;
+	}
 }
diff --git a/styles/v3/elements/number-input.scss b/styles/v3/elements/number-input.scss
index 9d779ac..ad9ce74 100644
--- a/styles/v3/elements/number-input.scss
+++ b/styles/v3/elements/number-input.scss
@@ -7,9 +7,8 @@
 	padding: 4px 8px;
 	color: white;
 	transition: all 200ms ease-in-out;
-	width: 50px;
-	height: auto;
 	text-align: center;
+	line-height: 1rem;
 
 	&:hover {
 		@include material.elevate(4);
diff --git a/styles/v3/elements/panel.scss b/styles/v3/elements/panel.scss
index d256c91..de7cf9f 100644
--- a/styles/v3/elements/panel.scss
+++ b/styles/v3/elements/panel.scss
@@ -12,6 +12,10 @@
 			flex-direction: row;
 			gap: var(--gap);
 			align-items: center;
+
+			&.space-between {
+				justify-content: space-between;
+			}
 		}
 	}
 }
diff --git a/styles/v3/elements/select.scss b/styles/v3/elements/select.scss
index 720eaa7..55125ac 100644
--- a/styles/v3/elements/select.scss
+++ b/styles/v3/elements/select.scss
@@ -8,6 +8,7 @@
 		padding: 4px 8px;
 		color: white;
 		transition: all 200ms ease-in-out;
+		width: 6.25rem;
 
 		&:hover {
 			@include material.elevate(4);
diff --git a/styles/v3/index.scss b/styles/v3/index.scss
index ef4eda9..1814eac 100644
--- a/styles/v3/index.scss
+++ b/styles/v3/index.scss
@@ -14,6 +14,7 @@
 @use "./elements/icons.scss";
 @use "./elements/nav.scss";
 @use "./elements/panel.scss";
+@use "./elements/label.scss";
 
 /* Sheet Layouts */
 @use "./layouts/datasheet.scss";
diff --git a/styles/v3/layouts/items/untyped/v2.scss b/styles/v3/layouts/items/untyped/v2.scss
index 27e7fb8..8c18cd3 100644
--- a/styles/v3/layouts/items/untyped/v2.scss
+++ b/styles/v3/layouts/items/untyped/v2.scss
@@ -48,6 +48,12 @@
 
 	@include utils.tab("details") {
 		@extend %flex-col;
+
+		.number {
+			display: grid;
+			grid-template-columns: 1fr 55px;
+			align-items: center;
+		}
 	}
 
 	@include utils.tab("settings") {
diff --git a/templates/items/untyped/v2/tabs/details.v2.untyped.hbs b/templates/items/untyped/v2/tabs/details.v2.untyped.hbs
index 000ac35..37591e8 100644
--- a/templates/items/untyped/v2/tabs/details.v2.untyped.hbs
+++ b/templates/items/untyped/v2/tabs/details.v2.untyped.hbs
@@ -1,10 +1,12 @@
 <div class="tab" data-group="page" data-tab="details">
-	<div class="cost panel--row">
+	<div class="number panel">
 		{{#if meta.isEditable}}
-			<label for="{{meta.idp}}-purchase-cost">
+			<label
+				for="{{meta.idp}}-purchase-cost"
+				class="justify-start"
+			>
 				Purchase Cost
 			</label>
-			<div class="grow"></div>
 			<input
 				type="number"
 				name="system.buy"
@@ -14,16 +16,17 @@
 			>
 		{{else}}
 			Purchase Cost
-			<div class="grow"></div>
 			{{dd-empty-state system.buy}}
 		{{/if}}
 	</div>
-	<div class="usage-cost panel--row">
+	<div class="number panel">
 		{{#if meta.isEditable}}
-			<label for="{{meta.idp}}-usage-cost">
+			<label
+				for="{{meta.idp}}-usage-cost"
+				class="justify-start"
+			>
 				Usage Cost
 			</label>
-			<div class="grow"></div>
 			<input
 				type="number"
 				name="system.usage_cost"
@@ -33,13 +36,11 @@
 			>
 		{{else}}
 			Usage Cost
-			<div class="grow"></div>
 			{{dd-empty-state system.usage_cost}}
 		{{/if}}
 	</div>
-	<div class="tier panel--row">
+	<div class="detail panel--row space-between">
 		Rarity
-		<div class="grow"></div>
 		{{#if meta.isEditable}}
 			<select
 				class="text-center"
@@ -53,9 +54,8 @@
 		{{/if}}
 	</div>
 	{{#if meta.isEmbedded}}
-		<div class="location panel--row">
+		<div class="detail panel--row space-between">
 			Item Location
-			<div class="grow"></div>
 			{{#if meta.isEditable}}
 				<select
 					class="text-center"
@@ -68,8 +68,22 @@
 				{{dd-i18n (concat "dotdungeon.location." system.location)}}
 			{{/if}}
 		</div>
-		<div class="quantity panel">
-			Quantity
+		<div class="number panel">
+			{{#if meta.isEditable}}
+				<label for="{{meta.idp}}-quantity">
+					Quantity
+				</label>
+				<input
+					type="number"
+					min="0"
+					name="system.quantity"
+					value="{{system.quantity}}"
+					id="{{meta.idp}}-quantity"
+				>
+			{{else}}
+				Quantity
+				{{system.quantity}}
+			{{/if}}
 		</div>
 	{{/if}}
 </div>