fix(shops): lots of layout corrections

website/client/src/assets/scss/shops.scss

@@ -0,0 +1,90 @@
+.featured-label {
+  margin: 24px auto;
+}
+
+.group {
+  display: inline-block;
+  width: 33%;
+  margin-bottom: 24px;
+
+  .items {
+    border-radius: 2px;
+    background-color: #edecee;
+    display: inline-block;
+    padding: 8px;
+  }
+
+  .item-wrapper {
+    margin-bottom: 0;
+  }
+
+  .items > div:not(:last-of-type) {
+    margin-right: 16px;
+  }
+}
+
+.timeTravelers {
+  .standard-page {
+    position: relative;
+  }
+
+  .badge-pin:not(.pinned) {
+      display: none;
+    }
+
+  .item:hover .badge-pin {
+    display: block;
+  }
+
+  .avatar {
+    cursor: default;
+    margin: 0 auto;
+  }
+
+  .featuredItems {
+    height: 216px;
+
+    .background {
+      background-repeat: repeat-x;
+
+      width: 100%;
+      position: absolute;
+
+      top: 0;
+      left: 0;
+
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+    .background-open, .background-closed {
+      height: 216px;
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .npc {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 216px;
+      background-repeat: no-repeat;
+
+      &.closed {
+        background-repeat: no-repeat;
+      }
+
+      .featured-label {
+        position: absolute;
+        bottom: -14px;
+        margin: 0;
+        left: 78px;
+      }
+    }
+  }
+}

website/client/src/assets/scss/typography.scss

@@ -60,9 +60,8 @@ h1 {
 
 h2 {
   font-size: 20px;
-  line-height: 28px;
+  line-height: 1.4;
   margin-bottom: 16px;
-  color: $purple-300;
 }
 
 h3, h4 {

website/client/src/components/avatarModal/customize-options.vue

@@ -200,7 +200,7 @@ export default {
           margin-top: -5px;
         }
       }
-      &.color, &.bangs, &.beard, &.flower {
+      &.color, &.bangs, &.beard, &.flower, &.mustache {
         background-position-x: -6px;
         background-position-y: -12px;
       }

website/client/src/components/creatorIntro.vue

@@ -573,10 +573,14 @@
   }
 
   #avatar-modal {
+    h2 {
+      color: $purple-300;
+    }
+
     .avatar {
       cursor: auto;
 
-      &:not(.new-user) {
+      &:not(.new-user)[class*=background] {
         box-shadow: 0px 1px 3px 0px rgba(26, 24, 29, 0.12), 0px 1px 2px 0px rgba(26, 24, 29, 0.24);
       }
 

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

@@ -444,7 +444,7 @@ export default {
             const isSearched = !searchText || item.text()
               .toLowerCase()
               .indexOf(searchText) !== -1;
-            if (isSearched) {
+            if (isSearched && item) {
               itemsArray.push({
                 ...item,
                 class: `${group.classPrefix}${item.key}`,

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

@@ -33,6 +33,12 @@
           class="npc"
           :style="{'background-image': imageURLs.npc}"
         >
+          <div class="featured-label">
+            <span class="rectangle"></span><span
+              v-once
+              class="text"
+            >{{ $t('customizationsNPC') }}</span><span class="rectangle"></span>
+          </div>
         </div>
       </div>
       <div class="p-4">
@@ -81,6 +87,7 @@
 
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
+  @import '~@/assets/scss/shops.scss';
 
   h1 {
     color: $purple-200;
@@ -90,6 +97,11 @@
     height: 216px;
   }
 
+  .featured-label {
+    margin-left: 52px;
+    margin-top: 200px;
+  }
+
   .npc {
     background-repeat: no-repeat;
   }
@@ -131,16 +143,9 @@ export default {
       return Object.values(this.viewOptions).some(g => g.selected);
     },
     imageURLs () {
-      const currentEvent = this.currentEventList?.find(event => Boolean(event.season));
-      if (!currentEvent) {
-        return {
-          background: 'url(/static/npc/normal/market_background.png)',
-          npc: 'url(/static/npc/normal/market_banner_npc.png)',
-        };
-      }
       return {
-        background: `url(/static/npc/${currentEvent.season}/market_background.png)`,
-        npc: `url(/static/npc/${currentEvent.season}/market_banner_npc.png)`,
+        background: 'url(/static/npc/normal/customizations_background.png)',
+        npc: 'url(/static/npc/normal/customizations_npc.png)',
       };
     },
     shop () {

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

@@ -400,6 +400,10 @@ export default {
       featuredGearBought: false,
       currentEvent: null,
       backgroundUpdate: new Date(),
+      imageURLs: {
+        background: '',
+        npc: '',
+      },
     };
   },
   computed: {
@@ -470,29 +474,16 @@ export default {
       }
       return [];
     },
-
     anyFilterSelected () {
       return Object.values(this.viewOptions).some(g => g.selected);
     },
-    imageURLs () {
-      if (!this.seasonal.opened || !this.currentEvent || !this.currentEvent.season) {
-        return {
-          background: 'url(/static/npc/normal/seasonal_shop_closed_background.png)',
-          npc: 'url(/static/npc/normal/seasonal_shop_closed_npc.png)',
-        };
-      }
-      return {
-        background: `url(/static/npc/${this.currentEvent.season}/seasonal_shop_opened_background.png)`,
-        npc: `url(/static/npc/${this.currentEvent.season}/seasonal_shop_opened_npc.png)`,
-      };
-    },
   },
   watch: {
     searchText: _throttle(function throttleSearch () {
       this.searchTextThrottled = this.searchText.toLowerCase();
     }, 250),
   },
-  mounted () {
+  async mounted () {
     this.$store.dispatch('common:setTitle', {
       subSection: this.$t('seasonalShop'),
       section: this.$t('shops'),
@@ -502,8 +493,10 @@ export default {
       this.backgroundUpdate = new Date();
     });
 
-    this.triggerGetWorldState();
+    await this.triggerGetWorldState();
     this.currentEvent = _find(this.currentEventList, event => Boolean(['winter', 'spring', 'summer', 'fall'].includes(event.season)));
+    this.imageURLs.background = `url(/static/npc/${this.currentEvent.season}/seasonal_shop_opened_background.png)`;
+    this.imageURLs.npc = `url(/static/npc/${this.currentEvent.season}/seasonal_shop_opened_npc.png)`;
   },
   beforeDestroy () {
     this.$root.$off('buyModal::boughtItem');

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

@@ -99,6 +99,8 @@
           :item-margin="24"
           :type="category.identifier"
           :fold-button="false"
+          :no-items-label="$t('allEquipmentOwned')"
+          :click-handler="false"
         >
           <template
             slot="item"
@@ -163,105 +165,10 @@
   </div>
 </template>
 
-<!-- eslint-disable max-len -->
-<style lang="scss">
+<style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
-
-  // these styles may be applied to other pages too
-
-  .featured-label {
-    margin: 24px auto;
-  }
-
-  .group {
-    display: inline-block;
-    width: 33%;
-    margin-bottom: 24px;
-
-    .items {
-      border-radius: 2px;
-      background-color: #edecee;
-      display: inline-block;
-      padding: 8px;
-    }
-
-    .item-wrapper {
-      margin-bottom: 0;
-    }
-
-    .items > div:not(:last-of-type) {
-      margin-right: 16px;
-    }
-  }
-
-  .timeTravelers {
-    .standard-page {
-      position: relative;
-    }
-
-    .badge-pin:not(.pinned) {
-        display: none;
-      }
-
-    .item:hover .badge-pin {
-      display: block;
-    }
-
-    .avatar {
-      cursor: default;
-      margin: 0 auto;
-    }
-
-    .featuredItems {
-      height: 216px;
-
-      .background {
-        background-repeat: repeat-x;
-
-        width: 100%;
-        position: absolute;
-
-        top: 0;
-        left: 0;
-
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-      }
-      .background-open, .background-closed {
-        height: 216px;
-      }
-
-      .content {
-        display: flex;
-        flex-direction: column;
-      }
-
-      .npc {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 216px;
-        background-repeat: no-repeat;
-
-        &.closed {
-          background-repeat: no-repeat;
-        }
-
-        .featured-label {
-          position: absolute;
-          bottom: -14px;
-          margin: 0;
-          left: 78px;
-        }
-      }
-    }
-
-  }
+  @import '~@/assets/scss/shops.scss';
 </style>
-<!-- eslint-enable max-len -->
 
 <script>
 import _filter from 'lodash/filter';
@@ -328,6 +235,11 @@ export default {
       backgroundUpdate: new Date(),
 
       currentEvent: null,
+
+      imageURLs: {
+        background: '',
+        npc: '',
+      },
     };
   },
   computed: {
@@ -388,19 +300,6 @@ export default {
     anyFilterSelected () {
       return Object.values(this.viewOptions).some(g => g.selected);
     },
-    imageURLs () {
-      if (!this.currentEvent || !this.currentEvent.season || this.currentEvent.season === 'thanksgiving') {
-        return {
-          background: 'url(/static/npc/normal/time_travelers_background.png)',
-          npc: this.closed ? 'url(/static/npc/normal/time_travelers_closed_banner.png)'
-            : 'url(/static/npc/normal/time_travelers_open_banner.png)',
-        };
-      }
-      return {
-        background: `url(/static/npc/${this.currentEvent.season}/time_travelers_background.png)`,
-        npc: `url(/static/npc/${this.currentEvent.season}/time_travelers_open_banner.png)`,
-      };
-    },
   },
   watch: {
     searchText: _throttle(function throttleSearch () {
@@ -421,6 +320,14 @@ export default {
       }
     });
     this.currentEvent = _find(this.currentEventList, event => Boolean(['winter', 'spring', 'summer', 'fall'].includes(event.season)));
+    if (!this.currentEvent || !this.currentEvent.season || this.currentEvent.season === 'thanksgiving' || this.closed) {
+      this.imageURLs.background = 'url(/static/npc/normal/time_travelers_background.png)';
+      this.imageURLs.npc = this.closed ? 'url(/static/npc/normal/time_travelers_closed_banner.png)'
+        : 'url(/static/npc/normal/time_travelers_open_banner.png)';
+    } else {
+      this.imageURLs.background = `url(/static/npc/${this.currentEvent.season}/time_travelers_background.png)`;
+      this.imageURLs.npc = `url(/static/npc/${this.currentEvent.season}/time_travelers_open_banner.png)`;
+    }
   },
   beforeDestroy () {
     this.$root.$off('buyModal::boughtItem');

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

@@ -14,11 +14,18 @@
     </div>
     <div v-if="items.length === 0">
       <p
+        v-if="clickHandler"
         class="empty-state"
         @click.stop.prevent="$emit('emptyClick', $event)"
         v-html="noItemsLabel"
       >
       </p>
+      <p
+        v-else
+        class="empty-state"
+        v-html="noItemsLabel"
+      >
+      </p>
     </div>
     <show-more-button
       v-if="foldButton && items.length > itemsPerRow"
@@ -57,27 +64,31 @@ export default {
   },
   mixins: [openedItemRowsMixin],
   props: {
-    items: {
-      type: Array,
+    clickHandler: {
+      type: Boolean,
+      default: true,
     },
-    type: {
-      type: String,
+    foldButton: {
+      type: Boolean,
+      default: true,
+    },
+    itemMargin: {
+      type: Number,
     },
     itemWidth: {
       type: Number,
     },
-    itemMargin: {
+    items: {
+      type: Array,
+    },
+    maxItemsPerRow: {
       type: Number,
     },
     noItemsLabel: {
       type: String,
     },
-    maxItemsPerRow: {
-      type: Number,
-    },
-    foldButton: {
-      type: Boolean,
-      default: true,
+    type: {
+      type: String,
     },
   },
   data () {

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

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="btn btn-flat btn-show-more mt-2"
+    class="btn btn-flat btn-show-more mt-2 mb-3"
     @click="$emit('click')"
   >
     <span class="button-text">

website/common/locales/en/customizations.json

@@ -135,5 +135,7 @@
   "checkNextSeason": "Be sure to check back later for next season's options!",
   "noItemsOwned": "You don't own any of these items",
   "visitCustomizationsShop": "Head over to the <a href='/shops/customizations'>Customizations Shop</a> to browse the many ways you can customize your avatar!",
-  "lookingForMore": "Looking for more?"
+  "lookingForMore": "Looking for more?",
+  "allEquipmentOwned": "You own all of these items. You can find them in your <a href='/inventory/equipment'>Equipment</a>. Be sure to check back later for next month's options!",
+  "customizationsNPC": "Felicitus Fennec"
 }

website/common/script/libs/shops.js

@@ -364,7 +364,9 @@ shops.getTimeTravelersCategories = function getTimeTravelersCategories (user, la
       backgroundCategory.items.push(item);
     }
   }
-  categories.push(backgroundCategory);
+  if (backgroundCategory.length > 0) {
+    categories.push(backgroundCategory);
+  }
 
   for (const type of Object.keys(stable)) {
     const category = {