From 9930cee309fcec6ecf23869e8eaed7ab4e0450b1 Mon Sep 17 00:00:00 2001
From: Amruth Pillai <im.amruth@gmail.com>
Date: Sun, 19 Jul 2020 20:33:11 +0530
Subject: [PATCH] - update layout to work for responsive screen sizes

---
 src/components/builder/center/Artboard.js     | 14 +++++++--
 .../builder/center/Artboard.module.css        | 17 ++---------
 .../builder/left/LeftSidebar.module.css       |  1 -
 .../builder/right/RightSidebar.module.css     |  1 -
 src/pages/app/builder.module.css              | 30 +++++--------------
 5 files changed, 22 insertions(+), 41 deletions(-)

diff --git a/src/components/builder/center/Artboard.js b/src/components/builder/center/Artboard.js
index 7a5f4c70..6651fcb5 100644
--- a/src/components/builder/center/Artboard.js
+++ b/src/components/builder/center/Artboard.js
@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from '../../../contexts/ResumeContext';
@@ -13,9 +13,14 @@ import styles from './Artboard.module.css';
 const Artboard = () => {
   const state = useSelector();
   const { t } = useTranslation();
+  const [width, setWidth] = useState(0);
   const { id, name, metadata } = state;
   const { template } = metadata;
 
+  useEffect(() => {
+    setWidth(typeof window !== `undefined` && window && window.innerWidth);
+  }, [typeof window !== `undefined` && window && window.innerWidth]);
+
   return (
     <>
       <Helmet>
@@ -25,7 +30,12 @@ const Artboard = () => {
         <link rel="canonical" href={`https://rxresu.me/app/builder/${id}`} />
       </Helmet>
 
-      <div className={styles.container}>
+      <div
+        className={styles.container}
+        style={{
+          transform: `scale(${width / 1680})`,
+        }}
+      >
         {template === 'onyx' && <Onyx data={state} />}
         {template === 'pikachu' && <Pikachu data={state} />}
         {template === 'gengar' && <Gengar data={state} />}
diff --git a/src/components/builder/center/Artboard.module.css b/src/components/builder/center/Artboard.module.css
index 045ab997..5ad63bf9 100644
--- a/src/components/builder/center/Artboard.module.css
+++ b/src/components/builder/center/Artboard.module.css
@@ -1,22 +1,9 @@
 @media screen {
   .container {
-    width: 210mm;
-    height: 297mm;
-    zoom: 0.5;
+    width: 794px;
+    min-height: 1122px;
     overflow: scroll;
     box-shadow: var(--shadow);
     @apply my-16 bg-white rounded;
   }
 }
-
-@media screen and (min-width: 1366px) {
-  .container {
-    zoom: 0.65;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .container {
-    zoom: 0.8;
-  }
-}
\ No newline at end of file
diff --git a/src/components/builder/left/LeftSidebar.module.css b/src/components/builder/left/LeftSidebar.module.css
index 65c96f6d..cc4dbcbe 100644
--- a/src/components/builder/left/LeftSidebar.module.css
+++ b/src/components/builder/left/LeftSidebar.module.css
@@ -1,6 +1,5 @@
 .container {
   z-index: 10;
-  box-shadow: var(--left-shadow);
   @apply w-full h-screen overflow-scroll p-8;
   @apply grid gap-8;
 }
\ No newline at end of file
diff --git a/src/components/builder/right/RightSidebar.module.css b/src/components/builder/right/RightSidebar.module.css
index de68bb23..7f0ccf8c 100644
--- a/src/components/builder/right/RightSidebar.module.css
+++ b/src/components/builder/right/RightSidebar.module.css
@@ -1,6 +1,5 @@
 .container {
   z-index: 10;
-  box-shadow: var(--right-shadow);
   @apply w-full h-screen overflow-scroll p-8;
   @apply grid gap-8;
 }
diff --git a/src/pages/app/builder.module.css b/src/pages/app/builder.module.css
index c53f47c0..c475f80e 100644
--- a/src/pages/app/builder.module.css
+++ b/src/pages/app/builder.module.css
@@ -1,33 +1,19 @@
 .container {
-  @apply w-screen h-screen grid grid-cols-10;
+  @apply relative h-screen w-screen overflow-hidden flex items-start justify-center;
 }
 
 .left {
-  @apply col-span-3;
+  width: calc(100vw / 4);
+  box-shadow: var(--left-shadow);
+  @apply bg-primary-50 absolute top-0 bottom-0 left-0 z-10;
 }
 
 .center {
-  @apply col-span-4 h-screen overflow-scroll bg-primary-100 grid justify-center items-center;
+  @apply relative z-0 h-screen overflow-scroll;
 }
 
 .right {
-  @apply col-span-3;
+  width: calc(100vw / 4);
+  box-shadow: var(--right-shadow);
+  @apply bg-primary-50 absolute top-0 bottom-0 right-0 z-10;
 }
-
-@media screen and (min-width: 1440px) {
-  .container {
-    @apply grid-cols-11;
-  }
-  
-  .left {
-    @apply col-span-3;
-  }
-  
-  .center {
-    @apply col-span-5;
-  }
-  
-  .right {
-    @apply col-span-3;
-  }
-}
\ No newline at end of file