Mobile tweaks (#78)

pizza-to-the-polls · Dec 18, 2023 · 5ded037 · 5ded037
1 parent 633e499
commit 5ded037
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 9 deletions.
diff --git a/src/components/app-root/app-root.scss b/src/components/app-root/app-root.scss
@@ -105,7 +105,7 @@
   img {
     width: 30px;
     margin-right: 8px;
-    @media (min-width: 300px) {
+    @media (min-width: 370px) {
       width: 48px;
       margin-right: 16px;
     }
@@ -129,14 +129,18 @@
     }
     li {
       display: inline-block;
-      font-size: 12px;
+      font-size: 0.65rem;
       font-weight: 600;
       margin: 0 0.3rem;
       position: relative;
       color: $white;
       height: 1rem;
 
       @media (min-width: 300px) {
+        font-size: 0.9rem;
+        margin: 0 0.4rem;
+      }
+      @media (min-width: 370px) {
         font-size: 1rem;
         margin: 0 0.4rem;
       }

diff --git a/src/components/app-root/css/_base.scss b/src/components/app-root/css/_base.scss
@@ -12,6 +12,7 @@ html {
   text-rendering: optimizeLegibility;
   text-size-adjust: 100%;
   scroll-behavior: smooth;
+  min-width: 240px;
 }
 
 body {

diff --git a/src/components/page-home/page-home.scss b/src/components/page-home/page-home.scss
@@ -16,10 +16,15 @@ page-home {
       padding: 40px 0;
     }
 
-    .button + .button {
-      margin-left: 1rem;
-      @media (max-width: 300px) {
-        margin: 1rem 0 0;
+    .button {
+      & + .button {
+        margin-left: 1rem;
+      }
+      @media (max-width: 380px) {
+        & + .button {
+          margin: 1rem 0 0;
+        }
+        display: block;
       }
     }
 
@@ -99,6 +104,12 @@ page-home {
 
   .order-pizzas {
     background-color: $light-red;
+    label {
+      height: 4rem;
+      margin: -20px 0;
+      padding: 20px 0;
+      cursor: text;
+    }
     ui-location-search div {
       position: relative;
       input {

diff --git a/src/components/page-home/page-home.tsx b/src/components/page-home/page-home.tsx
@@ -55,9 +55,14 @@ export class PageHome {
           </div>
         </div>
         <section class="order-pizzas">
-          <div class="container">
-            <ui-location-search placeholder="Stuck in a long line? Search your location here" onLocationSelected={handleLocationSelected} />
-          </div>
+          <label htmlFor="autocomplete-input">
+            <div class="container">
+              <ui-location-search
+                placeholder={(window?.document?.body?.clientWidth || 0) < 400 ? "Stuck in line? Search here" : "Stuck in a long line? Search your location here"}
+                onLocationSelected={handleLocationSelected}
+              />
+            </div>
+          </label>
         </section>
         <section class="totals">{this.totals && <Stats totals={this.totals} />}</section>
         <section class="tweets-deliveries">

diff --git a/src/components/ui-single-input/ui-single-input.scss b/src/components/ui-single-input/ui-single-input.scss
@@ -24,4 +24,18 @@ ui-single-input {
     margin: 0;
     border-radius: 0 $radius $radius 0;
   }
+
+  @media (max-width: 400px) {
+    .submit-button,
+    .input-value {
+      float: none;
+      display: block;
+      border-radius: $radius;
+      margin: 0 auto;
+    }
+    .input-value {
+      width: 100%;
+      margin-bottom: 0.5rem;
+    }
+  }
 }