octoleo/syncthing
1
0
Fork 0
mirror of https://github.com/octoleo/syncthing.git synced 2024-12-28 13:00:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Create tech ui card css to replace material cards

Browse Source
This commit is contained in:
Jesse Lucas 2020-03-27 21:51:24 -04:00
parent 7aca2bcbc0
commit 7226a87c6d
4 changed files with 29 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/charts/device-chart/device-chart.component.html
View File

@ -1,6 +1,6 @@
<mat-card class="{{elevation}}">
<mat-card-title>Devices</mat-card-title>
<mat-card-content>
<div class="{{elevation}} tui-card">
<div class="tui-card-title">Devices</div>
<div class="tui-card-content">
<div fxLayout="row" fxLayoutAlign="space-between start">
<app-donut-chart [elementID]="chartID"></app-donut-chart>
<div class="items" fxLayout="column" fxLayoutAlign="space-evenly end">
@ -8,5 +8,5 @@
</app-chart-item>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>

10
src/app/charts/folder-chart/folder-chart.component.html
View File

@ -1,6 +1,6 @@
<mat-card class="{{elevation}}">
<mat-card-title>Folders</mat-card-title>
<mat-card-content>
<div class="{{elevation}} tui-card">
<div class="tui-card-title">Folders</div>
<div class="tui-card-content">
<div fxLayout="row" fxLayoutAlign="space-between start">
<app-donut-chart [elementID]="chartID"></app-donut-chart>
<div class="items" fxLayout="column" fxLayoutAlign="space-evenly end">
@ -8,5 +8,5 @@
</app-chart-item>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>

12
src/app/lists/status-list/status-list.component.html
View File

@ -1,10 +1,10 @@
<mat-card class="{{elevation}}">
<div class="{{elevation}} tui-card">
<div fxLayout="row" fxLayoutAlign="space-between start">
<mat-card-title>Status</mat-card-title>
<app-list-toggle (listTypeEvent)="onToggle($event)"></app-list-toggle>
<div class="tui-card-title">Status</div>
<app-list-toggle (listTypeEvent)="onToggle($event)" class="tui-card-content"></app-list-toggle>
</div>
<mat-card-content>
<div class="tui-card-content">
<app-folder-list *ngIf="currentListType===listType.Folders"></app-folder-list>
<app-device-list *ngIf="currentListType===listType.Devices"></app-device-list>
</mat-card-content>
</mat-card>
</div>
</div>

14
src/styles.scss
View File

@ -78,6 +78,18 @@ html, body {
font-family: mat-font-family($tech-ui-typography);
line-height: mat-line-height($tech-ui-typography, body-1);
}
.mat-card-title {
.tui-card {
background-color: white;
border-radius: 4px;
height: 100%;
}
.tui-card-title {
padding: 16px 16px 0 16px;
font-size: mat-font-size($tech-ui-typography, subheading-2)
}
.tui-card-content {
padding: 16px;
}