Skip to content

Commit c56def0

Browse files
ppelgmvppelgmv
committed
Added new styles for redesign
1 parent e9f3da6 commit c56def0

File tree

38 files changed

+1195
-1066
lines changed

38 files changed

+1195
-1066
lines changed

‎src/app/pages/assets/asset-create/asset-create.component.html‎

Lines changed: 229 additions & 222 deletions
Large diffs are not rendered by default.

‎src/app/pages/assets/asset-create/asset-create.component.scss‎

Lines changed: 23 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
mat-dialog-content {
2-
width: 1000px;
3-
}
4-
51
.form-field:nth-child(odd) {
62
margin-right: 10px;
73
width: calc(50% - 10px);
@@ -11,18 +7,16 @@ mat-dialog-content {
117
width: calc(50% - 1px);
128
}
139

14-
mat-card-actions {
15-
margin-left: 0;
16-
}
1710

1811
.form-field-stretch{
1912
box-sizing: border-box;
2013
width: 100%;
2114
}
2215

2316
:host ::ng-deep .ck-editor__editable_inline {
17+
border-color: var(--secondary-600) !important;
2418
min-height: 300px;
25-
color: black;
19+
color: var(--secondary-600);
2620
box-sizing: border-box;
2721
width: 100%;
2822
margin-bottom: 1.5em;
@@ -36,39 +30,37 @@ mat-card-actions {
3630
width: 100% !important;
3731
}
3832

39-
.p-15{
40-
padding:15px;
33+
.form-field-full{
34+
width:100% !important;
35+
margin-top: 15px;
4136
}
4237

43-
.full-width{
44-
width: 95%;
38+
.mat-mdc-tab-group {
39+
background-color: white;
4540
}
4641

47-
.form-field-full{
48-
width:100% !important;
49-
margin-top: 15px;
42+
.mat-mdc-tab-group .mat-mdc-tab-group {
43+
background-color: var(--grey-400);
5044
}
5145

52-
.custom-expansion{
53-
border: 1px solid #b2b2b2;
54-
margin-bottom: 10px;
46+
:host ::ng-deep .mat-mdc-tab-group .mat-mdc-tab-group mat-form-field .mat-mdc-text-field-wrapper{
47+
background-color: white;
5548
}
56-
.mat-mdc-dialog-content {
57-
max-height: 85vh;
49+
50+
mat-panel-title,
51+
:host ::ng-deep th {
52+
color: var(--secondary-600);
5853
}
59-
:host ::ng-deep .mat-expansion-indicator {
60-
display: none;
54+
55+
:host ::ng-deep .mat-column-action {
56+
text-align: center;
6157
}
6258

63-
.toggle {
64-
margin-bottom: 22px;
65-
--mat-mdc-form-field-floating-label-scale: 0.75;
66-
display: inline-flex;
67-
flex-direction: column;
68-
min-width: 0;
69-
text-align: left;
59+
:host ::ng-deep .ck-reset_all :not(.ck-reset_all-excluded *) {
60+
color: var(--secondary-500);
7061
}
7162

72-
:host ::ng-deep .toggle .mdc-form-field{
73-
font-size: 16px;
63+
:host ::ng-deep .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content {
64+
border-color: var(--secondary-500);
7465
}
66+

‎src/app/pages/assets/asset-viewer/asset-viewer.component.html‎

Lines changed: 51 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,63 @@
11
<div id="wrapper">
2-
<div class="container">
2+
3+
<div fxLayout="row" fxLayoutAlign="space-between" class="section-header">
34
<button (click)="onCreate()" color="accent" mat-stroked-button>
45
<mat-icon>add_circle_outline</mat-icon>
56
Create asset
67
</button>
8+
9+
<mat-paginator
10+
(page)="changePage($event)"
11+
[pageSize]="pageSize"
12+
[length]="paginatorLength"
13+
[pageIndex]="currentPage"
14+
[pageSizeOptions]="[5, 10, 20]">
15+
</mat-paginator>
716
</div>
817

9-
<div fxLayout="row wrap" fxLayoutGap="15px" fxLayoutAlign="start start">
10-
<mat-card *ngFor="let asset of assets">
11-
<mat-card-header>
12-
<mat-icon mat-card-avatar>upload</mat-icon>
13-
<mat-card-title>{{asset.id}}</mat-card-title>
14-
</mat-card-header>
15-
<mat-card-content>
16-
<mat-list dense>
17-
<mat-list-item>
18-
<mat-icon matListItemIcon>info</mat-icon>
19-
<div class="asset-property" matListItemTitle>Name</div>
20-
<div matListItemLine>{{asset.properties.optionalValue('edc','name')}}</div>
21-
</mat-list-item>
22-
<mat-list-item>
23-
<mat-icon matListItemIcon>category</mat-icon>
24-
<div class="asset-property" matListItemTitle>Content Type</div>
25-
<div matListItemLine>{{asset.properties.optionalValue('edc','contenttype')}}</div>
26-
</mat-list-item>
27-
<mat-list-item>
28-
<mat-icon matListItemIcon>file_copy</mat-icon>
29-
<div class="asset-property" matListItemTitle>Version</div>
30-
<div matListItemLine>{{asset.properties.optionalValue('edc','version')}}</div>
31-
</mat-list-item>
32-
</mat-list>
33-
</mat-card-content>
18+
<div class="container" *ngIf="assets.length > 0">
19+
<div *ngFor="let asset of assets" class="card">
20+
<mat-card>
21+
<mat-card-header>
22+
<mat-icon mat-card-avatar>upload</mat-icon>
23+
<mat-card-title>{{asset.id}}</mat-card-title>
24+
</mat-card-header>
25+
<mat-card-content>
26+
<mat-list dense>
27+
<mat-list-item>
28+
<mat-icon matListItemIcon>info</mat-icon>
29+
<div class="asset-property" matListItemTitle>Name</div>
30+
<div matListItemLine>{{asset.properties.optionalValue('edc','name')}}</div>
31+
</mat-list-item>
32+
<mat-list-item>
33+
<mat-icon matListItemIcon>category</mat-icon>
34+
<div class="asset-property" matListItemTitle>Content Type</div>
35+
<div matListItemLine>{{asset.properties.contenttype ? asset.properties.contenttype : 'Not available'}}</div>
36+
</mat-list-item>
37+
<mat-list-item>
38+
<mat-icon matListItemIcon>file_copy</mat-icon>
39+
<div class="asset-property" matListItemTitle>Version</div>
40+
<div matListItemLine>{{asset.properties.optionalValue('edc','version')}}</div>
41+
</mat-list-item>
42+
</mat-list>
43+
</mat-card-content>
3444

35-
<mat-divider></mat-divider>
36-
<mat-card-actions class="card-actions">
37-
<button (click)="viewAsset(asset)" [disabled]="isBusy()" color="info" mat-stroked-button>
38-
<mat-icon>info</mat-icon> View asset
39-
</button>
40-
<button (click)="onDelete(asset)" [disabled]="isBusy()" color="warn" mat-stroked-button>
41-
<mat-icon>delete_sweep</mat-icon> Delete
42-
</button>
43-
</mat-card-actions>
44-
<mat-card-footer>
45-
<mat-progress-bar *ngIf="isBusy()" color="accent" mode="indeterminate"></mat-progress-bar>
46-
</mat-card-footer>
47-
</mat-card>
45+
<mat-card-actions class="card-actions align-content-end text-align-end">
46+
<button (click)="viewAsset(asset)" [disabled]="isBusy()" color="info" mat-stroked-button>
47+
<mat-icon>info</mat-icon> View asset
48+
</button>
49+
<button (click)="onDelete(asset)" [disabled]="isBusy()" color="warn" mat-stroked-button>
50+
<mat-icon>delete_sweep</mat-icon> Delete
51+
</button>
52+
</mat-card-actions>
53+
<mat-card-footer>
54+
<mat-progress-bar *ngIf="isBusy()" color="accent" mode="indeterminate"></mat-progress-bar>
55+
</mat-card-footer>
56+
</mat-card>
57+
</div>
4858
</div>
4959

50-
<div fxLayout="row" fxLayoutAlign="center" class="paginator">
51-
<mat-paginator
52-
(page)="changePage($event)"
53-
[pageSize]="pageSize"
54-
[length]="paginatorLength"
55-
[pageIndex]="currentPage"
56-
[pageSizeOptions]="[5, 10, 20]">
57-
</mat-paginator>
60+
<div *ngIf="assets.length == 0" class="no-items">
61+
There are no assets created.
5862
</div>
5963
</div>

‎src/app/pages/assets/asset-viewer/asset-viewer.component.scss‎

Lines changed: 4 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,8 @@
1-
#wrapper {
1+
mat-card-actions {
2+
padding-right: 15px !important;
3+
padding-bottom: 20px !important;
24
}
35

4-
.main-property-icon {
5-
font-size: 12px;
6-
}
7-
8-
.search-form-field {
9-
min-width: 200px;
10-
width: 30%;
11-
margin-top: 18px;
12-
}
13-
14-
.card-actions {
15-
margin-left: 0;
16-
}
17-
18-
.asset-property {
19-
font-weight: bold !important;
20-
}
21-
22-
mat-paginator {
23-
display: inline-block;
24-
background-color: transparent;
25-
}
26-
27-
.container {
28-
display: flex;
29-
align-items: center;
30-
gap: 10px; /* Adjust the gap between elements */
31-
}
32-
33-
.card-actions button {
6+
.card-actions button:first-child {
347
margin-right: 10px;
358
}

‎src/app/pages/catalog/catalog-browser/catalog-browser.component.html‎

Lines changed: 39 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,45 @@
11
<div id="wrapper">
2-
<div fxLayout="row wrap" fxLayoutGap="15px" fxLayoutAlign="start start">
3-
<mat-card *ngFor="let dataOffer of dataOffers">
4-
<mat-card-header>
5-
<mat-icon mat-card-avatar>sim_card</mat-icon>
6-
<mat-card-title>{{dataOffer.assetId}}</mat-card-title>
7-
</mat-card-header>
8-
<mat-card-content>
9-
<mat-list dense>
10-
<mat-list-item *ngIf="dataOffer.properties.type">
11-
<mat-icon matListItemIcon>category</mat-icon>
12-
<div class="asset-property-name" matListItemTitle>Type</div>
13-
<div matListItemLine>{{dataOffer.properties.type}}</div>
14-
</mat-list-item>
15-
<mat-list-item *ngIf="dataOffer.originator">
16-
<mat-icon matListItemIcon>link</mat-icon>
17-
<div class="asset-property-name" matListItemTitle>Originator</div>
18-
<div matListItemLine>{{dataOffer.originator}}</div>
19-
</mat-list-item>
20-
</mat-list>
21-
</mat-card-content>
2+
<div fxLayout="row" fxLayoutAlign="end" class="section-header">
3+
<mat-paginator (page)="changePage($event)" [pageSize]="pageSize" [length]="paginatorLength"
4+
[pageIndex]="currentPage" [pageSizeOptions]="[5, 10, 20]">
5+
</mat-paginator>
6+
</div>
227

23-
<mat-divider></mat-divider>
24-
<mat-card-actions class="card-actions">
25-
<button color="accent" mat-stroked-button
26-
(click)="viewContractOffers(dataOffer.assetId, dataOffer.contractOffers, dataOffer.endpointUrl, dataOffer.properties)">
27-
View details and contract offers
28-
</button>
29-
</mat-card-actions>
30-
<mat-card-footer>
31-
</mat-card-footer>
32-
</mat-card>
8+
<div class="container" *ngIf="dataOffers.length > 0">
9+
<div class="card" *ngFor="let dataOffer of dataOffers">
10+
<mat-card>
11+
<mat-card-header>
12+
<mat-icon mat-card-avatar>sim_card</mat-icon>
13+
<mat-card-title>{{dataOffer.assetId}}</mat-card-title>
14+
</mat-card-header>
15+
<mat-card-content>
16+
<mat-list dense>
17+
<mat-list-item *ngIf="dataOffer.properties.type">
18+
<mat-icon matListItemIcon>category</mat-icon>
19+
<div class="asset-property-name" matListItemTitle>Type</div>
20+
<div matListItemLine>{{dataOffer.properties.type}}</div>
21+
</mat-list-item>
22+
<mat-list-item *ngIf="dataOffer.originator">
23+
<mat-icon matListItemIcon>link</mat-icon>
24+
<div class="asset-property-name" matListItemTitle>Originator</div>
25+
<div matListItemLine>{{dataOffer.originator}}</div>
26+
</mat-list-item>
27+
</mat-list>
28+
</mat-card-content>
29+
30+
<mat-card-actions class="card-actions text-align-center">
31+
<button color="accent" mat-stroked-button
32+
(click)="viewContractOffers(dataOffer.assetId, dataOffer.contractOffers, dataOffer.endpointUrl, dataOffer.properties)">
33+
View details and contract offers
34+
</button>
35+
</mat-card-actions>
36+
<mat-card-footer>
37+
</mat-card-footer>
38+
</mat-card>
39+
</div>
3340
</div>
3441

35-
<div fxLayout="row" fxLayoutAlign="center" class="paginator">
36-
<mat-paginator
37-
(page)="changePage($event)"
38-
[pageSize]="pageSize"
39-
[length]="paginatorLength"
40-
[pageIndex]="currentPage"
41-
[pageSizeOptions]="[5, 10, 20]">
42-
</mat-paginator>
42+
<div *ngIf="dataOffers.length == 0" class="no-items">
43+
There are no offerings in the catalog.
4344
</div>
4445
</div>

‎src/app/pages/catalog/catalog-browser/catalog-browser.component.scss‎

Lines changed: 2 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,3 @@
1-
#wrapper {
2-
}
3-
4-
.main-property-icon {
5-
font-size: 12px;
6-
}
7-
8-
:host ::ng-deep div.mat-expansion-panel-body {
9-
padding-left: 0 !important;
10-
}
11-
12-
.search-form-field {
13-
min-width: 200px;
14-
width: 30%;
15-
margin-top: 18px;
16-
}
17-
18-
.card-actions {
19-
margin-left: 0;
20-
display: flex;
21-
justify-content: center;
22-
}
23-
24-
.asset-property-name {
25-
font-weight: bold !important;
26-
}
27-
28-
.container {
29-
display: flex;
30-
align-items: center;
31-
gap: 10px;
32-
}
33-
34-
mat-expansion-panel {
35-
margin-bottom: 10px !important;
1+
mat-card-actions {
2+
padding-bottom: 5px !important;
363
}

0 commit comments

Comments
 (0)