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

💄 modifing ui of dashboard

Browse Source
This commit is contained in:
José Corte 2022-05-06 19:25:16 -03:00
parent 76fd465ee4
commit 0920abc9d8
2 changed files with 43 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
pages/dashboard.tsx
View File

@ -3,31 +3,25 @@ import React from 'react'
import { DashboardView } from '../styles/layouts/Dashboard/DashboardView' import { DashboardView } from '../styles/layouts/Dashboard/DashboardView'
import MapCard from '../src/components/mapCard/MapCard' import MapCard from '../src/components/mapCard/MapCard'
import GraphCard from '../src/components/graph/graphCard/GraphCard' import GraphCard from '../src/components/graph/graphCard/GraphCard'
import Sidebar from '../src/components/sidebar/Sidebar'
export default function Dashboard() { export default function Dashboard() {
return ( return (
<div style={{ <DashboardView>
'display': 'flex', <h1>Visão Geral</h1>
'flexDirection': 'row' <span>Bem Vindo a Smart Energia</span>
}}> <section className="cardsSection" >
<Sidebar /> <MapCard title='R$/MWh' subtitle='abril / 22' statistic='' imgSource='/moneyIcon.svg' />
<DashboardView> <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
<h1>Visão Geral</h1> <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
<span>Bem Vindo a Smart Energia</span> <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
<section className="cardsSection" > <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
<MapCard title='R$/MWh' subtitle='abril / 22' statistic='' imgSource='/moneyIcon.svg' /> </section>
<MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
<MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
<MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
<MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
</section>
<section className='dashboard'> <section className='dashboard'>
<GraphCard title='Consumo' subtitle='Gráfico de Consumo' consumption={25} /> <GraphCard title='Consumo' subtitle='Gráfico de Consumo' consumption={25} />
<GraphCard title='Consumo' subtitle='Gráfico de Consumo' /> <GraphCard title='Consumo' subtitle='Gráfico de Consumo' />
</section> <GraphCard title='Consumo' subtitle='Gráfico de Consumo' className='footerGraph' />
</DashboardView> </section>
</div> </DashboardView>
) )
} }

45
styles/layouts/Dashboard/DashboardView.ts
View File

@ -16,10 +16,7 @@ export const DashboardView = styled.main`
width: 100%; width: 100%;
margin: 0 0 0 20rem; padding: 30px;
padding-left: 30px;
padding-right: 30px;
span { span {
font-family: 'Poppins'; font-family: 'Poppins';
@ -72,34 +69,46 @@ export const DashboardView = styled.main`
.dashboard { .dashboard {
display: grid; display: grid;
grid-template-columns: 50% 50%; grid-template-columns: 50% 50% 100%;
grid-template-rows: 100%; grid-template-rows: 50% 50%;
gap: 40px; gap: 30px;
width: 99%; width: 99%;
/* flex-wrap: wrap; */ padding-right: 20px;
.footerGraph {
grid-row-start: 2;
grid-column-start: 1;
grid-column-end: 3;
}
} }
@media (max-width: 1195px) { @media (max-width: 1195px) {
/* align-items: center; */
width: 100%;
padding: 30px;
margin: 0; margin: 0;
margin-top: 80px;
margin-left: 20px;
}
@media (max-width: 1195px) {
.dashboard { .dashboard {
display: grid; display: flex;
grid-template-columns: 100%; padding: 0;
grid-template-rows: 50% 50%; margin: 0;
gap: 40px; justify-content: center;
align-items: center;
flex-wrap: wrap;
grid-template-columns: 50% 50%;
grid-auto-rows: 1;
grid-auto-columns: 1;
width: 100%; width: 100%;
/* flex-wrap: wrap; */
} }
} }
` `