Skip to content

Commit 58fff88

Browse files
vbakkevbakke
committed
Activity: Improve layout
1 parent 4110ef6 commit 58fff88

8 files changed

Lines changed: 339 additions & 240 deletions

File tree

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

Lines changed: 126 additions & 112 deletions
Large diffs are not rendered by default.

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

Lines changed: 78 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
<div class="content-box">
22
<div class="activity-header">
3-
<h1>
4-
{{ currentActivity.dimension }}:
5-
{{ currentActivity.name }}
6-
</h1>
3+
<div class="activity-title">
4+
<h3>
5+
{{ currentActivity.dimension }}:
6+
</h3>
7+
<h1>
8+
{{ currentActivity.name }}
9+
</h1>
10+
</div>
711
<button
812
*ngIf="showCloseButton"
913
class="close-button"
@@ -29,7 +33,7 @@ <h1>
2933
<p id="uuid" [innerHTML]="currentActivity.uuid"></p>
3034
</mat-expansion-panel>
3135

32-
<mat-expansion-panel *ngIf="currentActivity.description?.hasContent()">
36+
<mat-expansion-panel *ngIf="currentActivity.description?.hasContent()" [expanded]="true">
3337
<mat-expansion-panel-header>
3438
<mat-panel-title>
3539
<b>Description</b>
@@ -38,7 +42,7 @@ <h1>
3842
<p id="description" [innerHTML]="currentActivity.description?.render()"></p>
3943
</mat-expansion-panel>
4044

41-
<mat-expansion-panel *ngIf="currentActivity.risk?.hasContent()">
45+
<mat-expansion-panel *ngIf="currentActivity.risk?.hasContent()" [expanded]="true">
4246
<mat-expansion-panel-header>
4347
<mat-panel-title>
4448
<b>Risk</b>
@@ -47,7 +51,7 @@ <h1>
4751
<p id="risk" [innerHTML]="currentActivity.risk?.render()"></p>
4852
</mat-expansion-panel>
4953

50-
<mat-expansion-panel *ngIf="currentActivity.measure?.hasContent()">
54+
<mat-expansion-panel *ngIf="currentActivity.measure?.hasContent()" [expanded]="true">
5155
<mat-expansion-panel-header>
5256
<mat-panel-title>
5357
<b>Measure</b>
@@ -56,7 +60,7 @@ <h1>
5660
<p id="measure" [innerHTML]="currentActivity.measure?.render()"></p>
5761
</mat-expansion-panel>
5862

59-
<mat-expansion-panel *ngIf="currentActivity.assessment?.hasContent()">
63+
<mat-expansion-panel *ngIf="currentActivity.assessment?.hasContent()" [expanded]="true">
6064
<mat-expansion-panel-header>
6165
<mat-panel-title>
6266
<b>Assessment</b>
@@ -65,7 +69,7 @@ <h1>
6569
<p id="assessment" [innerHTML]="currentActivity.assessment?.render()"></p>
6670
</mat-expansion-panel>
6771

68-
<mat-expansion-panel>
72+
<mat-expansion-panel [expanded]="true">
6973
<mat-expansion-panel-header>
7074
<mat-panel-title>
7175
<b>Dependencies</b>
@@ -88,11 +92,26 @@ <h1>
8892
<p id="implementationGuide" [innerHTML]="currentActivity.implementationGuide?.render()"></p>
8993
</mat-expansion-panel>
9094

91-
<mat-expansion-panel [expanded]="true">
95+
<div *ngIf="currentActivity.usefulness !== -1" class="usefulness-section">
96+
<div class="usefulness-header">
97+
<h3><b>Usefulness</b></h3>
98+
<div class="usefulness-stars">
99+
<mat-icon
100+
*ngFor="let star of [1,2,3,4,5]"
101+
class="star"
102+
[class.filled]="star <= (currentActivity.usefulness || 0)">
103+
{{star <= (currentActivity.usefulness || 0) ? 'star' : 'star_border'}}
104+
</mat-icon>
105+
<span class="usefulness-label">{{ this.UsefulnessLabel }}</span>
106+
</div>
107+
</div>
108+
</div>
109+
110+
<mat-expansion-panel [expanded]="isNarrowScreen" #difficultyPanel>
92111
<mat-expansion-panel-header>
93112
<mat-panel-title>
94113
<b>Difficulty of Implementation</b>
95-
<div class="difficulty-summary">
114+
<div class="difficulty-summary" [class.hidden]="difficultyPanel.expanded">
96115
<span class="difficulty-indicator">
97116
<mat-icon class="difficulty-icon">school</mat-icon>
98117
<span class="difficulty-level level-{{currentActivity.difficultyOfImplementation?.knowledge}}">{{ this.KnowledgeLabel }}</span>
@@ -127,92 +146,7 @@ <h1>
127146
</div>
128147
</mat-expansion-panel>
129148

130-
<mat-expansion-panel *ngIf="currentActivity.usefulness !== -1" [expanded]="true">
131-
<mat-expansion-panel-header>
132-
<mat-panel-title>
133-
<b>Usefulness</b>
134-
<div class="usefulness-stars">
135-
<mat-icon
136-
*ngFor="let star of [1,2,3,4,5]"
137-
class="star"
138-
[class.filled]="star <= (currentActivity.usefulness || 0)">
139-
{{star <= (currentActivity.usefulness || 0) ? 'star' : 'star_border'}}
140-
</mat-icon>
141-
<span class="usefulness-label">{{ this.UsefulnessLabel }}</span>
142-
</div>
143-
</mat-panel-title>
144-
</mat-expansion-panel-header>
145-
<div class="usefulness-details">
146-
<div class="usefulness-rating">
147-
<span class="rating-text">Rating: {{ currentActivity.usefulness }}/5</span>
148-
<div class="star-display">
149-
<mat-icon
150-
*ngFor="let star of [1,2,3,4,5]"
151-
class="star-large"
152-
[class.filled]="star <= (currentActivity.usefulness || 0)">
153-
{{star <= (currentActivity.usefulness || 0) ? 'star' : 'star_border'}}
154-
</mat-icon>
155-
</div>
156-
<span class="usefulness-description">{{ this.UsefulnessLabel }}</span>
157-
</div>
158-
</div>
159-
</mat-expansion-panel>
160-
161-
<mat-expansion-panel>
162-
<mat-expansion-panel-header>
163-
<mat-panel-title>
164-
<b>Teams Evidence</b>
165-
</mat-panel-title>
166-
</mat-expansion-panel-header>
167-
<mat-accordion multi="true">
168-
<mat-expansion-panel
169-
id="teamsEvidence"
170-
*ngFor="let item of this.currentActivity.teamsEvidence | keyvalue">
171-
<mat-expansion-panel-header>
172-
<mat-panel-title>
173-
<b [innerHTML]="item.key"></b>
174-
</mat-panel-title>
175-
</mat-expansion-panel-header>
176-
<p [innerHTML]="item.value"></p>
177-
</mat-expansion-panel>
178-
</mat-accordion>
179-
</mat-expansion-panel>
180-
181-
<mat-expansion-panel [expanded]="true">
182-
<mat-expansion-panel-header>
183-
<mat-panel-title>
184-
<b>Implementation</b>
185-
<div class="implementation-preview">
186-
<span class="tool-count-badge">{{currentActivity.implementation?.length || 0}} tools</span>
187-
</div>
188-
</mat-panel-title>
189-
</mat-expansion-panel-header>
190-
<div class="implementation-tools">
191-
<div class="tool-card" *ngFor="let implement of this.currentActivity.implementation">
192-
<div class="tool-header" (click)="implement.expanded = !implement.expanded">
193-
<div class="tool-info">
194-
<h4 class="tool-name" [innerHTML]="implement['name']"></h4>
195-
<div class="tool-tags">
196-
<span class="tag-chip" *ngFor="let tag of implement['tags']" [innerHTML]="tag"></span>
197-
</div>
198-
</div>
199-
<mat-icon class="expand-icon" [class.rotated]="implement.expanded">expand_more</mat-icon>
200-
</div>
201-
202-
<div class="tool-details" [class.expanded]="implement.expanded">
203-
<div class="tool-url" *ngIf="implement['url']">
204-
<mat-icon>link</mat-icon>
205-
<a [href]="implement['url']" target="_blank" [innerHTML]="implement['url']"></a>
206-
</div>
207-
<div class="tool-description" *ngIf="implement['description']">
208-
<p [innerHTML]="implement['description']"></p>
209-
</div>
210-
</div>
211-
</div>
212-
</div>
213-
</mat-expansion-panel>
214-
215-
<mat-expansion-panel [expanded]="true" #referencesPanel>
149+
<mat-expansion-panel [expanded]="isNarrowScreen" #referencesPanel>
216150
<mat-expansion-panel-header>
217151
<mat-panel-title>
218152
<b>Mapping</b>
@@ -291,6 +225,53 @@ <h4 class="tool-name" [innerHTML]="implement['name']"></h4>
291225
<span>In other frameworks and standards the '{{ currentActivity?.name }}' activity is part of sections above.</span>
292226
</mat-expansion-panel>
293227

228+
<!-- <mat-expansion-panel>
229+
<mat-expansion-panel-header>
230+
<mat-panel-title>
231+
<b>Teams Evidence</b>
232+
</mat-panel-title>
233+
</mat-expansion-panel-header>
234+
<mat-accordion multi="true">
235+
<mat-expansion-panel
236+
id="teamsEvidence"
237+
*ngFor="let item of this.currentActivity.teamsEvidence | keyvalue">
238+
<mat-expansion-panel-header>
239+
<mat-panel-title>
240+
<b [innerHTML]="item.key"></b>
241+
</mat-panel-title>
242+
</mat-expansion-panel-header>
243+
<p [innerHTML]="item.value"></p>
244+
</mat-expansion-panel>
245+
</mat-accordion>
246+
</mat-expansion-panel> -->
247+
248+
<mat-expansion-panel [expanded]="true" #implementationPanel *ngIf="currentActivity.implementation?.length">
249+
<mat-expansion-panel-header>
250+
<mat-panel-title>
251+
<b>Implementation</b>
252+
<div class="implementation-preview" [class.hidden]="implementationPanel.expanded">
253+
<span class="tool-count-badge">{{currentActivity.implementation?.length || 0}} tools</span>
254+
</div>
255+
</mat-panel-title>
256+
</mat-expansion-panel-header>
257+
<div class="implementation-tools">
258+
<div class="tool-item" *ngFor="let implement of this.currentActivity.implementation">
259+
<div class="tool-title">
260+
<h4 class="tool-name" [innerHTML]="implement['name']"></h4>
261+
<a [href]="implement['url']" target="_blank" href="implement['url']">
262+
<mat-icon class="link-icon" *ngIf="implement['url']">open_in_new</mat-icon>
263+
</a>
264+
</div>
265+
<!-- <div class="tool-url" *ngIf="implement['url']">
266+
<a [href]="implement['url']" target="_blank" [innerHTML]="implement['url']"></a>
267+
</div> -->
268+
<div class="tool-description" *ngIf="implement['description']">
269+
<p [innerHTML]="implement['description']"></p>
270+
</div>
271+
</div>
272+
</div>
273+
</mat-expansion-panel>
274+
294275
<mat-expansion-panel>
295276
<mat-expansion-panel-header>
296277
<mat-panel-title>
@@ -313,14 +294,6 @@ <h4 class="tool-name" [innerHTML]="implement['name']"></h4>
313294
</ng-template>
314295
</mat-expansion-panel>
315296

316-
<mat-expansion-panel>
317-
<mat-expansion-panel-header>
318-
<mat-panel-title>
319-
<b>Comments</b>
320-
</mat-panel-title>
321-
</mat-expansion-panel-header>
322-
<p id="comments" [innerHTML]="currentActivity.comments?.render()"></p>
323-
</mat-expansion-panel>
324297
</mat-accordion>
325298

326299
<mat-expansion-panel>

0 commit comments

Comments
 (0)