Smart/smartEnergyView-frontend
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

📱 responsiving pages

Browse Source
This commit is contained in:
joseCorte-exe 2022-05-11 12:46:42 -03:00
parent 175af9af1d
commit 3c51cdbc54
14 changed files with 68 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
pages/aboutUs.tsx
View File

@ -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.</p>
<ul>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />Informação</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />Economia</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />Gestão de Energia</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />Imparcialidade</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />Previsão de Custos</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />Experiência</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />Relacionamento</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Informação'}</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Economia'}</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Gestão de Energia'}</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Imparcialidade'}</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Previsão de Custos'}</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Experiência'}</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Relacionamento'}</li>
</ul>
<article>

2
pages/faq.tsx
View File

@ -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'

20
src/components/banner/BannerView.ts
View File

@ -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%;
}
`

2
src/components/buttons/basicButton/BasicButtonView.ts
View File

@ -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 */

0
src/components/commonQuestionsCard/FaqQuestionsCard.tsx → src/components/faqQuestionsCard/FaqQuestionsCard.tsx
View File

11
src/components/commonQuestionsCard/FaqQuestionsCardView.ts → src/components/faqQuestionsCard/FaqQuestionsCardView.ts
View File

@ -28,11 +28,18 @@ export const FaqQuestionsCardBody = styled.div<CardBodyInterface>`
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;
}
}
`

2
src/components/header/Header.tsx
View File

@ -53,7 +53,7 @@ export default function Header({ name }: headerInterface) {
/>
</section>
<section>
<Image src='/assets/png/copel.png' width={150} height={50} />
<Image src='/assets/png/copel.png' width={170} height={50} />
<div className='icon' >
olá, {'josé'}
</div>

2
src/components/header/HeaderView.ts
View File

@ -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;

2
src/components/pageTitle/PageTitleView.ts
View File

@ -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;

4
src/components/sidebar/Sidebar.tsx
View File

@ -19,7 +19,7 @@ export default function Sidebar() {
return (
<SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
<div className='hamburger' onClick={() => setViewModal(!viewModal)} >
<Image src='/assets/hamburgerModal.svg' width={25} height={25} />
<Image src='/assets/hamburgerModal.svg' width={60} height={60} />
</div>
<div className='imageNext'>
<Image src='/assets/logo.svg' width={100} height={100} />
@ -28,7 +28,7 @@ export default function Sidebar() {
<Link href='/dashboard'><li className={router.pathname=='/dashboard'? 'actualPath' : null} ><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Visão Geral'}</li></Link>
<Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} ><Image src='/assets/sidebar/consumptionIcon.svg' width={25} height={25} />{'Consumo'}</li></Link>
<Link href='/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</li></Link>
<li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia >'}</li>
<li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia'}</li>
<div className='economiaDrawer drawer' >
<Link href='/grossSavings'><li>Economia Bruta</li></Link>
<Link href='/accumulatedSavings'><li>Economia Acumulada</li></Link>

22
src/components/sidebar/SidebarView.ts
View File

@ -15,6 +15,7 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
flex-direction: column;
width: 20%;
min-width: 15rem;
margin: 0;
padding: 0;
@ -27,16 +28,7 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
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<SidebarViewInterface>`
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 27px;
color: #969BA0;
@ -131,7 +122,7 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
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<SidebarViewInterface>`
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;

2
styles/app/AppView.ts
View File

@ -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;
}

14
styles/layouts/aboutUs/AboutUsView.ts
View File

@ -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;
}
}
`

4
styles/layouts/commonQuestions/FaqView.ts
View File

@ -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;