From 32f8186cd9cfc07d298b44d020b5ba1b3204ccd0 Mon Sep 17 00:00:00 2001
From: James Almeida <703253+jamesalmeida@users.noreply.github.com>
Date: Sat, 28 Sep 2024 22:04:04 -0700
Subject: [PATCH] Add styles for landscape on mobile phone.

---
 src/App.css                                   |  63 +++++++---
 src/App.js                                    |  22 ++--
 src/components/BtmNavBar/BtmNavBar.css        |  12 ++
 .../LoadingScreen/LoadingScreen.css           | 111 +++++++++++-------
 src/components/LoadingScreen/LoadingScreen.js |  15 +--
 .../MapNavigation/MapNavigation.css           |  11 ++
 src/components/MusicPanel/MusicPanel.css      |  51 +++++---
 .../TemperatureControl/TemperatureControl.css |  15 ++-
 src/components/VehicleModel/VehicleModel.js   |   2 +-
 src/utils/dots.js                             |  25 ++++
 10 files changed, 225 insertions(+), 102 deletions(-)
 create mode 100644 src/utils/dots.js

diff --git a/src/App.css b/src/App.css
index 56dc34f..9d8f818 100644
--- a/src/App.css
+++ b/src/App.css
@@ -167,17 +167,13 @@
 .toggleLocks {
   position: relative;
   left: 34%;
-  top: -50%;
+  /* top: -50%; */
   z-index: 2;
   width: 40px;
   display: flex;
   flex-direction: row-reverse;
 }
 
-.carModelWrapper {
-  position: absolute;
-}
-
 .temperature {
   font-size: 42px;
   font-weight: 400;
@@ -266,30 +262,30 @@
 
 .small-screen-message {
   display: none;
+  text-align: center;
+  color: #d0d0d0;
+  font-size: 20px;
+  position: relative; /* Add this */
 }
 
 .small-screen-message span {
-  font-size: 12px;
+  font-size: 14px;
+  font-style: italic;
+  display: block;
+  line-height: 14px;
+  padding-top: 7px;
 }
 
-/* Add this media query at the end of the file */
+
+/* For smaller screens but larger than mobile */
 @media screen and (max-width: 768px) {
   #root {
-    padding: 5px;
+    padding: 120px 5px;
+    height: 100dvh;
   }
   
   .small-screen-message {
-    /* position: absolute; */
-    /* bottom: 20px; */
-    /* left: 0; */
-    /* right: 0; */
     display: block;
-    text-align: center;
-    color: #d0d0d0;
-    font-size: 16px;
-    font-style: italic;
-    /* padding: 10px; */
-    /* background-color: rgba(0, 0, 0, 0.7); */
   }
 }
 
@@ -320,7 +316,38 @@
 
   .horizontalPanelGroup {
     border-radius: 0px !important;
+    height: 82% !important;
   } 
+
+  .carModelWrapper {
+    height: 60% !important;
+    width: auto !important;
+  }
+
+  .carModelStatus {
+    position: absolute;
+    top: 44px;
+    left: 49px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .carStatusIcons {
+    padding: 0.5% 1% 0.5% 10%;
+  }
+
+  .toggleLocks {
+    top: -26px;
+  }
+
+  .musicPanel {
+    height: 30% !important;
+    max-width: 322px !important;
+    position: relative;
+    left: -2px;
+  }
 }
 
 
diff --git a/src/App.js b/src/App.js
index c0684f4..7c30d9e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -14,6 +14,7 @@ import CarLock from './components/CarLock/CarLock';
 import VolumeControl from './components/VolumeControl/VolumeControl';
 import TemperatureControl from './components/TemperatureControl/TemperatureControl';
 import BatteryStatus from './components/BatteryStatus/BatteryStatus';
+import { useDots } from './utils/dots';
 import './App.css';
 
 const formatAppName = (appName) => {
@@ -38,6 +39,7 @@ function App() {
   const [isCameraForced, setIsCameraForced] = useState(false);
   const [isPanelResizable, setIsPanelResizable] = useState(false);
   const DEFAULT_LEFT_PANEL_SIZE = 40;
+  const dots = useDots();
 
   const appsTopShelf = [
     'wipers',
@@ -264,11 +266,11 @@ function App() {
             <PanelGroup autoSaveId="example" direction="horizontal" className="horizontalPanelGroup">
               <Panel 
                 defaultSize={DEFAULT_LEFT_PANEL_SIZE}
-              minSize={DEFAULT_LEFT_PANEL_SIZE}
-              maxSize={100}
-              className="leftPanel"
-              ref={leftPanelRef}
-              onResize={handleLeftPanelResize}
+                minSize={DEFAULT_LEFT_PANEL_SIZE}
+                maxSize={100}
+                className="leftPanel"
+                ref={leftPanelRef}
+                onResize={handleLeftPanelResize}
               >
                 <div className="carStatusIcons">
                   <div className="gearSelect no-select">
@@ -288,10 +290,11 @@ function App() {
                   <div className="toggleFrunk no-select" onClick={handleToggleFrunk}>
                     {rotateToFrunk ? 'Close' : 'Open'}<br /><span className="frunk">Frunk</span>
                   </div>
+                  <div className="toggleLocks"><CarLock /></div>
                   <div className="toggleTrunk no-select" onClick={handleToggleTrunk}>
                     {rotateToTrunk ? 'Close' : 'Open'}<br /><span className="trunk">Trunk</span>
                   </div>
-                  <div className="toggleLocks"><CarLock /></div>
+                  
                 </div>
                 <VehicleModel rotateToFrunk={rotateToFrunk} rotateToTrunk={rotateToTrunk} />
                 <MusicPanel volume={volume} />
@@ -334,7 +337,12 @@ function App() {
             </Modal>
           </div>
         </div>
-        <footer className="small-screen-message">Best viewed on a larger screen.<br /><span>(At least until I finish the mobile styles.)</span></footer>
+        <div className="small-screen-message">
+          I'm sorry Dave, I'm afraid I can't do that{dots}<br />
+          Best viewed on a larger screen.<br />
+          <span>At least until I tweak the mobile styles.<br />
+          For now, try turning your phone sideways.</span>
+        </div>
       </UserProfileProvider>
     </CarLockProvider>
   );
diff --git a/src/components/BtmNavBar/BtmNavBar.css b/src/components/BtmNavBar/BtmNavBar.css
index 89cfe2a..04fa49d 100644
--- a/src/components/BtmNavBar/BtmNavBar.css
+++ b/src/components/BtmNavBar/BtmNavBar.css
@@ -94,4 +94,16 @@
 
 .floatingBtn.squareBtn.active {
     background-color: rgba(255, 255, 255, 0.2);
+}
+
+@media screen and (max-width: 768px) {
+    .btmNavBar {
+        border-radius: 0 0 6px 6px;
+    }
+}
+
+@media only screen and (max-device-width: 896px) and (orientation: landscape) {
+    .btmNavBar {
+        height: 18%;
+    }
 }
\ No newline at end of file
diff --git a/src/components/LoadingScreen/LoadingScreen.css b/src/components/LoadingScreen/LoadingScreen.css
index 930f64a..09bf91d 100644
--- a/src/components/LoadingScreen/LoadingScreen.css
+++ b/src/components/LoadingScreen/LoadingScreen.css
@@ -1,51 +1,51 @@
 .loading-screen {
-    position: relative;
-    border-radius: 3.5% / 5%;
-    border: 2px solid grey;
-    background-color: #000000;
-    box-sizing: border-box;
-    padding: 2%;
-    aspect-ratio: 16 / 9;
-    max-height: 748px;
-    margin: 0 auto 20px;
-    border-radius: 3.5% / 5%;
-    border: 2px solid grey;
-  }
+  position: relative;
+  border-radius: 3.5% / 5%;
+  border: 2px solid grey;
+  background-color: #000000;
+  box-sizing: border-box;
+  padding: 2%;
+  aspect-ratio: 16 / 9;
+  max-height: 748px;
+  margin: 0 auto 20px;
+  border-radius: 3.5% / 5%;
+  border: 2px solid grey;
+}
 
-  .displayInsideBezel {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    width: 100%;
-    height: 100%;
-    max-height: 680px;
-    background-color: rgb(17, 17, 17);
-    border-radius: 1.5% / 3%;
-  }
-  
-  .tesla-logo {
-    width: 10%;
-    height: auto;
-    position: absolute;
-    /* top: 35px; */
-    animation: spinY 3s infinite linear;
-    transform-style: preserve-3d;
-  }
+.displayInsideBezel {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  max-height: 680px;
+  background-color: rgb(17, 17, 17);
+  border-radius: 1.5% / 3%;
+}
 
-  .loading-text {
-    margin-top: 26%;
-    margin-left: 20px;
-    color: #d0d0d0;
-    font-size: 18px;
-    text-align: center;
-  }
+.tesla-logo {
+  width: 10%;
+  height: auto;
+  position: absolute;
+  /* top: 35px; */
+  animation: spinY 3s infinite linear;
+  transform-style: preserve-3d;
+}
 
-  .dots {
-    display: inline-block;
-    width: 20px;  /* Adjust as needed */
-    text-align: left;
-  }
+.loading-text {
+  margin-top: 26%;
+  margin-left: 20px;
+  color: #d0d0d0;
+  font-size: 18px;
+  text-align: center;
+}
+
+.dots {
+  display: inline-block;
+  width: 20px;  /* Adjust as needed */
+  text-align: left;
+}
 
 
 /* Loading Circles */
@@ -238,3 +238,26 @@
   }
 }
 
+@media screen and (max-width: 768px) {
+  .circle-container {
+    display: none;
+  }
+}
+
+@media only screen and (max-device-width: 896px) and (orientation: landscape) {
+  .loading-screen {
+    aspect-ratio: unset !important;
+    background-color: none !important;
+    border: none !important;
+    border-radius: 0px !important;
+    box-shadow: none !important;
+    margin: 0px !important;
+    max-height: unset !important;
+    max-width: unset !important;
+    padding: 0px !important;
+    position: relative;
+    height: 100dvh;
+    width: 100dvw;
+    box-sizing: border-box;
+  }
+}
\ No newline at end of file
diff --git a/src/components/LoadingScreen/LoadingScreen.js b/src/components/LoadingScreen/LoadingScreen.js
index b4d267e..58171ac 100644
--- a/src/components/LoadingScreen/LoadingScreen.js
+++ b/src/components/LoadingScreen/LoadingScreen.js
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { getImagePath } from '../../utils/assetPaths';
+import { useDots } from '../../utils/dots';
 import './LoadingScreen.css';
 
 const loadingMessages = [
@@ -15,7 +16,6 @@ const loadingMessages = [
   "Follow the white rabbit",
   "(Insert quarter)",
   "Counting backwards from Infinity",
-  "I'm sorry Dave, I'm afraid I can't do that.",
   "Stay awhile... and listen",
   "Computing the secret to life, the universe, and everything",
   "Downloading your daily traffic jam",
@@ -31,20 +31,11 @@ const loadingMessages = [
 
 const LoadingScreen = () => {
   const [loadingText, setLoadingText] = useState('');
-  const [dots, setDots] = useState('');
+  const dots = useDots();
 
   useEffect(() => {
     const randomIndex = Math.floor(Math.random() * loadingMessages.length);
     setLoadingText(loadingMessages[randomIndex]);
-
-    const dotInterval = setInterval(() => {
-      setDots(prevDots => {
-        if (prevDots.length >= 3) return '';
-        return prevDots + '.';
-      });
-    }, 500);
-
-    return () => clearInterval(dotInterval);
   }, []);
 
   return (
@@ -58,7 +49,7 @@ const LoadingScreen = () => {
           <div className="circle-inner"></div>
         </div>
         <img src={getImagePath('logo-grey.svg')} alt="Tesla Logo" className="tesla-logo spinning" />
-        <p className="loading-text">{loadingText}<span className="dots">{dots}</span></p>
+        <p className="loading-text">{loadingText}{dots}</p>
       </div>
     </div>
   );
diff --git a/src/components/MapNavigation/MapNavigation.css b/src/components/MapNavigation/MapNavigation.css
index adb67e8..0bf7aa3 100644
--- a/src/components/MapNavigation/MapNavigation.css
+++ b/src/components/MapNavigation/MapNavigation.css
@@ -248,4 +248,15 @@ input:focus {
 }
 .gmnoprint div {
     background: none !important;
+}
+
+/* Media query for mobile devices in landscape mode */
+@media only screen and (max-device-width: 896px) and (orientation: landscape) {
+    .navBtn input {
+        max-width: 138px;
+        margin-left: 0px;
+    }
+    .searchIcon {
+        margin-left: 5px;
+    }
 }
\ No newline at end of file
diff --git a/src/components/MusicPanel/MusicPanel.css b/src/components/MusicPanel/MusicPanel.css
index 1defb08..7b615c6 100644
--- a/src/components/MusicPanel/MusicPanel.css
+++ b/src/components/MusicPanel/MusicPanel.css
@@ -12,10 +12,11 @@
     height: 20%;
     /* width: 94%; */
     max-width: 569px;
-    margin: 3% 2% 3% 3%;
-    /* margin: 20px; */
+    /* margin: 3% 2% 3% 3%; */
+    margin: 0px auto 10px;
     border-radius: 5px;
     box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
+    overflow: hidden;
 }
 .albumArt {
     grid-column: 1 / 2;
@@ -104,8 +105,8 @@
     /* height: 75px; */
     /* width: 75px; */
     height: auto;
-    width: 20%;
-    padding: 10px 10px;
+    width: 100%;
+    /* padding: 10px 10px; */
     /* margin: 10px 0px 0px; */
     background-color: rgb(255, 255, 255, 90%);
     border: none;  
@@ -113,30 +114,30 @@
 }
 
 .musicIcon {
-    height: 45%;
-    /* height:30px; */
+    /* height: 45%; */
+    height: 20px;
 }
 
 .musicProgressBar {
     width: 100%;
     margin-bottom: 10px;
-  }
-  
-  .progressBackground {
+}
+
+.progressBackground {
     width: 100%;
     height: 2px;
     background-color: #ddd;
     border-radius: 2px;
-  }
-  
-  .progressForeground {
+}
+
+.progressForeground {
     height: 100%;
     background-color: #4e4e4e;
     border-radius: 2px;
     position: relative;
-  }
-  
-  .progressIndicator {
+}
+
+.progressIndicator {
     width: 10px;
     height: 10px;
     background-color: #4e4e4e;
@@ -144,11 +145,23 @@
     position: absolute;
     right: -6px;
     top: -5px;
-  }
-  
-  .timeCode {
+}
+
+.timeCode {
     font-size: 12px;
     color: #777;
     text-align: right;
     margin-top: 5px;
-  }
\ No newline at end of file
+}
+
+@media screen and (max-width: 768px) {
+    /* .musicIcon {
+        width: 17px;
+    } */
+}
+
+@media only screen and (max-device-width: 896px) and (orientation: landscape) {
+    .musicIcon {
+        width: 17px;
+    }
+}
\ No newline at end of file
diff --git a/src/components/TemperatureControl/TemperatureControl.css b/src/components/TemperatureControl/TemperatureControl.css
index 3ff8765..a3edaee 100644
--- a/src/components/TemperatureControl/TemperatureControl.css
+++ b/src/components/TemperatureControl/TemperatureControl.css
@@ -14,10 +14,23 @@
 .navIcons.arrows {
     width: 15%;
     opacity: 20%;
+    padding: 0px;
 }
 
 .navIcons.temperature-display {
-    font-size: 2em;
+    font-size: 28px;
+    padding: 0px;
+    max-width: 70px;
 }
 
+@media only screen and (max-device-width: 896px) and (orientation: landscape) {
+    .navIcons.temperature-display {
+        font-size: 20px;
+        max-width: 40px;
+        padding-top: 4px;
+    }
 
+    .navIcons.arrows {
+        width: 25px !important;
+    }
+}
\ No newline at end of file
diff --git a/src/components/VehicleModel/VehicleModel.js b/src/components/VehicleModel/VehicleModel.js
index 3b7d168..b61d35f 100644
--- a/src/components/VehicleModel/VehicleModel.js
+++ b/src/components/VehicleModel/VehicleModel.js
@@ -221,7 +221,7 @@ export function VehicleModel({ rotateToFrunk, rotateToTrunk }) {
         far: 1000
       }} 
       style={{"position": "relative"}}
-      className="carModel"
+      className="carModelWrapper"
     >
       <color attach="background" args={["#f1f1f1"]} />
       <Stage environment={"warehouse"}>
diff --git a/src/utils/dots.js b/src/utils/dots.js
new file mode 100644
index 0000000..bdb29a2
--- /dev/null
+++ b/src/utils/dots.js
@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from 'react';
+
+const dotsContainerStyle = {
+  display: 'inline-block',
+  width: '15px', // Adjust as needed
+  textAlign: 'left',
+  fontFamily: 'monospace'
+};
+
+export const useDots = () => {
+  const [dots, setDots] = useState('');
+
+  useEffect(() => {
+    const dotInterval = setInterval(() => {
+      setDots(prevDots => {
+        if (prevDots.length >= 3) return '';
+        return prevDots + '.';
+      });
+    }, 500);
+
+    return () => clearInterval(dotInterval);
+  }, []);
+
+  return <span style={dotsContainerStyle}>{dots}</span>;
+};
\ No newline at end of file