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

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

@ -16,10 +16,7 @@ export const DashboardView = styled.main`
width: 100%;
margin: 0 0 0 20rem;
padding-left: 30px;
padding-right: 30px;
padding: 30px;
span {
font-family: 'Poppins';
@ -72,34 +69,46 @@ export const DashboardView = styled.main`
.dashboard {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 100%;
grid-template-columns: 50% 50% 100%;
grid-template-rows: 50% 50%;
gap: 40px;
gap: 30px;
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) {
/* align-items: center; */
width: 100%;
padding: 30px;
margin: 0;
margin-top: 80px;
margin-left: 20px;
}
@media (max-width: 1195px) {
.dashboard {
display: grid;
display: flex;
grid-template-columns: 100%;
grid-template-rows: 50% 50%;
padding: 0;
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%;
/* flex-wrap: wrap; */
}
}
`