Fixed the spacing for items since that last solution broke something else...

Author: SunburnedGoose

app/scripts/store/dimStoreItems.directive.js

@@ -19,13 +19,13 @@
       template: [
         '<div>',
         '  <div class="items {{ vm.store.id }}" data-type="item" data-character="{{ vm.store.id }}">',
-        '    <div ng-repeat="key in vm.keys" ng-init="value = vm.categories[key]" class="section {{ key.toLowerCase() }}" ui-on-drop="vm.onDrop($data, $event, false)" drop-channel="{{ value.join(\',\') }}">',
+        '    <div ng-repeat="key in vm.keys" ng-init="value = vm.categories[key]" class="section {{ key.toLowerCase() }}" ui-on-drop="vm.onDrop($data, $event, false)" drop-channel="{{ value }}">',
         '      <div class="title">',
         '        <span>{{ key }}</span>',
         '        <span class="bucket-count" ng-if="vm.store.id === \'vault\'">{{ vm.sortSize[key] }}/{{ key === \'Weapons\' ? 36 : 24 }}  </span>',
         '      </div>',
         '      <div ng-repeat="type in value" class="sub-section sort-{{ type.toLowerCase() }}" ng-class="vm.data[vm.orderedTypes[type]] ? \'\' : \'empty\'">',
-        '        <div ng-class="vm.styles[type].equipped" ng-if="vm.store.id !== \'vault\' && vm.data[vm.orderedTypes[type]].equipped" ui-on-drop="vm.onDrop($data, $event, true)" drop-channel="{{ value.join(\',\') }}">',
+        '        <div ng-class="vm.styles[type].equipped" ng-if="vm.store.id !== \'vault\'" ui-on-drop="vm.onDrop($data, $event, true)" drop-channel="{{ type }}">',
         '          <div ng-repeat="item in vm.data[vm.orderedTypes[type]].equipped track by item.index" dim-store-item store-data="vm.store" item-data="item"></div>',
         '        </div>',
         '        <div ng-class="vm.styles[type].unequipped">',

app/styles/main.css

@@ -224,6 +224,7 @@ img.void {
 }
 .sub-section {
   margin-bottom: 20px;
+  position: relative;
 }
 .equippable {
   display: inline-block;
@@ -235,21 +236,27 @@ img.void {
 .vault .unequippable {
   width: 208px;
 }
+
+.sub-section {
+  clear: both;
+}
 .equipped {
   width: 52px;
   margin-right: 12px;
 }
-.unequipped {
+.guardian .unequipped {
   width: 156px;
 }
 .vault .unequipped {
   width: 208px;
 }
-.equipped.on-drag-enter .item {
-  box-shadow: 0 0 10px #ddd;
+.sub-section.on-drag-enter {
+  box-shadow: 0 0 10px rgba(170,170,170,.5);;
+  background-color: rgba(170,170,170,.5);;
 }
-.equipped.on-drag-hover .item {
-  box-shadow: 0 0 10px 2px #fff;
+.sub-section.on-drag-hover {
+  box-shadow: 0 0 10px 2px rgba(200,200,200,.5);;
+  background-color: rgba(200,200,200,.5);
 }
 .item-target {
   vertical-align: top;
@@ -266,13 +273,13 @@ img.void {
   display: inline-block;
   box-shadow: none;
 }
-.unequipped.on-drag-enter .item-target, .unequippable.on-drag-enter .item-target {
+/*.unequipped.on-drag-enter .item-target, .unequippable.on-drag-enter .item-target {
   display: inline-block;
   box-shadow: 0 0 10px #ccc;
 }
 .unequipped.on-drag-hover .item-target, .unequippable.on-drag-enter .item-target {
   box-shadow: 0 0 10px 2px #eee;
-}
+}*/
 .counter {
   position: absolute;
   bottom: -2px;
@@ -307,10 +314,9 @@ img.void {
   border-color: transparent transparent #b184c5 transparent;
 }
 .item {
-  margin: 2px;
+  margin: 0 2px;
   position: relative;
   display: inline-block;
-  float: left;
   width: 44px;
   height: 44px;
   background-color: #5c7183;