WIP(shops): more fixes

website/client/src/assets/scss/item.scss

@@ -23,6 +23,7 @@
 
   &:hover {
     box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
+    border-radius: 4px;
   }
 }
 

website/client/src/components/inventory/equipment/index.vue

@@ -66,6 +66,7 @@
             :right="true"
             :hide-icon="false"
             :inline-dropdown="false"
+            :direct-select="true"
             @select="groupBy = $event"
           >
             <template #item="{ item }">

website/client/src/components/inventory/stable/index.vue

@@ -140,11 +140,12 @@
           {{ petGroup.label }}
         </h4>
         <!-- eslint-disable vue/no-use-v-if-with-v-for, max-len -->
+        <div class="d-inline-flex flex-column">
           <div
             v-for="(group, key, index) in pets(petGroup, hideMissing, selectedSortBy, searchTextThrottled)"
             v-if="index === 0 || $_openedItemRows_isToggled(petGroup.key)"
             :key="key"
-          class="pet-row d-inline-flex"
+            class="pet-row d-flex"
           >
             <!-- eslint-enable vue/no-use-v-if-with-v-for -->
             <div
@@ -153,7 +154,6 @@
               :key="item.key"
               v-drag.drop.food="item.key"
               class="pet-group"
-            :class="{'last': item.isLastInRow}"
               @itemDragOver="onDragOver($event, item)"
               @itemDropped="onDrop($event, item)"
               @itemDragLeave="onDragLeave()"
@@ -177,10 +177,10 @@
                 </template>
               </petItem>
             </div>
+          </div>
           <show-more-button
             v-if="petRowCount[petGroup.key] > 1 && petGroup.key !== 'specialPets' && !(petGroup.key === 'wackyPets' && selectedSortBy !== 'sortByColor')"
             :show-all="$_openedItemRows_isToggled(petGroup.key)"
-            class="show-more-button"
             @click="setShowMore(petGroup.key)"
           />
         </div>
@@ -202,6 +202,7 @@
           {{ mountGroup.label }}
         </h4>
         <!-- eslint-disable vue/no-use-v-if-with-v-for, max-len -->
+        <div class="d-inline-flex flex-column">
           <div
             v-for="(group, key, index) in mounts(mountGroup, hideMissing, selectedSortBy, searchTextThrottled)"
             v-if="index === 0 || $_openedItemRows_isToggled(mountGroup.key)"
@@ -211,9 +212,9 @@
             <!-- eslint-enable vue/no-use-v-if-with-v-for -->
             <div
               v-for="item in group"
+              class="pet-group"
               v-show="show('mount', item)"
               :key="item.key"
-            class="pet-group"
             >
               <mountItem
                 :key="item.key"
@@ -243,6 +244,7 @@
             @click="setShowMore(mountGroup.key)"
           />
         </div>
+      </div>
       <inventoryDrawer>
         <template
           slot="item"
@@ -322,10 +324,9 @@
   }
 
   .pet-row {
-    max-width: 100%;
     flex-wrap: wrap;
 
-    .item-wrapper {
+    .pet-group:not(:last-of-type) {
       margin-right: 24px;
     }
   }
@@ -343,24 +344,11 @@
   }
 
   .stable {
-
-    .standard-page {
-      padding-right:0;
-    }
-
-    .standard-page .clearfix .float-right {
-      margin-right: 24px;
-    }
-
     .svg-icon.inline.icon-16 {
       vertical-align: bottom;
     }
   }
 
-  .last {
-    margin-right: 0 !important;
-  }
-
   .no-focus:focus {
     background-color: inherit;
     color: inherit;

website/client/src/components/shops/market/equipmentSection.vue

@@ -6,6 +6,7 @@
         :initial-item="selectedGearCategory"
         :items="marketGearCategories"
         :with-icon="true"
+        :direct-select="true"
         @selected="selectedGroupGearByClass = $event.id"
       >
         <span
@@ -23,6 +24,7 @@
         :label="$t('sortBy')"
         :initial-item="selectedSortGearBy"
         :items="sortGearBy"
+        :direct-select="true"
         @selected="selectedSortGearBy = $event"
       >
         <span
@@ -93,7 +95,7 @@ import pinUtils from '../../../mixins/pinUtils';
 const sortGearTypes = [
   'sortByType', 'sortByPrice', 'sortByCon',
   'sortByPer', 'sortByStr', 'sortByInt',
-].map(g => ({ id: g }));
+].map(g => ({ id: g, identifier: g }));
 
 const sortGearTypeMap = {
   sortByType: 'type',

website/client/src/components/shops/market/index.vue

@@ -43,6 +43,7 @@
             :label="$t('sortBy')"
             :initial-item="selectedSortItemsBy"
             :items="sortItemsBy"
+            :direct-select="true"
             @selected="selectedSortItemsBy = $event"
           >
             <span
@@ -181,7 +182,7 @@ import inventoryUtils from '@/mixins/inventoryUtils';
 import pinUtils from '@/mixins/pinUtils';
 import { worldStateMixin } from '@/mixins/worldState';
 
-const sortItems = ['AZ', 'sortByNumber'].map(g => ({ id: g }));
+const sortItems = ['AZ', 'sortByNumber'].map(g => ({ id: g, identifier: g }));
 
 export default {
   components: {

website/client/src/components/shops/seasonal/index.vue

@@ -121,17 +121,6 @@
         <h2 class="float-left mb-3">
           {{ $t('classArmor') }}
         </h2>
-        <div class="float-right">
-          <span class="dropdown-label">{{ $t('sortBy') }}</span>
-          <select-translated-array
-            :right="true"
-            :value="selectedSortItemsBy"
-            :items="sortItemsBy"
-            :inline-dropdown="false"
-            class="inline"
-            @select="selectedSortItemsBy = $event"
-          />
-        </div>
       </div>
       <div
         v-for="(groupSets, categoryGroup) in getGroupedCategories(categories)"
@@ -160,7 +149,7 @@
             <div class="items">
               <!-- eslint-disable max-len -->
               <shopItem
-                v-for="item in seasonalItems(category, selectedSortItemsBy, searchTextThrottled, viewOptions, hidePinned)"
+                v-for="item in seasonalItems(category, 'AZ', searchTextThrottled, viewOptions, hidePinned)"
                 :key="item.key"
                 :item="item"
                 :price="item.value"
@@ -353,15 +342,11 @@ import svgWizard from '@/assets/svg/wizard.svg';
 import svgRogue from '@/assets/svg/rogue.svg';
 import svgHealer from '@/assets/svg/healer.svg';
 
-import SelectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
 import FilterSidebar from '@/components/ui/filterSidebar';
-import FilterGroup from '@/components/ui/filterGroup';
 import { worldStateMixin } from '@/mixins/worldState';
 
 export default {
   components: {
-    SelectTranslatedArray,
-    FilterGroup,
     FilterSidebar,
     Checkbox,
     PinBadge,
@@ -393,9 +378,6 @@ export default {
         eyewear: i18n.t('eyewear'),
       }),
 
-      sortItemsBy: ['AZ'],
-      selectedSortItemsBy: 'AZ',
-
       hidePinned: false,
       featuredGearBought: false,
       currentEvent: null,

website/client/src/components/shops/timeTravelers/index.vue

@@ -113,34 +113,7 @@
               :price-type="ctx.item.currency"
               :empty-item="false"
               @click="selectItemToBuy(ctx.item)"
-            >
-              <span
-                v-if="category !== 'quests'"
-                slot="popoverContent"
-                slot-scope="ctx"
-              ><div><h4 class="popover-content-title">{{ ctx.item.text }}</h4></div></span>
-              <span
-                v-if="category === 'quests'"
-                slot="popoverContent"
-              ><div class="questPopover">
-                <h4 class="popover-content-title">{{ item.text }}</h4>
-                <questInfo :quest="item" />
-              </div></span>
-              <template
-                slot="itemBadge"
-                slot-scope="ctx"
-              >
-                <span
-                  v-if="ctx.item.pinType !== 'IGNORE'"
-                  class="badge-top"
-                  @click.prevent.stop="togglePinned(ctx.item)"
-                >
-                  <pin-badge
-                    :pinned="ctx.item.pinned"
             />
-                </span>
-              </template>
-            </shopItem>
           </template>
         </itemRows>
       </div>
@@ -184,8 +157,6 @@ import { mapState } from '@/libs/store';
 import ShopItem from '../shopItem';
 import Item from '@/components/inventory/item';
 import ItemRows from '@/components/ui/itemRows';
-import QuestInfo from '../quests/questInfo.vue';
-import PinBadge from '@/components/ui/pinBadge';
 import toggleSwitch from '@/components/ui/toggleSwitch';
 
 import BuyQuestModal from '../quests/buyQuestModal.vue';
@@ -207,9 +178,7 @@ export default {
     ShopItem,
     Item,
     ItemRows,
-    PinBadge,
     toggleSwitch,
-    QuestInfo,
 
     BuyQuestModal,
   },

website/client/src/components/tasks/modal-controls/selectTranslatedArray.vue

@@ -10,6 +10,7 @@
       :hide-icon="false"
       :inline-dropdown="inlineDropdown"
       :placeholder="placeholder"
+      :direct-select="true"
       @select="selectItem($event)"
     >
       <template #item="{ item }">

website/client/src/components/ui/filterDropdown.vue

@@ -8,6 +8,7 @@
       :right="true"
       :hide-icon="false"
       :inline-dropdown="false"
+      :direct-select="directSelect"
       @select="selectItem($event)"
     >
       <template #item="{ item }">
@@ -35,6 +36,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    directSelect: {
+      type: Boolean,
+      default: false,
+    },
   },
   data () {
     return {

website/client/src/components/ui/selectList.vue

@@ -104,6 +104,10 @@ export default {
     activeKeyProp: {
       type: String,
     },
+    directSelect: {
+      type: Boolean,
+      default: false,
+    },
     disabledProp: {
       type: String,
     },
@@ -132,13 +136,17 @@ export default {
   },
   methods: {
     getKeyProp (item) {
-      return this.keyProp ? item[this.keyProp] : item.key;
+      return this.keyProp ? item[this.keyProp] : item.key || item.identifier;
     },
     isDisabled (item) {
       return typeof item[this.disabledProp] === 'undefined' ? false : item[this.disabledProp];
     },
     selectItem (item) {
+      if (this.directSelect) {
+        this.selected = item;
+      } else {
         this.selected = this.getKeyProp(item);
+      }
       this.$emit('select', item);
     },
     isSelected (item) {