Skip to content

Commit 4110ef6

Browse files
vbakkevbakke
committed
Activity: Improved Mapping
1 parent 23c9846 commit 4110ef6

2 files changed

Lines changed: 169 additions & 63 deletions

File tree

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

Lines changed: 121 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -158,62 +158,98 @@
158158
}
159159

160160
/* References Section Styling */
161-
.references-preview {
162-
display: flex;
163-
gap: 8px;
161+
.references-summary {
164162
margin-left: 20px;
165-
align-items: center;
163+
display: flex;
164+
justify-content: space-between;
165+
align-items: flex-start;
166+
gap: 15px;
167+
font-size: 0.85em;
168+
color: #666;
169+
font-weight: normal;
170+
width: 100%;
171+
max-width: calc(100% - 40px);
172+
transition: opacity 0.3s ease;
166173
}
167174

168-
.reference-chip {
169-
background-color: #e3f2fd;
170-
color: #1976d2;
171-
padding: 2px 8px;
172-
border-radius: 12px;
173-
font-size: 0.75em;
174-
font-weight: 500;
175+
.references-summary.hidden {
176+
opacity: 0;
177+
height: 0;
178+
overflow: hidden;
179+
margin: 0;
180+
gap: 0;
181+
}
182+
183+
.ref-section {
175184
display: flex;
176-
align-items: center;
185+
flex-direction: column;
177186
gap: 4px;
187+
flex: 1;
188+
min-width: 0;
178189
}
179190

180-
.reference-icon {
181-
font-size: 14px;
191+
.ref-section strong {
192+
color: #333;
193+
font-size: 0.9em;
194+
white-space: nowrap;
182195
}
183196

184-
.references-content {
185-
padding: 10px 0;
197+
.ref-values {
198+
word-break: break-word;
199+
overflow-wrap: break-word;
200+
font-size: 0.8em;
186201
}
187202

188-
.reference-section {
189-
margin-bottom: 20px;
203+
.cre-link {
204+
color: #1976d2;
205+
text-decoration: none;
206+
font-weight: 500;
190207
}
191208

192-
.reference-section h4 {
193-
margin: 0 0 10px 0;
194-
color: #333;
195-
font-size: 1em;
209+
.cre-link:hover {
210+
text-decoration: underline;
211+
}
212+
213+
.references-grid {
214+
display: grid;
215+
grid-template-columns: 1fr 1fr 1fr 1fr;
216+
gap: 20px;
217+
padding: 15px 0;
218+
width: 100%;
196219
}
197220

198-
.reference-tags {
221+
.reference-column {
199222
display: flex;
200-
flex-wrap: wrap;
201-
gap: 6px;
223+
flex-direction: column;
224+
gap: 10px;
225+
min-height: 60px;
202226
}
203227

204-
.reference-tag {
205-
background-color: #f5f5f5;
206-
border: 1px solid #ddd;
207-
padding: 4px 8px;
208-
border-radius: 8px;
209-
font-size: 0.8em;
210-
color: #555;
228+
.reference-header {
229+
font-size: 0.9em;
230+
color: #666;
231+
font-weight: normal;
232+
margin-bottom: 5px;
233+
border-bottom: 1px solid #e0e0e0;
234+
padding-bottom: 5px;
211235
}
212236

213-
.reference-links {
237+
.reference-values {
214238
display: flex;
215239
flex-direction: column;
216-
gap: 8px;
240+
gap: 6px;
241+
flex: 1;
242+
}
243+
244+
.reference-value {
245+
background-color: #f8f9fa;
246+
border: 1px solid #e9ecef;
247+
padding: 6px 10px;
248+
border-radius: 6px;
249+
font-size: 0.9em;
250+
color: #333;
251+
font-weight: 500;
252+
display: inline-block;
217253
}
218254

219255
.reference-link {
@@ -222,16 +258,65 @@
222258
gap: 8px;
223259
color: #1976d2;
224260
text-decoration: none;
225-
padding: 8px;
261+
padding: 6px 10px;
226262
border: 1px solid #e3f2fd;
227-
border-radius: 8px;
263+
border-radius: 6px;
228264
transition: background-color 0.2s;
265+
font-size: 0.9em;
266+
background-color: #f8f9fa;
229267
}
230268

231269
.reference-link:hover {
232270
background-color: #e3f2fd;
233271
}
234272

273+
.no-references {
274+
color: #999;
275+
font-style: italic;
276+
padding: 6px 10px;
277+
font-size: 0.9em;
278+
}
279+
280+
/* Responsive design for smaller screens */
281+
@media (max-width: 768px) {
282+
.references-grid {
283+
grid-template-columns: 1fr 1fr;
284+
gap: 15px;
285+
}
286+
287+
.references-summary {
288+
flex-wrap: wrap;
289+
gap: 10px;
290+
}
291+
292+
.ref-section {
293+
flex: 0 1 48%;
294+
}
295+
}
296+
297+
@media (max-width: 480px) {
298+
.references-grid {
299+
grid-template-columns: 1fr;
300+
gap: 10px;
301+
}
302+
303+
.references-summary {
304+
flex-direction: column;
305+
gap: 8px;
306+
}
307+
308+
.ref-section {
309+
flex: 1;
310+
flex-direction: row;
311+
gap: 8px;
312+
}
313+
314+
.ref-section strong {
315+
min-width: 80px;
316+
flex-shrink: 0;
317+
}
318+
}
319+
235320
/* Implementation Section Styling */
236321
.implementation-preview {
237322
margin-left: 20px;

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

Lines changed: 48 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -212,51 +212,70 @@ <h4 class="tool-name" [innerHTML]="implement['name']"></h4>
212212
</div>
213213
</mat-expansion-panel>
214214

215-
<mat-expansion-panel [expanded]="true">
215+
<mat-expansion-panel [expanded]="true" #referencesPanel>
216216
<mat-expansion-panel-header>
217217
<mat-panel-title>
218-
<b>References</b>
219-
<div class="references-preview">
220-
<span class="reference-chip" *ngIf="currentActivity?.references?.samm2?.length">
221-
SAMM({{currentActivity?.references?.samm2?.length}})
218+
<b>Mapping</b>
219+
<div class="references-summary" [class.hidden]="referencesPanel.expanded">
220+
<span class="ref-section">
221+
<strong>SAMM 2:</strong>
222+
<span class="ref-values" *ngIf="currentActivity?.references?.samm2?.length; else sammEmpty">
223+
<span *ngFor="let samm of currentActivity?.references?.samm2; let last = last">{{samm}}<span *ngIf="!last">, </span></span>
224+
</span>
225+
<ng-template #sammEmpty>-</ng-template>
222226
</span>
223-
<span class="reference-chip" *ngIf="currentActivity?.references?.iso27001_2017?.length">
224-
ISO-17({{currentActivity?.references?.iso27001_2017?.length}})
227+
<span class="ref-section">
228+
<strong>ISO 2017:</strong>
229+
<span class="ref-values" *ngIf="currentActivity?.references?.iso27001_2017?.length; else iso17Empty">
230+
<span *ngFor="let iso of currentActivity?.references?.iso27001_2017; let last = last">{{iso}}<span *ngIf="!last">, </span></span>
231+
</span>
232+
<ng-template #iso17Empty>-</ng-template>
225233
</span>
226-
<span class="reference-chip" *ngIf="currentActivity?.references?.iso27001_2022?.length">
227-
ISO-22({{currentActivity?.references?.iso27001_2022?.length}})
234+
<span class="ref-section">
235+
<strong>ISO 2022:</strong>
236+
<span class="ref-values" *ngIf="currentActivity?.references?.iso27001_2022?.length; else iso22Empty">
237+
<span *ngFor="let iso22 of currentActivity?.references?.iso27001_2022; let last = last">{{iso22}}<span *ngIf="!last">, </span></span>
238+
</span>
239+
<ng-template #iso22Empty>-</ng-template>
228240
</span>
229-
<span class="reference-chip" *ngIf="currentActivity?.references?.openCRE?.length">
230-
<mat-icon class="reference-icon">link</mat-icon>CRE
241+
<span class="ref-section">
242+
<strong>OpenCRE:</strong>
243+
<span class="ref-values" *ngIf="currentActivity?.references?.openCRE?.length; else creEmpty">
244+
<a href="https://www.opencre.org/" target="_blank" class="cre-link">View OpenCRE</a>
245+
</span>
246+
<ng-template #creEmpty>-</ng-template>
231247
</span>
232248
</div>
233249
</mat-panel-title>
234250
</mat-expansion-panel-header>
235-
<div class="references-content">
236-
<div class="reference-section" *ngIf="currentActivity?.references?.samm2?.length">
237-
<h4>{{ SAMMVersion }}</h4>
238-
<div class="reference-tags">
239-
<span class="reference-tag" *ngFor="let samm of currentActivity?.references?.samm2">{{ samm }}</span>
251+
<div class="references-grid">
252+
<div class="reference-column">
253+
<div class="reference-header">{{ SAMMVersion }}</div>
254+
<div class="reference-values">
255+
<span class="reference-value" *ngFor="let samm of currentActivity?.references?.samm2">{{ samm }}</span>
256+
<span class="no-references" *ngIf="!currentActivity?.references?.samm2?.length">-</span>
240257
</div>
241258
</div>
242259

243-
<div class="reference-section" *ngIf="currentActivity?.references?.iso27001_2017?.length">
244-
<h4>{{ ISOVersion }}</h4>
245-
<div class="reference-tags">
246-
<span class="reference-tag" *ngFor="let iso of currentActivity?.references?.iso27001_2017">{{ iso }}</span>
260+
<div class="reference-column">
261+
<div class="reference-header">{{ ISOVersion }}</div>
262+
<div class="reference-values">
263+
<span class="reference-value" *ngFor="let iso of currentActivity?.references?.iso27001_2017">{{ iso }}</span>
264+
<span class="no-references" *ngIf="!currentActivity?.references?.iso27001_2017?.length">-</span>
247265
</div>
248266
</div>
249267

250-
<div class="reference-section" *ngIf="currentActivity?.references?.iso27001_2022?.length">
251-
<h4>{{ ISO22Version }}</h4>
252-
<div class="reference-tags">
253-
<span class="reference-tag" *ngFor="let iso22 of currentActivity?.references?.iso27001_2022">{{ iso22 }}</span>
268+
<div class="reference-column">
269+
<div class="reference-header">{{ ISO22Version }}</div>
270+
<div class="reference-values">
271+
<span class="reference-value" *ngFor="let iso22 of currentActivity?.references?.iso27001_2022">{{ iso22 }}</span>
272+
<span class="no-references" *ngIf="!currentActivity?.references?.iso27001_2022?.length">-</span>
254273
</div>
255274
</div>
256275

257-
<div class="reference-section" *ngIf="currentActivity?.references?.openCRE?.length">
258-
<h4>{{ openCREVersion }}</h4>
259-
<div class="reference-links">
276+
<div class="reference-column">
277+
<div class="reference-header">{{ openCREVersion }}</div>
278+
<div class="reference-values">
260279
<a
261280
class="reference-link"
262281
*ngFor="let openCRE of currentActivity?.references?.openCRE"
@@ -265,9 +284,11 @@ <h4>{{ openCREVersion }}</h4>
265284
<mat-icon>open_in_new</mat-icon>
266285
View CRE
267286
</a>
287+
<span class="no-references" *ngIf="!currentActivity?.references?.openCRE?.length">-</span>
268288
</div>
269289
</div>
270290
</div>
291+
<span>In other frameworks and standards the '{{ currentActivity?.name }}' activity is part of sections above.</span>
271292
</mat-expansion-panel>
272293

273294
<mat-expansion-panel>

0 commit comments

Comments
 (0)