improving responsivity on different devices

Author: adamgiebl

src/Configuration.js

@@ -19,9 +19,7 @@ const Configuration = ({ previewBox, activeLightSource = 1 }) => {
   const [maxSize, setMaxSize] = useState(410)
   const [maxRadius, setMaxRadius] = useState(150)
   const [gradient, setGradient] = useState(false)
-  const [codeString, setCodeString] = useState(`background: linear-gradient(145deg);
-  box-shadow: 30px 30px var(--blur) var(--lightColor), 
-              -30px -30px var(--blur) var(--darkColor);`)
+  const [codeString, setCodeString] = useState('')
   const codeContainer = useRef()
   const code = useRef()
   const colorInput = useRef()
@@ -32,10 +30,12 @@ const Configuration = ({ previewBox, activeLightSource = 1 }) => {
       setColor(value)
     }
   }
+
   const handleColor = e => {
     window.history.replaceState('homepage', 'Title', '/' + e.target.value)
     setColor(e.target.value)
   }
+
   const copyToClipboard = e => {
     const el = codeContainer.current
     el.select()
@@ -73,12 +73,14 @@ const Configuration = ({ previewBox, activeLightSource = 1 }) => {
       setGradient(false)
     }
   }
+
   useEffect(() => {
     window.history.replaceState('homepage', 'Title', '/' + color)
     const { maxSize, size } = getSizes()
     setMaxSize(maxSize)
     setSize(size)
   }, [])
+
   useEffect(() => {
     if (!isValidColor(color)) {
       return

src/index.scss

@@ -24,7 +24,7 @@
 body {
   background: var(--baseColor);
   color: var(--textColor);
-  font-family: 'Muli', sans-serif;
+  font-family: "Muli", sans-serif;
   height: 100vh;
   display: flex;
   flex-direction: column;
@@ -78,7 +78,7 @@ body {
     }
   }
 
-  @media only screen and (min-width: 1700px) {
+  @media only screen and (min-width: 1700px) and (min-height: 870px) {
     margin-bottom: 70px;
     h1 {
       font-size: 38px;
@@ -129,13 +129,15 @@ body {
 .container {
   width: 100%;
   text-align: center;
+  margin-bottom: 20px;
 
-  @media only screen and (min-height: 740px) {
+  @media only screen and (min-height: 800px) {
     margin-bottom: 70px;
   }
 
   .flex {
     display: flex;
+    align-items: flex-start;
 
     @media only screen and (max-width: 680px) {
       flex-direction: column;
@@ -151,7 +153,7 @@ body {
       height: 500px;
       margin-right: 50px;
 
-      @media only screen and (min-width: 1500px) {
+      @media only screen and (min-width: 1500px) and (min-height: 860px) {
         width: 600px;
         height: 600px;
       }
@@ -217,15 +219,15 @@ body {
           margin-bottom: 10px;
         }
 
-        @media only screen and (max-width: 680px) and (max-height: 715px) {
+        @media only screen and (max-width: 680px) and (max-height: 715px), screen and (max-height: 720px) {
           margin-bottom: 10px;
 
           &.row--checkbox {
             margin-bottom: 7px;
           }
         }
 
-        @media only screen and (max-width: 680px) and (max-height: 650px) {
+        @media only screen and (max-width: 680px) and (max-height: 650px), screen and (max-height: 600px) {
           margin-bottom: 5px;
 
           &.row--checkbox {
@@ -281,7 +283,7 @@ body {
         }
 
         &:before {
-          content: 'Copied to clipboard!';
+          content: "Copied to clipboard!";
           position: absolute;
           width: 100%;
           height: 100%;
@@ -364,5 +366,5 @@ body {
   }
 }
 
-@import './inputs.scss';
-@import './footer.scss';
+@import "./inputs.scss";
+@import "./footer.scss";

src/utils.js

@@ -39,7 +39,8 @@ export const getColorFromRoute = () => {
 
 export const getSizes = () => {
   const windowWidth = window.innerWidth
-  if (windowWidth < 1000 && window.navigator.userAgent !== 'ReactSnap') {
+  const windowHeight = window.innerHeight
+  if ((windowWidth < 1000 || windowHeight < 860) && window.navigator.userAgent !== 'ReactSnap') {
     if (windowWidth < 800) {
       if (windowWidth < 680) {
         return { maxSize: 180, size: 150 }