From 18d5f263268431590874e695b197007a7220ba62 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Sat, 26 Nov 2022 11:06:57 +1100
Subject: [PATCH 1/2] mobile styles

---
 client/src/app.tsx           |  2 +-
 client/src/routes/login.tsx  |  5 ++-
 client/src/routes/search.tsx |  1 -
 client/src/style/index.less  | 61 +++++++++++++++++++++++++++++++++---
 client/src/template.html     | 14 +++++++++
 5 files changed, 73 insertions(+), 10 deletions(-)
 create mode 100644 client/src/template.html

diff --git a/client/src/app.tsx b/client/src/app.tsx
index 7dbc6c5..a81e3d5 100644
--- a/client/src/app.tsx
+++ b/client/src/app.tsx
@@ -19,7 +19,7 @@ import Info from './routes/info';
 if (window.location.host === 'matescrates.au') LogRocket.init('yh0dy3/mcrates');
 
 const Main = () => {
-    const dispatch = useDispatch()
+    const dispatch = useDispatch();
 
     // i have no idea why this is needed,
     // but it makes sure the user changes actually rerender
diff --git a/client/src/routes/login.tsx b/client/src/routes/login.tsx
index f712487..0dca412 100644
--- a/client/src/routes/login.tsx
+++ b/client/src/routes/login.tsx
@@ -97,9 +97,8 @@ function LoginPage({ mode }) {
     return (
         <div class="landing">
             <Login mode={mode} />
-            <div></div>
-            <div class='text'>
-                <Swirl />
+            <Swirl />
+            <div class='words'>
                 <p>Mates Crates is a record importing service.</p>
                 <p>We bundle orders together from thousands of online stores to reduce the cost of shipping vinyl.</p>
                 <p>Based in Preston.</p>
diff --git a/client/src/routes/search.tsx b/client/src/routes/search.tsx
index 0b6faaa..b50de6a 100644
--- a/client/src/routes/search.tsx
+++ b/client/src/routes/search.tsx
@@ -104,7 +104,6 @@ const User = () => {
                 <hr />
                 <p>Data provided by Discogs.</p>
             </div>
-            <div />
             <div>
                 {infoEl}
                 {results.map(Result)}
diff --git a/client/src/style/index.less b/client/src/style/index.less
index 4c4cccb..a216423 100644
--- a/client/src/style/index.less
+++ b/client/src/style/index.less
@@ -212,19 +212,27 @@ button, [type=submit] {
 
 .landing {
     display: grid;
-    grid-template-columns: 1fr 0.5fr 2fr;
+
+    grid-template-columns: 1fr 2fr;
+    grid-gap: calc(var(--spacing-double) * 2);
+    grid-template-areas:
+        "login swirl"
+        "login words";
 
     .login {
+        grid-area: login;
         button {
             width: 100%;
         }
     }
 
     .swirl {
+        grid-area: swirl;
         height: 15rem;
     }
 
-    .text {
+    .words {
+        grid-area: words;
         text-align: center;
     }
 }
@@ -274,13 +282,14 @@ article {
 
 .search {
     display: grid;
-    grid-template-columns: 1fr 0.5fr 2fr;
+    grid-template-columns: 1fr 2fr;
+    grid-gap: calc(var(--spacing-double) * 2);
 
     article {
         display: grid;
         padding: var(--spacing);
         margin-bottom: var(--spacing);
-        grid-template-columns: 1fr 4fr 1fr;
+        grid-template-columns: 1fr 4fr min-content;
     }
 
     button {
@@ -324,6 +333,10 @@ article {
         }
 
         padding: var(--spacing);
+
+        img {
+            justify-self: end;
+        }
     }
 }
 
@@ -482,4 +495,42 @@ header {
     background-position: center;
 
     margin-bottom: var(--spacing);
-}
\ No newline at end of file
+}
+
+@media (max-width:900px)  {
+    .landing {
+        grid-template-columns: 1fr;
+        grid-template-areas:
+            "swirl"
+            "login"
+            "words";
+    }
+
+    .list {
+        grid-template-columns: 1fr;
+    }
+
+    .search {
+        grid-template-columns: 1fr;
+    }
+
+    .offers {
+        grid-template-columns: 1fr;
+    }
+
+    .info {
+        grid-template-columns: 1fr;
+        // is necessary for some reason
+        grid-template-areas:
+            "swirl"
+            "contact"
+            "words";
+    }
+}
+
+@media (max-width:1200px) {
+    img {
+        width: 5rem;
+    }
+}
+
diff --git a/client/src/template.html b/client/src/template.html
new file mode 100644
index 0000000..ce1e78f
--- /dev/null
+++ b/client/src/template.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>matescrates.au - record import service</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <% preact.headEnd %>
+  </head>
+  <body>
+    <% preact.bodyEnd %>
+  </body>
+</html>
\ No newline at end of file

From f726c960cdb2afaf59ee0f398cb11bb46c7b7572 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Sat, 26 Nov 2022 13:11:29 +1100
Subject: [PATCH 2/2] style changes and offer loading routing

---
 client/src/routes/offers.tsx |  2 ++
 client/src/routes/search.tsx |  2 +-
 client/src/store.tsx         |  2 +-
 client/src/style/index.less  | 25 ++++++++++++++++---------
 4 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/client/src/routes/offers.tsx b/client/src/routes/offers.tsx
index d1ac1ae..98fd108 100644
--- a/client/src/routes/offers.tsx
+++ b/client/src/routes/offers.tsx
@@ -16,6 +16,8 @@ function Home() {
         route('/search');
     }
 
+    if (!offers) return <div>loading...</div>;
+
     return (
         <div class={'offers'}>
             {offers.map(OfferGroup)}
diff --git a/client/src/routes/search.tsx b/client/src/routes/search.tsx
index b50de6a..2394b89 100644
--- a/client/src/routes/search.tsx
+++ b/client/src/routes/search.tsx
@@ -104,7 +104,7 @@ const User = () => {
                 <hr />
                 <p>Data provided by Discogs.</p>
             </div>
-            <div>
+            <div class='results'>
                 {infoEl}
                 {results.map(Result)}
                 {topEl}
diff --git a/client/src/store.tsx b/client/src/store.tsx
index a25dd5d..053f377 100644
--- a/client/src/store.tsx
+++ b/client/src/store.tsx
@@ -11,7 +11,7 @@ export const userState = createSlice({
 
 export const offersState = createSlice({
   name: 'offers',
-  initialState: [],
+  initialState: null,
   reducers: {
     set: (state, action) => action.payload
   },
diff --git a/client/src/style/index.less b/client/src/style/index.less
index a216423..33e679b 100644
--- a/client/src/style/index.less
+++ b/client/src/style/index.less
@@ -201,7 +201,7 @@ body {
 }
 
 main {
-    padding: 0 5% 0 5%;
+    padding: 0 var(--spacing-double) 0 var(--spacing-double);
 }
 
 button, [type=submit] {
@@ -283,13 +283,17 @@ article {
 .search {
     display: grid;
     grid-template-columns: 1fr 2fr;
-    grid-gap: calc(var(--spacing-double) * 2);
 
-    article {
+    .results {
         display: grid;
-        padding: var(--spacing);
-        margin-bottom: var(--spacing);
-        grid-template-columns: 1fr 4fr min-content;
+        padding-left: var(--spacing);
+        grid-gap: var(--spacing);
+
+        article {
+            display: grid;
+            padding: var(--spacing);
+            grid-template-columns: 1fr 4fr min-content;
+        }
     }
 
     button {
@@ -309,8 +313,7 @@ article {
     grid-template-columns:
         1fr 1fr 1fr;
 
-    grid-row-gap: var(--spacing);
-    grid-column-gap: var(--spacing);
+    grid-gap: var(--spacing);
 
     article {
         display: grid;
@@ -425,6 +428,7 @@ header {
 .offers {
     display: grid;
     grid-template-columns: 1fr 1fr;
+    grid-gap: var(--spacing);
 
     .offer {
         display: grid;
@@ -435,7 +439,6 @@ header {
             "lines lines";
 
         padding: var(--spacing);
-        margin: var(--spacing-half);
         background: var(--background-1);
 
         .details {
@@ -526,6 +529,10 @@ header {
             "contact"
             "words";
     }
+
+    main {
+        padding: 0 var(--spacing) 0 var(--spacing);
+    }
 }
 
 @media (max-width:1200px) {