Merge branch 'release/0.6.0'

annabranco · Dec 11, 2020 · a40271b · a40271b · vercel · Dec 11, 2020
2 parents f4e0b42 + 79eaf44
commit a40271b
Show file tree

Hide file tree

Showing 59 changed files with 1,226 additions and 710 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 (
     <MainContainer colors={colors}>
       <MainModule />
-      <PageSection size="large" colors={colors}>
+      <PageSection
+        size={getMediaQuery() === MOBILE ? 'full' : 'large'}
+        colors={colors}
+      >
         <BasicModule
           texts={homepageTexts}
           whyTexts={whyTexts}

diff --git a/packages/nnk/src/components/controllers/MainPage/styles.js b/packages/nnk/src/components/controllers/MainPage/styles.js
@@ -7,5 +7,6 @@ export const MainContainer = styled.div`
   align-items: center;
   background-color: ${({ colors }) => 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
@@ -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
@@ -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
@@ -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
@@ -1,23 +1,42 @@
 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;
   flex-direction: column;
   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';
 
 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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`