Responsive Layout for Equipment Containers

- Added responsive CSS for mobile (<768px) and tablet (769px-1024px)
- Implemented flex-wrap layout that automatically stacks items in rows of 4 on smaller

test/api/unit/middlewares/blocker.test.js

@@ -117,6 +117,15 @@ describe('Blocker middleware', () => {
 
       checkIPBlockedErrorThrown(next);
     });
+
+    it('throws when the ip is blocked', () => {
+      req.ip = '192.168.1.1';
+      sandbox.stub(nconf, 'get').withArgs('BLOCKED_IPS').returns('192.168.1.1');
+      const attachBlocker = requireAgain(pathToBlocker).default;
+      attachBlocker(req, res, next);
+
+      checkIPBlockedErrorThrown(next);
+    });
   });
 
   describe('Blocking clients', () => {

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

@@ -120,6 +120,7 @@
         <div
           slot="drawer-slider"
           class="equipment items items-one-line"
+          :class="getContainerClass()"
         >
           <item
             v-for="(label, group) in gearTypesToStrings"
@@ -238,6 +239,86 @@
   background: $gray-10 !important;
 }
 
+@media (max-width: 768px) {
+  .equipment.items.items-one-line {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 12px;
+    padding: 0 8px;
+
+    .item-wrapper {
+      flex: 0 0 auto;
+      margin-right: 0;
+      margin-bottom: 8px;
+    }
+
+    &.equipment-scale-default .item-wrapper {
+      .item {
+        width: 94px;
+        height: 92px;
+      }
+      .item-label {
+        width: 94px;
+        font-size: 12px;
+      }
+    }
+
+    &.equipment-scale-small .item-wrapper {
+      .item {
+        width: 70px;
+        height: 70px;
+      }
+      .item-label {
+        width: 70px;
+        font-size: 10px;
+      }
+    }
+
+    .item-wrapper:nth-child(4n+1) {
+      clear: left;
+    }
+  }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .equipment.items.items-one-line {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 12px;
+    padding: 0 12px;
+
+    .item-wrapper {
+      flex: 0 0 auto;
+      margin-right: 0;
+      margin-bottom: 8px;
+    }
+
+    &.equipment-scale-default .item-wrapper {
+      .item {
+        width: 84px;
+        height: 82px;
+      }
+      .item-label {
+        width: 84px;
+        font-size: 11px;
+      }
+    }
+
+    &.equipment-scale-small .item-wrapper {
+      .item {
+        width: 65px;
+        height: 65px;
+      }
+      .item-label {
+        width: 65px;
+        font-size: 10px;
+      }
+    }
+  }
+}
+
 </style>
 
 <style lang="scss" scoped>
@@ -351,6 +432,7 @@ export default {
       searchText: null,
       searchTextThrottled: null,
       costumeMode: false,
+      windowWidth: window.innerWidth,
       groupByItems: [
         'type', 'class',
       ],
@@ -523,8 +605,27 @@ export default {
       subSection: this.$t('equipment'),
       section: this.$t('inventory'),
     });
+
+    this.handleResize = throttle(() => {
+      this.windowWidth = window.innerWidth;
+    }, 250);
+    window.addEventListener('resize', this.handleResize);
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', this.handleResize);
   },
   methods: {
+    getContainerClass () {
+      const equippedCount = Object.keys(this.gearTypesToStrings).filter(group => {
+        const item = this.flatGear[this.activeItems[group]];
+        return item && item.key.indexOf('_base_0') === -1;
+      }).length;
+
+      if (this.windowWidth <= 1024) {
+        return equippedCount > 4 ? 'equipment-scale-small' : 'equipment-scale-default';
+      }
+      return '';
+    },
     selectDrawerTab (tabName) {
       let tabNameValue;
       if (tabName === 'costume') {

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

@@ -111,7 +111,7 @@
   .toggle-switch-inner:before {
     content: "";
     padding-left: 10px;
-    background-color: $green-50;
+    background-color: $purple-300;
   }
 
   .toggle-switch-inner:after {

website/server/controllers/api-v4/admin.js

@@ -187,5 +187,4 @@ api.deleteBlocker = {
     res.respond(200, savedBlocker);
   },
 };
-
 export default api;

website/server/middlewares/blocker.js

@@ -1,3 +1,4 @@
+import nconf from 'nconf';
 import {
   Forbidden,
 } from '../libs/errors';
@@ -9,7 +10,19 @@ import { model as Blocker } from '../models/blocker';
 // NOTE: it's meant to be used behind a proxy (for example a load balancer)
 // that uses the 'x-forwarded-for' header to forward the original IP addresses.
 
-const blockedIps = [];
+// A list of comma separated IPs to block
+// It works fine as long as the list is short,
+// if the list becomes too long for an env variable we'll switch to Redis.
+const BLOCKED_IPS_RAW = nconf.get('BLOCKED_IPS');
+
+const blockedIps = BLOCKED_IPS_RAW
+  ? BLOCKED_IPS_RAW
+    .trim()
+    .split(',')
+    .map(blockedIp => blockedIp.trim())
+    .filter(blockedIp => Boolean(blockedIp))
+  : [];
+
 const blockedClients = [];
 
 Blocker.watchBlockers({