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

website/client/components/ui/checkbox.vue

@@ -0,0 +1,26 @@
+<template lang="pug">
+  .form-check
+    .custom-control.custom-checkbox
+      input.custom-control-input(type="checkbox", v-model="isChecked", :id="id")
+      label.custom-control-label(v-once, :for="id") {{ text }}
+</template>
+
+<script>
+  export default {
+    props: {
+      checked: Boolean,
+      id: String,
+      text: String,
+    },
+    data () {
+      return {
+        isChecked: this.checked,
+      };
+    },
+    watch: {
+      isChecked (after) {
+        this.$emit('update:checked', after);
+      },
+    },
+  };
+</script>

website/client/components/ui/countBadge.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 span.badge.badge-pill.badge-item.badge-count(
-  v-if="show && count != 0",
+  v-if="show && count > 0",
 ) {{ count }}
 </template>
 

website/client/components/ui/filterDropdown.vue

@@ -0,0 +1,45 @@
+<template lang="pug">
+span
+  span.dropdown-label {{ label }}
+  b-dropdown(right=true)
+    span(slot="text", :class="{'dropdown-icon-item': withIcon}")
+      slot(name="item", :item="selectedItem")
+
+    b-dropdown-item(
+      v-for="item in items",
+      @click="selectItem(item)",
+      :active="selectedItem.id === item.id",
+      :key="item.id"
+    )
+      span(:class="{'dropdown-icon-item': withIcon}")
+        slot(name="item", :item="item")
+</template>
+
+<script>
+    export default {
+      props: {
+        label: String,
+        items: Array,
+        initialItem: Object,
+        withIcon: {
+          type: Boolean,
+          default: false,
+        },
+      },
+      data () {
+        return {
+          selectedItem: this.initialItem,
+        };
+      },
+      methods: {
+        selectItem (item) {
+          this.selectedItem = item;
+          this.$emit('selected', item);
+        },
+      },
+    };
+</script>
+
+<style scoped lang="scss">
+
+</style>

website/client/components/ui/layoutSection.vue

@@ -0,0 +1,33 @@
+<template lang="pug">
+div
+  .clearfix
+    h2.float-left.mb-3.filters-title {{ title }}
+
+    .filters.float-right
+      slot(name="filters")
+
+  br
+
+  slot(name="content")
+
+</template>
+
+<script>
+    export default {
+      props: {
+        title: String,
+      },
+    };
+</script>
+
+<style scoped lang="scss">
+ @media only screen and (max-width: 768px) {
+    .filters, .filters-title {
+      float: none;
+      button {
+        margin-right: 4em;
+        margin-bottom: 1em;
+      }
+    }
+  }
+</style>

website/client/components/ui/pageLayout.vue

@@ -0,0 +1,25 @@
+<template lang="pug">
+.row
+  .standard-sidebar.d-none.d-sm-block(v-if="showSidebar")
+    slot(name="sidebar")
+  .standard-page
+    slot(name="page")
+</template>
+
+<script>
+    export default {
+      props: {
+        showSidebar: {
+          type: Boolean,
+          default: true,
+        },
+      },
+    };
+</script>
+
+<style scoped lang="scss">
+
+    .standard-page {
+      position: relative;
+    }
+</style>