Use flexbox for dashboard layout

This commit is contained in:
Jesse Lucas 2020-03-27 21:51:40 -04:00
parent 7226a87c6d
commit 485a234263

View File

@ -1,15 +1,12 @@
<div class="grid-container" gdAreas="header header | folders devices | status-list status-list | footer footer" <!--<div class="grid-container" gdAreas="header header | folders devices | status-list status-list | footer footer"
gdGap="16px" gdRows="auto auto auto"> gdGap="16px" gdRows="auto auto auto"> -->
<div gdArea="header"> <!--<div class="grid-container" fxLayout="row" fxLayoutGap="16px grid" fxLayoutAlign="stretch">-->
<div fxLayout="column" fxLayoutGap="16px" class="grid-container">
<h1>Tech UI</h1> <h1>Tech UI</h1>
</div> <div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="space-between stretch">
<div gdArea="folders"> <app-folder-chart fxFlex="50"></app-folder-chart>
<app-folder-chart></app-folder-chart> <app-device-chart fxFlex="50"></app-device-chart>
</div>
<div gdArea="devices">
<app-device-chart></app-device-chart>
</div> </div>
<app-status-list gdArea="status-list"></app-status-list> <app-status-list gdArea="status-list"></app-status-list>
<div gdArea="footer"> <div></div>
</div>
</div> </div>