Prettified all remaining detail boxes to be view -> edit

rpg-docs/client/views/character/inventory/containerDialog/containerDialog.css

@@ -0,0 +1,8 @@
+.containerSummaryTable td{
+	text-align: right;
+	padding: 4px;
+}
+
+.containerSummaryTable td:first-child {
+	text-align: left;
+}

rpg-docs/client/views/character/inventory/containerDialog/containerDialog.html

@@ -1,22 +1,46 @@
 <template name="containerDialog">
 	{{#with container}}
-		{{#baseDialog title=name class=colorClass}}
-			<!--Name and plural name-->
-			<paper-input id="containerNameInput" label="Name" floatinglabel value={{name}}></paper-input>
-			<!--Weight-->
-			<paper-input-decorator label="Weight" floatinglabel>
-				<input id="weightInput" type="number" value={{weight}}>
-			</paper-input-decorator>
-			<!--Value-->
-			<paper-input-decorator label="Value" floatinglabel>
-				<input id="valueInput" type="number" value={{value}}>
-			</paper-input-decorator>
-			<!--Description-->
-			<paper-input-decorator label="Description" floatinglabel layout vertical>
-				<paper-autogrow-textarea>
-					<textarea id="containerDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
-				</paper-autogrow-textarea>
-			</paper-input-decorator>
+		{{#baseDialog title=name class=colorClass startEditing=../startEditing}}
+			{{> containerView}}
+		{{else}}
+			{{> containerEdit}}
 		{{/baseDialog}}
 	{{/with}}
-</template>
+</template>
+
+<template name="containerEdit">
+	<paper-input id="containerNameInput fullwidth"
+				 label="Name"
+				 floatinglabel
+				 value={{name}}></paper-input>
+	<div layout horizontal around-justified wrap>
+		<paper-input-decorator label="Weight" floatinglabel>
+			<input id="weightInput" type="number" value={{weight}}>
+		</paper-input-decorator>
+		<paper-input-decorator label="Value" floatinglabel>
+			<input id="valueInput" type="number" value={{value}}>
+		</paper-input-decorator>
+	</div>
+
+	<hr class="vertMargin">
+
+	<paper-input-decorator label="Description" floatinglabel layout vertical>
+		<paper-autogrow-textarea>
+			<textarea id="containerDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
+		</paper-autogrow-textarea>
+	</paper-input-decorator>
+</template>
+
+<template name="containerView">
+	<div layout horizontal wrap center justified>
+		<table class="containerSummaryTable fullwidth">
+			<tr><td>Container</td><td>{{weight}}lbs</td><td>{{longValueString value}}</td></tr>
+			<tr><td>Contents</td><td>{{contentsWeight}}lbs</td><td>{{longValueString contentsValue}}</td></tr>
+			<tr class="body2"><td>Total</td><td>{{totalWeight}}lbs</td><td>{{longValueString totalValue}}</td></tr>
+		</table>
+	</div>
+	{{#if description}}
+		<hr class="vertMargin">
+		<div class="prewrap">{{description}}</div>
+	{{/if}}
+</template>

rpg-docs/client/views/character/inventory/containerDialog/containerDialog.js

@@ -4,7 +4,11 @@ Template.containerDialog.helpers({
 	}
 });
 
-Template.containerDialog.events({
+Template.containerEdit.onRendered(function(){
+	updatePolymerInputs(this);
+});
+
+Template.containerEdit.events({
 	"color-change": function(event, instance){
 		Containers.update(instance.data.containerId, {$set: {color: event.color}});
 	},

rpg-docs/client/views/character/inventory/inventory.css

@@ -40,7 +40,6 @@ div#stats {
 
 .containerRight {
 	padding: 16px;
-	cursor: pointer;
 
 	/* same style as subhead */
 	font-size: 16px;

rpg-docs/client/views/character/inventory/inventory.js

@@ -84,7 +84,7 @@ Template.inventory.events({
 			if(err) throw err;
 			GlobalUI.setDetail({
 				template: "itemDialog",
-				data:     {itemId: itemId, charId: charId},
+				data:     {itemId: itemId, charId: charId, startEditing: true},
 				heroId:   itemId
 			});
 		});
@@ -93,7 +93,7 @@ Template.inventory.events({
 		var containerId = Containers.insert({name: "New Container", isCarried: true, charId: this._id});
 		GlobalUI.setDetail({
 			template: "containerDialog",
-			data:     {containerId: containerId, charId: this.charId},
+			data:     {containerId: containerId, charId: this.charId, startEditing: true},
 			heroId:   containerId
 		});
 	},

rpg-docs/client/views/character/inventory/itemDialog/itemDialog.html

@@ -1,11 +1,9 @@
 <template name="itemDialog">
 	{{#with item}}
-		{{#baseDialog title=itemHeading class=colorClass showEdit=true editing=editing}}
-			{{#if editing}}
-				{{> itemEdit}}
-			{{else}}
-				{{> itemDetails}}
-			{{/if}}
+		{{#baseDialog title=itemHeading class=colorClass startEditing=../startEditing}}
+			{{> itemDetails}}
+		{{else}}
+			{{> itemEdit}}
 		{{/baseDialog}}
 	{{/with}}
 </template>

rpg-docs/client/views/character/inventory/itemDialog/itemDialog.js

@@ -3,7 +3,7 @@ var getContainers = function(charId){
 };
 
 Template.itemDialog.onCreated(function(){
-	this.editing = new ReactiveVar(false);
+	this.editing = new ReactiveVar(!!this.data.startEditing);
 });
 
 Template.itemDialog.helpers({