- attempt at responsiveness fix

- bring back scrollbars
- update dependencies

src/components/builder/center/Artboard.module.css

@@ -2,11 +2,21 @@
   .container {
     width: 210mm;
     height: 297mm;
-    zoom: 0.8;
-    -moz-transform: scale(0.8);
-    transform-origin: 50% 18%;
-    overflow-y: scroll;
+    zoom: 0.5;
+    overflow: scroll;
     box-shadow: var(--shadow);
-    @apply bg-white rounded;
+    @apply my-16 rounded;
+  }
+}
+
+@media screen and (min-width: 1366px) {
+  .container {
+    zoom: 0.65;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .container {
+    zoom: 0.8;
   }
 }

src/components/builder/left/LeftSidebar.module.css

@@ -1,12 +1,6 @@
 .container {
   z-index: 10;
   box-shadow: var(--left-shadow);
-  -ms-overflow-style: none;
-  scrollbar-width: none;
   @apply w-full h-screen overflow-scroll p-8;
   @apply grid gap-8;
-}
-
-.container::-webkit-scrollbar {
-  display: none;
-}
+}

src/components/builder/right/RightSidebar.module.css

@@ -1,12 +1,7 @@
 .container {
   z-index: 10;
   box-shadow: var(--right-shadow);
-  -ms-overflow-style: none;
-  scrollbar-width: none;
   @apply w-full h-screen overflow-scroll p-8;
   @apply grid gap-8;
 }
 
-.container::-webkit-scrollbar {
-  display: none;
-}

src/components/builder/right/sections/Templates.js

@@ -89,7 +89,7 @@ const Templates = ({ name }) => {
               alt={x.name}
               loading="eager"
               className="w-full"
-              style={{ height: '225px' }}
+              style={{ height: '230px' }}
               fluid={previews[x.id].childImageSharp.fluid}
             />
             <span>{x.name}</span>

src/components/landing/Hero.js

@@ -18,12 +18,12 @@ const Hero = () => {
   const handleGotoApp = () => navigate('/app/dashboard');
 
   return (
-    <div className="flex items-center">
+    <div className="flex flex-col md:flex-row items-center">
       <Link to="/">
         <Logo className="shadow-lg" size="256px" />
       </Link>
 
-      <div className="ml-12">
+      <div className="mt-12 md:mt-0 md:ml-12">
         <div className="text-5xl font-bold">
           <TypeIt
             getBeforeInit={(instance) => {
@@ -42,13 +42,21 @@ const Hero = () => {
           {t('shared.shortDescription')}
         </h2>
 
-        <div className="mt-12 flex">
+        <div className="mt-12">
           {user ? (
-            <Button onClick={handleGotoApp} isLoading={loading}>
+            <Button
+              onClick={handleGotoApp}
+              isLoading={loading}
+              className="mx-auto md:mx-0"
+            >
               {t('landing.hero.goToApp')}
             </Button>
           ) : (
-            <Button onClick={handleLogin} isLoading={loading}>
+            <Button
+              onClick={handleLogin}
+              isLoading={loading}
+              className="mx-auto md:mx-0"
+            >
               {t('shared.buttons.login')}
             </Button>
           )}

src/components/shared/Input.js

@@ -3,7 +3,7 @@ import { isFunction } from 'lodash';
 import React, { memo, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { FaAngleDown } from 'react-icons/fa';
-import { MdClose, MdOpenInNew } from 'react-icons/md';
+import { MdOpenInNew } from 'react-icons/md';
 import { v4 as uuidv4 } from 'uuid';
 import { useDispatch, useSelector } from '../../contexts/ResumeContext';
 import { handleKeyUp } from '../../utils';
@@ -70,16 +70,6 @@ const Input = ({
               onChange={onChange}
               placeholder={placeholder}
             />
-
-            {isFunction(onClick) && (
-              <MdClose
-                size="16px"
-                tabIndex="0"
-                onClick={onClick}
-                onKeyUp={(e) => handleKeyUp(e, onClick)}
-                className="absolute right-0 cursor-pointer opacity-50 hover:opacity-75 mx-4"
-              />
-            )}
           </div>
         )}
 

src/modals/sections/ExportModal.js

@@ -46,7 +46,7 @@ const ExportModal = () => {
     const { data } = await printResume({ id: state.id, type: 'multi' });
     const blob = b64toBlob(data, 'application/pdf');
     download(blob, `RxResume-${state.id}.pdf`, 'application/pdf');
-    setLoadingSingle(false);
+    setLoadingMulti(false);
   };
 
   const handleExportToJson = () => {

src/pages/app/builder.js

@@ -9,6 +9,7 @@ import LoadingScreen from '../../components/router/LoadingScreen';
 import DatabaseContext from '../../contexts/DatabaseContext';
 import { useDispatch } from '../../contexts/ResumeContext';
 import Button from '../../components/shared/Button';
+import styles from './builder.module.css';
 
 const Builder = ({ id }) => {
   const dispatch = useDispatch();
@@ -53,14 +54,14 @@ const Builder = ({ id }) => {
     }
 
     return (
-      <div className="h-screen grid grid-cols-11">
-        <div className="col-span-3">
+      <div className={styles.container}>
+        <div className={styles.left}>
           <LeftSidebar />
         </div>
-        <div className="col-span-5 h-screen overflow-hidden bg-primary-100 grid items-center justify-center">
+        <div className={styles.center}>
           <Artboard />
         </div>
-        <div className="col-span-3">
+        <div className={styles.right}>
           <RightSidebar />
         </div>
       </div>

src/pages/app/builder.module.css

@@ -0,0 +1,33 @@
+.container {
+  @apply w-screen h-screen grid grid-cols-10;
+}
+
+.left {
+  @apply col-span-3;
+}
+
+.center {
+  @apply col-span-4 h-screen overflow-scroll bg-primary-100 grid justify-center items-center;
+}
+
+.right {
+  @apply col-span-3;
+}
+
+@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;
+  }
+}

src/pages/app/dashboard.js

@@ -74,8 +74,8 @@ const Dashboard = ({ user }) => {
 
       <TopNavbar />
 
-      <div className="container mt-12">
-        <div className="grid grid-cols-6 gap-8">
+      <div className="container mt-12 px-12 xl:px-0">
+        <div className="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-6 gap-8">
           <CreateResume />
 
           {resumes.map((x) => (

src/pages/index.js

@@ -16,7 +16,7 @@ const Home = () => {
         <link rel="canonical" href="https://rxresume-staging.web.app/" />
       </Helmet>
 
-      <div className="container mt-24">
+      <div className="container px-8 xl:px-0 text-center md:text-left mt-24">
         <Hero />
 
         <p className="leading-loose text-lg mt-16">
@@ -71,7 +71,7 @@ const Home = () => {
           <h4 className="text-xl uppercase font-bold mb-8">
             Links of Interest
           </h4>
-          <div className="grid grid-cols-4 gap-8">
+          <div className="grid grid-cols-3 md:grid-cols-4 gap-8">
             <Link to="/faq">Frequently Asked Questions</Link>
             <a
               href="https://github.com/AmruthPillai/Reactive-Resume"
@@ -100,7 +100,7 @@ const Home = () => {
         </div>
 
         <footer className="my-24">
-          <p className="text-primary-500 opacity-75">
+          <p className="text-primary-500">
             Licensed under <a href="/">MIT</a>
             <br />
             Made with love by{' '}