From 56b8179c18c04348d91eb67658d3e9ed75da87bd Mon Sep 17 00:00:00 2001 From: Thaum Date: Wed, 11 Mar 2015 06:27:31 +0000 Subject: [PATCH] Improved item drag-drop look and feel --- .../views/character/inventory/inventory.css | 31 ++++++++++--------- .../views/character/inventory/inventory.html | 2 +- .../views/character/inventory/inventory.js | 1 + 3 files changed, 18 insertions(+), 16 deletions(-) diff --git a/rpg-docs/client/views/character/inventory/inventory.css b/rpg-docs/client/views/character/inventory/inventory.css index 7cc208b3..548da32b 100644 --- a/rpg-docs/client/views/character/inventory/inventory.css +++ b/rpg-docs/client/views/character/inventory/inventory.css @@ -1,21 +1,21 @@ div#stats { -webkit-column-width: 200px; - -moz-column-width: 200px; - column-width: 200px; + -moz-column-width: 200px; + column-width: 200px; -webkit-column-count: 4; - -moz-column-count: 4; - column-count: 4; + -moz-column-count: 4; + column-count: 4; } .containers { -webkit-column-width: 300px; - -moz-column-width: 300px; - column-width: 300px; + -moz-column-width: 300px; + column-width: 300px; -webkit-column-gap: 8px; - -moz-column-gap: 8px; - column-gap: 8px; + -moz-column-gap: 8px; + column-gap: 8px; -moz-column-fill: balance; - column-fill: balance; + column-fill: balance; padding: 8px; } @@ -25,7 +25,7 @@ div#stats { justify-content: center; flex-direction: row; border-radius: 2px 0 0 2px; - + /* same style as display-1 */ font-size: 34px; font-weight: 400; @@ -41,7 +41,7 @@ div#stats { .containerRight { padding: 16px; cursor: pointer; - + /* same style as subhead */ font-size: 16px; font-weight: 400; @@ -58,7 +58,7 @@ div#stats { .resourceMax { display: inline-block; align-self: flex-end; - + /* same style as subhead */ font-size: 16px; font-weight: 400; @@ -69,7 +69,7 @@ div#stats { } .resourceMax:before { - content: "/"; + content: "/"; } .resourceButtons { @@ -115,7 +115,8 @@ div#stats { .inventoryItem { background: white; - transition: box-shadow 0.1s ease; + transition: box-shadow 0.3s ease, + opacity 0.3s ease; height: 40px; margin: 1px 0 1px 0; font-size: 16px; @@ -139,7 +140,7 @@ div#stats { } .inventoryItem[hero] { - box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); + box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.37); } .itemSlot { diff --git a/rpg-docs/client/views/character/inventory/inventory.html b/rpg-docs/client/views/character/inventory/inventory.html index 6985f18f..92c0993f 100644 --- a/rpg-docs/client/views/character/inventory/inventory.html +++ b/rpg-docs/client/views/character/inventory/inventory.html @@ -66,7 +66,7 @@