Skip to content

Commit 2ffd4bd

Browse files
jayhamiltonjayhamilton
committed
Minor css tweaks
1 parent 98f24f0 commit 2ffd4bd

File tree

7 files changed

+55
-57
lines changed

7 files changed

+55
-57
lines changed

‎src/app/board/board.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
[selectedIndex]="selected.value"
1111
(selectedIndexChange)="selected.setValue($event); setSelected(selected.value)"
1212
>
13-
<mat-tab
13+
<mat-tab class="mat-tab-label"
1414
*ngFor="let tab of boardData.tabs; let index = index"
1515
[label]="tab.title"
1616
>

‎src/app/board/board.component.scss‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,11 @@
1+
2+
13
$primary_color: #3f51b5;
24

35
.board-header {
4-
margin: 35px;
6+
padding: 25px;
57
}
68

7-
/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
8-
mat-tab-group {
9-
margin-left: 50px;
10-
margin-right: 50px;
11-
}
12-
13-
/* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
149
mat-card-title {
1510
color: $primary_color;
1611
}
@@ -19,6 +14,14 @@ mat-card-title {
1914
display: grid;
2015
align-items: center;
2116
}
17+
18+
::ng-deep .mat-tab-group .mat-tab-labels {
19+
justify-content: flex-start;
20+
}
21+
22+
::ng-deep .mat-tab-label {
23+
text-align: left;
24+
}
2225
p {
2326
font-style: "Roboto";
2427
size: 10px;

‎src/app/library/library.component.html‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,31 @@
1-
<h1>Add Tool</h1>
2-
<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
3-
<div class="grid">
4-
<mat-card appearance="outlined" class="example-card" *cdkVirtualFor="let gadget of library; let idx = index"
5-
[class]="'class_color' + idx">
6-
<mat-card-header>
7-
<div mat-card-avatar style="background-image:
1+
<div class="library-container">
2+
<h1>Add Tool</h1>
3+
<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
4+
<div class="grid">
5+
<mat-card class="library-card"
6+
*cdkVirtualFor="let gadget of library; let idx = index" [ngStyle]="{'border-top-color': colors[idx]}">
7+
<mat-card-header>
8+
<div mat-card-avatar style="background-image:
89
url('{{ gadget.icon }}')
910
; background-size: cover;" mat-card-title-group></div>
10-
<mat-card-title>{{ gadget.title }}</mat-card-title>
11-
<mat-card-subtitle>{{ gadget.subtitle }}</mat-card-subtitle>
12-
</mat-card-header>
13-
<mat-card-content>
14-
{{ gadget.description }}
15-
</mat-card-content>
16-
<mat-card-actions align="end">
17-
<button mat-mini-fab color="primary" class="tab-button" (click)="addGadget(gadget)">
18-
<mat-icon>{{ gadget.actions[0].name }}</mat-icon>
11+
<mat-card-title>{{ gadget.title }}</mat-card-title>
12+
<mat-card-subtitle>{{ gadget.subtitle }}</mat-card-subtitle>
13+
</mat-card-header>
14+
<mat-card-content>
15+
{{ gadget.description }}
16+
</mat-card-content>
17+
<mat-card-actions align="end">
18+
<button mat-mini-fab color="primary" class="tab-button" (click)="addGadget(gadget)">
19+
<mat-icon>{{ gadget.actions[0].name }}</mat-icon>
20+
</button>
21+
</mat-card-actions>
22+
</mat-card>
23+
<mat-dialog-actions align="end">
24+
<button #dialog color="primary" selected mat-button mat-dialog-close>
25+
Close
1926
</button>
20-
</mat-card-actions>
21-
</mat-card>
22-
<mat-dialog-actions align="end">
23-
<button #dialog color="primary" selected mat-button mat-dialog-close>
24-
Close
25-
</button>
26-
</mat-dialog-actions>
27-
<br />
28-
</div>
29-
</cdk-virtual-scroll-viewport>
27+
</mat-dialog-actions>
28+
<br />
29+
</div>
30+
</cdk-virtual-scroll-viewport>
31+
</div>

‎src/app/library/library.component.scss‎

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1-
.example-card {
1+
@use '@angular/material' as mat;
2+
3+
.library-card {
24
margin-bottom: 4px;
5+
max-width: 500px;
6+
@include mat.elevation(8);
37
}
48

59
.grid {
@@ -17,20 +21,6 @@ mat-card-content {
1721
margin: 10px;
1822
}
1923

20-
.class_color0 {
21-
border-top-style: solid;
22-
border-top-color: blueviolet;
23-
border-top-width: 3px;
24-
}
25-
26-
.class_color1 {
27-
border-top-style: solid;
28-
border-top-color: rgb(198, 226, 43);
29-
border-top-width: 3px;
30-
}
31-
32-
.class_color2 {
33-
border-top-style: solid;
34-
border-top-color: rgb(49, 226, 43);
35-
border-top-width: 3px;
24+
.library-container{
25+
padding: 25px !important;
3626
}

‎src/app/library/library.component.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,14 @@ export class LibraryComponent implements OnInit, AfterViewInit {
1919
@ViewChild('dialog', { read: ElementRef })
2020
libraryDialogCloseButton?: ElementRef;
2121

22+
colors = [
23+
'#FF5733', '#33FF57', '#3357FF', '#F1C40F', '#8E44AD', '#E74C3C',
24+
'#3498DB', '#2ECC71', '#1ABC9C', '#9B59B6', '#34495E', '#16A085',
25+
'#F39C12', '#D35400', '#C0392B', '#7F8C8D', '#BDC3C7', '#95A5A6',
26+
'#2980B9', '#27AE60', '#8E44AD', '#2C3E50', '#F4D03F', '#E67E22',
27+
'#D35400', '#1ABC9C', '#2ECC71', '#E74C3C', '#9B59B6', '#34495E'
28+
];
29+
2230
constructor(
2331
private libraryService: LibraryService,
2432
private eventService: EventService

‎src/app/menu/menu.component.html‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,30 +17,26 @@
1717
<span class="example-spacer"></span>
1818

1919
<span *checkPermissions>
20-
<span class="menu-text"> Configure board</span>
2120
<button mat-icon-button (click)="openConfigDialog()" class="example-icon"
2221
aria-label="Example icon-button with share icon">
2322
<mat-icon>settings</mat-icon>
2423
</button>
2524
</span>
2625

2726
<span *checkPermissions>
28-
<span class="menu-text">Add tool</span>
2927
<button mat-icon-button (click)="openGadgetLibraryDialog()" aria-label="Example icon-button with heart icon">
3028
<mat-icon>playlist_add</mat-icon>
3129
</button>
3230
</span>
3331

3432
<span *checkPermissions>
35-
<span class="menu-text">Change layout</span>
3633
<button mat-icon-button (click)="toggleLayout()" class="example-icon favorite-icon"
3734
aria-label="Example icon-button with heart icon">
3835
<mat-icon>dashboard</mat-icon>
3936
</button>
4037
</span>
4138

4239
<span style="margin-left: 20px;">
43-
<span class="menu-text"> Log Out</span>
4440
<button mat-icon-button (click)="logout()" class="example-icon favorite-icon"
4541
aria-label="Example icon-button with heart icon">
4642
<mat-icon>logout</mat-icon>

‎src/styles.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/* You can add global styles to this file, and also import other style files */
21

32
html,
43
body {

0 commit comments

Comments
 (0)