Mobile tweaks

pizza-to-the-polls · Dec 15, 2023 · 6feab79 · 6feab79
1 parent 2aa1240
commit 6feab79
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 60 deletions.
diff --git a/src/components/app-root/app-root.scss b/src/components/app-root/app-root.scss
@@ -64,18 +64,15 @@
   background-size: 200px;
   top: 0;
   z-index: 1000;
-  padding: 10px 8px;
+  padding: 10px 0;
   text-align: center;
   box-shadow: $box-shadow;
 
   height: 120px;
-  min-width: 400px;
 
   @media ($tablet) {
     border-bottom: none;
     position: relative;
-    padding-left: 0;
-    padding-right: 0;
     box-shadow: none;
   }
 
@@ -107,7 +104,7 @@
   .menu {
     list-style-type: none;
     margin: 0;
-    padding: 10px 0 10px 0;
+    padding: 10px 0;
     font-weight: 600;
     z-index: 1000;
     text-align: center;
@@ -123,21 +120,18 @@
       display: inline-block;
       font-size: 14px;
       font-weight: 600;
-      margin: 0 0.5rem 0 0.45rem;
+      margin: 0 0.5rem;
       position: relative;
       color: $white;
 
-      @media (min-width: 360px) {
-        font-size: 15px;
-      }
-
       @media (min-width: 400px) {
-        font-size: 16px;
+        font-size: 14px;
+        margin: 0 0.3rem;
       }
 
       @media (min-width: 900px) {
         width: auto;
-        padding: 0 0.75rem 0 0.5rem;
+        padding: 0 0.75rem;
         font-size: 20px;
       }
 

diff --git a/src/components/app-root/css/_base.scss b/src/components/app-root/css/_base.scss
@@ -7,7 +7,7 @@ html {
   font-size: 16px;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  min-width: 400px;
+  min-width: 300px;
   overflow-x: hidden;
   overflow-y: scroll;
   text-rendering: optimizeLegibility;

diff --git a/src/components/page-home/page-home.scss b/src/components/page-home/page-home.scss
@@ -82,7 +82,8 @@ page-home {
 
   .order-pizzas {
     background-color: $light-red;
-    ui-location-search {
+    ui-location-search div {
+      position: relative;
       input {
         border: none;
         background-color: $light-red;
@@ -94,6 +95,9 @@ page-home {
           height: 1rem;
           font-size: 0.9rem;
         }
+        @media (max-width: 400px) {
+          font-size: 0.8rem;
+        }
 
         font-weight: 700;
         &::placeholder,

diff --git a/src/components/ui-location-search/ui-location-search.tsx b/src/components/ui-location-search/ui-location-search.tsx
@@ -72,51 +72,53 @@ export class UiLocationSearch {
 
     return (
       <Host>
-        <input
-          class={"input " + (!this.error ? "has-error" : "")}
-          type="text"
-          id="autocomplete-input"
-          name="full_place"
-          placeholder={this.placeholder}
-          onInput={handleAddressChange}
-          readOnly={this.readOnly}
-          autocomplete="off"
-        />
-        {/* Hidden address info (needed for submit) */}
-        <div id="address" class="form-item is-hidden" hidden={true}>
-          <table>
-            <tr>
-              <td class="label">Place</td>
-              <td colSpan={4}>
-                <input class="input" id="premise" disabled={true} readOnly />
-              </td>
-            </tr>
-            <tr>
-              <td class="label">Street address</td>
-              <td class="slimField">
-                <input name="street_number" class="input" id="street_number" disabled={true} readOnly />
-              </td>
-              <td class="wideField" colSpan={2}>
-                <input name="route" class="input" id="route" disabled={true} readOnly />
-              </td>
-            </tr>
-            <tr>
-              <td class="label">City</td>
-              <td class="wideField" colSpan={3}>
-                <input name="locality" class="input" id="locality" disabled={true} readOnly />
-              </td>
-            </tr>
-            <tr>
-              <td class="label">State</td>
-              <td class="slimField">
-                <input name="state" class="input" id="administrative_area_level_1" disabled={true} readOnly />
-              </td>
-              <td class="label">Zip code</td>
-              <td class="wideField">
-                <input name="zip" class="input" id="postal_code" disabled={true} readOnly />
-              </td>
-            </tr>
-          </table>
+        <div>
+          <input
+            class={"input " + (!this.error ? "has-error" : "")}
+            type="text"
+            id="autocomplete-input"
+            name="full_place"
+            placeholder={this.placeholder}
+            onInput={handleAddressChange}
+            readOnly={this.readOnly}
+            autocomplete="off"
+          />
+          {/* Hidden address info (needed for submit) */}
+          <div id="address" class="form-item is-hidden" hidden={true}>
+            <table>
+              <tr>
+                <td class="label">Place</td>
+                <td colSpan={4}>
+                  <input class="input" id="premise" disabled={true} readOnly />
+                </td>
+              </tr>
+              <tr>
+                <td class="label">Street address</td>
+                <td class="slimField">
+                  <input name="street_number" class="input" id="street_number" disabled={true} readOnly />
+                </td>
+                <td class="wideField" colSpan={2}>
+                  <input name="route" class="input" id="route" disabled={true} readOnly />
+                </td>
+              </tr>
+              <tr>
+                <td class="label">City</td>
+                <td class="wideField" colSpan={3}>
+                  <input name="locality" class="input" id="locality" disabled={true} readOnly />
+                </td>
+              </tr>
+              <tr>
+                <td class="label">State</td>
+                <td class="slimField">
+                  <input name="state" class="input" id="administrative_area_level_1" disabled={true} readOnly />
+                </td>
+                <td class="label">Zip code</td>
+                <td class="wideField">
+                  <input name="zip" class="input" id="postal_code" disabled={true} readOnly />
+                </td>
+              </tr>
+            </table>
+          </div>
         </div>
       </Host>
     );

diff --git a/src/index.html b/src/index.html
@@ -9,7 +9,7 @@
       content="Pizza to the Polls is making democracy delicious by delivering free food for all to polling places with long lines. Send us reports of long lines and we'll send in the delicious reinforcements."
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
-    <meta name="theme-color" content="#db2b39" />
+    <meta name="theme-color" content="#fa442d" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta http-equiv="x-ua-compatible" content="IE=Edge" />