fix: shop ui (#11046)

* shop: equipment-cards background + market filter logic (as other pages)

* shops - quest: refactor filter logic + quest items margins

* shops-seasonal: refactor filter logic

* shops - timeTravelers: refactor filter logic

* fix star/empty colors - fix quest layout - countBadge z-index

website/client/assets/svg/difficulty-star-empty.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-    <path fill="#E1E0E3" fill-rule="evenodd" d="M10.667 10.667L16 8l-5.333-2.667L8 0 5.333 5.333 0 8l5.333 2.667L8 16z"/>
+    <path class="star-empty" fill="#E1E0E3" fill-rule="evenodd" d="M10.667 10.667L16 8l-5.333-2.667L8 0 5.333 5.333 0 8l5.333 2.667L8 16z"/>
 </svg>

website/client/assets/svg/difficulty-star-half.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
     <g fill="none" fill-rule="evenodd">
-        <path fill="#E1E0E3" d="M10.667 10.667L16 8l-5.333-2.667L8 0 5.333 5.333 0 8l5.333 2.667L8 16z"/>
-        <path fill="#FFB445" d="M8 0L5.333 5.333 0 8l5.333 2.667L8 16z"/>
+        <path class="star-empty" fill="#E1E0E3" d="M10.667 10.667L16 8l-5.333-2.667L8 0 5.333 5.333 0 8l5.333 2.667L8 16z"/>
+        <path class="star" fill="#FFB445" d="M8 0L5.333 5.333 0 8l5.333 2.667L8 16z"/>
     </g>
 </svg>

website/client/assets/svg/difficulty-star.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-    <path fill="#FFB445" fill-rule="evenodd" d="M10.667 10.667L16 8l-5.333-2.667L8 0 5.333 5.333 0 8l5.333 2.667L8 16z"/>
+    <path class="star" fill="#FFB445" fill-rule="evenodd" d="M10.667 10.667L16 8l-5.333-2.667L8 0 5.333 5.333 0 8l5.333 2.667L8 16z"/>
 </svg>

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

@@ -21,7 +21,7 @@ layout-section(:title="$t('equipment')")
       span(slot="item", slot-scope="ctx")
         span.text {{ $t(ctx.item.id) }}
 
-  itemRows(
+  itemRows.equipment-rows(
     :items="sortedGearItems",
     :itemWidth=94,
     :itemMargin=24,
@@ -169,6 +169,10 @@ layout-section(:title="$t('equipment')")
   };
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+  .equipment-rows {
+    /deep/ .item.item-empty {
+      background: white;
+    }
+  }
 </style>

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

@@ -21,7 +21,7 @@
       h1.mb-4.page-header(v-once) {{ $t('market') }}
 
       equipment-section(
-        v-if="viewOptions['equipment'].selected",
+        v-if="!anyFilterSelected || viewOptions['equipment'].selected",
         :hidePinned="hidePinned",
         :hideLocked="hideLocked",
         :searchBy="searchTextThrottled"
@@ -39,17 +39,17 @@
               span.text {{ $t(ctx.item.id) }}
       div(
         v-for="category in categories",
-        v-if="viewOptions[category.identifier].selected && category.identifier !== 'equipment'"
+        v-if="!anyFilterSelected || viewOptions[category.identifier].selected && category.identifier !== 'equipment'"
       )
         h4 {{ category.text }}
-          category-row(
-            :hidePinned="hidePinned",
-            :hideLocked="hideLocked",
-            :searchBy="searchTextThrottled",
-            :sortBy="selectedSortItemsBy.id",
-            :category="category"
-          )
-          keys-to-kennel(v-if='category.identifier === "special"')
+        category-row(
+          :hidePinned="hidePinned",
+          :hideLocked="hideLocked",
+          :searchBy="searchTextThrottled",
+          :sortBy="selectedSortItemsBy.id",
+          :category="category"
+        )
+        keys-to-kennel(v-if='category.identifier === "special"')
         div.fill-height
 
       inventoryDrawer(:showEggs="true", :showPotions="true")
@@ -290,13 +290,16 @@ export default {
         categories.map((category) => {
           if (!this.viewOptions[category.identifier]) {
             this.$set(this.viewOptions, category.identifier, {
-              selected: true,
+              selected: false,
             });
           }
         });
 
         return categories;
       },
+      anyFilterSelected () {
+        return Object.values(this.viewOptions).some(g => g.selected);
+      },
     },
     methods: {
       sellItem (itemScope) {

website/client/components/shops/quests/index.vue

@@ -81,7 +81,7 @@
 
       div(
         v-for="category in categories",
-        v-if="viewOptions[category.identifier].selected"
+        v-if="!anyFilterSelected || viewOptions[category.identifier].selected"
       )
         h2.mb-3 {{ category.text }}
 
@@ -244,12 +244,14 @@
     display: inline-block;
     width: 33%;
     margin-bottom: 24px;
+    vertical-align: top;
 
     .items {
       border-radius: 2px;
       background-color: #edecee;
       display: inline-block;
       padding: 8px;
+      margin-right: 12px;
     }
 
     .item-wrapper {
@@ -258,6 +260,7 @@
 
     .items > div:not(:last-of-type) {
       margin-right: 16px;
+      margin-bottom: 16px;
     }
   }
 
@@ -415,7 +418,7 @@ export default {
         if (this.shop.categories) {
           this.shop.categories.map((category) => {
             this.$set(this.viewOptions, category.identifier, {
-              selected: true,
+              selected: false,
             });
           });
 
@@ -424,6 +427,10 @@ export default {
           return [];
         }
       },
+
+      anyFilterSelected () {
+        return Object.values(this.viewOptions).some(g => g.selected);
+      },
     },
     methods: {
       questItems (category, sortBy, searchBy, hideLocked, hidePinned) {

website/client/components/shops/quests/questInfo.vue

@@ -74,6 +74,15 @@ dt {
     white-space: nowrap;
   }
 }
+
+// making sure the star-colors always correct
+.star {
+  fill: #ffb445;
+}
+.star-empty {
+  fill: #686274;
+}
+
 </style>
 
 <script>

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

@@ -437,7 +437,7 @@
 
           _forEach(equipmentList, (value) => {
             this.$set(this.viewOptions, value.key, {
-              selected: true,
+              selected: false,
             });
           });
 
@@ -446,6 +446,10 @@
           return [];
         }
       },
+
+      anyFilterSelected () {
+        return Object.values(this.viewOptions).some(g => g.selected);
+      },
     },
     methods: {
       getClassName (classType) {
@@ -468,7 +472,7 @@
             return false;
           }
 
-          if (viewOptions[i.type] && !viewOptions[i.type].selected) {
+          if (this.anyFilterSelected && viewOptions[i.type] && !viewOptions[i.type].selected) {
             return false;
           }
 

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

@@ -48,7 +48,7 @@
 
       div(
         v-for="category in categories",
-        v-if="!closed && viewOptions[category.identifier].selected",
+        v-if="!anyFilterSelected  || (!closed && viewOptions[category.identifier].selected)",
         :class="category.identifier"
       )
         h2.mb-3 {{ category.text }}
@@ -329,12 +329,15 @@
 
         normalGroups.map((category) => {
           this.$set(this.viewOptions, category.identifier, {
-            selected: true,
+            selected: false,
           });
         });
 
         return normalGroups;
       },
+      anyFilterSelected () {
+        return Object.values(this.viewOptions).some(g => g.selected);
+      },
     },
     methods: {
       travelersItems (category, sortBy, searchBy, hidePinned) {

website/client/components/ui/countBadge.vue

@@ -15,6 +15,7 @@ span.badge.badge-pill.badge-item.badge-count(
   min-width: 24px;
   height: 24px;
   box-shadow: 0 1px 1px 0 rgba($black, 0.12);
+  z-index: 1;
 }
 
 </style>