From 7ad86690ff6ad326c9089c163861f7c83fe52138 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eneko=20Uru=C3=B1uela?= Date: Tue, 17 May 2022 21:57:15 -0400 Subject: [PATCH 1/3] Initial version of mobile web --- .env | 2 +- package.json | 2 +- src/Mobile.js | 35 ++++++ src/index.js | 191 ++++++++++++++++++-------------- src/styles/output.css | 250 +++++++++++++++++++----------------------- 5 files changed, 259 insertions(+), 221 deletions(-) create mode 100644 src/Mobile.js diff --git a/.env b/.env index 783f5a4..c5c025c 100644 --- a/.env +++ b/.env @@ -1,4 +1,4 @@ INLINE_RUNTIME_CHUNK=false GENERATE_SOURCEMAP=false SKIP_PREFLIGHT_CHECK=true -REACT_APP_VERSION=1.0.13 +REACT_APP_VERSION=1.0.14 diff --git a/package.json b/package.json index 550a9e4..dc5d119 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rica", - "version": "1.0.13", + "version": "1.0.14", "private": true, "dependencies": { "@blueprintjs/core": "^3.53.0", diff --git a/src/Mobile.js b/src/Mobile.js new file mode 100644 index 0000000..fb2e900 --- /dev/null +++ b/src/Mobile.js @@ -0,0 +1,35 @@ +import React, { Component } from "react"; + +class MobileMain extends Component { + render() { + return ( +
+
+
+

+ Hi, this is Rica{" "} + + 👋 + +

+
+

+ It looks like you're visiting from a small screen. To use Rica, + please open it on your computer. +

+
+
+ +
+ Learn more +
+ +
+
+
+
+ ); + } +} + +export default MobileMain; diff --git a/src/index.js b/src/index.js index 3383f78..053d039 100644 --- a/src/index.js +++ b/src/index.js @@ -6,6 +6,7 @@ import Info from "./Info/Info"; import Plots from "./Plots/Plots"; import IntroPopup from "./PopUps/IntroPopUp"; import AboutPopup from "./PopUps/AboutPopUp"; +import MobileMain from "./Mobile"; import "./styles/output.css"; import "./styles.css"; @@ -37,6 +38,7 @@ class App extends Component { showAboutPopup: false, showTabs: false, originalData: [], + width: window.innerWidth, }; } @@ -97,97 +99,122 @@ class App extends Component { this.setState({ originalData: childData[4] }); }; + componentWillMount() { + window.addEventListener("resize", this.handleWindowSizeChange); + } + + // make sure to remove the listener + // when the component is not mounted anymore + componentWillUnmount() { + window.removeEventListener("resize", this.handleWindowSizeChange); + } + + handleWindowSizeChange = () => { + this.setState({ width: window.innerWidth }); + }; + render() { - return ( -
- {this.state.showIntroPopup ? ( - - ) : null} - {this.state.showAboutPopup ? ( - - ) : null} - {this.state.showTabs ? ( - - - - - Info - - - - ICA - - - - Carpets - -
    -
    + const { width } = this.state; + const isMobile = width <= 1024; + + if (isMobile) { + return ( +
    + +
    + ); + } else { + return ( +
    + {this.state.showIntroPopup ? ( + + ) : null} + {this.state.showAboutPopup ? ( + + ) : null} + {this.state.showTabs ? ( + + + - New -
    -
    + Info + + - About -
    -
- - - - - - - - - - - - - - ) : null} -
- ); + ICA + + + + Carpets + + + + + + + + + + + + + + + + ) : null} + + ); + } } } diff --git a/src/styles/output.css b/src/styles/output.css index 245497b..9c5069e 100644 --- a/src/styles/output.css +++ b/src/styles/output.css @@ -608,6 +608,13 @@ video { .m-auto { margin: auto; } +.m-2 { + margin: 0.5rem; +} +.my-4 { + margin-top: 1rem; + margin-bottom: 1rem; +} .mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; @@ -616,25 +623,12 @@ video { margin-left: 20rem; margin-right: 20rem; } -.my-5 { - margin-top: 1.25rem; - margin-bottom: 1.25rem; -} -.my-4 { - margin-top: 1rem; - margin-bottom: 1rem; -} .my-8 { margin-top: 2rem; margin-bottom: 2rem; } -.my-10 { - margin-top: 2.5rem; - margin-bottom: 2.5rem; -} -.my-6 { - margin-top: 1.5rem; - margin-bottom: 1.5rem; +.mb-8 { + margin-bottom: 2rem; } .mt-4 { margin-top: 1rem; @@ -654,56 +648,17 @@ video { .mt-16 { margin-top: 4rem; } -.mt-2 { - margin-top: 0.5rem; -} -.ml-4 { - margin-left: 1rem; -} -.ml-auto { - margin-left: auto; -} -.mb-8 { - margin-bottom: 2rem; -} -.mr-5 { - margin-right: 1.25rem; -} -.-mt-1 { - margin-top: -0.25rem; -} -.mt-1 { - margin-top: 0.25rem; -} -.mt-5 { - margin-top: 1.25rem; -} .mt-10 { margin-top: 2.5rem; } .mt-6 { margin-top: 1.5rem; } -.mt-8 { - margin-top: 2rem; -} -.mt-7 { - margin-top: 1.75rem; -} -.mb-4 { - margin-bottom: 1rem; -} -.mt-3 { - margin-top: 0.75rem; -} -.mr-4 { - margin-right: 1rem; -} -.mr-6 { - margin-right: 1.5rem; +.ml-4 { + margin-left: 1rem; } -.mr-12 { - margin-right: 3rem; +.ml-16 { + margin-left: 4rem; } .mt-12 { margin-top: 3rem; @@ -711,17 +666,20 @@ video { .mr-16 { margin-right: 4rem; } -.ml-8 { - margin-left: 2rem; +.mt-7 { + margin-top: 1.75rem; +} +.mt-2 { + margin-top: 0.5rem; } -.ml-12 { - margin-left: 3rem; +.-mt-1 { + margin-top: -0.25rem; } -.ml-24 { - margin-left: 6rem; +.ml-auto { + margin-left: auto; } -.ml-16 { - margin-left: 4rem; +.mr-5 { + margin-right: 1.25rem; } .inline-block { display: inline-block; @@ -741,26 +699,26 @@ video { .hidden { display: none; } -.h-10 { - height: 2.5rem; -} .h-full { height: 100%; } +.h-10 { + height: 2.5rem; +} .h-auto { height: auto; } .h-24 { height: 6rem; } -.h-7 { - height: 1.75rem; +.h-8 { + height: 2rem; } .h-5 { height: 1.25rem; } -.h-8 { - height: 2rem; +.h-screen { + height: 100vh; } .min-h-full { min-height: 100%; @@ -768,21 +726,27 @@ video { .w-full { width: 100%; } +.w-1\/2 { + width: 50%; +} +.w-5\/12 { + width: 41.666667%; +} .w-1\/3 { width: 33.333333%; } .w-5 { width: 1.25rem; } -.w-1\/2 { - width: 50%; -} -.w-5\/12 { - width: 41.666667%; +.w-auto { + width: auto; } .max-w-full { max-width: 100%; } +.resize { + resize: both; +} .list-none { list-style-type: none; } @@ -798,15 +762,6 @@ video { .justify-center { justify-content: center; } -.gap-x-5 { - column-gap: 1.25rem; -} -.gap-y-4 { - row-gap: 1rem; -} -.gap-y-2 { - row-gap: 0.5rem; -} .gap-x-1 { column-gap: 0.25rem; } @@ -819,18 +774,21 @@ video { .whitespace-pre-wrap { white-space: pre-wrap; } -.rounded-xl { - border-radius: 0.75rem; -} .rounded-lg { border-radius: 0.5rem; } +.rounded-xl { + border-radius: 0.75rem; +} .rounded-sm { border-radius: 0.125rem; } .rounded-md { border-radius: 0.375rem; } +.rounded { + border-radius: 0.25rem; +} .border-b { border-bottom-width: 1px; } @@ -838,6 +796,10 @@ video { --tw-border-opacity: 1; border-bottom-color: rgba(212, 212, 216, var(--tw-border-opacity)); } +.bg-sky-700 { + --tw-bg-opacity: 1; + background-color: rgba(3, 105, 161, var(--tw-bg-opacity)); +} .bg-sky-500 { --tw-bg-opacity: 1; background-color: rgba(14, 165, 233, var(--tw-bg-opacity)); @@ -864,13 +826,38 @@ video { .bg-opacity-50 { --tw-bg-opacity: 0.5; } +.bg-gradient-to-r { + background-image: linear-gradient(to right, var(--tw-gradient-stops)); +} +.to-indigo-400 { + --tw-gradient-to: #818cf8; +} +.bg-clip-text { + -webkit-background-clip: text; + background-clip: text; +} +.object-cover { + object-fit: cover; +} .p-2 { padding: 0.5rem; } +.px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; +} .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } +.px-1 { + padding-left: 0.25rem; + padding-right: 0.25rem; +} +.py-4 { + padding-top: 1rem; + padding-bottom: 1rem; +} .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; @@ -887,25 +874,13 @@ video { padding-top: 2.5rem; padding-bottom: 2.5rem; } -.px-6 { - padding-left: 1.5rem; - padding-right: 1.5rem; -} -.py-8 { - padding-top: 2rem; - padding-bottom: 2rem; -} -.px-2 { - padding-left: 0.5rem; - padding-right: 0.5rem; -} -.py-4 { - padding-top: 1rem; - padding-bottom: 1rem; +.px-4 { + padding-left: 1rem; + padding-right: 1rem; } -.px-1 { - padding-left: 0.25rem; - padding-right: 0.25rem; +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; } .pt-0\.5 { padding-top: 0.125rem; @@ -913,54 +888,43 @@ video { .pt-0 { padding-top: 0px; } -.pt-1 { - padding-top: 0.25rem; -} -.pt-4 { - padding-top: 1rem; -} -.pt-8 { - padding-top: 2rem; -} -.pt-24 { - padding-top: 6rem; -} .pt-2 { padding-top: 0.5rem; } -.pt-3 { - padding-top: 0.75rem; -} -.pt-1\.5 { - padding-top: 0.375rem; -} .text-center { text-align: center; } .text-justify { text-align: justify; } -.text-base { - font-size: 1rem; - line-height: 1.5rem; -} .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } +.text-base { + font-size: 1rem; + line-height: 1.5rem; +} .text-lg { font-size: 1.125rem; line-height: 1.75rem; } -.font-semibold { - font-weight: 600; -} .font-extrabold { font-weight: 800; } +.font-semibold { + font-weight: 600; +} .font-bold { font-weight: 700; } +.text-transparent { + color: transparent; +} +.text-sky-100 { + --tw-text-opacity: 1; + color: rgba(224, 242, 254, var(--tw-text-opacity)); +} .text-gray-500 { --tw-text-opacity: 1; color: rgba(113, 113, 122, var(--tw-text-opacity)); @@ -973,10 +937,6 @@ video { --tw-text-opacity: 1; color: rgba(161, 161, 170, var(--tw-text-opacity)); } -.text-black { - --tw-text-opacity: 1; - color: rgba(0, 0, 0, var(--tw-text-opacity)); -} .drop-shadow-sm { --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05)); filter: var(--tw-filter); @@ -990,6 +950,11 @@ video { -webkit-backdrop-filter: var(--tw-backdrop-filter); backdrop-filter: var(--tw-backdrop-filter); } +.transition-colors { + transition-property: background-color, border-color, color, fill, stroke; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} .transition { transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; @@ -997,9 +962,16 @@ video { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } +.duration-150 { + transition-duration: 150ms; +} .hover\:cursor-pointer:hover { cursor: pointer; } +.hover\:bg-sky-800:hover { + --tw-bg-opacity: 1; + background-color: rgba(7, 89, 133, var(--tw-bg-opacity)); +} .hover\:bg-sky-600:hover { --tw-bg-opacity: 1; background-color: rgba(2, 132, 199, var(--tw-bg-opacity)); @@ -1008,6 +980,10 @@ video { --tw-bg-opacity: 1; background-color: rgba(228, 228, 231, var(--tw-bg-opacity)); } +.hover\:bg-sky-700:hover { + --tw-bg-opacity: 1; + background-color: rgba(3, 105, 161, var(--tw-bg-opacity)); +} .hover\:text-gray-900:hover { --tw-text-opacity: 1; color: rgba(24, 24, 27, var(--tw-text-opacity)); From 9fb0f3d52ff7cd4c006802037433c1b66dc04cb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eneko=20Uru=C3=B1uela?= Date: Tue, 17 May 2022 21:59:43 -0400 Subject: [PATCH 2/3] Changed text --- src/Mobile.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Mobile.js b/src/Mobile.js index fb2e900..18fce80 100644 --- a/src/Mobile.js +++ b/src/Mobile.js @@ -14,8 +14,8 @@ class MobileMain extends Component {

- It looks like you're visiting from a small screen. To use Rica, - please open it on your computer. + It looks like you're visiting from a small screen. Save me on + your shortcuts and visit me again from your computer.

From 1148f04d675614baae373f910648d56845bd1728 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eneko=20Uru=C3=B1uela?= Date: Wed, 18 May 2022 15:55:21 -0400 Subject: [PATCH 3/3] Added background to website and changed button color --- src/Mobile.js | 8 +-- src/styles/output.css | 114 ++++++++++++++++++------------------------ tailwind.config.js | 6 +++ 3 files changed, 60 insertions(+), 68 deletions(-) diff --git a/src/Mobile.js b/src/Mobile.js index 18fce80..07bbd52 100644 --- a/src/Mobile.js +++ b/src/Mobile.js @@ -3,7 +3,7 @@ import React, { Component } from "react"; class MobileMain extends Component { render() { return ( -
+

@@ -14,13 +14,13 @@ class MobileMain extends Component {

- It looks like you're visiting from a small screen. Save me on - your shortcuts and visit me again from your computer. + It looks like you're visiting from a small screen. Bookmark me + and visit me again from your computer.

-
+
Learn more
diff --git a/src/styles/output.css b/src/styles/output.css index 9c5069e..ae95af1 100644 --- a/src/styles/output.css +++ b/src/styles/output.css @@ -608,12 +608,9 @@ video { .m-auto { margin: auto; } -.m-2 { - margin: 0.5rem; -} -.my-4 { - margin-top: 1rem; - margin-bottom: 1rem; +.my-8 { + margin-top: 2rem; + margin-bottom: 2rem; } .mx-2 { margin-left: 0.5rem; @@ -623,9 +620,9 @@ video { margin-left: 20rem; margin-right: 20rem; } -.my-8 { - margin-top: 2rem; - margin-bottom: 2rem; +.my-4 { + margin-top: 1rem; + margin-bottom: 1rem; } .mb-8 { margin-bottom: 2rem; @@ -699,6 +696,9 @@ video { .hidden { display: none; } +.h-screen { + height: 100vh; +} .h-full { height: 100%; } @@ -717,15 +717,15 @@ video { .h-5 { height: 1.25rem; } -.h-screen { - height: 100vh; -} .min-h-full { min-height: 100%; } .w-full { width: 100%; } +.w-auto { + width: auto; +} .w-1\/2 { width: 50%; } @@ -738,9 +738,6 @@ video { .w-5 { width: 1.25rem; } -.w-auto { - width: auto; -} .max-w-full { max-width: 100%; } @@ -774,21 +771,21 @@ video { .whitespace-pre-wrap { white-space: pre-wrap; } -.rounded-lg { - border-radius: 0.5rem; +.rounded { + border-radius: 0.25rem; } .rounded-xl { border-radius: 0.75rem; } +.rounded-lg { + border-radius: 0.5rem; +} .rounded-sm { border-radius: 0.125rem; } .rounded-md { border-radius: 0.375rem; } -.rounded { - border-radius: 0.25rem; -} .border-b { border-bottom-width: 1px; } @@ -796,10 +793,6 @@ video { --tw-border-opacity: 1; border-bottom-color: rgba(212, 212, 216, var(--tw-border-opacity)); } -.bg-sky-700 { - --tw-bg-opacity: 1; - background-color: rgba(3, 105, 161, var(--tw-bg-opacity)); -} .bg-sky-500 { --tw-bg-opacity: 1; background-color: rgba(14, 165, 233, var(--tw-bg-opacity)); @@ -823,21 +816,29 @@ video { .bg-transparent { background-color: transparent; } +.bg-indigo-500 { + --tw-bg-opacity: 1; + background-color: rgba(99, 102, 241, var(--tw-bg-opacity)); +} +.bg-indigo-400 { + --tw-bg-opacity: 1; + background-color: rgba(129, 140, 248, var(--tw-bg-opacity)); +} .bg-opacity-50 { --tw-bg-opacity: 0.5; } -.bg-gradient-to-r { - background-image: linear-gradient(to right, var(--tw-gradient-stops)); +.bg-gradient-to-tr { + background-image: linear-gradient(to top right, var(--tw-gradient-stops)); } -.to-indigo-400 { - --tw-gradient-to: #818cf8; +.from-indigo-200 { + --tw-gradient-from: #c7d2fe; + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(199, 210, 254, 0)); } -.bg-clip-text { - -webkit-background-clip: text; - background-clip: text; +.via-red-200 { + --tw-gradient-stops: var(--tw-gradient-from), #fecaca, var(--tw-gradient-to, rgba(254, 202, 202, 0)); } -.object-cover { - object-fit: cover; +.to-yellow-100 { + --tw-gradient-to: #fef9c3; } .p-2 { padding: 0.5rem; @@ -846,6 +847,14 @@ video { padding-left: 1.5rem; padding-right: 1.5rem; } +.px-4 { + padding-left: 1rem; + padding-right: 1rem; +} +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; @@ -874,14 +883,6 @@ video { padding-top: 2.5rem; padding-bottom: 2.5rem; } -.px-4 { - padding-left: 1rem; - padding-right: 1rem; -} -.py-2 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} .pt-0\.5 { padding-top: 0.125rem; } @@ -912,27 +913,20 @@ video { .font-extrabold { font-weight: 800; } -.font-semibold { - font-weight: 600; -} .font-bold { font-weight: 700; } -.text-transparent { - color: transparent; +.font-semibold { + font-weight: 600; } -.text-sky-100 { +.text-white { --tw-text-opacity: 1; - color: rgba(224, 242, 254, var(--tw-text-opacity)); + color: rgba(255, 255, 255, var(--tw-text-opacity)); } .text-gray-500 { --tw-text-opacity: 1; color: rgba(113, 113, 122, var(--tw-text-opacity)); } -.text-white { - --tw-text-opacity: 1; - color: rgba(255, 255, 255, var(--tw-text-opacity)); -} .text-gray-400 { --tw-text-opacity: 1; color: rgba(161, 161, 170, var(--tw-text-opacity)); @@ -950,11 +944,6 @@ video { -webkit-backdrop-filter: var(--tw-backdrop-filter); backdrop-filter: var(--tw-backdrop-filter); } -.transition-colors { - transition-property: background-color, border-color, color, fill, stroke; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} .transition { transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; @@ -962,15 +951,12 @@ video { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } -.duration-150 { - transition-duration: 150ms; -} .hover\:cursor-pointer:hover { cursor: pointer; } -.hover\:bg-sky-800:hover { +.hover\:bg-sky-700:hover { --tw-bg-opacity: 1; - background-color: rgba(7, 89, 133, var(--tw-bg-opacity)); + background-color: rgba(3, 105, 161, var(--tw-bg-opacity)); } .hover\:bg-sky-600:hover { --tw-bg-opacity: 1; @@ -980,9 +966,9 @@ video { --tw-bg-opacity: 1; background-color: rgba(228, 228, 231, var(--tw-bg-opacity)); } -.hover\:bg-sky-700:hover { +.hover\:bg-indigo-700:hover { --tw-bg-opacity: 1; - background-color: rgba(3, 105, 161, var(--tw-bg-opacity)); + background-color: rgba(67, 56, 202, var(--tw-bg-opacity)); } .hover\:text-gray-900:hover { --tw-text-opacity: 1; diff --git a/tailwind.config.js b/tailwind.config.js index 49f65c6..8123451 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -26,6 +26,12 @@ module.exports = { indigo: colors.indigo, yellow: colors.yellow, sky: colors.sky, + blue: colors.blue, + purple: colors.purple, + pink: colors.pink, + violet: colors.violet, + orange: colors.orange, + red: colors.red, }, }, };