Refactor/market vue (#10601)

* extract inventoryDrawer from market * show scrollbar only if needed * extract featuredItemsHeader / pinUtils * extract pageLayout * extract layoutSection / filterDropdown - fix sortByNumber * rollback sortByNumber order-fix * move equipment lists out of the layout-section (for now) * refactor sellModal * extract checkbox * extract equipment section * extract category row * revert scroll - remove sellModal item template * fix(lint): commas and semis * Created category item component (#10613) * extract filter sidebar * fix gemCount - fix raising the item count if the item wasn't previously owned * fixes #10659 * remove unneeded method
2025-12-18 23:27:26 +01:00 · 2018-09-09 12:05:33 +02:00
parent a18e9b3b18
commit 92e4d5cd68
23 changed files with 1048 additions and 662 deletions
--- a/website/client/components/shops/featuredItemsHeader.vue
+++ b/website/client/components/shops/featuredItemsHeader.vue
@@ -0,0 +1,126 @@
+<template lang="pug">
+div.featuredItems
+  .background(:class="{broken: broken}")
+  .background(:class="{cracked: broken, broken: broken}")
+    div.npc
+      div.featured-label
+        span.rectangle
+        span.text {{npcName}}
+        span.rectangle
+    div.content
+      div.featured-label.with-border
+        span.rectangle
+        span.text {{ featuredText }}
+        span.rectangle
+
+      div.items.margin-center
+        shopItem(
+          v-for="item in featuredItems",
+          :key="item.key",
+          :item="item",
+          :price="item.value",
+          :itemContentClass="'shop_'+item.key",
+          :emptyItem="false",
+          :popoverPosition="'top'",
+          @click="featuredItemSelected(item)"
+        )
+          template(slot="itemBadge", slot-scope="ctx")
+            span.badge.badge-pill.badge-item.badge-svg(
+              :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}",
+              @click.prevent.stop="togglePinned(ctx.item)"
+            )
+              span.svg-icon.inline.icon-12.color(v-html="icons.pin")
+
+</template>
+
+<script>
+  import ShopItem from './shopItem';
+
+  import pinUtils from 'client/mixins/pinUtils';
+
+  import svgPin from 'assets/svg/pin.svg';
+
+  export default {
+    mixins: [pinUtils],
+    props: {
+      broken: Boolean,
+      npcName: String,
+      featuredText: String,
+      featuredItems: Array,
+    },
+    components: {
+      ShopItem,
+    },
+    data () {
+      return {
+        icons: Object.freeze({
+          pin: svgPin,
+        }),
+      };
+    },
+    methods: {
+      featuredItemSelected (item) {
+        this.$emit('featuredItemSelected', item);
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+.featuredItems {
+  height: 216px;
+
+  .background {
+    width: 100%;
+    height: 216px;
+    position: absolute;
+
+    top: 0;
+    left: 0;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    z-index: 1; // Always cover background.
+  }
+
+  .npc {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 216px;
+  }
+
+  .background.broken {
+    background: url('~assets/images/npc/broken/market_broken_background.png');
+    background-repeat: repeat-x;
+  }
+
+  .background.cracked {
+    background: url('~assets/images/npc/broken/market_broken_layer.png');
+    background-repeat: repeat-x;
+  }
+
+  .broken .npc {
+    background: url('~assets/images/npc/broken/market_broken_npc.png');
+    background-repeat: no-repeat;
+  }
+}
+
+  .featured-label {
+    margin: 24px auto;
+  }
+
+  @media only screen and (max-width: 768px) {
+    .featuredItems .content {
+      display: none !important;
+    }
+  }
+</style>