Skip to content
This repository was archived by the owner on Jan 22, 2026. It is now read-only.

Commit 36e47af

Browse files
ychaeychae
committed
trying to get colors to work with themes
1 parent b5794d4 commit 36e47af

File tree

6 files changed

+108
-72
lines changed

6 files changed

+108
-72
lines changed

‎client/app/project/project-list/_project-list-theme.scss‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
@mixin project-list-theme($theme) {
2-
$primary: map-get($theme, primary);
3-
$accent: map-get($theme, accent);
4-
$warn: map-get($theme, warn);
5-
$background: map-get($theme, background);
6-
$foreground: map-get($theme, foreground);
2+
$primary: map-get($theme, primary);
3+
$accent: map-get($theme, accent);
4+
$warn: map-get($theme, warn);
5+
$background: map-get($theme, background);
6+
$foreground: map-get($theme, foreground);
7+
8+
.app-project-list-content .app-project-list-results .project-container .app-project-list-item{
9+
background: mat-color($warn);
10+
}
711

8-
.app-project-list .app-project-item {
9-
color: mat-color($primary);
10-
}
1112
}

‎client/app/project/project-list/project-list.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,13 @@ <h1>Projects</h1>
55

66
<div class="app-project-list-content">
77
<div class="app-project-list-results">
8-
<project-view *ngFor="let project of projects | async" [project]="project"></project-view>
8+
<mat-nav-list class="project-container">
9+
<mat-list-item class="app-project-list-item" *ngFor="let project of projects | async" [routerLink]="[project._id]">
10+
<h3 class="project-name">{{project.name}}</h3>
11+
</mat-list-item>
12+
<!-- <project-view *ngFor="let project of projects | async" [project]="project">-->
13+
<!-- </project-view>-->
14+
</mat-nav-list>
915
</div>
1016
<div class="app-project-list-actions">
1117
<a mat-raised-button color="primary" class="app-project-list-new-project" (click)="createNewProject=true" aria-label="Create project">Create a New Project</a>

‎client/app/project/project-list/project-list.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,13 @@
2323
margin-top: 25px;
2424
width: 400px;
2525
}
26+
27+
.app-project-list-item {
28+
padding-top: 5px;
29+
margin-top: 10px;
30+
border-radius: 4px;
31+
}
2632
}
33+
34+
35+

‎client/app/project/project-view/_project-view-theme.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
//@mixin project-view-theme($theme) {
2+
// $primary: map-get($theme, primary);
3+
// $accent: map-get($theme, accent);
4+
// $warn: map-get($theme, warn);
5+
// $background: map-get($theme, background);
6+
// $foreground: map-get($theme, foreground);
7+
//
8+
//
9+
//
10+
//}

‎client/app/project/project-view/project-view.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1-
<mat-nav-list *ngIf="project" class="project-container" [routerLink]="[project._id]">
2-
<h3 class="project-name">{{project.name}}</h3>
3-
</mat-nav-list>
1+
<!--<mat-nav-list *ngIf="project" class="project-container" [routerLink]="[project._id]">-->
2+
<!--<mat-list-item>-->
3+
<!-- <h3 class="project-name">{{project.name}}</h3>-->
4+
5+
<!--</mat-list-item>-->
6+
<!--</mat-nav-list>-->

‎client/app/project/project-view/project-view.scss‎

Lines changed: 67 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,67 @@
1-
.project-container {
2-
display: flex;
3-
flex-flow: row nowrap;
4-
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
5-
padding: 1px 30px 1px;
6-
margin: 5px;
7-
border: 1px solid grey;
8-
border-radius: 4px;
9-
}
10-
11-
.project-container:hover {
12-
cursor: pointer;
13-
background: #f1f1f1;
14-
}
15-
16-
.project-container > picture {
17-
display: flex;
18-
flex-direction: row;
19-
justify-content: center;
20-
align-items: center;
21-
min-height: 200px;
22-
23-
img {
24-
display: block;
25-
max-width: 200px;
26-
max-height: 200px;
27-
width: auto;
28-
height: auto;
29-
align-self: center;
30-
}
31-
}
32-
33-
.project-name {
34-
font-size: 15px;
35-
line-height: 20px;
36-
overflow: hidden;
37-
box-sizing: content-box;
38-
max-height: 60px;
39-
font-weight: 600;
40-
opacity: 0.95;
41-
padding-top: 5px;
42-
padding-bottom: 2px;
43-
white-space: normal;
44-
position: relative;
45-
}
46-
47-
.project-metadata-container {
48-
display: flex;
49-
flex-flow: column nowrap;
50-
}
51-
52-
.project-metadata-row-container {
53-
display: flex;
54-
flex-direction: row;
55-
align-items: center;
56-
}
57-
58-
.project-metadata-row-container > mat-icon {
59-
margin-right: 10px;
60-
}
1+
//@import 'project-view-theme';
2+
//
3+
//.project-container {
4+
// display: flex;
5+
// flex-flow: row nowrap;
6+
// padding: 1px 30px 1px;
7+
// margin: 5px;
8+
//}
9+
//
10+
//.project-container:hover {
11+
// cursor: pointer;
12+
//}
13+
//
14+
//.project-container > picture {
15+
// display: flex;
16+
// flex-direction: row;
17+
// justify-content: center;
18+
// align-items: center;
19+
// min-height: 200px;
20+
//
21+
// img {
22+
// display: block;
23+
// max-width: 200px;
24+
// max-height: 200px;
25+
// width: auto;
26+
// height: auto;
27+
// align-self: center;
28+
// }
29+
//}
30+
//
31+
//.project-name {
32+
// font-size: 15px;
33+
// line-height: 20px;
34+
// overflow: hidden;
35+
// box-sizing: content-box;
36+
// max-height: 60px;
37+
// font-weight: 600;
38+
// opacity: 0.95;
39+
// padding-top: 5px;
40+
// padding-bottom: 2px;
41+
// white-space: normal;
42+
// position: relative;
43+
//}
44+
//
45+
//.project-metadata-container {
46+
// display: flex;
47+
// flex-flow: column nowrap;
48+
//}
49+
//
50+
//.project-metadata-row-container {
51+
// display: flex;
52+
// flex-direction: row;
53+
// align-items: center;
54+
//}
55+
//
56+
//.project-metadata-row-container > mat-icon {
57+
// margin-right: 10px;
58+
//}
59+
//
60+
//.app-project-list-item {
61+
// border-style: solid;
62+
// border-width: 1px;
63+
// border-radius: 4px;
64+
//}
65+
//
66+
//
67+
//

0 commit comments

Comments
 (0)