From 50b1d161718d282c524ed7adf4252f179350ce69 Mon Sep 17 00:00:00 2001
From: David Ralph <me@davidjcralph.co.uk>
Date: Wed, 18 Aug 2021 23:13:26 +0100
Subject: [PATCH] fix: responsive marketplace items (WIP)

---
 .../main/marketplace/sections/Marketplace.jsx | 31 ++++++++++---------
 .../modals/main/scss/marketplace/_main.scss   | 14 +++------
 2 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/src/components/modals/main/marketplace/sections/Marketplace.jsx b/src/components/modals/main/marketplace/sections/Marketplace.jsx
index 9bfb5f42..cc9e0f07 100644
--- a/src/components/modals/main/marketplace/sections/Marketplace.jsx
+++ b/src/components/modals/main/marketplace/sections/Marketplace.jsx
@@ -159,20 +159,6 @@ export default class Marketplace extends PureComponent {
       );
     };
 
-    const featured = () => {
-      const openFeatured = () => {
-        window.stats.postEvent('marketplace', 'Featured clicked');
-        window.open(this.state.featured.buttonLink);
-      }
-      return (
-        <div className='featured' style={{ backgroundColor: this.state.featured.colour }}>
-          <p>{this.state.featured.title}</p>
-          <h1>{this.state.featured.name}</h1>
-          <button className='addToMue' onClick={() => openFeatured()}>{this.state.featured.buttonText}</button>
-        </div>
-      );
-    }
-
     if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
       return errorMessage(<>
         <WifiOff/>
@@ -185,6 +171,21 @@ export default class Marketplace extends PureComponent {
       return errorMessage(<h1>{window.language.modals.main.loading}</h1>);
     }
 
+    const featured = () => {
+      const openFeatured = () => {
+        window.stats.postEvent('marketplace', 'Featured clicked');
+        window.open(this.state.featured.buttonLink);
+      }
+
+      return (
+        <div className='featured' style={{ backgroundColor: this.state.featured.colour }}>
+          <p>{this.state.featured.title}</p>
+          <h1>{this.state.featured.name}</h1>
+          <button className='addToMue' onClick={() => openFeatured()}>{this.state.featured.buttonText}</button>
+        </div>
+      );
+    }
+
     if (this.state.items.length === 0) {
       return (
         <>
@@ -195,7 +196,7 @@ export default class Marketplace extends PureComponent {
             <p className='description'>{this.language.no_items}</p>
           </>)}
         </>
-      )
+      );
     }
 
     if (this.state.item.display_name) {
diff --git a/src/components/modals/main/scss/marketplace/_main.scss b/src/components/modals/main/scss/marketplace/_main.scss
index 4ba9dc7d..a431d6a0 100644
--- a/src/components/modals/main/scss/marketplace/_main.scss
+++ b/src/components/modals/main/scss/marketplace/_main.scss
@@ -16,7 +16,7 @@
 
 .items {
   display: inline-grid;
-  grid-template-columns: repeat(6, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   margin-top: 15px;
 
   .item {
@@ -71,21 +71,15 @@
   }
 }
 
-@media only screen and (max-width: 2100px) {
-  .items {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-@media only screen and (max-width: 1870px) {
+@media (max-width: 1680px) and (min-width: 1500px) {
   .items {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 
-@media only screen and (min-width: 1079px), (max-width: 1869px) {
+@media (max-width: 1440px) {
   .items {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(1, 1fr);
   }
 }