From 9414314e96c017ca3842c6f21293d7a17bfc1a97 Mon Sep 17 00:00:00 2001 From: codevictory Date: Thu, 23 Dec 2021 23:17:40 +0200 Subject: [PATCH] Make registration page responsive. --- src/components/DateAndPlace.scss | 6 ++- src/components/DateAndPlace.tsx | 2 +- src/components/LanguagePicker.scss | 8 ++- src/components/LanguagePicker.tsx | 18 ++++--- src/components/RegForm.scss | 7 +++ src/components/RegistrationHeader.scss | 17 +++++++ src/constants/localization/common/fi.ts | 2 +- src/constants/localization/registration/en.ts | 2 + src/constants/localization/registration/fi.ts | 2 + src/pages/Registration.scss | 50 ++++++++++++++++++- src/pages/Registration.tsx | 25 +++++----- 11 files changed, 112 insertions(+), 27 deletions(-) diff --git a/src/components/DateAndPlace.scss b/src/components/DateAndPlace.scss index 2385834..4533416 100644 --- a/src/components/DateAndPlace.scss +++ b/src/components/DateAndPlace.scss @@ -1,9 +1,8 @@ @import '../colors.scss'; -.dateAndPlace { +.DateAndPlace { text-align: center; text-transform: uppercase; - font-size: calc(10px + 2vmin); margin-bottom: 1rem; h2 { @@ -30,3 +29,6 @@ } } } + +@media screen and (max-width: 600px) { +} diff --git a/src/components/DateAndPlace.tsx b/src/components/DateAndPlace.tsx index bed6938..16ab796 100644 --- a/src/components/DateAndPlace.tsx +++ b/src/components/DateAndPlace.tsx @@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl'; export const DateAndPlace = (props: { size: string }) => { return ( -
+

diff --git a/src/components/LanguagePicker.scss b/src/components/LanguagePicker.scss index f0d7a4e..dff531b 100644 --- a/src/components/LanguagePicker.scss +++ b/src/components/LanguagePicker.scss @@ -1,6 +1,6 @@ @import '../colors.scss'; -h1 { +.LanguagePicker { text-align: center; color: $brown-text !important; font-family: 'Montserrat-Medium'; @@ -16,3 +16,9 @@ h1 { background-color: #e4e4de; } } + +@media screen and (max-width: 600px) { + .LanguagePicker { + font-size: 1.6rem; + } +} diff --git a/src/components/LanguagePicker.tsx b/src/components/LanguagePicker.tsx index a55c5c4..d0500b2 100644 --- a/src/components/LanguagePicker.tsx +++ b/src/components/LanguagePicker.tsx @@ -1,13 +1,15 @@ import { useRecoilState } from 'recoil'; import { currentLanguage } from '../atoms/language'; -import "./LanguagePicker.scss" +import './LanguagePicker.scss'; export const LanguagePicker = () => { - const [lang, setLang] = useRecoilState(currentLanguage) + const [lang, setLang] = useRecoilState(currentLanguage); - return ( -

- | | -

- ) -} \ No newline at end of file + return ( +

+ |{' '} + |{' '} + +

+ ); +}; diff --git a/src/components/RegForm.scss b/src/components/RegForm.scss index a9d2be9..0121490 100644 --- a/src/components/RegForm.scss +++ b/src/components/RegForm.scss @@ -71,3 +71,10 @@ form#registration { background-color: $background !important; } } + +@media screen and (max-width: 600px) { + .submitButton { + max-width: 100%; + white-space: break-spaces; + } +} diff --git a/src/components/RegistrationHeader.scss b/src/components/RegistrationHeader.scss index b626241..f934d3c 100644 --- a/src/components/RegistrationHeader.scss +++ b/src/components/RegistrationHeader.scss @@ -20,3 +20,20 @@ } } } + +@media screen and (max-width: 600px) { + .Diamond { + margin: 0; + width: 0; + height: 0; + } + + .App-header { + flex-direction: column; + + h1 { + font-size: 2rem; + margin-bottom: -3rem; + } + } +} diff --git a/src/constants/localization/common/fi.ts b/src/constants/localization/common/fi.ts index 985957f..19b8376 100644 --- a/src/constants/localization/common/fi.ts +++ b/src/constants/localization/common/fi.ts @@ -1,6 +1,6 @@ export const common: Record = { "common.lintu": "Lintu", "common.maslo": "Maslo", - "common.datetime": "Elokuussa 27 | 11:00", + "common.datetime": "Elokuun 27 | 11:00", "common.place": "Seurantalo | Livonsaari" } \ No newline at end of file diff --git a/src/constants/localization/registration/en.ts b/src/constants/localization/registration/en.ts index 2e2151d..4b56fc9 100644 --- a/src/constants/localization/registration/en.ts +++ b/src/constants/localization/registration/en.ts @@ -1,5 +1,7 @@ export const registration: Record = { "registration.welcome": "Welcome to our wedding table", + "registration.datetime": "27th of August from 11:00 on", + "registration.place": "In Seurantalo of Livonsaari", "registration.questions": "If you have any question about:\nmushrooms\ndangerous animals", "registration.about": "We will be updating the program and menu in lintujamaslo.net", "registration.saveTheLink": "Save the link", diff --git a/src/constants/localization/registration/fi.ts b/src/constants/localization/registration/fi.ts index 2f6109a..69e83bc 100644 --- a/src/constants/localization/registration/fi.ts +++ b/src/constants/localization/registration/fi.ts @@ -1,5 +1,7 @@ export const registration: Record = { "registration.welcome": "Tervetuloa häihimme", + "registration.datetime": "Elokuun 27. päivänä kello 11:00 alkaen", + "registration.place": "Livonsaaren Seurantalolla", "registration.questions": "Jos sinulla on mitään kysymyksiä\nsienistä\nvaarallisista pedoista", "registration.about": "Päivitämme menua ja ohjelmaa osoitteeseen lintujamaslo.net", "registration.saveTheLink": "Laita linkki talteen", diff --git a/src/pages/Registration.scss b/src/pages/Registration.scss index ccb0aef..73a2ac0 100644 --- a/src/pages/Registration.scss +++ b/src/pages/Registration.scss @@ -5,6 +5,7 @@ align-items: center; flex-direction: column; white-space: pre-line; + text-align: center; .Registration-main { display: flex; @@ -13,14 +14,27 @@ max-width: 50%; text-transform: uppercase; + .Registration-welcome { + margin-bottom: 0; + text-align: center; + } + img { max-width: 60%; } + h1 { + font-family: 'Montserrat-Medium'; + text-align: center; + color: $brown-text; + font-size: 2.3rem; + } + h2 { color: $brown-text !important; font-family: 'Montserrat-Light'; margin-top: -1rem; + font-size: 2rem; } } @@ -28,8 +42,10 @@ max-width: 23rem; margin-top: 3rem; text-transform: uppercase; - h2 { - text-align: center; + max-width: 30%; + + p { + font-size: 1.5rem; color: $brown-text !important; } } @@ -39,3 +55,33 @@ justify-content: center; } } + +@media screen and (max-width: 600px) { + .Registration { + .Registration-main { + max-width: 80%; + + .Registration-welcome { + color: $green-text !important; + margin-bottom: 28px; + margin-top: 0px; + } + } + + .Registration-desc { + max-width: 90%; + p { + font-family: 'Montserrat-Medium'; + } + } + + h2 { + font-size: 1.5rem !important; + text-align: center; + } + + h1 { + font-size: 2rem !important; + } + } +} diff --git a/src/pages/Registration.tsx b/src/pages/Registration.tsx index 697cf75..92c8596 100644 --- a/src/pages/Registration.tsx +++ b/src/pages/Registration.tsx @@ -12,28 +12,29 @@ export const Registration = () => {
-

+

-
- +

+

+

- +

-

+

-

-

+

+

-

-

+

+

-

-

+

+

-

+