From 3c51cdbc54610647f2e0062b75095372dfcfea46 Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Wed, 11 May 2022 12:46:42 -0300 Subject: [PATCH 1/2] :iphone: responsiving pages --- pages/aboutUs.tsx | 14 ++++++------ pages/faq.tsx | 2 +- src/components/banner/BannerView.ts | 20 ++++++++++++++++- .../buttons/basicButton/BasicButtonView.ts | 2 +- .../FaqQuestionsCard.tsx | 0 .../FaqQuestionsCardView.ts | 11 ++++++++-- src/components/header/Header.tsx | 2 +- src/components/header/HeaderView.ts | 2 +- src/components/pageTitle/PageTitleView.ts | 2 +- src/components/sidebar/Sidebar.tsx | 4 ++-- src/components/sidebar/SidebarView.ts | 22 +++++++++---------- styles/app/AppView.ts | 2 +- styles/layouts/aboutUs/AboutUsView.ts | 14 +++++++++++- styles/layouts/commonQuestions/FaqView.ts | 4 ++-- 14 files changed, 68 insertions(+), 33 deletions(-) rename src/components/{commonQuestionsCard => faqQuestionsCard}/FaqQuestionsCard.tsx (100%) rename src/components/{commonQuestionsCard => faqQuestionsCard}/FaqQuestionsCardView.ts (84%) diff --git a/pages/aboutUs.tsx b/pages/aboutUs.tsx index d59ebc2..cef1d84 100644 --- a/pages/aboutUs.tsx +++ b/pages/aboutUs.tsx @@ -24,13 +24,13 @@ export default function aboutUs() { aplicamos as mesmas premissas a favor dos Consumidores, disponibilizando assim um diferencial único para a tomada de decisão e elaboração das estratégias de contratação de energia.

diff --git a/pages/faq.tsx b/pages/faq.tsx index a81e156..164eae9 100644 --- a/pages/faq.tsx +++ b/pages/faq.tsx @@ -1,5 +1,5 @@ import React from 'react' -import CommonQuestionsCard from '../src/components/commonQuestionsCard/FaqQuestionsCard' +import CommonQuestionsCard from '../src/components/faqQuestionsCard/FaqQuestionsCard' import Header from '../src/components/header/Header' import { FaqView } from '../styles/layouts/commonQuestions/FaqView' diff --git a/src/components/banner/BannerView.ts b/src/components/banner/BannerView.ts index 6054c72..7f46aff 100644 --- a/src/components/banner/BannerView.ts +++ b/src/components/banner/BannerView.ts @@ -2,6 +2,10 @@ import styled from 'styled-components' export const BannerView = styled.div` position: relative; + + display: flex; + align-items: center; + width: 100%; height: 19rem; @@ -18,7 +22,7 @@ export const BannerView = styled.div` .text { position: relative; - margin: 82px 0 0 20px; + margin: 0 0 0 20px; font-family: 'Poppins'; font-style: normal; @@ -26,5 +30,19 @@ export const BannerView = styled.div` color: white; z-index: 2; + + overflow: hidden; + + p { + font-size: 30px; + } + + * { + margin: 0; + } + } + + @media (max-width: 1008px) { + font-size: 170%; } ` diff --git a/src/components/buttons/basicButton/BasicButtonView.ts b/src/components/buttons/basicButton/BasicButtonView.ts index 5c66b88..2492db7 100644 --- a/src/components/buttons/basicButton/BasicButtonView.ts +++ b/src/components/buttons/basicButton/BasicButtonView.ts @@ -13,7 +13,7 @@ export const BasicButtonView = styled.button` border-style: none; font-family: 'Poppins'; - font-size: 16px; + font-size: 90%; /* identical to box height */ diff --git a/src/components/commonQuestionsCard/FaqQuestionsCard.tsx b/src/components/faqQuestionsCard/FaqQuestionsCard.tsx similarity index 100% rename from src/components/commonQuestionsCard/FaqQuestionsCard.tsx rename to src/components/faqQuestionsCard/FaqQuestionsCard.tsx diff --git a/src/components/commonQuestionsCard/FaqQuestionsCardView.ts b/src/components/faqQuestionsCard/FaqQuestionsCardView.ts similarity index 84% rename from src/components/commonQuestionsCard/FaqQuestionsCardView.ts rename to src/components/faqQuestionsCard/FaqQuestionsCardView.ts index 396f619..91d16dd 100644 --- a/src/components/commonQuestionsCard/FaqQuestionsCardView.ts +++ b/src/components/faqQuestionsCard/FaqQuestionsCardView.ts @@ -28,11 +28,18 @@ export const FaqQuestionsCardBody = styled.div` p { font-weight: 400; - font-size: 14px; - line-height: 12px; + font-size: 99%; letter-spacing: 0.5px; color: rgba(0, 0, 0, 0.6); + + text-align: left; + } + + @media (max-width: 1008px) { + p { + text-align: left; + } } ` diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index 34c865b..4bc5ffb 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -53,7 +53,7 @@ export default function Header({ name }: headerInterface) { />
- +
olá, {'josé'}
diff --git a/src/components/header/HeaderView.ts b/src/components/header/HeaderView.ts index 8b87195..d217c5e 100644 --- a/src/components/header/HeaderView.ts +++ b/src/components/header/HeaderView.ts @@ -14,7 +14,7 @@ export const HeaderView = styled.header` :last-child { display: flex; - justify-content: center; + justify-content: flex-end; align-items: flex-start; height: fit-content; diff --git a/src/components/pageTitle/PageTitleView.ts b/src/components/pageTitle/PageTitleView.ts index e903e9e..3013202 100644 --- a/src/components/pageTitle/PageTitleView.ts +++ b/src/components/pageTitle/PageTitleView.ts @@ -19,7 +19,7 @@ p { font-family: 'Poppins'; font-style: normal; font-weight: 400; - font-size: 18px; + font-size: 99%; line-height: 27px; color: #969BA0; diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 629035e..282ce6f 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -19,7 +19,7 @@ export default function Sidebar() { return (
setViewModal(!viewModal)} > - +
@@ -28,7 +28,7 @@ export default function Sidebar() {
  • {'Visão Geral'}
  • {'Consumo'}
  • {'Resumo de Op. '}
    • -
  • setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } >{'Economia >'}
    • +
  • setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } >{'Economia'}
  • Economia Bruta
  • Economia Acumulada
    • diff --git a/src/components/sidebar/SidebarView.ts b/src/components/sidebar/SidebarView.ts index 7440f24..d2d2df8 100644 --- a/src/components/sidebar/SidebarView.ts +++ b/src/components/sidebar/SidebarView.ts @@ -15,6 +15,7 @@ export const SidebarView = styled.nav` flex-direction: column; width: 20%; + min-width: 15rem; margin: 0; padding: 0; @@ -27,16 +28,7 @@ export const SidebarView = styled.nav` border-left: #254F7F solid 8px; background-color: #FAFBFF; - font-weight: 600; - font-size: 18px; - line-height: 27px; - color: #254F7F; - - stop-color: #254F7F; - .svg { - background-color: red; - } } ul { @@ -64,7 +56,6 @@ export const SidebarView = styled.nav` font-style: normal; font-weight: 500; - font-size: 16px; line-height: 27px; color: #969BA0; @@ -131,7 +122,7 @@ export const SidebarView = styled.nav` display: none; } - @media (max-width: 1548px) { + @media (max-width: 1008px) { align-items: flex-start; width: 100%; @@ -150,15 +141,22 @@ export const SidebarView = styled.nav` cursor: pointer; z-index: 2; + + height: 5rem; } .imageNext { display: none; } ul { display: ${props => props.modalOpen? 'block' : 'none'}; - min-height: 100vh; + min-height: 85vh; background-color: #FFF; + + li { + height: 7rem; + font-size: 170%; + } } aside { display: none; diff --git a/styles/app/AppView.ts b/styles/app/AppView.ts index fcfaa67..f52d117 100644 --- a/styles/app/AppView.ts +++ b/styles/app/AppView.ts @@ -6,7 +6,7 @@ export const AppView = styled.main` margin: 0 0 10rem 0; padding: 0; - @media (max-width: 1548px) { + @media (max-width: 1008px) { flex-direction: column; margin: 0; } diff --git a/styles/layouts/aboutUs/AboutUsView.ts b/styles/layouts/aboutUs/AboutUsView.ts index 3feabdd..d53880e 100644 --- a/styles/layouts/aboutUs/AboutUsView.ts +++ b/styles/layouts/aboutUs/AboutUsView.ts @@ -7,7 +7,7 @@ export const AboutUsView = styled.main` font-family: 'Poppins'; font-style: normal; font-weight: 300; - font-size: 17px; + font-size: 80%; line-height: 26px; } @@ -17,6 +17,8 @@ export const AboutUsView = styled.main` li { display: flex; margin-bottom: 8px; + + font-size: 98.98%; } } @@ -37,4 +39,14 @@ export const AboutUsView = styled.main` } } } + + @media (max-width: 1008px) { + li { + font-size: 170%!important; + } + + img { + width: 200px; + } + } ` diff --git a/styles/layouts/commonQuestions/FaqView.ts b/styles/layouts/commonQuestions/FaqView.ts index 37b4a7b..32d9b16 100644 --- a/styles/layouts/commonQuestions/FaqView.ts +++ b/styles/layouts/commonQuestions/FaqView.ts @@ -10,7 +10,7 @@ export const FaqView = styled.main` h1 { font-weight: 700; - font-size: 48px; + font-size: calc(90% + 2rem); line-height: 72px; text-align: center; letter-spacing: 0.5px; @@ -18,7 +18,7 @@ export const FaqView = styled.main` p { font-weight: 400; - font-size: 14px; + font-size: 99.98%; line-height: 21px; text-align: center; letter-spacing: 0.5px; From be1e8ad57b097608e02189d67d9b43347591ce0b Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Wed, 11 May 2022 12:51:34 -0300 Subject: [PATCH 2/2] :iphone: responsiving pages --- src/txt.txt | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/txt.txt diff --git a/src/txt.txt b/src/txt.txt new file mode 100644 index 0000000..e69de29