Skip to content

Commit 795c729

Browse files
vbakkevbakke
committed
General tidy. Include Level and uuid as subheader
1 parent b216066 commit 795c729

11 files changed

Lines changed: 247 additions & 77 deletions

‎package-lock.json‎

Lines changed: 77 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/component/activity-description/activity-description.component.css‎

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,48 @@
99
display: flex;
1010
justify-content: space-between;
1111
align-items: flex-start;
12-
margin-bottom: 20px;
12+
margin-bottom: 12px;
1313
}
1414

1515
.activity-header h1 {
1616
margin: 0;
17-
flex: 1;
17+
font-size: 24px;
18+
}
19+
20+
.activity-header .title-above mat-icon {
21+
font-size: 28px;
1822
}
1923

24+
.activity-header .title-above {
25+
display: flex;
26+
flex-direction: row;
27+
gap: 5px;
28+
font-size: 20px;
29+
color: var(--text-secondary);
30+
font-weight: 500;
31+
margin-bottom: 4px;
32+
}
33+
34+
.activity-subheader {
35+
display: flex;
36+
justify-content: space-between;
37+
font-size: 14px;
38+
margin-bottom: 10px;
39+
color: var(--text-tertiary);
40+
}
41+
.activity-subheader .level {
42+
min-width: fit-content;
43+
}
44+
.activity-subheader .uuid {
45+
text-align: end;
46+
}
47+
.activity-subheader .uuid-label {
48+
font-size: 12px;
49+
margin-right: 0.1em;
50+
}
51+
2052
.close-button {
2153
flex-shrink: 0;
22-
margin-left: 10px;
2354
}
2455

2556
.mat-form-field + .mat-form-field {
@@ -124,6 +155,7 @@
124155

125156
.usefulness-header {
126157
display: flex;
158+
flex-wrap: wrap;
127159
justify-content: space-between;
128160
align-items: center;
129161
width: 100%;
@@ -281,7 +313,7 @@ mat-icon.mat-icon {
281313
}
282314

283315
/* Responsive design for smaller screens */
284-
@media (max-width: 768px) {
316+
@media (max-width: 550px) {
285317
.references-grid {
286318
grid-template-columns: 1fr 1fr;
287319
gap: 15px;
@@ -298,7 +330,7 @@ mat-icon.mat-icon {
298330

299331
}
300332

301-
@media (max-width: 480px) {
333+
@media (max-width: 350px) {
302334
.references-grid {
303335
grid-template-columns: 1fr;
304336
gap: 10px;

‎src/app/component/activity-description/activity-description.component.html‎

Lines changed: 114 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<div class="content-box">
22
<div class="activity-header">
33
<div class="activity-title">
4-
<h3>
5-
{{ currentActivity.dimension }}:
6-
</h3>
7-
<h1>
4+
<div class="title-above">
5+
<mat-icon mat-list-icon color="primary" *ngIf="iconName">{{ iconName }}</mat-icon>
6+
{{ currentActivity.dimension }}
7+
</div>
8+
<h1>
89
{{ currentActivity.name }}
910
</h1>
1011
</div>
@@ -17,17 +18,11 @@ <h1>
1718
</button>
1819
</div>
1920

21+
<div class="activity-subheader">
22+
<span class="level">Level {{ currentActivity.level }}</span>
23+
<span class="uuid"><span class="uuid-label">id: </span>{{ currentActivity.uuid }}</span>
24+
</div>
2025
<mat-accordion multi="true">
21-
<mat-expansion-panel [expanded]="false">
22-
<mat-expansion-panel-header>
23-
<mat-panel-title>
24-
<b>UUID</b>
25-
<span class="uuid-preview">{{ (currentActivity.uuid || '').substring(0, 8) }}...</span>
26-
</mat-panel-title>
27-
</mat-expansion-panel-header>
28-
<p id="uuid" [innerHTML]="currentActivity.uuid"></p>
29-
</mat-expansion-panel>
30-
3126
<mat-expansion-panel *ngIf="currentActivity.description?.hasContent()" [expanded]="true">
3227
<mat-expansion-panel-header>
3328
<mat-panel-title>
@@ -55,7 +50,7 @@ <h1>
5550
<p id="measure" [innerHTML]="currentActivity.measure?.render()"></p>
5651
</mat-expansion-panel>
5752

58-
<mat-expansion-panel *ngIf="currentActivity.assessment?.hasContent()" [expanded]="true">
53+
<mat-expansion-panel *ngIf="currentActivity.assessment?.hasContent()" [expanded]="true">
5954
<mat-expansion-panel-header>
6055
<mat-panel-title>
6156
<b>Assessment</b>
@@ -91,11 +86,11 @@ <h1>
9186
<div class="usefulness-header">
9287
<h3><b>Usefulness</b></h3>
9388
<div class="usefulness-stars">
94-
<mat-icon
95-
*ngFor="let star of [1,2,3,4,5]"
89+
<mat-icon
90+
*ngFor="let star of [1, 2, 3, 4, 5]"
9691
class="star"
9792
[class.filled]="star <= (currentActivity.usefulness || 0)">
98-
{{star <= (currentActivity.usefulness || 0) ? 'star' : 'star_border'}}
93+
{{ star <= (currentActivity.usefulness || 0) ? 'star' : 'star_border' }}
9994
</mat-icon>
10095
<span class="usefulness-label">{{ this.UsefulnessLabel }}</span>
10196
</div>
@@ -109,15 +104,30 @@ <h3><b>Usefulness</b></h3>
109104
<div class="difficulty-summary" [class.hidden]="difficultyPanel.expanded">
110105
<span class="difficulty-indicator">
111106
<mat-icon class="difficulty-icon">school</mat-icon>
112-
<span class="difficulty-level level-{{currentActivity.difficultyOfImplementation?.knowledge}}">{{ this.KnowledgeLabel }}</span>
107+
<span
108+
class="difficulty-level level-{{
109+
currentActivity.difficultyOfImplementation?.knowledge
110+
}}"
111+
>{{ this.KnowledgeLabel }}</span
112+
>
113113
</span>
114114
<span class="difficulty-indicator">
115115
<mat-icon class="difficulty-icon">schedule</mat-icon>
116-
<span class="difficulty-level level-{{currentActivity.difficultyOfImplementation?.time}}">{{ this.TimeLabel }}</span>
116+
<span
117+
class="difficulty-level level-{{
118+
currentActivity.difficultyOfImplementation?.time
119+
}}"
120+
>{{ this.TimeLabel }}</span
121+
>
117122
</span>
118123
<span class="difficulty-indicator">
119124
<mat-icon class="difficulty-icon">people</mat-icon>
120-
<span class="difficulty-level level-{{currentActivity.difficultyOfImplementation?.resources}}">{{ this.ResourceLabel }}</span>
125+
<span
126+
class="difficulty-level level-{{
127+
currentActivity.difficultyOfImplementation?.resources
128+
}}"
129+
>{{ this.ResourceLabel }}</span
130+
>
121131
</span>
122132
</div>
123133
</mat-panel-title>
@@ -126,17 +136,30 @@ <h3><b>Usefulness</b></h3>
126136
<div class="difficulty-detail-item">
127137
<mat-icon>school</mat-icon>
128138
<span class="detail-label">Knowledge:</span>
129-
<span class="difficulty-badge level-{{currentActivity.difficultyOfImplementation?.knowledge}}">{{ this.KnowledgeLabel }}</span>
139+
<span
140+
class="difficulty-badge level-{{
141+
currentActivity.difficultyOfImplementation?.knowledge
142+
}}"
143+
>{{ this.KnowledgeLabel }}</span
144+
>
130145
</div>
131146
<div class="difficulty-detail-item">
132147
<mat-icon>schedule</mat-icon>
133148
<span class="detail-label">Time:</span>
134-
<span class="difficulty-badge level-{{currentActivity.difficultyOfImplementation?.time}}">{{ this.TimeLabel }}</span>
149+
<span
150+
class="difficulty-badge level-{{ currentActivity.difficultyOfImplementation?.time }}"
151+
>{{ this.TimeLabel }}</span
152+
>
135153
</div>
136154
<div class="difficulty-detail-item">
137155
<mat-icon>people</mat-icon>
138156
<span class="detail-label">Resources:</span>
139-
<span class="difficulty-badge level-{{currentActivity.difficultyOfImplementation?.resources}}">{{ this.ResourceLabel }}</span>
157+
<span
158+
class="difficulty-badge level-{{
159+
currentActivity.difficultyOfImplementation?.resources
160+
}}"
161+
>{{ this.ResourceLabel }}</span
162+
>
140163
</div>
141164
</div>
142165
</mat-expansion-panel>
@@ -148,28 +171,44 @@ <h3><b>Usefulness</b></h3>
148171
<div class="references-summary" [class.hidden]="referencesPanel.expanded">
149172
<span class="ref-section">
150173
<strong>SAMM 2:</strong>
151-
<span class="ref-values" *ngIf="currentActivity?.references?.samm2?.length; else sammEmpty">
152-
<span *ngFor="let samm of currentActivity?.references?.samm2; let last = last">{{samm}}<span *ngIf="!last">, </span></span>
174+
<span
175+
class="ref-values"
176+
*ngIf="currentActivity?.references?.samm2?.length; else sammEmpty">
177+
<span *ngFor="let samm of currentActivity?.references?.samm2; let last = last"
178+
>{{ samm }}<span *ngIf="!last">, </span></span
179+
>
153180
</span>
154181
<ng-template #sammEmpty>-</ng-template>
155182
</span>
156183
<span class="ref-section">
157184
<strong>ISO 2017:</strong>
158-
<span class="ref-values" *ngIf="currentActivity?.references?.iso27001_2017?.length; else iso17Empty">
159-
<span *ngFor="let iso of currentActivity?.references?.iso27001_2017; let last = last">{{iso}}<span *ngIf="!last">, </span></span>
185+
<span
186+
class="ref-values"
187+
*ngIf="currentActivity?.references?.iso27001_2017?.length; else iso17Empty">
188+
<span
189+
*ngFor="let iso of currentActivity?.references?.iso27001_2017; let last = last"
190+
>{{ iso }}<span *ngIf="!last">, </span></span
191+
>
160192
</span>
161193
<ng-template #iso17Empty>-</ng-template>
162194
</span>
163195
<span class="ref-section">
164196
<strong>ISO 2022:</strong>
165-
<span class="ref-values" *ngIf="currentActivity?.references?.iso27001_2022?.length; else iso22Empty">
166-
<span *ngFor="let iso22 of currentActivity?.references?.iso27001_2022; let last = last">{{iso22}}<span *ngIf="!last">, </span></span>
197+
<span
198+
class="ref-values"
199+
*ngIf="currentActivity?.references?.iso27001_2022?.length; else iso22Empty">
200+
<span
201+
*ngFor="let iso22 of currentActivity?.references?.iso27001_2022; let last = last"
202+
>{{ iso22 }}<span *ngIf="!last">, </span></span
203+
>
167204
</span>
168205
<ng-template #iso22Empty>-</ng-template>
169206
</span>
170207
<span class="ref-section">
171208
<strong>OpenCRE:</strong>
172-
<span class="ref-values" *ngIf="currentActivity?.references?.openCRE?.length; else creEmpty">
209+
<span
210+
class="ref-values"
211+
*ngIf="currentActivity?.references?.openCRE?.length; else creEmpty">
173212
<a href="https://www.opencre.org/" target="_blank" class="cre-link">View OpenCRE</a>
174213
</span>
175214
<ng-template #creEmpty>-</ng-template>
@@ -181,46 +220,65 @@ <h3><b>Usefulness</b></h3>
181220
<div class="reference-column">
182221
<div class="reference-header">{{ SAMMVersion }}</div>
183222
<div class="reference-values">
184-
<span class="reference-value" *ngFor="let samm of currentActivity?.references?.samm2">{{ samm }}</span>
223+
<span class="reference-value" *ngFor="let samm of currentActivity?.references?.samm2">{{
224+
samm
225+
}}</span>
185226
<span class="no-references" *ngIf="!currentActivity?.references?.samm2?.length">-</span>
186227
</div>
187228
</div>
188-
229+
189230
<div class="reference-column">
190231
<div class="reference-header">{{ ISOVersion }}</div>
191232
<div class="reference-values">
192-
<span class="reference-value" *ngFor="let iso of currentActivity?.references?.iso27001_2017">{{ iso }}</span>
193-
<span class="no-references" *ngIf="!currentActivity?.references?.iso27001_2017?.length">-</span>
233+
<span
234+
class="reference-value"
235+
*ngFor="let iso of currentActivity?.references?.iso27001_2017"
236+
>{{ iso }}</span
237+
>
238+
<span class="no-references" *ngIf="!currentActivity?.references?.iso27001_2017?.length"
239+
>-</span
240+
>
194241
</div>
195242
</div>
196-
243+
197244
<div class="reference-column">
198245
<div class="reference-header">{{ ISO22Version }}</div>
199246
<div class="reference-values">
200-
<span class="reference-value" *ngFor="let iso22 of currentActivity?.references?.iso27001_2022">{{ iso22 }}</span>
201-
<span class="no-references" *ngIf="!currentActivity?.references?.iso27001_2022?.length">-</span>
247+
<span
248+
class="reference-value"
249+
*ngFor="let iso22 of currentActivity?.references?.iso27001_2022"
250+
>{{ iso22 }}</span
251+
>
252+
<span class="no-references" *ngIf="!currentActivity?.references?.iso27001_2022?.length"
253+
>-</span
254+
>
202255
</div>
203256
</div>
204-
257+
205258
<div class="reference-column">
206259
<div class="reference-header">{{ openCREVersion }}</div>
207260
<div class="reference-values">
208-
<a
209-
class="reference-link"
210-
*ngFor="let openCRE of currentActivity?.references?.openCRE"
211-
target="_blank"
261+
<a
262+
class="reference-link"
263+
*ngFor="let openCRE of currentActivity?.references?.openCRE"
264+
target="_blank"
212265
[href]="openCRE">
213266
<mat-icon>open_in_new</mat-icon>
214267
View CRE
215268
</a>
216-
<span class="no-references" *ngIf="!currentActivity?.references?.openCRE?.length">-</span>
269+
<span class="no-references" *ngIf="!currentActivity?.references?.openCRE?.length"
270+
>-</span
271+
>
217272
</div>
218273
</div>
219274
</div>
220-
<span>In other frameworks and standards the '{{ currentActivity?.name }}' activity is part of sections above.</span>
275+
<span
276+
>In other frameworks and standards the '{{ currentActivity?.name }}' activity is part of
277+
sections above.</span
278+
>
221279
</mat-expansion-panel>
222280

223-
<!-- <mat-expansion-panel>
281+
<!-- <mat-expansion-panel>
224282
<mat-expansion-panel-header>
225283
<mat-panel-title>
226284
<b>Teams Evidence</b>
@@ -240,22 +298,27 @@ <h3><b>Usefulness</b></h3>
240298
</mat-accordion>
241299
</mat-expansion-panel> -->
242300

243-
<mat-expansion-panel [expanded]="true" #implementationPanel *ngIf="currentActivity.implementation?.length">
301+
<mat-expansion-panel
302+
[expanded]="true"
303+
#implementationPanel
304+
*ngIf="currentActivity.implementation?.length">
244305
<mat-expansion-panel-header>
245306
<mat-panel-title>
246307
<b>Implementation</b>
247308
<div class="implementation-preview" [class.hidden]="implementationPanel.expanded">
248-
<span class="tool-count-badge">{{currentActivity.implementation?.length || 0}} tools</span>
309+
<span class="tool-count-badge"
310+
>{{ currentActivity.implementation?.length || 0 }} tools</span
311+
>
249312
</div>
250313
</mat-panel-title>
251314
</mat-expansion-panel-header>
252315
<div class="implementation-tools">
253316
<div class="tool-item" *ngFor="let implement of this.currentActivity.implementation">
254317
<div class="tool-title">
255318
<h4 class="tool-name" [innerHTML]="implement['name']"></h4>
256-
<a [href]="implement['url']" target="_blank" href="implement['url']">
257-
<mat-icon class="link-icon" *ngIf="implement['url']">open_in_new</mat-icon>
258-
</a>
319+
<a [href]="implement['url']" target="_blank" href="implement['url']">
320+
<mat-icon class="link-icon" *ngIf="implement['url']">open_in_new</mat-icon>
321+
</a>
259322
</div>
260323
<!-- <div class="tool-url" *ngIf="implement['url']">
261324
<a [href]="implement['url']" target="_blank" [innerHTML]="implement['url']"></a>
@@ -288,7 +351,6 @@ <h4 class="tool-name" [innerHTML]="implement['name']"></h4>
288351
<p *ngIf="currentActivity.isImplemented === true">Implemented</p>
289352
</ng-template>
290353
</mat-expansion-panel>
291-
292354
</mat-accordion>
293355

294356
<mat-expansion-panel>

0 commit comments

Comments
 (0)