From 78419c738195e735728f3a3e7878cba53eb5bfc8 Mon Sep 17 00:00:00 2001 From: Tuncay Kaplan Date: Thu, 12 May 2022 19:09:18 +0300 Subject: [PATCH 1/3] add responsive view support + SASS CSS support --- components/MintedNftsView/MintedNftsView.tsx | 2 +- .../ParcelProperties/ParcelProperties.tsx | 30 +++----- package.json | 1 + pages/_app.tsx | 2 +- pages/index.tsx | 6 +- styles/{globals.css => globals.scss} | 73 ++++++++++++++++++- yarn.lock | 47 +++++++++++- 7 files changed, 132 insertions(+), 29 deletions(-) rename styles/{globals.css => globals.scss} (83%) diff --git a/components/MintedNftsView/MintedNftsView.tsx b/components/MintedNftsView/MintedNftsView.tsx index 869e029..97bf960 100644 --- a/components/MintedNftsView/MintedNftsView.tsx +++ b/components/MintedNftsView/MintedNftsView.tsx @@ -5,7 +5,7 @@ interface MintedNftsViewProps { numberOfNfts: number; } export const MintedNftsView: FC = ({ navigateToHome, numberOfNfts }) => ( -
+
Go Back diff --git a/containers/ParcelProperties/ParcelProperties.tsx b/containers/ParcelProperties/ParcelProperties.tsx index 8ba9542..7bdf899 100644 --- a/containers/ParcelProperties/ParcelProperties.tsx +++ b/containers/ParcelProperties/ParcelProperties.tsx @@ -1,29 +1,17 @@ -import { FC } from "react"; -import { - ParcelProperty, - ParcelPropertyProps, -} from "../../components/ParcelProperty"; -import { AGREEMENT_IPFS_URL } from "../../contants"; +import { FC } from 'react'; +import { ParcelProperty, ParcelPropertyProps } from '../../components/ParcelProperty'; +import { AGREEMENT_IPFS_URL } from '../../contants'; export const ParcelProperties: FC<{ parcelProperties: ParcelPropertyProps[]; }> = ({ parcelProperties }) => (
{parcelProperties.map(({ name, value, tooltip, iconPath }, index) => ( - + ))} - - VIEW FULL LICENSE - +
); diff --git a/package.json b/package.json index 9ffd45f..73a1ac5 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "husky": "^8.0.1", "prettier": "^2.6.2", "pretty-quick": "^3.1.3", + "sass": "^1.51.0", "styled-components": "^5.3.5", "typescript": "4.5.2" } diff --git a/pages/_app.tsx b/pages/_app.tsx index 72470bd..af0ebc3 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,4 +1,4 @@ -import '../styles/globals.css'; +import '../styles/globals.scss'; import { AppProps } from 'next/app'; import Head from 'next/head'; import { AppProvider } from '../context/StateProvider'; diff --git a/pages/index.tsx b/pages/index.tsx index 3723c3c..3db55a6 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -32,7 +32,7 @@ const Home: NextPage = () => { useModal(); const [numberOfMintedNfts, setNumberOfMintedNfts] = useState(0); const [eligibleNftCount, setEligibleNftCount] = useState(0); - const [claimButtonText, setClaimButtonText] = useState('sss'); + const [claimButtonText, setClaimButtonText] = useState('CLAIM NFTS'); const [isIframeLoaded, setIsIframeLoaded] = useState(false); const [isEligible, setIsEligible] = useState(false); const [currentView, setCurrentView] = useState(VIEWS.INITIAL_VIEW); @@ -188,7 +188,9 @@ const Home: NextPage = () => {
{currentView === VIEWS.INITIAL_VIEW ? ( - Parcel Zero NFT +
+ Parcel Zero NFT +
) : ( )} diff --git a/styles/globals.css b/styles/globals.scss similarity index 83% rename from styles/globals.css rename to styles/globals.scss index 6189b6a..e34c343 100644 --- a/styles/globals.css +++ b/styles/globals.scss @@ -39,6 +39,9 @@ main { } .page-header .logo{ height: 60px; + @media (max-width:1024px) { + padding-bottom: 1px; + } } .header-content { @@ -62,6 +65,15 @@ main { padding-left: 56px; background-image: url("/../citydao-parcel-0-logo.png"); background-repeat: no-repeat; + + @media (max-width:1024px) { + padding-left: 0; + background-position-x: center; + padding-top: 61px; + padding-bottom: 17px; + margin-top:12px; + text-align: center; + } } .parcel-zero { font-size: 18px; @@ -71,6 +83,11 @@ main { font-size:11px; color:var(--color-secondary) } +.link-external-wrapper{ + @media (max-width:1024px) { + text-align: center; + } +} .link-external { background-image: url("/../icons/link_arrow.png"); background-repeat: no-repeat; @@ -84,16 +101,37 @@ main { display: flex; justify-content: space-between; margin-bottom: 18px; + @media (max-width:1024px) { + flex-direction: column; + } } + .message-box { color: var(--color-secondary); height: 61px; text-align: right; padding-top: 7px; + @media (max-width:1024px) { + text-align: center; + } } .message-box .remaining-time { color: var(--color-text); } +.nft-art-home-wrapper{ + width: 100%; + max-width: 761px; + @media (max-width:1024px) { + width: 90%; + margin: 0 auto; + display: flex; + justify-content: center; + margin-bottom: 48px; + } +} +.nft-art-home { + width:inherit +} .address-line-1 { font-size: 18px; font-weight: bold; @@ -114,16 +152,28 @@ main { margin: 0 auto; display: flex; justify-content: space-between; + @media (max-width:1024px) { + flex-direction: column; + padding-top: 20px; + margin-bottom: 100px; + } } + .content-left { - width: 761px; + max-width: 761px; } .content-right { width: 234px; + @media (max-width:1024px) { + width:100% + } } .properties { margin-top: 28px; + @media (max-width:1024px) { + margin-top: 48px; + } } .property{ display: flex; @@ -131,6 +181,12 @@ main { margin-bottom: 17px; border-bottom: 1px solid var(--color-dark-green); padding-bottom: 22px; + @media (max-width:1024px) { + padding-left: 40px; + padding-right: 40px; + margin-bottom: 23px; + padding-bottom: 16px; + } } .property img{ align-self: center; @@ -175,6 +231,12 @@ button { background: var(--color-primary); transition: background .1s ease-in; border: 2px solid transparent; + @media (max-width:1024px) { + width:81%; + margin: 0 auto; + display: block; + } + } button:disabled { background: var(--color-disabled); @@ -295,6 +357,11 @@ button.border-button { .step + .step { margin-top: 1rem; } +.view-nfts { + @media (max-width:1024px) { + text-align: center; + } +} .mintedNftImagesWrapper { margin-left: -16px; margin-top: 16px; @@ -320,6 +387,10 @@ button.border-button { width: 338px; height: 338px; display: inline-block; + @media (max-width:1024px) { + width: 66%; + height: 100%; + } } .terms{ margin-bottom: 24px; diff --git a/yarn.lock b/yarn.lock index e3283a3..aac1e04 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1353,7 +1353,7 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0: dependencies: color-convert "^2.0.1" -anymatch@~3.1.1: +anymatch@~3.1.1, anymatch@~3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716" integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg== @@ -1925,6 +1925,21 @@ chokidar@3.5.1: optionalDependencies: fsevents "~2.3.1" +"chokidar@>=3.0.0 <4.0.0": + version "3.5.3" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd" + integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== + dependencies: + anymatch "~3.1.2" + braces "~3.0.2" + glob-parent "~5.1.2" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.6.0" + optionalDependencies: + fsevents "~2.3.2" + cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3: version "1.0.4" resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de" @@ -3180,7 +3195,7 @@ fs.realpath@^1.0.0: resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8= -fsevents@~2.3.1: +fsevents@~2.3.1, fsevents@~2.3.2: version "2.3.2" resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== @@ -3253,7 +3268,7 @@ getpass@^0.1.1: dependencies: assert-plus "^1.0.0" -glob-parent@^5.1.2, glob-parent@~5.1.0: +glob-parent@^5.1.2, glob-parent@~5.1.0, glob-parent@~5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4" integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow== @@ -3494,6 +3509,11 @@ immediate@^3.2.3: resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.3.0.tgz#1aef225517836bcdf7f2a2de2600c79ff0269266" integrity sha512-HR7EVodfFUdQCTIeySw+WDRFJlPcLOJbXfwwZ7Oom6tjsvZ3bOkCDJHehQC3nxJrv7+f9XecwazynjU8e4Vw3Q== +immutable@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23" + integrity sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw== + import-fresh@^3.0.0, import-fresh@^3.2.1: version "3.3.0" resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b" @@ -4915,6 +4935,13 @@ readdirp@~3.5.0: dependencies: picomatch "^2.2.1" +readdirp@~3.6.0: + version "3.6.0" + resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7" + integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA== + dependencies: + picomatch "^2.2.1" + regenerator-runtime@0.13.4: version "0.13.4" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.4.tgz#e96bf612a3362d12bb69f7e8f74ffeab25c7ac91" @@ -5063,6 +5090,15 @@ safe-event-emitter@^1.0.1: resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== +sass@^1.51.0: + version "1.51.0" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.51.0.tgz#25ea36cf819581fe1fe8329e8c3a4eaaf70d2845" + integrity sha512-haGdpTgywJTvHC2b91GSq+clTKGbtkkZmVAb82jZQN/wTy6qs8DdFm2lhEQbEwrY0QDRgSQ3xDurqM977C3noA== + dependencies: + chokidar ">=3.0.0 <4.0.0" + immutable "^4.0.0" + source-map-js ">=0.6.2 <2.0.0" + scheduler@^0.19.1: version "0.19.1" resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196" @@ -5207,6 +5243,11 @@ slice-ansi@^4.0.0: astral-regex "^2.0.0" is-fullwidth-code-point "^3.0.0" +"source-map-js@>=0.6.2 <2.0.0": + version "1.0.2" + resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" + integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== + source-map@0.7.3: version "0.7.3" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383" From 48ae037ba7241528e51bb685cf60ff0f8eed816b Mon Sep 17 00:00:00 2001 From: Tuncay Kaplan Date: Thu, 12 May 2022 19:14:20 +0300 Subject: [PATCH 2/3] test commit --- components/Button/Button.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx index 446bb71..d8cdc3c 100644 --- a/components/Button/Button.tsx +++ b/components/Button/Button.tsx @@ -1,5 +1,4 @@ import { FC } from 'react'; - interface ButtonProps { isEnabled?: boolean; onClick: () => void; From 1bee24fe6ee3e994c9c2ebd07d50e7118d5fb5d2 Mon Sep 17 00:00:00 2001 From: Tuncay Kaplan Date: Thu, 12 May 2022 19:20:11 +0300 Subject: [PATCH 3/3] fix typing error --- components/ParcelProperty/ParcelProperty.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/ParcelProperty/ParcelProperty.tsx b/components/ParcelProperty/ParcelProperty.tsx index 354921a..10cf202 100644 --- a/components/ParcelProperty/ParcelProperty.tsx +++ b/components/ParcelProperty/ParcelProperty.tsx @@ -3,7 +3,7 @@ import { FC } from 'react'; export type ParcelPropertyProps = { name: string; value: string; - tooltip: string; + tooltip?: string; iconPath: string; }; export const ParcelProperty: FC = ({ name, value, tooltip, iconPath }) => (