feat: working on responsive

discorddomain · Jul 8, 2020 · 906907c · 906907c
1 parent 39135cd
commit 906907c
Show file tree

Hide file tree

Showing 15 changed files with 208 additions and 65 deletions.
diff --git a/public/images/misc/home-tv.jpg b/public/images/misc/home-tv.jpg
diff --git a/public/index.html b/public/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
     <title>Netflix</title>
   </head>
   <body>

diff --git a/src/components/accordion/index.js b/src/components/accordion/index.js
@@ -1,5 +1,6 @@
 import React, { useState, useContext, createContext } from 'react';
 import AddIcon from '@material-ui/icons/Add';
+import CloseIcon from '@material-ui/icons/Close';
 import { Container, Frame, Title, Item, Inner, Header, Body } from './styles/accordion';
 
 const ToggleContext = createContext();
@@ -36,7 +37,7 @@ Accordion.Header = function AccordionHeader({ children, ...restProps }) {
   return (
     <Header onClick={() => setToggleShow(!toggleShow)} {...restProps}>
       {children}
-      <AddIcon fontSize="large" />
+      {toggleShow ? <CloseIcon fontSize="large" /> : <AddIcon fontSize="large" />}
     </Header>
   );
 };

diff --git a/src/components/accordion/styles/accordion.js b/src/components/accordion/styles/accordion.js
@@ -24,6 +24,10 @@ export const Title = styled.h1`
   margin-bottom: 8px;
   color: white;
   text-align: center;
+
+  @media (max-width: 600px) {
+    font-size: 35px;
+  }
 `;
 
 export const Item = styled.div`
@@ -45,6 +49,11 @@ export const Header = styled.div`
   background: #303030;
   padding: 0.8em 1.2em 0.8em 1.2em;
   user-select: none;
+  align-items: center;
+
+  @media (max-width: 600px) {
+    font-size: 16px;
+  }
 `;
 
 export const Body = styled.div`
@@ -57,4 +66,9 @@ export const Body = styled.div`
   padding: 0.8em 2.2em 0.8em 1.2em;
   white-space: pre-wrap;
   user-select: none;
+
+  @media (max-width: 600px) {
+    font-size: 16px;
+    line-height: 22px;
+  }
 `;
diff --git a/src/components/card/styles/card.js b/src/components/card/styles/card.js
@@ -1,11 +1,26 @@
 import styled from 'styled-components/macro';
 
+export const Title = styled.p`
+  font-size: 24px;
+  color: #e5e5e5;
+  font-weight: bold;
+  margin-left: 56px;
+  margin-right: 56px;
+  margin-top: 0;
+`;
+
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
   margin-bottom: 50px;
   box-sizing: border-box;
 
+  > ${Title} {
+    @media (max-width: 1000px) {
+      margin-left: 30px;
+    }
+  }
+
   &:last-of-type {
     margin-bottom: 0;
   }
@@ -16,15 +31,10 @@ export const Group = styled.div`
   flex-direction: ${({ flexDirection }) => (flexDirection === 'row' ? 'row' : 'column')};
   ${({ alignItems }) => alignItems && `align-items: ${alignItems}`};
   ${({ margin }) => margin && `margin: ${margin}`};
-`;
 
-export const Title = styled.p`
-  font-size: 24px;
-  color: #e5e5e5;
-  font-weight: bold;
-  margin-left: 56px;
-  margin-right: 56px;
-  margin-top: 0;
+  @media (min-width: 1100px) {
+    margin-top: -150px;
+  }
 `;
 
 export const SubTitle = styled.p`
@@ -83,20 +93,37 @@ export const Item = styled.div`
     z-index: 99;
   }
 
-  &:hover ${Meta}, &:hover ${Text}, &:hover ${SubTitle} {
-    display: block;
-    z-index: 100;
+  @media (min-width: 1200px) {
+    &:hover ${Meta}, &:hover ${Text}, &:hover ${SubTitle} {
+      display: block;
+      z-index: 100;
+    }
   }
 
   &:first-of-type {
     margin-left: 56px;
+
+    @media (max-width: 1000px) {
+      margin-left: 30px;
+    }
   }
 
   &:last-of-type {
     margin-right: 56px;
+
+    @media (max-width: 1000px) {
+      margin-right: 30px;
+    }
   }
 `;
 
+export const FeatureText = styled.p`
+  font-size: 18px;
+  color: white;
+  font-weight: ${({ fontWeight }) => (fontWeight === 'bold' ? 'bold' : 'normal')};
+  margin: 0;
+`;
+
 export const Feature = styled.div`
   display: flex;
   flex-direction: row;
@@ -107,19 +134,26 @@ export const Feature = styled.div`
   background-position-x: right;
   background-repeat: no-repeat;
   background-color: black;
+
+  @media (max-width: 1000px) {
+    height: auto;
+    background-size: auto;
+
+    ${Title} {
+      font-size: 20px;
+      line-height: 20px;
+      margin-bottom: 10px;
+    }
+    ${FeatureText} {
+      font-size: 14px;
+    }
+  }
 `;
 
 export const FeatureTitle = styled(Title)`
   margin-left: 0;
 `;
 
-export const FeatureText = styled.p`
-  font-size: 18px;
-  color: white;
-  font-weight: ${({ fontWeight }) => (fontWeight === 'bold' ? 'bold' : 'normal')};
-  margin: 0;
-`;
-
 export const Content = styled.div`
   margin: 56px;
   max-width: 500px;
@@ -132,6 +166,11 @@ export const Content = styled.div`
     top: 20px;
     cursor: pointer;
   }
+
+  @media (max-width: 1000px) {
+    margin: 30px;
+    max-width: none;
+  }
 `;
 
 export const Maturity = styled.div`

diff --git a/src/components/feature/styles/feature.js b/src/components/feature/styles/feature.js
@@ -5,7 +5,7 @@ export const Container = styled.div`
   flex-direction: column;
   border-bottom: 8px solid #222;
   text-align: center;
-  padding: 165px 0;
+  padding: 165px 45px;
 `;
 
 export const Title = styled.h1`
@@ -15,14 +15,18 @@ export const Title = styled.h1`
   font-weight: 500;
   margin: auto;
 
-  @media (min-width: 950px) {
-    font-size: 64px;
+  @media (max-width: 600px) {
+    font-size: 35px;
   }
 `;
 
 export const SubTitle = styled.h2`
   color: white;
   font-size: 26px;
-  font-weight: norma;
+  font-weight: normal;
   margin: 16px auto;
+
+  @media (max-width: 600px) {
+    font-size: 18px;
+  }
 `;
diff --git a/src/components/footer/styles/footer.js b/src/components/footer/styles/footer.js
@@ -2,23 +2,30 @@ import styled from 'styled-components/macro';
 
 export const Container = styled.div`
   display: flex;
-  padding: 70px 45px;
+  padding: 70px 56px;
   margin: auto;
   max-width: 1000px;
   flex-direction: column;
-`;
 
-export const Row = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex-wrap: wrap;
-  justify-content: space-around;
+  @media (max-width: 1000px) {
+    padding: 70px 30px;
+  }
 `;
 
 export const Column = styled.div`
   display: flex;
   flex-direction: column;
+  text-align: left;
+`;
+
+export const Row = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+  grid-gap: 15px;
+
+  @media (max-width: 1000px) {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  }
 `;
 
 export const Link = styled.a`
@@ -32,16 +39,12 @@ export const Title = styled.p`
   font-size: 16px;
   color: #757575;
   margin-bottom: 40px;
-  margin-left: 70px;
-  margin-right: 70px;
 `;
 
 export const Text = styled.p`
   font-size: 13px;
   color: #757575;
   margin-bottom: 40px;
-  margin-left: 72px;
-  margin-right: 72px;
 `;
 
 export const Break = styled.div`

diff --git a/src/components/header/styles/header.js b/src/components/header/styles/header.js
@@ -6,6 +6,10 @@ export const Background = styled.div`
   flex-direction: column;
   background: url(${({ src }) => (src ? `../images/misc/${src}.jpg` : '../images/misc/home-bg.jpg')}) top left / cover
     no-repeat;
+
+  @media (max-width: 1100px) {
+    ${({ dontShowOnSmallViewPort }) => dontShowOnSmallViewPort && `background: none;`}
+  }
 `;
 
 export const Container = styled.div`
@@ -15,6 +19,14 @@ export const Container = styled.div`
   padding: 18px 0;
   justify-content: space-between;
   align-items: center;
+
+  a {
+    display: flex;
+  }
+
+  @media (max-width: 1000px) {
+    margin: 0 30px;
+  }
 `;
 
 export const Link = styled.p`
@@ -39,7 +51,7 @@ export const Group = styled.div`
 `;
 
 export const SearchInput = styled.input`
-  background-color: transparent;
+  background-color: #44444459;
   color: white;
   border: 1px solid white;
   transition: width 0.5s;
@@ -59,6 +71,10 @@ export const Search = styled.div`
     color: white;
     cursor: pointer;
   }
+
+  @media (max-width: 700px) {
+    display: none;
+  }
 `;
 
 export const ButtonLink = styled(ReachRouterLink)`
@@ -152,6 +168,10 @@ export const Feature = styled(Container)`
   flex-direction: column;
   align-items: normal;
   width: 50%;
+
+  @media (max-width: 1100px) {
+    display: none;
+  }
 `;
 
 export const FeatureCallOut = styled.h2`

diff --git a/src/components/jumbotron/index.js b/src/components/jumbotron/index.js
@@ -1,14 +1,18 @@
 import React from 'react';
-import { Container, Inner, Pane, Title, SubTitle, Image } from './styles/jumbotron';
+import { Container, Item, Inner, Pane, Title, SubTitle, Image } from './styles/jumbotron';
 
 export default function Jumbotron({ children, direction = 'row', ...restProps }) {
   return (
-    <Container {...restProps}>
+    <Item {...restProps}>
       <Inner direction={direction}>{children}</Inner>
-    </Container>
+    </Item>
   );
 }
 
+Jumbotron.Container = function JumbotronContainer({ children, ...restProps }) {
+  return <Container {...restProps}>{children}</Container>;
+};
+
 Jumbotron.Pane = function JumbotronPane({ children, ...restProps }) {
   return <Pane {...restProps}>{children}</Pane>;
 };