Inventory item animations much improved

They now leave behind scars when leaving their container, and they weld themselves back into place when returning.

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

@@ -18,11 +18,32 @@
 	padding: 16px;
 }
 
-.containerBottom {
-	margin: 0 -16px -16px -16px;
+.equipmentTop {
+	margin: -16px -16px 0 -16px;
 	padding: 16px;
 }
 
+.containerMain {
+	margin: 0 -16px -16px -16px;
+	padding-bottom: 16px;
+}
+
+.equipmentMain {
+	margin: 0 -16px -16px -16px;
+	padding-bottom: 16px;
+}
+
 .inventoryItem {
 	background: white;
+	transition: box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+	margin: 1px 0 1px 0;
+}
+
+.inventoryItem[hero] {
+	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
+}
+
+.itemSlot {
+	background-color: rgb(232, 232, 232);
+	background-color: rgba(0, 0, 0, 0.1);
 }

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

@@ -1,23 +1,32 @@
 <template name="inventory">
 	<div fit>
 		<div id="inventory" class="scroll-y" fit>
-			<paper-shadow class="equipment card double">
-				Armor:<br>
-				{{#if armor}}
-					{{#with armor}}
-						<paper-item class="inventoryItem"  hero-id="main" {{detailHero}}>{{name}}</paper-item>
-					{{/with}}
-				{{else}}
-					<paper-item>none</paper-item>
-				{{/if}}
-				Equipment:<br>
-				{{#each equipment}}
-					<paper-item class="inventoryItem"  hero-id="main" {{detailHero}}>
-						{{name}}
-					</paper-item>
-				{{/each}}
-			</paper-shadow>
 			<div class="containers">
+				<paper-shadow class="card container">
+					<div class="equipmentTop blue white-text" layout horizontal>
+						<div class="containerName title" flex>Equipment</div>
+						<div class="caption" style="margin-right: 8px">(net Worth)</div>
+						<div class="caption">(weightCarried)lbs</div>
+					</div>
+					<div flex class="equipmentMain">
+						{{#if armor}}
+						{{#with armor}}
+							<div class="itemSlot">
+								<paper-item class="inventoryItem armorItem" hero-id="main" {{detailHero}}>
+									{{name}}
+								</paper-item>
+							</div>
+						{{/with}}
+						{{/if}}
+						{{#each equipment}}
+							<div class="itemSlot">
+								<paper-item class="inventoryItem" hero-id="main" {{detailHero}}>
+									{{name}}
+								</paper-item>
+							</div>
+						{{/each}}
+					</div>
+				</paper-shadow>
 				{{#each containers}}
 					<paper-shadow class="card container"  hero-id="main" {{detailHero}}>
 						<div class="containerTop green white-text" hero-id="toolbar" layout horizontal {{detailHero}}>
@@ -27,10 +36,12 @@
 						</div>
 						<div flex class="containerMain">
 							{{#each items ../_id _id}}
-							<paper-item class="inventoryItem" hero-id="main" {{detailHero}}>
-								{{#if gt1 quantity}}{{quantity}}{{/if}}&nbsp;{{pluralName}}
-							</paper-item>
-						{{/each}}
+							<div class="itemSlot">
+								<paper-item class="inventoryItem" hero-id="main" {{detailHero}}>
+									{{#if ne1 quantity}}{{quantity}}&nbsp;{{/if}}{{pluralName}}
+								</paper-item>
+							</div>
+							{{/each}}
 						</div>
 					</paper-shadow>
 				{{/each}}
@@ -40,6 +51,5 @@
 			<paper-fab-menu-item id="addItem" icon="note-add" color="#d23f31" tooltip="Item"></paper-fab-menu-item>
 			<paper-fab-menu-item id="addContainer" icon="work" color="#d23f31" tooltip="Container"></paper-fab-menu-item>
 		</paper-fab-menu>
-
 	</div>
 </template>

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

@@ -18,8 +18,8 @@ Template.inventory.helpers({
 	showAddButtons: function(){
 		return Template.instance().showAddButtons.get();
 	},
-	gt1: function(num){
-		return num > 1;
+	ne1: function(num){
+		return num !== 1;
 	}
 });