MOB: added landscape responsive style

slavikdenis · Nov 22, 2020 · 413cf06 · 413cf06
1 parent a291a33
commit 413cf06
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -28,6 +28,9 @@ import { useScreenWakeLock, useVibrate } from '../utils/hooks';
 // svg
 const INIT_OFFSET = 440;
 
+// responsive
+const HEIGHT_BREAKING_POINT = 480;
+
 // colors
 const HEATING_COLOR = '#ec722c';
 const BLAZE_COLOR = '#00b370';
@@ -248,6 +251,12 @@ export default function App() {
                 left: 50%;
                 transform: translateX(-50%);
                 margin-top: 20px;
+
+                @media (max-height: ${HEIGHT_BREAKING_POINT}px) {
+                  margin: 0;
+                  top: 50%;
+                  transform: translate(-50%, -50%);
+                }
               `}
             >
               <div
@@ -289,6 +298,10 @@ export default function App() {
                   borderWidth={3}
                   css={css`
                     margin-left: 42px;
+
+                    @media (max-height: ${HEIGHT_BREAKING_POINT}px) {
+                      margin-left: 220px;
+                    }
                   `}
                 >
                   <ResetIcon width="26px" height="26px" />

diff --git a/yarn.lock b/yarn.lock
@@ -4944,20 +4944,20 @@ string.prototype.matchall@^4.0.2:
     side-channel "^1.0.3"
 
 string.prototype.trimend@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.2.tgz#6ddd9a8796bc714b489a3ae22246a208f37bfa46"
-  integrity sha512-8oAG/hi14Z4nOVP0z6mdiVZ/wqjDtWSLygMigTzAb+7aPEDTleeFf+WrF+alzecxIRkckkJVn+dTlwzJXORATw==
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.3.tgz#a22bd53cca5c7cf44d7c9d5c732118873d6cd18b"
+  integrity sha512-ayH0pB+uf0U28CtjlLvL7NaohvR1amUvVZk+y3DYb0Ey2PUV5zPkkKy9+U1ndVEIXO8hNg18eIv9Jntbii+dKw==
   dependencies:
+    call-bind "^1.0.0"
     define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
 
 string.prototype.trimstart@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.2.tgz#22d45da81015309cd0cdd79787e8919fc5c613e7"
-  integrity sha512-7F6CdBTl5zyu30BJFdzSTlSlLPwODC23Od+iLoVH8X6+3fvDPPuBVVj9iaB1GOsSTSIgVfsfm27R2FGrAPznWg==
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.3.tgz#9b4cb590e123bb36564401d59824298de50fd5aa"
+  integrity sha512-oBIBUy5lea5tt0ovtOFiEQaBkoBBkyJhZXzJYrSmDo5IUUqbOPvVezuRs/agBIdZ2p2Eo1FD6bD9USyBLfl3xg==
   dependencies:
+    call-bind "^1.0.0"
     define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
 
 string_decoder@^1.0.0, string_decoder@^1.1.1:
   version "1.3.0"