Add the layout for the details tab (closes #143)

module/sheets/Items/UntypedItemSheet.mjs

@@ -27,6 +27,7 @@ export class UntypedItemSheet extends GenericItemSheet {
 
 		ctx.computed = {
 			showSettingsTab: ctx.isGM || this.item.isOwned,
+			isEmbedded: this.item.isOwned,
 		};
 
 		return ctx;

styles/v3/elements/panel.scss

@@ -4,5 +4,6 @@
 	.panel {
 		@include material.elevate(2);
 		border-radius: 4px;
+		padding: var(--gap);
 	}
 }

styles/v3/layouts/items/untyped/v2.scss

@@ -2,6 +2,8 @@
 @use "../../../mixins/utils";
 
 .dotdungeon.style-v3 .item--untyped {
+	--gap: 8px;
+
 	.nav-bar {
 		@include material.elevate(8);
 		position: absolute;
@@ -12,15 +14,20 @@
 		nav {
 			display: flex;
 			flex-direction: row;
-			gap: 8px;
-			padding: 8px;
+			gap: var(--gap);
+			padding: var(--gap);
 		}
 	}
 
 	.page-content {
-		padding: 8px;
+		padding: calc(var(--gap) * 1);
 		padding-bottom: 60px;
 		height: 100%;
+
+		> .tab {
+			height: 100%;
+			gap: var(--gap);
+		}
 	}
 
 	@include utils.tab("general") {
@@ -28,11 +35,14 @@
 		--height: 50px;
 		grid-template-columns: var(--height) 1fr;
 		grid-template-rows: var(--height) 1fr;
-		gap: 8px;
-		height: 100%;
 
 		.description {
 			grid-column: 1 / -1;
 		}
 	}
+
+	@include utils.tab("details") {
+		display: flex;
+		flex-direction: column;
+	}
 }

templates/items/untyped/v2/tabs/details.v2.untyped.hbs

@@ -1,3 +1,19 @@
 <div class="tab" data-group="page" data-tab="details">
-	Details Tab
+	<div class="cost panel">
+		Purchase Cost
+	</div>
+	<div class="usage-cost panel">
+		Usage Cost
+	</div>
+	<div class="tier panel">
+		Item Rarity
+	</div>
+	{{#if computed.isEmbedded}}
+		<div class="location panel">
+			Item Location
+		</div>
+		<div class="quantity panel">
+			Quantity
+		</div>
+	{{/if}}
 </div>