Skip to content

Commit de73904

Browse files
Diogo-FerrazDiogo-Ferraz
committed
refactor(docs): simplify information layout with grouped documentation cards and cleaner visual hierarchy
1 parent ec8e876 commit de73904

2 files changed

Lines changed: 113 additions & 53 deletions

File tree

‎src/app/features/docs/components/project-docs/project-docs.component.html‎

Lines changed: 51 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -20,67 +20,68 @@ <h2>Task Management Platform</h2>
2020

2121
<div class="docs-grid docs-grid--equal docs-grid--two">
2222
<p-card header="Project Purpose" styleClass="docs-card">
23-
<p>
24-
Build a practical collaboration workspace where teams can plan, execute, and track work using boards,
25-
role-aware capabilities, and a live activity feed.
26-
</p>
27-
<p>
28-
The frontend intentionally demonstrates maintainability and UI quality while proving real backend integration,
29-
not a disconnected mock-only demo.
30-
</p>
23+
<div class="docs-info-stack">
24+
<div class="docs-info-row">
25+
<span>Primary Goal</span>
26+
<small>Build a practical collaboration workspace where teams can plan, execute, and track work using boards, role-aware capabilities, and a live activity feed.</small>
27+
</div>
28+
<div class="docs-info-row">
29+
<span>Frontend Intent</span>
30+
<small>The SPA demonstrates maintainability and UI quality while proving real backend integration, not a disconnected mock-only demo.</small>
31+
</div>
32+
</div>
3133
</p-card>
3234

3335
<p-card header="Architecture Notes" styleClass="docs-card">
34-
<div class="notes">
35-
<p>
36-
The backend is built as a reusable template with Vertical Slice Architecture and OpenIddict-based auth.
37-
The SPA maps directly onto that backend contract so adding features remains predictable.
38-
</p>
39-
<p>
40-
Error handling follows RFC7807 Problem Details, while key screens include resilient loading, empty, and
41-
degraded states for local UI development and demos.
42-
</p>
36+
<div class="docs-info-stack">
37+
<div class="docs-info-row">
38+
<span>Backend Contract Alignment</span>
39+
<small>The backend is built as a reusable Vertical Slice template with OpenIddict auth. The SPA maps directly to that contract for predictable feature delivery.</small>
40+
</div>
41+
<div class="docs-info-row">
42+
<span>Resilience Strategy</span>
43+
<small>Error handling follows RFC7807 Problem Details and key screens include loading, empty, and degraded states for local development and demos.</small>
44+
</div>
4345
</div>
4446
</p-card>
4547
</div>
4648

47-
<div class="docs-grid docs-grid--equal docs-grid--three">
48-
<p-card header="Tech Stack" styleClass="docs-card">
49-
<ul class="docs-list">
50-
<li *ngFor="let item of techStack">{{ item }}</li>
51-
</ul>
52-
</p-card>
53-
54-
<p-card header="Current Feature Highlights" styleClass="docs-card">
55-
<ul class="docs-list">
56-
<li *ngFor="let item of highlights">{{ item }}</li>
57-
</ul>
58-
</p-card>
59-
60-
<p-card header="Engineering Principles" styleClass="docs-card">
61-
<ul class="docs-list">
62-
<li *ngFor="let item of principles">{{ item }}</li>
63-
</ul>
64-
</p-card>
65-
</div>
49+
<div class="docs-grid docs-grid--equal docs-grid--two">
50+
<p-card header="Platform Foundations" styleClass="docs-card">
51+
<div class="docs-section-stack">
52+
<section class="docs-section-row">
53+
<h4>Tech Stack</h4>
54+
<ul class="docs-list docs-list--bullet">
55+
<li *ngFor="let item of techStack">{{ item }}</li>
56+
</ul>
57+
</section>
6658

67-
<div class="docs-grid docs-grid--equal docs-grid--three">
68-
<p-card header="Navigation Information Architecture" styleClass="docs-card">
69-
<ul class="docs-list">
70-
<li *ngFor="let item of navigationGroups">{{ item }}</li>
71-
</ul>
59+
<section class="docs-section-row">
60+
<h4>Engineering Principles</h4>
61+
<ul class="docs-list docs-list--bullet">
62+
<li *ngFor="let item of principles">{{ item }}</li>
63+
</ul>
64+
</section>
65+
</div>
7266
</p-card>
7367

74-
<p-card header="Engineering Standards" styleClass="docs-card">
75-
<ul class="docs-list">
76-
<li *ngFor="let item of engineeringStandards">{{ item }}</li>
77-
</ul>
78-
</p-card>
68+
<p-card header="Delivery Snapshot" styleClass="docs-card">
69+
<div class="docs-section-stack">
70+
<section class="docs-section-row">
71+
<h4>Current Feature Highlights</h4>
72+
<ul class="docs-list docs-list--bullet">
73+
<li *ngFor="let item of highlights">{{ item }}</li>
74+
</ul>
75+
</section>
7976

80-
<p-card header="Quality & Delivery" styleClass="docs-card">
81-
<ul class="docs-list">
82-
<li *ngFor="let item of qualityAndDelivery">{{ item }}</li>
83-
</ul>
77+
<section class="docs-section-row">
78+
<h4>Quality & Delivery</h4>
79+
<ul class="docs-list docs-list--bullet">
80+
<li *ngFor="let item of qualityAndDelivery">{{ item }}</li>
81+
</ul>
82+
</section>
83+
</div>
8484
</p-card>
8585
</div>
86+
8687
</section>

‎src/app/features/docs/components/project-docs/project-docs.component.scss‎

Lines changed: 62 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,14 +68,73 @@
6868

6969
.docs-list {
7070
margin: 0;
71-
padding-left: 1rem;
71+
padding: 0;
72+
list-style: none;
7273
display: flex;
7374
flex-direction: column;
74-
gap: 0.45rem;
75+
gap: 0.75rem;
76+
}
77+
78+
.docs-info-stack {
79+
display: flex;
80+
flex-direction: column;
81+
gap: 0.75rem;
82+
}
83+
84+
.docs-info-row {
85+
border: 1px solid var(--surface-border);
86+
border-radius: 12px;
87+
background: color-mix(in srgb, var(--surface-100) 65%, transparent);
88+
padding: 0.72rem 0.78rem;
89+
}
90+
91+
.docs-info-row {
92+
display: flex;
93+
flex-direction: column;
94+
gap: 0.14rem;
95+
}
96+
97+
.docs-info-row span {
98+
color: var(--text-color);
99+
font-size: 0.86rem;
100+
font-weight: 600;
101+
}
102+
103+
.docs-info-row small {
104+
color: var(--text-color-secondary);
105+
font-size: 0.76rem;
106+
line-height: 1.3;
107+
}
108+
109+
.docs-section-stack {
110+
display: flex;
111+
flex-direction: column;
112+
gap: 0.75rem;
113+
}
114+
115+
.docs-section-row {
116+
border: 1px solid var(--surface-border);
117+
border-radius: 12px;
118+
background: color-mix(in srgb, var(--surface-100) 65%, transparent);
119+
padding: 0.75rem 0.85rem;
120+
}
121+
122+
.docs-section-row h4 {
123+
margin: 0 0 0.45rem;
124+
font-size: 0.9rem;
125+
font-weight: 600;
126+
color: var(--text-color);
127+
}
128+
129+
.docs-list--bullet {
130+
list-style: disc;
131+
padding-left: 1.2rem;
132+
gap: 0.35rem;
75133
}
76134

77-
.notes {
135+
.docs-list--bullet li {
78136
color: var(--text-color-secondary);
137+
line-height: 1.35;
79138
}
80139

81140
:host ::ng-deep .docs-grid--equal .docs-card {

0 commit comments

Comments
 (0)