From 38a0039be5a2185ff38fa1557172e5961335cbd3 Mon Sep 17 00:00:00 2001
From: Thaum <stefanzermatten@gmail.com>
Date: Tue, 3 Feb 2015 14:07:26 +0000
Subject: [PATCH] Inventory item animations much improved

They now leave behind scars when leaving their container, and they weld themselves back into place when returning.
---
 .../views/character/inventory/inventory.css   | 25 ++++++++-
 .../views/character/inventory/inventory.html  | 52 +++++++++++--------
 .../views/character/inventory/inventory.js    |  4 +-
 3 files changed, 56 insertions(+), 25 deletions(-)

diff --git a/rpg-docs/client/views/character/inventory/inventory.css b/rpg-docs/client/views/character/inventory/inventory.css
index cfbe11c4..cf635cd0 100644
--- a/rpg-docs/client/views/character/inventory/inventory.css
+++ b/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);
 }
diff --git a/rpg-docs/client/views/character/inventory/inventory.html b/rpg-docs/client/views/character/inventory/inventory.html
index 0d384077..44e9ed57 100644
--- a/rpg-docs/client/views/character/inventory/inventory.html
+++ b/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>
\ No newline at end of file
diff --git a/rpg-docs/client/views/character/inventory/inventory.js b/rpg-docs/client/views/character/inventory/inventory.js
index e2f45b74..5cf28a2b 100644
--- a/rpg-docs/client/views/character/inventory/inventory.js
+++ b/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;
 	}
 });