a-mayb3/KanbanCloneAngular
1
1
Fork 0
mirror of https://github.com/a-mayb3/KanbanCloneAngular.git synced 2026-03-21 18:05:38 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Changed layout for project detail page

Browse source
This commit is contained in:
Marta Borgia Leiva 2026-02-11 11:09:54 +01:00
parent 69edc4e197
commit effcab5947
4 changed files with 99 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/app/pages/project-details/project-details.component.css
View file

@ -1,12 +1,19 @@
.content {
padding: 40px;
max-width: 1200px;
width: clamp(70vw, 85vw, 90vw);
max-width: 80%;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
@media (max-width: 600px) {
.content{
max-width: 95%;
}
}
.title h2 {
margin: 0 0 6px 0;
font-size: 26px;
@ -153,13 +160,13 @@
}
.collaborators-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
display: flex;
flex-direction: column;
gap: 16px;
}
.collaborators-grid--single {
grid-template-columns: minmax(0, 1fr);
flex-direction: column;
}
.btn-add-task {
@ -205,6 +212,41 @@
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.cards-row {
width: 100%;
height: max-content;
display: flex;
flex-direction: row;
gap: 16px;
align-items: stretch;
}
.cards-row section {
height: auto;
width: 100%;
}
.cards-row .tasks-card {
display: flex;
flex-direction: column;
flex: 3;
}
.cards-row .collaborators-card {
flex: 1;
}
@media (max-width: 960px) {
.content {
width: 90vw;
}
.cards-row {
flex-direction: column;
}
}
.loading p,

98
src/app/pages/project-details/project-details.component.html
View file

@ -17,58 +17,60 @@
</p>
</section>
<section class="tasks-card">
<div class="tasks-header">
<h4>Tasks</h4>
<span class="tasks-count">
{{ project()?.tasks?.length ?? 0 }} total • {{ taskCompletionPercentage }}% completed
</span>
</div>
@if ((project()?.tasks?.length ?? 0) > 0) {
<div class="tasks-list">
@for (task of project()?.tasks ?? []; track task.id) {
<app-task-item
[task]="task"
[projectId]="project()?.id"
(statusChange)="onTaskStatusChange($event)"
/>
}
<div class="cards-row">
<section class="tasks-card">
<div class="tasks-header">
<h4>Tasks</h4>
<span class="tasks-count">
{{ project()?.tasks?.length ?? 0 }} total • {{ taskCompletionPercentage }}% completed
</span>
</div>
} @else {
<div class="empty-state">
<p>No tasks yet.</p>
@if ((project()?.tasks?.length ?? 0) > 0) {
<div class="tasks-list">
@for (task of project()?.tasks ?? []; track task.id) {
<app-task-item
[task]="task"
[projectId]="project()?.id"
(statusChange)="onTaskStatusChange($event)"
/>
}
</div>
} @else {
<div class="empty-state">
<p>No tasks yet.</p>
</div>
}
<button class="btn-add-task" type="button" (click)="onAddTask()">Add task</button>
</section>
<section class="collaborators-card">
<div class="collaborators-header">
<h4>Collaborators</h4>
<span class="collaborators-count"> {{ project()?.users?.length ?? 0 }} total </span>
</div>
}
<button class="btn-add-task" type="button" (click)="onAddTask()">Add task</button>
</section>
@if ((project()?.users?.length ?? 0) > 0) {
<div
class="collaborators-grid"
[class.collaborators-grid--single]="(project()?.users?.length ?? 0) === 1"
>
@for (user of project()?.users ?? []; track user.id) {
<app-collaborator-item [user]="user" (remove)="onRemoveCollaborator($event)" />
}
</div>
} @else {
<div class="empty-state">
<p>No collaborators yet.</p>
</div>
}
<section class="collaborators-card">
<div class="collaborators-header">
<h4>Collaborators</h4>
<span class="collaborators-count"> {{ project()?.users?.length ?? 0 }} total </span>
</div>
@if ((project()?.users?.length ?? 0) > 0) {
<div
class="collaborators-grid"
[class.collaborators-grid--single]="(project()?.users?.length ?? 0) === 1"
>
@for (user of project()?.users ?? []; track user.id) {
<app-collaborator-item [user]="user" (remove)="onRemoveCollaborator($event)" />
}
</div>
} @else {
<div class="empty-state">
<p>No collaborators yet.</p>
</div>
}
<button class="btn-add-collaborator" type="button" (click)="onAddCollaborator()">
Add collaborator
</button>
</section>
<button class="btn-add-collaborator" type="button" (click)="onAddCollaborator()">
Add collaborator
</button>
</section>
</div>
<section class="danger-zone">
<div class="danger-header">