diff --git a/package-lock.json b/package-lock.json index e93e604..de33beb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "nnk", - "version": "0.5.0", + "version": "0.6.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index f6d722c..7e6235c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nnk", - "version": "0.5.0", + "version": "0.6.0", "private": true, "description": "No Named Kitchen: Supporting People on the Move", "repository": "https://github.com/annabranco/nnk", diff --git a/packages/nnk/src/assets/images/bgs/home.jpg b/packages/nnk/src/assets/images/bgs/home.jpg new file mode 100644 index 0000000..143fb15 Binary files /dev/null and b/packages/nnk/src/assets/images/bgs/home.jpg differ diff --git a/packages/nnk/src/assets/images/index.js b/packages/nnk/src/assets/images/index.js index 1dbae1a..d963f5e 100644 --- a/packages/nnk/src/assets/images/index.js +++ b/packages/nnk/src/assets/images/index.js @@ -8,6 +8,7 @@ export const Logo = require('./logos/logo.png'); // Main export const HomeBG = require('./bgs/homeBg.jpg'); +export const Home = require('./bgs/home.jpg'); export const Photo01 = require('./spots/base01.jpeg'); export const Photo02 = require('./spots/base02.jpeg'); export const Photo03 = require('./spots/base03.jpeg'); diff --git a/packages/nnk/src/components/controllers/App/index.js b/packages/nnk/src/components/controllers/App/index.js index 9f1098d..efdcb97 100644 --- a/packages/nnk/src/components/controllers/App/index.js +++ b/packages/nnk/src/components/controllers/App/index.js @@ -2,7 +2,10 @@ import React from 'react'; // eslint-disable-line import/no-extraneous-dependenc import { Global, connect, Head } from 'frontity'; import Switch from '@frontity/components/switch'; // import Footer from '../../views/Footer'; +import { fontText, fontTitle } from '../../../setup/themes'; import Header from '../Header'; +import HelpUs from '../../views/HelpUs'; +import JumpToTheFieldSection from '../../views/JumpToTheField'; import List from '../../core/List'; import Loading from '../../core/Loading'; import MainPage from '../MainPage'; @@ -12,12 +15,9 @@ import Title from '../../core/HtmlTitle'; import WhatSection from '../../views/What'; import WhereSection from '../../views/Where'; import WhySection from '../../views/Why'; -import JumpToTheFieldSection from '../../views/JumpToTheField'; +import { StatePropType } from '../../../types'; import { globalStyles } from '../../../setup/globalStyles'; import { MainArea } from './styles'; -import { StatePropType } from '../../../types'; -import { fontText, fontTitle } from '../../../setup/themes'; -import HelpUs from '../../views/HelpUs'; /** * Theme is the root React component of our theme. The one we will export @@ -26,6 +26,7 @@ import HelpUs from '../../views/HelpUs'; const App = ({ state }) => { const { colors } = state.theme; const data = state.source.get(state.router.link); + // console.log('$$$ navigator.userAgent', window.navigator.userAgent); return ( <> diff --git a/packages/nnk/src/components/controllers/App/styles.js b/packages/nnk/src/components/controllers/App/styles.js index 1b345d4..e69d042 100644 --- a/packages/nnk/src/components/controllers/App/styles.js +++ b/packages/nnk/src/components/controllers/App/styles.js @@ -5,8 +5,9 @@ export const MainArea = styled.main` display: flex; justify-content: center; background-color: ${({ colors }) => colors.primary}; - padding: 0 ${config.mainPadding}; - min-height: calc(100vh - 80px - 76px); /* Header & Footer */ + /* min-height: calc(100vh - 80px - 76px); Header & Footer */ + min-height: calc(100vh - 80px); /* Header & Footer */ width: 100%; + padding: 0 ${config.mainPadding}; `; MainArea.displayName = 'MainArea'; diff --git a/packages/nnk/src/components/controllers/Header/index.js b/packages/nnk/src/components/controllers/Header/index.js index 278eea4..76ab827 100644 --- a/packages/nnk/src/components/controllers/Header/index.js +++ b/packages/nnk/src/components/controllers/Header/index.js @@ -1,17 +1,17 @@ import React, { useEffect, useState } from 'react'; // eslint-disable-line import/no-extraneous-dependencies import { connect } from 'frontity'; -import Nav from '../Nav'; -import MobileNav from '../MobileNav'; -import SpanishFlag from '../../../assets/images/icons/es.png'; -import EnglishFlag from '../../../assets/images/icons/uk.png'; -import { HeaderContainer, LanguageFlag, Logo } from './styles'; import config from '../../../setup/config'; -import { LIGHT, DARK } from '../../../constants/theme'; -import Link from '../../core/Link'; -import { StatePropType, ActionsPropType } from '../../../types'; import { getMediaQuery } from '../../../utils'; import { MOBILE } from '../../../constants/devices'; +import Link from '../../core/Link'; +import MobileNav from '../MobileNav'; +import Nav from '../Nav'; +import EnglishFlag from '../../../assets/images/icons/uk.png'; +import SpanishFlag from '../../../assets/images/icons/es.png'; +import { LIGHT, DARK } from '../../../constants/theme'; import { LogoSmall } from '../../../assets/images'; +import { StatePropType, ActionsPropType } from '../../../types'; +import { HeaderContainer, LanguageFlag, Logo } from './styles'; const Header = ({ state, actions }) => { const [activeLanguage, changeLanguage] = useState('es'); diff --git a/packages/nnk/src/components/controllers/Header/styles.js b/packages/nnk/src/components/controllers/Header/styles.js index ba33ed8..0e41da1 100644 --- a/packages/nnk/src/components/controllers/Header/styles.js +++ b/packages/nnk/src/components/controllers/Header/styles.js @@ -7,7 +7,6 @@ export const HeaderContainer = styled.header` justify-content: space-between; align-items: flex-start; background-color: ${({ colors }) => colors.primary}; - height: 100px; width: 100%; padding: 0 20px; diff --git a/packages/nnk/src/components/controllers/MainPage/index.js b/packages/nnk/src/components/controllers/MainPage/index.js index 2c568d8..b90ef08 100644 --- a/packages/nnk/src/components/controllers/MainPage/index.js +++ b/packages/nnk/src/components/controllers/MainPage/index.js @@ -1,13 +1,14 @@ import { connect } from 'frontity'; import React, { useEffect } from 'react'; // eslint-disable-line import/no-extraneous-dependencies -import PageSection from '../../views/HomePageModules'; +import { getMediaQuery } from '../../../utils'; +import { HOMEPAGE_TEXTS, WHY_TEXTS, VOLUNTEER_TEXTS } from '../../../db'; +import { MOBILE } from '../../../constants/devices'; import BasicModule from '../../views/HomePageModules/Basic'; import MainModule from '../../views/HomePageModules/Main'; +import PageSection from '../../views/HomePageModules'; import VolunteerModule from '../../views/HomePageModules/Volunteer'; -import { HOMEPAGE_TEXTS, WHY_TEXTS, VOLUNTEER_TEXTS } from '../../../db'; - -import { MainContainer } from './styles'; import { StatePropType } from '../../../types'; +import { MainContainer } from './styles'; const MainPage = ({ state }) => { const { colors, language } = state.theme; @@ -24,7 +25,10 @@ const MainPage = ({ state }) => { return ( - + colors && colors.primary}; width: 100%; + overflow-y: hidden; `; MainContainer.displayName = 'MainContainer'; diff --git a/packages/nnk/src/components/controllers/MobileNav/index.js b/packages/nnk/src/components/controllers/MobileNav/index.js index f392af2..cf09b02 100644 --- a/packages/nnk/src/components/controllers/MobileNav/index.js +++ b/packages/nnk/src/components/controllers/MobileNav/index.js @@ -2,8 +2,8 @@ import React from 'react'; // eslint-disable-line import/no-extraneous-dependenc import { connect, Global } from 'frontity'; import { CloseIcon, HamburgerIcon } from '../Header/MenuIcon'; import MenuModal from '../../views/MenuModal'; -import { MenuToggle } from './styles'; import { ActionsPropType, StatePropType } from '../../../types'; +import { MenuToggle } from './styles'; const MobileMenu = ({ state, actions }) => { const { colors, isMobileMenuOpen, language } = state.theme; diff --git a/packages/nnk/src/components/controllers/Nav/index.js b/packages/nnk/src/components/controllers/Nav/index.js index 43ec564..1e9e9af 100644 --- a/packages/nnk/src/components/controllers/Nav/index.js +++ b/packages/nnk/src/components/controllers/Nav/index.js @@ -1,11 +1,9 @@ import React, { useEffect } from 'react'; // eslint-disable-line import/no-extraneous-dependencies import { connect } from 'frontity'; import { MAIN_SECTIONS } from '../../../db'; -// import Link from '../../core/Link'; import NavItem from '../../views/NavItem'; -// import { MAIN_SECTIONS } from '../../core/sections'; -import { NavContainer } from './styles'; import { StatePropType } from '../../../types'; +import { NavContainer } from './styles'; const Nav = ({ state }) => { const { colors, language } = state.theme; diff --git a/packages/nnk/src/components/core/ErrorComponent/index.js b/packages/nnk/src/components/core/ErrorComponent/index.js index 6af2e91..75bdd1f 100644 --- a/packages/nnk/src/components/core/ErrorComponent/index.js +++ b/packages/nnk/src/components/core/ErrorComponent/index.js @@ -1,8 +1,8 @@ import React, { useEffect } from 'react'; // eslint-disable-line import/no-extraneous-dependencies import { connect } from 'frontity'; import { ERROR_TEXTS } from '../../../db'; -import { Container, Description, Text, Title } from './styles'; import { StatePropType } from '../../../types'; +import { Container, Description, Text, Title } from './styles'; const Page404 = ({ state }) => { const data = state.source.get(state.router.link); diff --git a/packages/nnk/src/components/core/ErrorComponent/styles.js b/packages/nnk/src/components/core/ErrorComponent/styles.js index 95dd3b1..c96c9ab 100644 --- a/packages/nnk/src/components/core/ErrorComponent/styles.js +++ b/packages/nnk/src/components/core/ErrorComponent/styles.js @@ -1,5 +1,12 @@ import { styled } from 'frontity'; -import { BaseText, BaseTitle, sizeXLargeTitle } from '../../../setup/themes'; +import { + BaseText, + BaseTitle, + sizeSmallTitle, + sizeMedium, + sizeXLargeTitle, + sizeXXLargeTitle +} from '../../../setup/themes'; export const Container = styled.div` display: flex; @@ -7,10 +14,14 @@ export const Container = styled.div` align-items: center; justify-content: center; margin: 0; + width: 100%; height: calc(100vh - 155px); - width: 800px; padding: 24px; text-align: center; + + @media only screen and (min-width: 768px) { + width: 800px; + } `; Container.displayName = 'Container'; @@ -18,6 +29,14 @@ export const Title = styled(BaseTitle)` margin: 0 auto 20px; font-size: ${sizeXLargeTitle}; color: ${({ colors }) => colors && colors.terciary}; + + @media only screen and (min-width: 375px) { + font-size: ${sizeXXLargeTitle}; + } + + @media only screen and (min-width: 1024px) { + font-size: ${sizeXLargeTitle}; + } `; Title.displayName = 'Title'; @@ -29,6 +48,11 @@ Description.displayName = 'Description'; export const Text = styled(BaseText)` color: ${({ colors }) => colors && colors.secondary}; - white-space: pre; + font-size: ${sizeSmallTitle}; + + @media only screen and (min-width: 1024px) { + white-space: pre; + font-size: ${sizeMedium}; + } `; Text.displayName = 'Text'; diff --git a/packages/nnk/src/components/core/FeaturedMedia/index.js b/packages/nnk/src/components/core/FeaturedMedia/index.js index d1c808f..c794702 100644 --- a/packages/nnk/src/components/core/FeaturedMedia/index.js +++ b/packages/nnk/src/components/core/FeaturedMedia/index.js @@ -1,8 +1,8 @@ import React from 'react'; // eslint-disable-line import/no-extraneous-dependencies import { connect } from 'frontity'; import { number } from 'prop-types'; -import { Container, StyledImage } from './styles'; import { StatePropType } from '../../../types'; +import { Container, StyledImage } from './styles'; const FeaturedMedia = ({ state, id }) => { const media = state.source.attachment[id]; diff --git a/packages/nnk/src/components/core/Link/index.js b/packages/nnk/src/components/core/Link/index.js index 07551a5..5d91d80 100644 --- a/packages/nnk/src/components/core/Link/index.js +++ b/packages/nnk/src/components/core/Link/index.js @@ -1,8 +1,8 @@ import React from 'react'; // eslint-disable-line import/no-extraneous-dependencies import { connect } from 'frontity'; import { node, string } from 'prop-types'; -import { StyledLink } from './styles'; import { ActionsPropType, StatePropType } from '../../../types'; +import { StyledLink } from './styles'; const Link = ({ state, diff --git a/packages/nnk/src/components/core/List/list-item.js b/packages/nnk/src/components/core/List/list-item.js index 52d8fd4..f87bd9b 100644 --- a/packages/nnk/src/components/core/List/list-item.js +++ b/packages/nnk/src/components/core/List/list-item.js @@ -1,8 +1,8 @@ import React from 'react'; import { connect } from 'frontity'; -import { any } from 'prop-types'; import Link from '../Link'; import FeaturedMedia from '../FeaturedMedia'; +import { ItemPropType, StatePropType } from '../../../types'; import { ArticleWrapper, AuthorName, @@ -12,7 +12,6 @@ import { Title, InfoBox } from './styles'; -import { ItemPropType, StatePropType } from '../../../types'; /** * Item Component diff --git a/packages/nnk/src/components/core/List/list.js b/packages/nnk/src/components/core/List/list.js index c6a82e6..8488177 100644 --- a/packages/nnk/src/components/core/List/list.js +++ b/packages/nnk/src/components/core/List/list.js @@ -2,8 +2,8 @@ import React from 'react'; import { connect, decode } from 'frontity'; import Item from './list-item'; import Pagination from './pagination'; -import { Container, Header } from './styles'; import { StatePropType } from '../../../types'; +import { Container, Header } from './styles'; const List = ({ state }) => { const { colors } = state.theme; diff --git a/packages/nnk/src/components/core/List/pagination.js b/packages/nnk/src/components/core/List/pagination.js index 9ce1af9..9c941c7 100644 --- a/packages/nnk/src/components/core/List/pagination.js +++ b/packages/nnk/src/components/core/List/pagination.js @@ -1,8 +1,8 @@ import React, { useEffect } from 'react'; import { connect } from 'frontity'; import Link from '../Link'; -import { Text } from './styles'; import { ActionsPropType, StatePropType } from '../../../types'; +import { Text } from './styles'; /** * Pagination Component diff --git a/packages/nnk/src/components/core/List/styles.js b/packages/nnk/src/components/core/List/styles.js index 9e43f9d..9e20803 100644 --- a/packages/nnk/src/components/core/List/styles.js +++ b/packages/nnk/src/components/core/List/styles.js @@ -19,26 +19,24 @@ export const ArticleWrapper = styled.article` `} `; -export const Title = styled.h3` - font-size: 2rem; - margin: 0; - padding-top: 24px; - padding-bottom: 8px; - box-sizing: border-box; +export const AuthorName = styled.span` + font-size: 0.9em; +`; - ${({ isReport, colors }) => +export const Excerpt = styled.div` + line-height: 1.6em; + + ${({ isReport }) => isReport && css` - width: 100%; - text-align: center; - color: ${colors.terciary}; + display: flex; + flex-direction: column; + margin: 20px 30px; + align-items: center; + text-align: justify; `} `; -export const AuthorName = styled.span` - font-size: 0.9em; -`; - export const InfoBox = styled.div` ${({ isReport }) => isReport && @@ -51,10 +49,6 @@ export const InfoBox = styled.div` `} `; -export const StyledLink = styled(Link)` - padding: 15px 0; -`; - export const PublishDate = styled.span` font-size: 0.9em; ${({ isReport, colors }) => @@ -65,20 +59,25 @@ export const PublishDate = styled.span` `} `; -export const Excerpt = styled.div` - line-height: 1.6em; +export const StyledLink = styled(Link)` + padding: 15px 0; +`; - ${({ isReport }) => +export const Title = styled.h3` + font-size: 2rem; + margin: 0; + padding-top: 24px; + padding-bottom: 8px; + box-sizing: border-box; + + ${({ isReport, colors }) => isReport && css` - display: flex; - flex-direction: column; - margin: 20px 30px; - align-items: center; - text-align: justify; + width: 100%; + text-align: center; + color: ${colors.terciary}; `} `; - // --- List export const Container = styled.section` diff --git a/packages/nnk/src/components/core/Post/index.js b/packages/nnk/src/components/core/Post/index.js index a6f4fb0..5ec6cc1 100644 --- a/packages/nnk/src/components/core/Post/index.js +++ b/packages/nnk/src/components/core/Post/index.js @@ -1,25 +1,24 @@ import React, { useEffect } from 'react'; // eslint-disable-line import/no-extraneous-dependencies import { connect } from 'frontity'; -import { any } from 'prop-types'; -import List from '../List'; +import { ACTIONS_TEXTS } from '../../../db'; import FeaturedMedia from '../FeaturedMedia'; +import List from '../List'; +import { + ActionsPropType, + LibrariesPropTypes, + StatePropType +} from '../../../types'; import { Author, + BackToReports, Container, Content, DateWrapper, StyledLink, - Title, - BackToReports + Title } from './styles'; -import { - ActionsPropType, - LibrariesPropTypes, - StatePropType -} from '../../../types'; -import { ACTIONS_TEXTS } from '../../../db'; -const Post = ({ state, actions, libraries }) => { +const Post = ({ actions, libraries, state }) => { const { colors, language } = state.theme; const data = state.source.get(state.router.link); const post = state.source[data.type][data.id]; @@ -49,8 +48,8 @@ const Post = ({ state, actions, libraries }) => {
{/* Only display author and date on posts */} diff --git a/packages/nnk/src/components/core/Post/styles.js b/packages/nnk/src/components/core/Post/styles.js index 0c9d930..87204d3 100644 --- a/packages/nnk/src/components/core/Post/styles.js +++ b/packages/nnk/src/components/core/Post/styles.js @@ -1,11 +1,19 @@ import { css, styled } from 'frontity'; -import { sizeLargeTitle } from '../../../setup/themes'; +import { + sizeLarge, + sizeLargeTitle, + sizeSmallTitle +} from '../../../setup/themes'; import Link from '../Link'; export const Container = styled.div` margin: 0; - width: 800px; + width: 100%; padding: 24px; + + @media only screen and (min-width: 768px) { + width: 800px; + } `; Container.displayName = 'Container'; @@ -61,6 +69,11 @@ export const Content = styled.div` text-align: justify; `} + font-size: ${sizeSmallTitle}; + @media only screen and (min-width: 1200px) { + font-size: ${sizeLarge}; + } + /* WordPress Core Align Classes */ @media (min-width: 420px) { @@ -100,6 +113,7 @@ export const Content = styled.div` span { line-height: 2; margin: 20px auto; + font-size: ${sizeSmallTitle}; } li:not([class]), @@ -109,14 +123,12 @@ export const Content = styled.div` list-style: disc; } - span { - line-height: 2; - margin: 20px auto; - } - form { margin: 30px auto; - margin-left: 50px; + + @media only screen and (min-width: 768px) { + margin-left: 50px; + } } img { diff --git a/packages/nnk/src/components/core/sections.js b/packages/nnk/src/components/core/sections.js deleted file mode 100644 index aa95292..0000000 --- a/packages/nnk/src/components/core/sections.js +++ /dev/null @@ -1,40 +0,0 @@ -export const MAIN_SECTIONS = [ - { - title: 'our 3Ws', - subItems: [ - { - title: 'What', - link: '/players/' - }, - { - title: 'Why', - link: '/the-club/' - }, - { - title: 'Where', - link: '/category/matches/' - } - ] - }, - { - title: 'No Name News', - link: '/' - }, - { - title: 'Support the Move', - subItems: [ - { - title: 'Make a Donation', - link: '/players/merida/' - }, - { - title: 'Jump to the Field', - link: '/tag/junior/' - }, - { - title: 'Store', - link: '/contact-us/' - } - ] - } -]; diff --git a/packages/nnk/src/components/views/Footer/index.js b/packages/nnk/src/components/views/Footer/index.js index 3cd7350..ff6b1e0 100644 --- a/packages/nnk/src/components/views/Footer/index.js +++ b/packages/nnk/src/components/views/Footer/index.js @@ -1,7 +1,7 @@ import React from 'react'; // eslint-disable-line import/no-extraneous-dependencies import InDevelopment from '../InDevelopment'; -import { FooterContainer, FooterLink } from './styles'; import { ColorsPropType } from '../../../types'; +import { FooterContainer, FooterLink } from './styles'; const Footer = ({ colors }) => ( <FooterContainer colors={colors}> diff --git a/packages/nnk/src/components/views/HelpUs/index.js b/packages/nnk/src/components/views/HelpUs/index.js index 31323d2..3dcc31d 100644 --- a/packages/nnk/src/components/views/HelpUs/index.js +++ b/packages/nnk/src/components/views/HelpUs/index.js @@ -1,45 +1,45 @@ import React, { useEffect, useState } from 'react'; import { connect } from 'frontity'; -import SectionHeader from '../SectionHeader'; import config from '../../../setup/config'; import { getSocialLinks, validateForm } from '../../../utils'; import { DONATION_TEXTS } from '../../../db'; +import SectionHeader from '../SectionHeader'; +import SocialModule from '../SocialContainer'; import { - Photo09, - PayPal, + CrossedFork, GoFundMe, - Teaming, - CrossedFork + PayPal, + Photo09, + Teaming } from '../../../assets/images'; +import { StatePropType } from '../../../types'; import { Content, - SectionFooter, - FooterText, + DonorBox, + Field, FooterSeparator, - Section, - SubsectionWrapper, - Values, - ValueTitle, - ValueDescription, - PartnersLogos, - Logo, - TransferInfo, + FooterText, + FormArea, Instructions, - ItemTitle, ItemDescription, - DonorBox, + ItemTitle, + Label, + Logo, + PartnersLogos, + Section, + SectionFooter, + SendButton, Subscription, - ValueItem, SubscriptionTitle, - FormArea, - Field, - Label, + SubscriptionTitleHighlight, + SubsectionWrapper, TextField, - SendButton, - SubscriptionTitleHighlight + TransferInfo, + ValueDescription, + ValueItem, + ValueTitle, + Values } from './styles'; -import { StatePropType } from '../../../types'; -import SocialModule from '../SocialContainer'; const HelpUs = ({ state }) => { const { colors, language } = state.theme; @@ -81,7 +81,7 @@ const HelpUs = ({ state }) => { // if (message === 'OK') { // toggleEmailSent(true); // } else { - // console.warn('Failed sending message though server', message); + // console.warn('Failed sending message through server', message); // } // }); }; @@ -104,7 +104,7 @@ const HelpUs = ({ state }) => { <SectionHeader colors={colors} img={Photo09} - position="0 30%" + position="100% 30%" socialLinks={socialLinks} title={texts.title} /> @@ -166,9 +166,9 @@ const HelpUs = ({ state }) => { {texts.form.name} </Label> <TextField - onKeyUp={event => updateForm(event.target.value, 'name')} id="name" name="name" + onKeyUp={event => updateForm(event.target.value, 'name')} placeholder={texts.form.name} type="text" /> @@ -178,9 +178,9 @@ const HelpUs = ({ state }) => { {texts.form.email} </Label> <TextField - onKeyUp={event => updateForm(event.target.value, 'email')} id="email" name="email" + onKeyUp={event => updateForm(event.target.value, 'email')} placeholder={texts.form.email} type="email" /> diff --git a/packages/nnk/src/components/views/HelpUs/styles.js b/packages/nnk/src/components/views/HelpUs/styles.js index db0d16c..6611c64 100644 --- a/packages/nnk/src/components/views/HelpUs/styles.js +++ b/packages/nnk/src/components/views/HelpUs/styles.js @@ -2,25 +2,37 @@ import { styled, css } from 'frontity'; import { BaseText, BaseTitle, + fontTitle, sizeHugeTitle, sizeLarge, sizeLargeTitle, - sizeSmallTitle, - sizeMediumTitle, - fontTitle, sizeMedium, + sizeMediumTitle, sizeSmall, - sizeXXLargeTitle, - sizeXLargeTitle + sizeSmallTitle, + sizeXLarge, + sizeXLargeTitle, + sizeXXLarge } from '../../../setup/themes'; export const Content = styled.div` display: flex; - flex-direction: row; + flex-direction: column; align-items: flex-start; justify-content: center; - width: 75%; - padding: 20px 80px; + width: 100%; + + @media only screen and (min-width: 768px) { + flex-direction: row; + width: 100%; + padding: 20px; + } + + @media only screen and (min-width: 1200px) { + flex-direction: row; + width: 75%; + padding: 20px 80px; + } `; Content.displayName = 'Content'; @@ -34,6 +46,55 @@ DescriptionArea.displayName = 'DescriptionArea'; export const DescriptionTitle = styled(BaseTitle)``; DescriptionTitle.displayName = 'DescriptionTitle'; +export const DonorBox = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border: 1px solid gray; + height: 400px; + width: 100%; +`; +DonorBox.displayName = 'DonorBox'; + +export const FormArea = styled.form` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 0 auto; + width: 80%; + padding: 0; + color: ${({ colors }) => colors && colors.secondary}; + + @media only screen and (min-width: 768px) { + margin: 10px auto; + padding: 10px 0; + } +`; +FormArea.displayName = 'FormArea'; + +export const Field = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 10px auto; + width: 100%; +`; +Field.displayName = 'Field'; + +export const FooterSeparator = styled.img` + width: 40px; +`; +FooterSeparator.displayName = 'FooterSeparator'; + +export const FooterText = styled(BaseTitle)` + font-size: ${sizeXLargeTitle}; + letter-spacing: 0.5rem; +`; +FooterText.displayName = 'FooterText'; + export const Image = styled.div` height: 160px; width: 300px; @@ -48,104 +109,76 @@ export const Image = styled.div` `; Image.displayName = 'Image'; -export const Intro = styled(BaseText)` - text-align: justify; +export const Instructions = styled(BaseText)` font-size: ${sizeLarge}; - color: ${({ colors }) => colors && colors.secondary}; -`; -Intro.displayName = 'Intro'; -export const Map = styled.img` - width: 100%; -`; -Map.displayName = 'Map'; + @media only screen and (min-width: 375px) { + font-size: ${sizeLargeTitle}; + } -export const Program = styled.div` - display: flex; - flex-direction: row; - align-items: flex-start; - justify-content: flex-start; - margin: 30px 50px; + @media only screen and (min-width: 768px) { + font-size: ${sizeMedium}; + } `; -Program.displayName = 'Program'; +Instructions.displayName = 'Instructions'; -export const Section = styled.section` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; +export const Intro = styled(BaseText)` + text-align: justify; + font-size: ${sizeLarge}; color: ${({ colors }) => colors && colors.secondary}; `; -Section.displayName = 'Section'; +Intro.displayName = 'Intro'; -export const SubTitle = styled(BaseTitle)` - margin: 50px auto; - text-align: center; - font-size: ${sizeLargeTitle}; - color: ${({ colors }) => colors && colors.terciary}; -`; -SubTitle.displayName = 'SubTitle'; +export const ItemDescription = styled.span` + display: block; -export const Text = styled(BaseText)` + margin-left: 15px; + font-family: ${fontTitle}; + font-size: ${sizeLarge}; text-align: justify; - color: ${({ colors }) => colors && colors.secondary}; -`; -Text.displayName = 'Text'; + line-height: 1.5; + font-weight: 400; -export const Title = styled(BaseTitle)` - font-size: ${sizeHugeTitle}; - color: ${({ colors }) => colors && colors.secondary}; - width: fit-content; -`; -Title.displayName = 'Title'; + @media only screen and (min-width: 375px) { + font-size: ${sizeLargeTitle}; + } -export const TitleWrapper = styled.div` - position: absolute; - bottom: 10%; - background: ${({ colors }) => colors && colors.primary}; - padding: 0 30px; + @media only screen and (min-width: 768px) { + display: inline; + font-size: ${sizeLarge}; + } `; -TitleWrapper.displayName = 'TitleWrapper'; +ItemDescription.displayName = 'ItemDescription'; -export const SubsectionWrapper = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin: 20px 30px; - width: 60%; +export const ItemTitle = styled(Instructions)` + margin-left: 20px; - &:last-child { - width: 40%; + @media only screen and (min-width: 768px) { + margin-left: 0; } `; -SubsectionWrapper.displayName = 'SubsectionWrapper'; +ItemTitle.displayName = 'ItemTitle'; -export const Values = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - color: ${({ colors }) => colors && colors.secondary}; +export const Label = styled.label` + display: none; `; -Values.displayName = 'Values'; +Label.displayName = 'Label'; -export const ValueTitle = styled.span` - margin-right: 15px; - font-family: ${fontTitle}; - font-size: ${sizeSmallTitle}; - text-align: justify; - line-height: 1.5; +export const Logo = styled.img` + margin: 20px; + height: 60px; + + @media only screen and (min-width: 768px) { + margin: 20px 40px; + height: 70px; + } `; -ValueTitle.displayName = 'ValueTitle'; +Logo.displayName = 'Logo'; -export const ValueDescription = styled(BaseText)` - font-size: 1rem; - text-align: justify; - line-height: 2; +export const Map = styled.img` + width: 100%; `; -ValueDescription.displayName = 'ValueDescription'; +Map.displayName = 'Map'; export const PartnersLogos = styled.div` display: flex; @@ -155,48 +188,77 @@ export const PartnersLogos = styled.div` `; PartnersLogos.displayName = 'PartnersLogos'; -export const Logo = styled.img` - margin: 20px 40px; - height: 70px; +export const Program = styled.div` + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: flex-start; + margin: 30px 50px; `; -Logo.displayName = 'Logo'; +Program.displayName = 'Program'; -export const TransferInfo = styled.div` - margin: 30px auto; - width: 70%; - background: ${({ colors }) => colors && colors.terciary}; - padding: 10px; - text-align: center; +export const Section = styled.section` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; color: ${({ colors }) => colors && colors.secondary}; `; -TransferInfo.displayName = 'TransferInfo'; +Section.displayName = 'Section'; -export const Instructions = styled(BaseText)``; -Instructions.displayName = 'Instructions'; +export const SectionFooter = styled.div` + display: none; + flex-direction: row; + align-items: center; + justify-content: space-between; + margin: 0 auto 40px; + padding: 30px 5px; -export const ItemTitle = styled(Instructions)``; -ItemTitle.displayName = 'ItemTitle'; + ${({ colors }) => + colors && + css` + border-radius: 5px; + border-top: 2px solid ${colors.secondary}; + border-bottom: 4px solid ${colors.secondary}; + `}; -export const ItemDescription = styled.span` - margin-left: 15px; - font-family: ${fontTitle}; - font-size: ${sizeLarge}; - text-align: justify; - line-height: 1.5; - font-weight: 400; + @media only screen and (min-width: 768px) { + display: flex; + width: 90%; + } + + @media only screen and (min-width: 1200px) { + display: flex; + width: 60%; + } `; -ItemDescription.displayName = 'ItemDescription'; +SectionFooter.displayName = 'SectionFooter'; -export const DonorBox = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - border: 1px solid gray; - height: 400px; - width: 100%; +export const SendButton = styled.button` + margin: 10px auto; + height: 30px; + width: 160px; + border-radius: 5px; + color: ${({ colors }) => colors && colors.secondary}; + background: ${({ disabled, colors }) => + disabled ? 'gray' : colors && colors.terciary}; + text-transform: uppercase; + font-size: ${sizeLarge}; + cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')}; + + @media only screen and (min-width: 375px) { + font-size: ${sizeLarge}; + height: 40px; + } + + @media only screen and (min-width: 768px) { + width: 100px; + border-radius: 10; + font-size: ${sizeSmall}; + } `; -DonorBox.displayName = 'DonorBox'; +SendButton.displayName = 'SendButton'; export const Subscription = styled.div` position: relative; @@ -204,106 +266,188 @@ export const Subscription = styled.div` flex-direction: column; align-items: center; justify-content: center; - margin-top: 40px; + margin-top: 60px; padding: 10px 0 0 90px; border: 1px solid gray; + height: 305px; width: 100%; -`; -Subscription.displayName = 'Subscription'; -export const ValueItem = styled.div` - margin: 10px auto; - padding: 10px; + @media only screen and (min-width: 1200px) { + margin-top: 40px; + height: 260px; + } `; -ValueItem.displayName = 'ValueItem'; +Subscription.displayName = 'Subscription'; export const SubscriptionTitle = styled(BaseTitle)` color: ${({ colors }) => colors && colors.secondary}; + font-size: ${sizeLargeTitle}; + + @media only screen and (min-width: 375px) { + font-size: ${sizeXLarge}; + } + + @media only screen and (min-width: 768px) { + margin-top: 20px; + font-size: ${sizeMediumTitle}; + } + + @media only screen and (min-width: 1200px) { + margin-top: 0; + font-size: ${sizeMediumTitle}; + } `; SubscriptionTitle.displayName = 'SubscriptionTitle'; export const SubscriptionTitleHighlight = styled(BaseTitle)` color: ${({ colors }) => colors && colors.terciary}; + font-size: ${sizeLargeTitle}; + + @media only screen and (min-width: 375px) { + font-size: ${sizeXXLarge}; + } + + @media only screen and (min-width: 768px) { + font-size: ${sizeMediumTitle}; + } `; SubscriptionTitleHighlight.displayName = 'SubscriptionTitleHighlight'; -export const FormArea = styled.form` +export const SubsectionWrapper = styled.div` display: flex; flex-direction: column; align-items: center; justify-content: center; - margin: 10px auto; - width: 80%; - padding: 10px 0; - color: ${({ colors }) => colors && colors.secondary}; + margin: 0; + width: 100%; + + @media only screen and (min-width: 768px) { + width: 50%; + margin: 20px; + } + + @media only screen and (min-width: 1200px) { + width: 60%; + margin: 20px 30px; + + &:last-child { + width: 40%; + } + } `; -FormArea.displayName = 'FormArea'; +SubsectionWrapper.displayName = 'SubsectionWrapper'; -export const Field = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin: 10px auto; - width: 100%; +export const SubTitle = styled(BaseTitle)` + margin: 50px auto; + text-align: center; + font-size: ${sizeLargeTitle}; + color: ${({ colors }) => colors && colors.terciary}; `; -Field.displayName = 'Field'; +SubTitle.displayName = 'SubTitle'; -export const Label = styled.label` - display: none; +export const Text = styled(BaseText)` + text-align: justify; + color: ${({ colors }) => colors && colors.secondary}; `; -Label.displayName = 'Label'; +Text.displayName = 'Text'; export const TextField = styled.input` - height: 30px; - width: 82%; + height: 40px; + width: 100%; background: gainsboro; - padding: 5px 20px; + padding: 0 10px; font-weight: 400; box-sizing: border-box; - font-size: ${sizeMedium}; + font-size: ${sizeMediumTitle}; + + @media only screen and (min-width: 768px) { + height: 30px; + width: 90%; + padding: 5px 20px; + font-size: ${sizeMedium}; + } `; TextField.displayName = 'TextField'; -export const SendButton = styled.button` - margin: 10px auto; - height: 30px; - width: 100px; +export const Title = styled(BaseTitle)` + font-size: ${sizeHugeTitle}; color: ${({ colors }) => colors && colors.secondary}; - background: ${({ disabled, colors }) => - disabled ? 'gray' : colors && colors.terciary}; - text-transform: uppercase; - font-size: ${sizeSmall}; - cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')}; + width: fit-content; `; -SendButton.displayName = 'SendButton'; +Title.displayName = 'Title'; -export const SectionFooter = styled.div` - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - margin: 0 auto 40px; - padding: 30px 5px; - width: 60%; +export const TitleWrapper = styled.div` + position: absolute; + bottom: 10%; + background: ${({ colors }) => colors && colors.primary}; + padding: 0 30px; +`; +TitleWrapper.displayName = 'TitleWrapper'; - ${({ colors }) => - colors && - css` - border-radius: 5px; - border-top: 2px solid ${colors.secondary}; - border-bottom: 4px solid ${colors.secondary}; - `}; +export const TransferInfo = styled.div` + margin: 30px auto; + width: 100%; + background: ${({ colors }) => colors && colors.terciary}; + padding: 10px; + text-align: left; + color: ${({ colors }) => colors && colors.secondary}; + border-radius: 10px; + + @media only screen and (min-width: 768px) { + text-align: center; + border-radius: 5px; + } + + @media only screen and (min-width: 1200px) { + width: 70%; + text-align: center; + border-radius: 0; + } `; -SectionFooter.displayName = 'SectionFooter'; +TransferInfo.displayName = 'TransferInfo'; -export const FooterText = styled(BaseTitle)` - font-size: ${sizeXLargeTitle}; - letter-spacing: 0.5rem; +export const ValueDescription = styled(BaseText)` + font-size: ${sizeSmallTitle}; + text-align: left; + line-height: 2; + + @media only screen and (min-width: 768px) { + font-size: ${sizeMedium}; + text-align: justify; + } `; -FooterText.displayName = 'FooterText'; +ValueDescription.displayName = 'ValueDescription'; -export const FooterSeparator = styled.img` - width: 40px; +export const ValueItem = styled.div` + margin: 0 auto; + padding: 10px; + + @media only screen and (min-width: 768px) { + margin: 10px auto; + } `; -FooterSeparator.displayName = 'FooterSeparator'; +ValueItem.displayName = 'ValueItem'; + +export const Values = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: ${({ colors }) => colors && colors.secondary}; +`; +Values.displayName = 'Values'; + +export const ValueTitle = styled.span` + display: block; + margin-right: 15px; + font-family: ${fontTitle}; + font-size: ${sizeLargeTitle}; + text-align: justify; + line-height: 1.5; + + @media only screen and (min-width: 768px) { + display: inline; + font-size: ${sizeSmallTitle}; + } +`; +ValueTitle.displayName = 'ValueTitle'; diff --git a/packages/nnk/src/components/views/HomePageModules/Basic/index.js b/packages/nnk/src/components/views/HomePageModules/Basic/index.js index 5f6af2a..0084336 100644 --- a/packages/nnk/src/components/views/HomePageModules/Basic/index.js +++ b/packages/nnk/src/components/views/HomePageModules/Basic/index.js @@ -1,14 +1,6 @@ import React from 'react'; // eslint-disable-line import/no-extraneous-dependencies -import { any } from 'prop-types'; -import { - BasicModuleWrapper, - TextWrapper, - Text, - DescriptionWrapper, - ImageTitle, - Image, - ImagesWrapper -} from './styles'; +import { MOBILE } from '../../../../constants/devices'; +import { getMediaQuery } from '../../../../utils'; import Link from '../../../core/Link'; import { Photo01, Photo02, Photo03 } from '../../../../assets/images'; import { @@ -16,22 +8,44 @@ import { TextsHomePagePropType, TextsWhyPropType } from '../../../../types'; +import { + BasicModuleWrapper, + DescriptionWrapper, + Image, + ImageTitle, + ImagesWrapper, + Text, + TextWrapper +} from './styles'; const photos = [Photo01, Photo02, Photo03]; -const BasicModule = ({ texts, whyTexts, colors }) => ( +const BasicModule = ({ colors, texts, whyTexts }) => ( <BasicModuleWrapper> - <DescriptionWrapper> + <DescriptionWrapper colors={colors}> <Text colors={colors}>{texts.description}</Text> </DescriptionWrapper> <ImagesWrapper> - {texts.subItems.map((item, index) => ( - <Link link={item.link} key={item.link}> - <Image src={photos[index]} alt={item.description} /> - <ImageTitle colors={colors}>{item.title}</ImageTitle> - </Link> - ))} + {getMediaQuery() === MOBILE ? ( + <> + {texts.subItems.map((item, index) => ( + <Link link={item.link} key={item.link}> + <ImageTitle colors={colors}>{item.title}</ImageTitle> + <Image src={photos[index]} alt={item.description} /> + </Link> + ))} + </> + ) : ( + <> + {texts.subItems.map((item, index) => ( + <Link link={item.link} key={item.link}> + <Image src={photos[index]} alt={item.description} /> + <ImageTitle colors={colors}>{item.title}</ImageTitle> + </Link> + ))} + </> + )} </ImagesWrapper> <TextWrapper colors={colors}> <Text colors={colors}>{whyTexts.intro}</Text> @@ -40,9 +54,9 @@ const BasicModule = ({ texts, whyTexts, colors }) => ( ); BasicModule.propTypes = { + colors: ColorsPropType.isRequired, texts: TextsHomePagePropType.isRequired, - whyTexts: TextsWhyPropType.isRequired, - colors: ColorsPropType.isRequired + whyTexts: TextsWhyPropType.isRequired }; export default BasicModule; diff --git a/packages/nnk/src/components/views/HomePageModules/Basic/styles.js b/packages/nnk/src/components/views/HomePageModules/Basic/styles.js index 23a8f81..4120160 100644 --- a/packages/nnk/src/components/views/HomePageModules/Basic/styles.js +++ b/packages/nnk/src/components/views/HomePageModules/Basic/styles.js @@ -1,68 +1,124 @@ -import { styled } from 'frontity'; +import { css, styled } from 'frontity'; import { BaseText, BaseTitle, - sizeLarge, + sizeSmallTitle, sizeXLarge } from '../../../../setup/themes'; -export const MockImage = styled.img` - margin-top: 20px; -`; - export const BasicModuleWrapper = styled.div` display: flex; flex-direction: column; justify-content: center; align-items: center; + max-width: 100vw; + overflow-y: hidden; `; export const DescriptionWrapper = styled.div` - margin: 20px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; - max-width: 60%; - padding: 20px 0; + margin: 20px 0 60px; + padding: 20px 0 40px; + max-width: 80%; + + ${({ colors }) => + colors && + css` + border-bottom: 2px solid ${colors.terciary}; + `} + + @media only screen and (min-width: 768px) { + margin: 20px 0 40px; + border: 0; + } + + @media only screen and (min-width: 1024px) { + margin: 20px 0; + max-width: 60%; + padding: 20px 0; + border: 0; + } `; export const Image = styled.img` border-radius: 4px; - margin: 0 10px 10px; + margin-bottom: 30px; height: 190px; width: 300px; box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.7); + + @media only screen and (min-width: 375px) { + height: 220px; + width: 350px; + } + + @media only screen and (min-width: 768px) { + margin: 0 10px 10px; + height: 150px; + width: 230px; + } + + @media only screen and (min-width: 1024px) { + margin: 0 10px 10px; + height: 190px; + width: 300px; + } `; export const ImageTitle = styled(BaseTitle)` + margin-bottom: 10px; font-size: ${sizeXLarge}; color: ${({ colors }) => colors && colors.secondary}; text-align: center; + + @media only screen and (min-width: 768px) { + margin-bottom: 0; + } `; ImageTitle.displayName = 'ImageTitle'; export const ImagesWrapper = styled.div` display: flex; - flex-direction: row; + flex-direction: column; + justify-content: center; align-items: center; + + @media only screen and (min-width: 768px) { + flex-direction: row; + } `; ImagesWrapper.displayName = 'ImagesWrapper'; export const Text = styled(BaseText)` - font-size: ${sizeLarge}; + font-size: ${sizeSmallTitle}; color: ${({ colors }) => colors && colors.secondary}; text-align: center; - white-space: pre; + + @media only screen and (min-width: 1200px) { + white-space: pre; + } `; Text.displayName = 'Text'; -export const TextWrapper = styled(DescriptionWrapper)` +export const TextWrapper = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + max-width: 90%; + padding: 20px 0; border-top: 6px solid ${({ colors }) => colors && colors.terciary}; border-radius: 2px; - margin-top: 20px; - max-width: 80%; padding-top: 30px; + + @media only screen and (min-width: 768px) { + margin-top: 20px; + margin-bottom: 0; + white-space: pre; + } `; TextWrapper.displayName = 'TextWrapper'; diff --git a/packages/nnk/src/components/views/HomePageModules/Main/index.js b/packages/nnk/src/components/views/HomePageModules/Main/index.js index 60f2870..9991677 100644 --- a/packages/nnk/src/components/views/HomePageModules/Main/index.js +++ b/packages/nnk/src/components/views/HomePageModules/Main/index.js @@ -1,21 +1,36 @@ -import React from 'react'; // eslint-disable-line import/no-extraneous-dependencies -import { HomeBG } from '../../../../assets/images'; -import { getSocialLinks } from '../../../../utils'; +import { connect } from 'frontity'; +import React, { useEffect } from 'react'; // eslint-disable-line import/no-extraneous-dependencies +import { getMediaQuery, getSocialLinks } from '../../../../utils'; +import { DESKTOP } from '../../../../constants/devices'; +import { HOMEPAGE_TEXTS } from '../../../../db'; import SocialModule from '../../SocialContainer'; -import { PhotoContainer } from './styles'; +import { Home } from '../../../../assets/images'; +import { StatePropType } from '../../../../types'; +import { MainText, PhotoContainer } from './styles'; -const socialLinks = getSocialLinks([ - 'Facebook', - 'Twitter', - 'Instagram', - 'Youtube', - 'Email' -]); +const socialLinks = + getMediaQuery() === DESKTOP + ? getSocialLinks(['Facebook', 'Twitter', 'Instagram', 'Youtube', 'Email']) + : getSocialLinks(['Facebook', 'Twitter', 'Instagram']); -const MainModule = () => ( - <PhotoContainer img={HomeBG}> - <SocialModule socialLinks={socialLinks} /> - </PhotoContainer> -); +const MainModule = ({ state }) => { + const { colors, language } = state.theme; + let homepageTexts = HOMEPAGE_TEXTS[language]; -export default MainModule; + useEffect(() => { + homepageTexts = HOMEPAGE_TEXTS[language]; + }, [language]); + + return ( + <PhotoContainer img={Home}> + <MainText colors={colors}>{homepageTexts.mainText}</MainText> + <SocialModule socialLinks={socialLinks} /> + </PhotoContainer> + ); +}; + +MainModule.propTypes = { + state: StatePropType.isRequired +}; + +export default connect(MainModule); diff --git a/packages/nnk/src/components/views/HomePageModules/Main/styles.js b/packages/nnk/src/components/views/HomePageModules/Main/styles.js index 8f47a63..0d97ed4 100644 --- a/packages/nnk/src/components/views/HomePageModules/Main/styles.js +++ b/packages/nnk/src/components/views/HomePageModules/Main/styles.js @@ -1,15 +1,90 @@ import { styled, css } from 'frontity'; +import { + BaseText, + sizeLarge, + sizeLargeTitle, + sizeMediumTitle +} from '../../../../setup/themes'; + +export const MainText = styled(BaseText)` + position: absolute; + bottom: 0; + right: 4vw; + white-space: pre; + font-size: ${sizeLarge}; + font-style: italic; + font-weight: 900; + line-height: 1.5; + border-radius: 10px; + padding: 5px 10px; + text-shadow: -2px -2px 2px black, -2px 0 2px black, -2px 2px 2px black, + 0 -2px 2px black, 0 0 2px black, 0 2px 2px black, 2px -2px 2px black, + 2px 0 2px black, 2px 2px 2px black; + letter-spacing: -0.1rem; + color: ${({ colors }) => colors && colors.secondary}; + text-align: center; + + @media only screen and (min-height: 400px) { + bottom: 10px; + } + + @media only screen and (min-width: 375px) { + font-size: ${sizeMediumTitle}; + letter-spacing: -0.15rem; + text-shadow: -2px -2px 5px black, -2px 0 5px black, -2px 2px 5px black, + 0 -2px 5px black, 0 0 5px black, 0 2px 5px black, 2px -2px 5px black, + 2px 0 5px black, 2px 2px 5px black; + } + + @media only screen and (min-width: 768px) { + bottom: 50px; + right: 6vw; + } + + @media only screen and (min-width: 1024px) { + bottom: 15vh; + font-size: ${sizeLargeTitle}; + } +`; +MainText.displayName = 'MainText'; +// white-space forces line breaks \n export const PhotoContainer = styled.div` position: relative; - height: calc(100vh - 100px); + display: flex; + flex-direction: column; + align-items: flex-end; + justify-content: flex-end; + height: 70vh; width: 100%; + background-position: 20% 8%; - ${({ img, position = 'center 15%' }) => css` + ${({ img, section }) => css` background-image: ${`url(${img})`}; - background-position: ${position}; - background-size: 100%; + background-size: ${section ? '100%' : '200%'}; background-repeat: no-repeat; `} + + @media only screen and (min-height: 400px) { + height: ${({ section }) => (section ? '41vh' : '60vh')}; + background-position: 20% 15%; + } + + @media only screen and (min-width: 768px) { + height: 45vh; + + ${({ position = '10% 15%' }) => css` + background-position: ${position}; + background-size: 150%; + `} + } + @media only screen and (min-width: 1024px) { + height: calc(100vh - 100px); + + ${({ position = 'center 15%' }) => css` + background-position: ${position}; + background-size: 100%; + `} + } `; PhotoContainer.displayName = 'PhotoContainer'; diff --git a/packages/nnk/src/components/views/HomePageModules/Volunteer/index.js b/packages/nnk/src/components/views/HomePageModules/Volunteer/index.js index ae232f3..48ff375 100644 --- a/packages/nnk/src/components/views/HomePageModules/Volunteer/index.js +++ b/packages/nnk/src/components/views/HomePageModules/Volunteer/index.js @@ -1,13 +1,16 @@ import React from 'react'; // eslint-disable-line import/no-extraneous-dependencies import { VolunteersInAction } from '../../../../assets/images'; +import { getMediaQuery } from '../../../../utils'; +import { MOBILE } from '../../../../constants/devices'; +import { ColorsPropType, TextsVolunteerPropType } from '../../../../types'; import { - ModuleWrapper, - MainImage, - Title, Highlighted, - ImgLink + ImgLink, + MainImage, + MainImageAsBg, + ModuleWrapper, + Title } from './styles'; -import { ColorsPropType, TextsVolunteerPropType } from '../../../../types'; const VolunteerModule = ({ colors, texts }) => { const styleTitle = title => { @@ -25,7 +28,11 @@ const VolunteerModule = ({ colors, texts }) => { <ModuleWrapper> {styleTitle(texts.question)} <ImgLink link="/join-us/"> - <MainImage src={VolunteersInAction} alt={texts.altMainImage} /> + {getMediaQuery() === MOBILE ? ( + <MainImageAsBg img={VolunteersInAction} alt={texts.altMainImage} /> + ) : ( + <MainImage src={VolunteersInAction} alt={texts.altMainImage} /> + )} </ImgLink> </ModuleWrapper> ); diff --git a/packages/nnk/src/components/views/HomePageModules/Volunteer/styles.js b/packages/nnk/src/components/views/HomePageModules/Volunteer/styles.js index 1f13075..1fb4dea 100644 --- a/packages/nnk/src/components/views/HomePageModules/Volunteer/styles.js +++ b/packages/nnk/src/components/views/HomePageModules/Volunteer/styles.js @@ -1,5 +1,9 @@ -import { styled } from 'frontity'; -import { BaseTitle, sizeXXLarge } from '../../../../setup/themes'; +import { css, styled } from 'frontity'; +import { + BaseTitle, + sizeXLargeTitle, + sizeXXLarge +} from '../../../../setup/themes'; import Link from '../../../core/Link'; export const Highlighted = styled.span` @@ -9,29 +13,66 @@ Highlighted.displayName = 'Highlighted'; export const ImgLink = styled(Link)` text-align: center; + margin-bottom: 20px; + + @media only screen and (min-width: 768px) { + margin-bottom: 40px; + } `; ImgLink.displayName = 'ImgLink'; export const MainImage = styled.img` border-radius: 4px; - width: 90%; + width: 100%; box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.3); `; MainImage.displayName = 'MainImage'; +export const MainImageAsBg = styled.div` + border-radius: 4px; + height: 300px; + width: 300px; + ${({ img }) => + css` + border-radius: 5px; + background-image: ${`url(${img})`}; + background-position: center center; + background-size: 150%; + background-repeat: no-repeat; + `} + + @media only screen and (min-width: 375px) { + width: 350px; + } + + @media only screen and (min-width: 768px) { + width: 90%; + } +`; +MainImage.displayName = 'MainImage'; + export const ModuleWrapper = styled.div` display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 30px; - max-width: 70%; + overflow-y: hidden; + + @media only screen and (min-width: 1024px) { + max-width: 70%; + } `; ModuleWrapper.displayName = 'ModuleWrapper'; export const Title = styled(BaseTitle)` margin: 20px auto; - font-size: ${sizeXXLarge}; + font-size: ${sizeXLargeTitle}; color: ${({ colors }) => colors && colors.secondary}; + text-align: center; + + @media only screen and (min-width: 768px) { + font-size: ${sizeXXLarge}; + } `; Title.displayName = 'Title'; diff --git a/packages/nnk/src/components/views/HomePageModules/index.js b/packages/nnk/src/components/views/HomePageModules/index.js index 3fe1eb8..78aff7b 100644 --- a/packages/nnk/src/components/views/HomePageModules/index.js +++ b/packages/nnk/src/components/views/HomePageModules/index.js @@ -1,9 +1,9 @@ import React from 'react'; // eslint-disable-line import/no-extraneous-dependencies import { node, string } from 'prop-types'; -import { SectionContainer } from './styles'; import { ColorsPropType } from '../../../types'; +import { SectionContainer } from './styles'; -const PageSection = ({ size, children, colors }) => ( +const PageSection = ({ children, colors, size }) => ( <SectionContainer size={size} colors={colors}> {children} </SectionContainer> diff --git a/packages/nnk/src/components/views/HomePageModules/styles.js b/packages/nnk/src/components/views/HomePageModules/styles.js index c82babc..853ea97 100644 --- a/packages/nnk/src/components/views/HomePageModules/styles.js +++ b/packages/nnk/src/components/views/HomePageModules/styles.js @@ -9,8 +9,7 @@ export const SectionContainer = styled.div` border-radius: 2px; background-color: ${({ colors }) => colors && colors.primary}; min-height: 50px; - max-width: 100vw; - box-sizing: border-box; + max-width: 100%; padding: 10px; color: ${({ colors }) => colors && colors.secondary}; diff --git a/packages/nnk/src/components/views/JumpToTheField/index.js b/packages/nnk/src/components/views/JumpToTheField/index.js index 78f7de8..e644c7d 100644 --- a/packages/nnk/src/components/views/JumpToTheField/index.js +++ b/packages/nnk/src/components/views/JumpToTheField/index.js @@ -1,46 +1,54 @@ import React, { useEffect, useState } from 'react'; import { connect } from 'frontity'; import SectionHeader from '../SectionHeader'; -import { getSocialLinks, validateForm } from '../../../utils'; +import { + validateForm, + getSocialLinks, + getMediaQuery, + allValidated +} from '../../../utils'; import { JTTF_TEXTS } from '../../../db'; +import { MOBILE, TABLET } from '../../../constants/devices'; import { VolunteersInAction } from '../../../assets/images'; +import { StatePropType } from '../../../types'; import { + Container, Content, - Text, - Section, - MoreInfo, - Info, + Description, + Field, + FormArea, Icon, - InfoTitle, + Info, InfoDescription, - FormArea, - Field, + InfoTitle, Label, - TextField, - SendButton, MessageField, - Container, - Title, - Description, - TextEmail + MoreInfo, + Section, + SendButton, + Text, + TextEmail, + TextField, + Title } from './styles'; -import { StatePropType } from '../../../types'; const INITIAL_FORM_DATA = { - name: { - value: null, - isValid: false - }, email: { - value: null, - isValid: false + isValid: false, + value: null }, message: { - value: null, - isValid: false + isValid: false, + value: null + }, + name: { + isValid: false, + value: null } }; +const DEVICE_VERSION = getMediaQuery() === MOBILE || getMediaQuery() === TABLET; + const JumpToTheFieldSection = ({ state }) => { const [formData, setFormData] = useState(INITIAL_FORM_DATA); const [emailSent, toggleEmailSent] = useState(false); @@ -53,9 +61,9 @@ const JumpToTheFieldSection = ({ state }) => { event.preventDefault(); // eslint-disable-next-line no-undef Email.send({ - SecureToken: 'a8424171-6a2c-42f8-a17e-24ff3da22895', - To: 'lady.anna.lannister@gmail.com', - From: 'lady.anna.lannister@gmail.com', + SecureToken: '5ee1f4fa-251a-4319-8cd5-71bb061b263a', + To: 'nnk56478991032@outlook.com', + From: 'nnk56478991032@outlook.com', Subject: 'New volunteer contact', Body: `<html><h2>Contact</h2><p>Name: <strong>${formData.name.value}</strong></p><p>E-mail: <strong>${formData.email.value}</strong></p><p>Message: <em>${formData.message.value}</em></p></html>` }).then(message => { @@ -94,9 +102,9 @@ const JumpToTheFieldSection = ({ state }) => { <SectionHeader colors={colors} img={VolunteersInAction} - position="0 20%" + position="50% 20%" socialLinks={socialLinks} - title={texts.title} + title={DEVICE_VERSION ? texts.titleAlt : texts.title} /> <Content> <Text>{texts.text1}</Text> @@ -117,12 +125,7 @@ const JumpToTheFieldSection = ({ state }) => { </Info> ))} </MoreInfo> - <FormArea - colors={colors} - // action="mailto:you@yourdmainhere.com" - // method="post" - enctype="text/plain" - > + <FormArea colors={colors} enctype="text/plain"> <Field> <Label htmlFor="name">{texts.form.fullName}</Label> <TextField @@ -151,12 +154,9 @@ const JumpToTheFieldSection = ({ state }) => { /> </Field> <SendButton - // type="submit" - // name="submit" - // value="Submit" colors={colors} onClick={sendEmail} - // disabled={!allValidated(formData)} + disabled={!allValidated(formData)} > {texts.form.send} </SendButton> diff --git a/packages/nnk/src/components/views/JumpToTheField/styles.js b/packages/nnk/src/components/views/JumpToTheField/styles.js index 4d04557..0619039 100644 --- a/packages/nnk/src/components/views/JumpToTheField/styles.js +++ b/packages/nnk/src/components/views/JumpToTheField/styles.js @@ -6,58 +6,70 @@ import { sizeLargeTitle, sizeMedium, sizeMediumTitle, - sizeXLargeTitle + sizeSmallTitle, + sizeXLarge, + sizeXLargeTitle, + sizeXXLarge } from '../../../setup/themes'; -import Link from '../../core/Link'; -const WhyArea = styled.div` +export const Container = styled.div` display: flex; flex-direction: column; align-items: center; justify-content: center; - margin: auto; - width: 80%; - text-align: justify; + margin: 0; + height: calc(100vh - 155px); + width: 800px; + padding: 24px; + text-align: center; + + @media only screen and (min-width: 768px) { + height: calc(100vh - 155px); + } `; +Container.displayName = 'Container'; export const Content = styled.div` - padding: 20px 80px; -`; -Content.displayName = 'Content'; + padding: 20px; -export const Text = styled(BaseText)` - margin: 20px auto 20px; - width: 80%; - text-align: justify; - font-size: ${sizeLarge}; - color: ${({ colors }) => colors && colors.secondary}; + @media only screen and (min-width: 1024px) { + padding: 20px 80px; + } `; -Text.displayName = 'Text'; +Content.displayName = 'Content'; -export const Section = styled.section` - color: ${({ colors }) => colors && colors.secondary}; +export const Description = styled.div` + margin: 24px 0; + line-height: 1.6em; + white-space: pre; `; -Section.displayName = 'Section'; +Description.displayName = 'Description'; -export const MoreInfo = styled.div` +export const Field = styled.div` display: flex; - flex-direction: row; + flex-direction: column; align-items: center; - justify-content: space-around; - margin: 60px auto; - width: 60%; - background: yelow; + justify-content: center; + margin: 2px auto 8px; + width: 100%; `; -MoreInfo.displayName = 'MoreInfo'; +Field.displayName = 'Field'; -export const Info = styled.div` +export const FormArea = styled.form` display: flex; flex-direction: column; align-items: center; justify-content: center; + margin: 0 auto 20px; + width: 100%; + padding: 10px 0; color: ${({ colors }) => colors && colors.secondary}; + + @media only screen and (min-width: 768px) { + width: 80%; + } `; -Info.displayName = 'Info'; +FormArea.displayName = 'FormArea'; export const Icon = styled.i` margin-bottom: 15px; @@ -66,66 +78,66 @@ export const Icon = styled.i` ${({ colors, item }) => item === 'Language' && css` - margin-bottom: 10px; + margin-bottom: 11px; border: 2px solid ${colors.secondary}; border-radius: 50%; - padding: 18px; + padding: 10px; font-size: ${sizeMediumTitle}; + + @media only screen and (min-width: 768px) { + margin-bottom: 2px; + font-size: ${sizeXXLarge}; + } + + @media only screen and (min-width: 1200px) { + margin-bottom: 8px; + padding: 12px; + font-size: ${sizeXLarge}; + } `} `; Icon.displayName = 'Icon'; -export const InfoTitle = styled(BaseTitle)` - font-size: ${sizeLarge}; - text-transform: uppercase; +export const Info = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: ${({ colors }) => colors && colors.secondary}; `; -InfoTitle.displayName = 'InfoTitle'; +Info.displayName = 'Info'; export const InfoDescription = styled(BaseTitle)` - font-size: ${sizeLargeTitle}; + font-size: ${sizeMediumTitle}; color: ${({ colors }) => colors && colors.terciary}; text-transform: uppercase; + + @media only screen and (min-width: 768px) { + font-size: ${sizeLargeTitle}; + } `; InfoDescription.displayName = 'InfoDescription'; -export const FormArea = styled.form` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin: 0 auto 20px; - width: 80%; - padding: 10px 0; - color: ${({ colors }) => colors && colors.secondary}; -`; -FormArea.displayName = 'FormArea'; +export const InfoTitle = styled(BaseTitle)` + font-size: ${sizeMediumTitle}; + text-transform: uppercase; -export const Field = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin: 2px auto 8px; - width: 100%; + @media only screen and (min-width: 768px) { + font-size: ${sizeLarge}; + } `; -Field.displayName = 'Field'; +InfoTitle.displayName = 'InfoTitle'; export const Label = styled.label` margin: 5px auto; text-transform: uppercase; -`; -Label.displayName = 'Label'; - -export const TextField = styled.input` - height: 30px; - width: 82%; - background: gainsboro; - padding: 5px 20px; - font-weight: 700; - box-sizing: border-box; font-size: ${sizeLarge}; + + @media only screen and (min-width: 768px) { + font-size: ${sizeMedium}; + } `; -TextField.displayName = 'TextField'; +Label.displayName = 'Label'; export const MessageField = styled.textarea` width: 82%; @@ -136,6 +148,29 @@ export const MessageField = styled.textarea` `; MessageField.displayName = 'MessageField'; +export const MoreInfo = styled.div` + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + margin: 30px auto; + width: 100%; + background: yelow; + + @media only screen and (min-width: 768px) { + margin: 60px auto; + } + @media only screen and (min-width: 1024px) { + width: 60%; + } +`; +MoreInfo.displayName = 'MoreInfo'; + +export const Section = styled.section` + color: ${({ colors }) => colors && colors.secondary}; +`; +Section.displayName = 'Section'; + export const SendButton = styled.button` margin: 10px auto; height: 30px; @@ -144,37 +179,35 @@ export const SendButton = styled.button` background: ${({ disabled, colors }) => disabled ? 'gray' : colors && colors.terciary}; text-transform: uppercase; - font-size: ${sizeMedium}; + font-size: ${sizeLarge}; cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')}; + + @media only screen and (min-width: 768px) { + font-size: ${sizeMedium}; + } `; SendButton.displayName = 'SendButton'; -export const Container = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin: 0; - height: calc(100vh - 155px); - width: 800px; - padding: 24px; - text-align: center; -`; -Container.displayName = 'Container'; +export const Text = styled(BaseText)` + margin: 5px auto; + width: 100%; + text-align: justify; + font-size: ${sizeSmallTitle}; + color: ${({ colors }) => colors && colors.secondary}; -export const Title = styled(BaseTitle)` - margin: 0 auto 20px; - font-size: ${sizeXLargeTitle}; - color: ${({ colors }) => colors && colors.terciary}; -`; -Title.displayName = 'Title'; + @media only screen and (min-width: 768px) { + margin: 20px auto; + width: 90%; + font-size: ${sizeSmallTitle}; + } -export const Description = styled.div` - margin: 24px 0; - line-height: 1.6em; - white-space: pre; + @media only screen and (min-width: 1024px) { + margin: 20px auto; + width: 80%; + font-size: ${sizeLarge}; + } `; -Description.displayName = 'Description'; +Text.displayName = 'Text'; export const TextEmail = styled(BaseText)` text-align: center; @@ -182,3 +215,25 @@ export const TextEmail = styled(BaseText)` color: ${({ colors }) => colors && colors.secondary}; `; TextEmail.displayName = 'TextEmail'; + +export const TextField = styled.input` + height: 40px; + width: 82%; + background: gainsboro; + padding: 5px 20px; + font-weight: 700; + box-sizing: border-box; + font-size: ${sizeLarge}; + + @media only screen and (min-width: 768px) { + height: 30px; + } +`; +TextField.displayName = 'TextField'; + +export const Title = styled(BaseTitle)` + margin: 0 auto 20px; + font-size: ${sizeXLargeTitle}; + color: ${({ colors }) => colors && colors.terciary}; +`; +Title.displayName = 'Title'; diff --git a/packages/nnk/src/components/views/MenuModal/index.js b/packages/nnk/src/components/views/MenuModal/index.js index aa6913d..97b9fe5 100644 --- a/packages/nnk/src/components/views/MenuModal/index.js +++ b/packages/nnk/src/components/views/MenuModal/index.js @@ -1,21 +1,21 @@ import React, { useEffect, useState } from 'react'; // eslint-disable-line import/no-extraneous-dependencies import { connect } from 'frontity'; -import { func, string } from 'prop-types'; +import { string } from 'prop-types'; import { ACTIONS_TEXTS, MAIN_SECTIONS } from '../../../db'; +import Link from '../../core/Link'; +import { ColorsPropType } from '../../../types'; import { - BackTitle, - Item, - LittleSmaller, - MenuContent, - MenuOverlay, - ModalWindow, - NavHeader, - ParentTitle, + Title, Smaller, - Title + ParentTitle, + NavHeader, + ModalWindow, + MenuOverlay, + MenuContent, + LittleSmaller, + Item, + BackTitle } from './styles'; -import { ColorsPropType } from '../../../types'; -import Link from '../../core/Link'; const MenuModal = ({ colors, currentPage, language }) => { let navSections = MAIN_SECTIONS[language]; diff --git a/packages/nnk/src/components/views/NavItem/index.js b/packages/nnk/src/components/views/NavItem/index.js index 887f57f..3405e25 100644 --- a/packages/nnk/src/components/views/NavItem/index.js +++ b/packages/nnk/src/components/views/NavItem/index.js @@ -1,16 +1,16 @@ import React, { useState } from 'react'; import Link from '../../core/Link'; +import { ColorsPropType, NavSectionPropType } from '../../../types'; import { - LittleSmaller, - Smaller, - Item, - Title, CollapsableItems, - ItemsList, + Item, ItemLink, - SubItem + ItemsList, + LittleSmaller, + Smaller, + SubItem, + Title } from './styles'; -import { ColorsPropType, NavSectionPropType } from '../../../types'; const NavItem = ({ colors, section }) => { const [isActive, toggleIsActive] = useState(false); @@ -29,22 +29,22 @@ const NavItem = ({ colors, section }) => { <Item onMouseOut={() => toggleIsActive(false)}> <Link link={!section.subItems && section.link ? section.link : undefined}> <Title - isActive={isActive} colors={colors} + isActive={isActive} onMouseOver={() => toggleIsActive(true)} > {styleTitle(section.title)} - toggleIsActive(true)} colors={colors}> + toggleIsActive(true)}> {section.subItems && section.subItems.map(subItem => ( 7} colors={colors} + isLengthy={subItem.title.length > 7} + key={subItem.title} > {subItem.title.toUpperCase()} diff --git a/packages/nnk/src/components/views/ReportItem/index.js b/packages/nnk/src/components/views/ReportItem/index.js index e5b05df..3bb17b5 100644 --- a/packages/nnk/src/components/views/ReportItem/index.js +++ b/packages/nnk/src/components/views/ReportItem/index.js @@ -30,10 +30,10 @@ const ReportItem = ({ state, url }) => { dangerouslySetInnerHTML={{ __html: report.title.rendered }} /> diff --git a/packages/nnk/src/components/views/SectionHeader/index.js b/packages/nnk/src/components/views/SectionHeader/index.js index 83e01a0..219c59c 100644 --- a/packages/nnk/src/components/views/SectionHeader/index.js +++ b/packages/nnk/src/components/views/SectionHeader/index.js @@ -1,13 +1,18 @@ import React from 'react'; import { arrayOf, string } from 'prop-types'; +import { getMediaQuery } from '../../../utils'; +import { DESKTOP } from '../../../constants/devices'; import SocialModule from '../SocialContainer'; +import { ColorsPropType, ConfigSocialLinksPropType } from '../../../types'; import { PhotoContainer } from '../HomePageModules/Main/styles'; import { Title, TitleWrapper } from './styles'; -import { ColorsPropType, ConfigSocialLinksPropType } from '../../../types'; -const SectionHeader = ({ colors, img, socialLinks, position, title }) => ( - - +const IS_DESKTOP = getMediaQuery() === DESKTOP; + +const SectionHeader = ({ colors, img, position, socialLinks, title }) => ( + + {IS_DESKTOP && } + {title} diff --git a/packages/nnk/src/components/views/SectionHeader/styles.js b/packages/nnk/src/components/views/SectionHeader/styles.js index e1707f0..65c9472 100644 --- a/packages/nnk/src/components/views/SectionHeader/styles.js +++ b/packages/nnk/src/components/views/SectionHeader/styles.js @@ -1,17 +1,43 @@ import { styled } from 'frontity'; -import { BaseTitle, sizeHugeTitle } from '../../../setup/themes'; +import { + BaseTitle, + sizeHugeTitle, + sizeXLargeTitle +} from '../../../setup/themes'; export const Title = styled(BaseTitle)` - font-size: ${sizeHugeTitle}; + font-size: ${sizeXLargeTitle}; color: ${({ colors }) => colors && colors.secondary}; width: fit-content; + + @media only screen and (min-width: 375px) { + font-size: ${sizeHugeTitle}; + } `; Title.displayName = 'Title'; export const TitleWrapper = styled.div` position: absolute; bottom: 10%; + right: unset; + left: 0; + min-width: 120px; background: ${({ colors }) => colors && colors.primary}; padding: 10px 20px 0px; + + /* @media only screen and (min-height: 400px) { + left: unset; + right: 0; + } */ + + @media only screen and (min-width: 375px) { + left: 0; + bottom: 5%; + } + + @media only screen and (min-width: 768px) { + right: unset; + left: 0; + } `; TitleWrapper.displayName = 'TitleWrapper'; diff --git a/packages/nnk/src/components/views/SocialContainer/index.js b/packages/nnk/src/components/views/SocialContainer/index.js index 4020c4c..2463c5f 100644 --- a/packages/nnk/src/components/views/SocialContainer/index.js +++ b/packages/nnk/src/components/views/SocialContainer/index.js @@ -8,7 +8,7 @@ const SocialModule = ({ size, socialLinks }) => ( {socialLinks.map( ({ type, link, hide }) => - !hide && + !hide && )} ); diff --git a/packages/nnk/src/components/views/SocialContainer/styles.js b/packages/nnk/src/components/views/SocialContainer/styles.js index ff3b934..24ba5cb 100644 --- a/packages/nnk/src/components/views/SocialContainer/styles.js +++ b/packages/nnk/src/components/views/SocialContainer/styles.js @@ -8,13 +8,32 @@ export const SocialContainer = styled.div` flex-direction: column; justify-content: center; align-items: center; - margin: 80px 40px; + margin-top: 5px; - ${({ size }) => - size === 'small' && - css` - position: normal; - margin: 20px; - `} + @media only screen and (min-width: 375px) { + margin-top: 15px; + } + + @media only screen and (min-width: 768px) { + margin: 20px 40px; + + ${({ size }) => + size === 'small' && + css` + position: normal; + margin: 30px 15px; + `} + } + + @media only screen and (min-width: 1024px) { + margin: 80px 40px; + + ${({ size }) => + size === 'small' && + css` + position: normal; + margin: 10px 20px; + `} + } `; SocialContainer.displayName = 'SocialContainer'; diff --git a/packages/nnk/src/components/views/SocialLink/index.js b/packages/nnk/src/components/views/SocialLink/index.js index e3627fa..5138831 100644 --- a/packages/nnk/src/components/views/SocialLink/index.js +++ b/packages/nnk/src/components/views/SocialLink/index.js @@ -1,9 +1,9 @@ import React from 'react'; // eslint-disable-line import/no-extraneous-dependencies import { string, func } from 'prop-types'; -import { SocialLogo } from './styles'; import Link from '../../core/Link'; +import { SocialLogo } from './styles'; -const SocialLink = ({ type, link = '', onClick }) => { +const SocialLink = ({ link = '', onClick, type }) => { let socialClassName; switch (type) { case 'Facebook': @@ -35,9 +35,9 @@ const SocialLink = ({ type, link = '', onClick }) => { }; SocialLink.propTypes = { - type: string.isRequired, link: string.isRequired, - onClick: func + onClick: func, + type: string.isRequired }; SocialLink.defaultProps = { diff --git a/packages/nnk/src/components/views/SocialLink/styles.js b/packages/nnk/src/components/views/SocialLink/styles.js index 8076e80..e929f13 100644 --- a/packages/nnk/src/components/views/SocialLink/styles.js +++ b/packages/nnk/src/components/views/SocialLink/styles.js @@ -6,13 +6,15 @@ export const SocialLogo = styled.div` flex-direction: column; justify-content: center; align-items: center; - border: 1px solid #acacac; + border: 1px solid rgba(0, 0, 0, 0.5); + box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3); border-radius: 50%; - margin: 10px; + margin-top: 10px; + margin-left: 20px; background: ${config.buttonsBackground}; height: 50px; width: 50px; - font-size: 2rem; + font-size: 3rem; color: ${config.buttonsText}; cursor: pointer; transition: all ease 0.2s; @@ -21,5 +23,16 @@ export const SocialLogo = styled.div` transform: scale(1.2); color: ${config.buttonsHighlight}; } + + @media only screen and (min-width: 375px) { + margin-left: 25px; + } + + @media only screen and (min-width: 768px) { + margin: 10px; + font-size: 2rem; + height: 60px; + width: 60px; + } `; SocialLogo.displayName = 'SocialLogo'; diff --git a/packages/nnk/src/components/views/What/index.js b/packages/nnk/src/components/views/What/index.js index d904680..3b6934b 100644 --- a/packages/nnk/src/components/views/What/index.js +++ b/packages/nnk/src/components/views/What/index.js @@ -9,6 +9,7 @@ import { Program02, Program03 } from '../../../assets/images'; +import { StatePropType } from '../../../types'; import { Content, DescriptionArea, @@ -20,7 +21,6 @@ import { SubTitle, Text } from './styles'; -import { StatePropType } from '../../../types'; const WhatSection = ({ state }) => { const { colors, language } = state.theme; diff --git a/packages/nnk/src/components/views/What/styles.js b/packages/nnk/src/components/views/What/styles.js index d09f762..3f6d6f3 100644 --- a/packages/nnk/src/components/views/What/styles.js +++ b/packages/nnk/src/components/views/What/styles.js @@ -3,27 +3,64 @@ import { BaseText, BaseTitle, sizeLarge, - sizeLargeTitle + sizeLargeTitle, + sizeMedium, + sizeMediumTitle, + sizeSmallTitle, + sizeXLarge, + sizeXLargeTitle } from '../../../setup/themes'; export const Content = styled.div` - padding: 20px 80px; + padding: 20px; + + @media only screen and (min-width: 768px) { + padding: 20px 80px; + } `; Content.displayName = 'Content'; export const DescriptionArea = styled.div` - margin-left: 20px; - width: 80%; + width: 100%; text-align: justify; + + @media only screen and (min-width: 1024px) { + margin-left: 20px; + width: 80%; + } `; Content.displayName = 'Content'; -export const DescriptionTitle = styled(BaseTitle)``; +export const DescriptionTitle = styled(BaseTitle)` + margin: -10px auto 10px; + font-size: ${sizeLargeTitle}; + + @media only screen and (min-width: 768px) { + margin: -20px auto 10px; + font-size: ${sizeXLargeTitle}; + } + + @media only screen and (min-width: 1024px) { + margin: 0; + font-size: ${sizeMediumTitle}; + } +`; DescriptionTitle.displayName = 'DescriptionTitle'; export const Image = styled.div` - height: 160px; - width: 300px; + height: 140px; + width: 100%; + + @media only screen and (min-width: 768px) { + height: 300px; + width: 100%; + } + + @media only screen and (min-width: 1024px) { + height: 160px; + width: 300px; + } + ${({ img }) => css` border-radius: 5px; @@ -37,17 +74,36 @@ Image.displayName = 'Image'; export const Intro = styled(BaseText)` text-align: justify; - font-size: ${sizeLarge}; + font-size: ${sizeSmallTitle}; color: ${({ colors }) => colors && colors.secondary}; + + @media only screen and (min-width: 1200px) { + font-size: ${sizeLarge}; + } `; Intro.displayName = 'Intro'; export const Program = styled.div` display: flex; - flex-direction: row; + flex-direction: column; align-items: flex-start; justify-content: flex-start; - margin: 30px 50px; + margin: 10px auto 30px; + max-width: 80vw; + + @media only screen and (min-width: 768px) { + margin: 20px auto 50px; + } + + @media only screen and (min-width: 1024px) { + flex-direction: row; + margin: 50px 20px; + } + + @media only screen and (min-width: 1200px) { + flex-direction: row; + margin: 30px 50px; + } `; Program.displayName = 'Program'; @@ -57,15 +113,24 @@ export const Section = styled.section` Section.displayName = 'Section'; export const SubTitle = styled(BaseTitle)` - margin: 50px auto; + margin: 40px auto 10px; text-align: center; font-size: ${sizeLargeTitle}; color: ${({ colors }) => colors && colors.terciary}; + + @media only screen and (min-width: 768px) { + margin: 50px auto; + } `; SubTitle.displayName = 'SubTitle'; export const Text = styled(BaseText)` text-align: justify; color: ${({ colors }) => colors && colors.secondary}; + font-size: ${sizeSmallTitle}; + + @media only screen and (min-width: 1024px) { + font-size: ${sizeMedium}; + } `; Text.displayName = 'Text'; diff --git a/packages/nnk/src/components/views/Where/index.js b/packages/nnk/src/components/views/Where/index.js index 6c242ad..021e5b2 100644 --- a/packages/nnk/src/components/views/Where/index.js +++ b/packages/nnk/src/components/views/Where/index.js @@ -1,11 +1,11 @@ import React, { useEffect } from 'react'; import { connect } from 'frontity'; -import SectionHeader from '../SectionHeader'; import { getSocialLinks } from '../../../utils'; import { WHERE_TEXTS } from '../../../db'; +import SectionHeader from '../SectionHeader'; import { Mapv1, Photo05 } from '../../../assets/images'; -import { Content, Map, Section } from './styles'; import { StatePropType } from '../../../types'; +import { Content, Map, Section } from './styles'; const WhereSection = ({ state }) => { const { colors, language } = state.theme; diff --git a/packages/nnk/src/components/views/Where/styles.js b/packages/nnk/src/components/views/Where/styles.js index 77751ad..e3a52fe 100644 --- a/packages/nnk/src/components/views/Where/styles.js +++ b/packages/nnk/src/components/views/Where/styles.js @@ -1,92 +1,20 @@ -import { styled, css } from 'frontity'; -import { - BaseText, - BaseTitle, - sizeHugeTitle, - sizeLarge, - sizeLargeTitle -} from '../../../setup/themes'; +import { styled } from 'frontity'; export const Content = styled.div` - padding: 20px 80px; -`; -Content.displayName = 'Content'; - -export const DescriptionArea = styled.div` - margin-left: 20px; - width: 80%; - text-align: justify; -`; -DescriptionArea.displayName = 'DescriptionArea'; - -export const DescriptionTitle = styled(BaseTitle)``; -DescriptionTitle.displayName = 'DescriptionTitle'; + padding: 20px 0; -export const Image = styled.div` - height: 160px; - width: 300px; - ${({ img }) => - css` - border-radius: 5px; - background-image: ${`url(${img})`}; - background-position: center center; - background-size: 100%; - background-repeat: no-repeat; - `} + @media only screen and (min-width: 1024px) { + padding: 20px 80px; + } `; -Image.displayName = 'Image'; - -export const Intro = styled(BaseText)` - text-align: justify; - font-size: ${sizeLarge}; - color: ${({ colors }) => colors && colors.secondary}; -`; -Intro.displayName = 'Intro'; +Content.displayName = 'Content'; export const Map = styled.img` width: 100%; `; Map.displayName = 'Map'; -export const Program = styled.div` - display: flex; - flex-direction: row; - align-items: flex-start; - justify-content: flex-start; - margin: 30px 50px; -`; -Program.displayName = 'Program'; - export const Section = styled.section` color: ${({ colors }) => colors && colors.secondary}; `; Section.displayName = 'Section'; - -export const SubTitle = styled(BaseTitle)` - margin: 50px auto; - text-align: center; - font-size: ${sizeLargeTitle}; - color: ${({ colors }) => colors && colors.terciary}; -`; -SubTitle.displayName = 'SubTitle'; - -export const Text = styled(BaseText)` - text-align: justify; - color: ${({ colors }) => colors && colors.secondary}; -`; -Text.displayName = 'Text'; - -export const Title = styled(BaseTitle)` - font-size: ${sizeHugeTitle}; - color: ${({ colors }) => colors && colors.secondary}; - width: fit-content; -`; -Title.displayName = 'Title'; - -export const TitleWrapper = styled.div` - position: absolute; - bottom: 10%; - background: ${({ colors }) => colors && colors.primary}; - padding: 0 30px; -`; -TitleWrapper.displayName = 'TitleWrapper'; diff --git a/packages/nnk/src/components/views/Why/index.js b/packages/nnk/src/components/views/Why/index.js index 7d0b665..e02cd98 100644 --- a/packages/nnk/src/components/views/Why/index.js +++ b/packages/nnk/src/components/views/Why/index.js @@ -1,27 +1,27 @@ import React, { useEffect, useState } from 'react'; import { connect } from 'frontity'; -import SectionHeader from '../SectionHeader'; +import config from '../../../setup/config'; import { getSocialLinks } from '../../../utils'; import { WHY_TEXTS } from '../../../db'; +import ReportItem from '../ReportItem'; +import SectionHeader from '../SectionHeader'; import { Photo07, Program03 } from '../../../assets/images'; +import { StatePropType } from '../../../types'; +import Link from '../../core/Link'; import { BorderViolenceArea, Content, Intro, + LatestReportsArea, Photo, - RecentArea, + ReportLink, Section, SubTitle, TestimonialArea, - Title, TextTestimonial, TextVictim, - LatestReportsArea, - ReportLink + Title } from './styles'; -import { StatePropType } from '../../../types'; -import config from '../../../setup/config'; -import ReportItem from '../ReportItem'; const WhySection = ({ state }) => { const { colors, language } = state.theme; @@ -48,6 +48,7 @@ const WhySection = ({ state }) => { const URL = reports[id]._links['wp:post_type'][0].href; latests.push(URL); }); + latests.reverse(); setLatestReports(latests); } }; @@ -78,20 +79,25 @@ const WhySection = ({ state }) => { {texts.victim} - {texts.borderViolence} - - {latestReports && - latestReports.map(reportUrl => ( - - ))} - - - {texts.moreReports} - + + {texts.borderViolence} + + {latestReports.length > 0 && ( + <> + + {latestReports.map(reportUrl => ( + + ))} + + + {texts.moreReports} + + + )} - + {/* {texts.recentTestimonials} - + */} ); diff --git a/packages/nnk/src/components/views/Why/styles.js b/packages/nnk/src/components/views/Why/styles.js index c9b774c..9649520 100644 --- a/packages/nnk/src/components/views/Why/styles.js +++ b/packages/nnk/src/components/views/Why/styles.js @@ -5,7 +5,9 @@ import { fontText, sizeLarge, sizeLargeTitle, - sizeXLargeTitle + sizeSmallTitle, + sizeXLargeTitle, + sizeXXLarge } from '../../../setup/themes'; import Link from '../../core/Link'; @@ -19,35 +21,59 @@ const WhyArea = styled.div` text-align: justify; `; -export const BorderViolenceArea = styled(WhyArea)``; +export const BorderViolenceArea = styled(WhyArea)` + width: 100%; + + @media only screen and (min-width: 1200px) { + width: 80%; + } +`; BorderViolenceArea.displayName = 'BorderViolenceArea'; export const Content = styled.div` - padding: 20px 80px; + padding: 20px; + + @media only screen and (min-width: 768px) { + padding: 20px 80px; + } `; Content.displayName = 'Content'; export const Intro = styled(BaseText)` text-align: justify; - font-size: ${sizeLarge}; + font-size: ${sizeSmallTitle}; color: ${({ colors }) => colors && colors.secondary}; + + @media only screen and (min-width: 1200px) { + font-size: ${sizeLarge}; + } `; Intro.displayName = 'Intro'; export const LatestReportsArea = styled.div` display: flex; - flex-direction: row; + flex-direction: column; align-items: center; justify-content: center; margin: auto; + + @media only screen and (min-width: 1200px) { + flex-direction: row; + } `; LatestReportsArea.displayName = 'LatestReportsArea'; export const Photo = styled.div` margin: 20px auto; - height: 200px; - width: 200px; + height: 150px; + width: 150px; overflow: hidden; + + @media only screen and (min-width: 1200px) { + height: 200px; + width: 200px; + } + ${({ img }) => css` border-radius: 50%; @@ -87,7 +113,11 @@ SubTitle.displayName = 'SubTitle'; export const TestimonialArea = styled(WhyArea)` margin: 20px auto; - width: 50%; + width: 100%; + + @media only screen and (min-width: 1200px) { + width: 50%; + } `; TestimonialArea.displayName = 'TestimonialArea'; @@ -99,22 +129,35 @@ Text.displayName = 'Text'; export const TextTestimonial = styled(Text)` text-align: center; - font-size: ${sizeLarge}; + font-size: ${sizeSmallTitle}; font-style: italic; + + @media only screen and (min-width: 1200px) { + font-size: ${sizeLarge}; + } `; Intro.displayName = 'Intro'; export const TextVictim = styled(Text)` margin: 20px auto; text-align: center; - font-size: ${sizeLarge}; + font-size: ${sizeSmallTitle}; font-weight: 700; + + @media only screen and (min-width: 1200px) { + font-size: ${sizeLarge}; + } `; Intro.displayName = 'Intro'; export const Title = styled(BaseTitle)` margin: 50px auto; - font-size: ${sizeXLargeTitle}; + font-size: ${sizeXXLarge}; color: ${({ colors }) => colors && colors.terciary}; + text-align: center; + + @media only screen and (min-width: 1200px) { + font-size: ${sizeXLargeTitle}; + } `; Title.displayName = 'Title'; diff --git a/packages/nnk/src/db/help-us.json b/packages/nnk/src/db/help-us.json index 3bdd87f..33beb23 100644 --- a/packages/nnk/src/db/help-us.json +++ b/packages/nnk/src/db/help-us.json @@ -1,6 +1,6 @@ { "en": { - "title": "Support the move", + "title": "Donate", "values": [ { "title": "100% INDEPENDENT", diff --git a/packages/nnk/src/db/homepage.json b/packages/nnk/src/db/homepage.json index bbc167c..7d849a5 100644 --- a/packages/nnk/src/db/homepage.json +++ b/packages/nnk/src/db/homepage.json @@ -1,6 +1,7 @@ { "en": { "description": "No Name Kitchen is a grassroots independent organization working\n to support human beings who decide to migrate in the pursuit of a better life.", + "mainText": "\"Human beings shall be free to move\nsearching for a future where no war,\npoverty, or disease, ruins their hope\"", "subItems": [ { "title": "our projects", diff --git a/packages/nnk/src/db/jttf.json b/packages/nnk/src/db/jttf.json index 0f42d66..11aa105 100644 --- a/packages/nnk/src/db/jttf.json +++ b/packages/nnk/src/db/jttf.json @@ -1,6 +1,7 @@ { "en": { "title": "Jump To The Field", + "titleAlt": "Join us", "text1": "NNK is based on the effort of individual activists that every year go to the field and work to support People on the Move across Greece, Serbia, Bosnia, Montenegro and Melilla. The actions takes place in in sensitive environments, where frustration often derived in tensions among refugees and locals.", "text2": "Volunteers are in the middle. Working conditions are stressful and challenging. PoM might express grudge when feeling discriminated, while locals might be frustrated by the chaotic situation, and it requires self-responsibility and maturity, as everything that volunteers do on the field influence on how the locals perceive other volunteers and NNK overall.", "text3": "If you feel ready to join the move, check the requirements below and fulfill the form. NNK receives many applications, so be patient, and we´ll contact you.", diff --git a/packages/nnk/src/db/why.json b/packages/nnk/src/db/why.json index 5d6a05b..727098d 100644 --- a/packages/nnk/src/db/why.json +++ b/packages/nnk/src/db/why.json @@ -1,7 +1,7 @@ { "en": { "title": "Why?", - "intro": "Many people are forced to escape from armed conflicts, discrimination or poverty,\nfleeing to find the peace and civil rights that they are missing at home.\n However, there are no safe pathways and people are exposed to hunger, pain and trauma.", + "intro": "Many people are forced to escape from armed conflicts, discrimination or poverty,\nfleeing to find the peace and civil rights that they are missing at home. However,\nthere are no safe pathways and people are exposed to hunger, pain and trauma.", "fullInto": "Many people are forced to escape from armed conflicts, discrimination or poverty. Most of them flee to find in Europe the peace and civil rights that they are missing at home. However, there are no safe pathways to migrate and people are exposed to hunger, pain and trauma while authorities reject them applying violence instead of sustainable solutions.", "testimonial": "\"It was midnight. We were in the forest in Croatia when the police stopped us. I told them I need asylum, because my life is in danger, but they laugh at me and started to hit us with their sticks...\"", "victim": "Ava (26 years old). She is moving from Iran to Germany.", diff --git a/packages/nnk/src/setup/config.js b/packages/nnk/src/setup/config.js index cb49f59..a333811 100644 --- a/packages/nnk/src/setup/config.js +++ b/packages/nnk/src/setup/config.js @@ -35,7 +35,7 @@ export default { ], partnersEmail: 'partners@nonamekitchen.org', account: { - name: 'NO NAMED KITCHEN', + name: 'NO NAME KITCHEN', address: 'C/ Jovellanos 8 – Gijon (Spain)', iban: 'ES90 0081 5155 7100 0198 4102', swift: 'BSABESBBXXX' diff --git a/packages/nnk/src/setup/globalStyles.js b/packages/nnk/src/setup/globalStyles.js index 7659cff..be320c9 100644 --- a/packages/nnk/src/setup/globalStyles.js +++ b/packages/nnk/src/setup/globalStyles.js @@ -102,6 +102,16 @@ export const globalStyles = css` button { outline: none; } + html { + font-size: 10px; + + @media only screen and (min-width: 768px) { + font-size: 15px; + } + @media only screen and (min-width: 1024px) { + font-size: 16px; + } + } `; export const NotDisplayed = css` diff --git a/packages/nnk/src/setup/themes.js b/packages/nnk/src/setup/themes.js index 99c716d..fe63412 100644 --- a/packages/nnk/src/setup/themes.js +++ b/packages/nnk/src/setup/themes.js @@ -5,7 +5,7 @@ import { DARK, LIGHT } from '../constants/theme'; export const THEMES = { [DARK]: { - primary: '#212121', + primary: '#0c0c0c', secondary: '#f8f8ff', terciary: '#da002b', neutral: '#868686', @@ -55,5 +55,5 @@ export const BaseText = styled.p` font-size: ${sizeMedium}; font-weight: normal; line-height: 2.2; - white-space: wrap; + white-space: normal; `; diff --git a/packages/nnk/src/utils/index.js b/packages/nnk/src/utils/index.js index 7e6d114..6a9542f 100644 --- a/packages/nnk/src/utils/index.js +++ b/packages/nnk/src/utils/index.js @@ -10,10 +10,10 @@ export const getSocialLinks = linksToDisplay => { export const getMediaQuery = () => { if (typeof window !== 'undefined' && window.document) { - if (window.innerWidth <= 768) { + if (window.innerWidth < 768) { return MOBILE; } - if (window.innerWidth <= 1000) { + if (window.innerWidth < 1200) { return TABLET; } } @@ -35,7 +35,7 @@ export const validateForm = (type, value) => { case 'email': return emailRegex.test(value.toLowerCase()); case 'name': - return value.length >= 4 && !!/\s/.exec(value) && !/\d/.exec(value); + return value.length >= 4 && !/\d/.exec(value); case 'message': default: return value.length > 2; @@ -43,9 +43,4 @@ export const validateForm = (type, value) => { }; export const allValidated = form => - Object.keys(form).every(field => { - console.log('$$$ field', field); - console.log('$$$ form[field]', form[field]); - console.log('$$$ form[field]', form[field].isValid); - return form[field].isValid; - }); + Object.keys(form).every(field => form[field].isValid);