[WIP] New Client - Shops/Market (#8884)

* initial market - routing - store - load market data

* move drawer/drawerSlider / count/star badge to components/ui

* filter market categories

* shopItem with gem / gold

* show count of purchable items

* show count of purchable itemsshow drawer with currently owned items + DrawerHeaderTabs-Component

* show featured gear

* show Gear - filter by class - sort by (type, price, stats) - sort market items

* Component: ItemRows - shows only the max items in one row (depending on the available width)

* Sell Dialog + Balance Component

* generic buy-dialog / attributes grid with highlight

* buyItem - hide already owned gear

* filter: hide locked/pinned - lock items if not enough gold

* API: Sell multiple items

* show avatar in buy-equipment-dialog with changed gear

* market banner

* misc fixes

* filter by text

* pin/unpin gear store actions

* Sell API: amount as query-parameter

* Update user.js

* fixes

* fix sell api amount test

* add back stroke/fill currentColor

* use scss variables

website/client/components/ui/itemRows.vue

@@ -0,0 +1,71 @@
+<template lang="pug">
+  .item-rows
+    div.items(v-resize="500", @resized="currentWidth = $event.width")
+      template(v-for="item in itemsToShow(showAll)")
+        slot(
+          name="item",
+          :item="item",
+        )
+
+    .btn.btn-show-more(
+      @click="showAll = !showAll",
+      v-if="items.length > itemsPerRow()"
+    ) {{ showAll ? showLessLabel : showAllLabel }}
+
+</template>
+
+<script>
+  import ResizeDirective from 'client/directives/resize.directive';
+
+  import _take from 'lodash/take';
+  import _drop from 'lodash/drop';
+
+  export default {
+    directives: {
+      resize: ResizeDirective,
+    },
+    data () {
+      return {
+        currentWidth: 0,
+        currentPage: 0,
+
+        showAll: false,
+      };
+    },
+    methods: {
+      itemsToShow (showAll) {
+        let itemsPerRow = this.itemsPerRow();
+        let rowsToShow = showAll ? Math.ceil(this.items.length / itemsPerRow) : 1;
+        let result = [];
+
+        for (let i = 0; i < rowsToShow; i++) {
+          let skipped = _drop(this.items, i * itemsPerRow);
+          let row = _take(skipped, itemsPerRow);
+          result = result.concat(row);
+        }
+
+        return result;
+      },
+      itemsPerRow () {
+        return Math.floor(this.currentWidth / (this.itemWidth + this.itemMargin));
+      },
+    },
+    props: {
+      items: {
+        type: Array,
+      },
+      itemWidth: {
+        type: Number,
+      },
+      itemMargin: {
+        type: Number,
+      },
+      showAllLabel: {
+        type: String,
+      },
+      showLessLabel: {
+        type: String,
+      },
+    },
+  };
+</script>