Skip to content

Commit 9e2f6ac

Browse files
Diogo-FerrazDiogo-Ferraz
committed
fix: sidebar mobile view and unused scss styles cleanup
1 parent 8c57bfa commit 9e2f6ac

6 files changed

Lines changed: 65 additions & 192 deletions

File tree

‎src/app/features/projects/components/project-create/project-create.component.html‎

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,27 @@
11
<p-toast />
22
<p-card header="Create New Project">
33
<form [formGroup]="projectForm" (ngSubmit)="onSubmit()">
4-
5-
<div class="field mb-4">
6-
<label for="name" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Project Name</label>
7-
<input id="name" type="text" pInputText formControlName="name" class="w-full" [ngClass]="{'ng-invalid ng-dirty': isInvalid('name')}" />
8-
<small *ngIf="isInvalid('name')" class="p-error block mt-1">
4+
5+
<div class="field">
6+
<label for="name">Project Name</label>
7+
<input id="name" type="text" pInputText formControlName="name" placeholder="Name" class="w-full"
8+
[ngClass]="{'ng-invalid ng-dirty': isInvalid('name')}" />
9+
<small *ngIf="isInvalid('name')" class="p-error">
910
Project name is required.
1011
</small>
1112
</div>
1213

13-
<div class="field mb-4">
14-
<label for="description" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Description</label>
15-
<textarea id="description" pInputTextarea formControlName="description" class="w-full" [rows]="5"></textarea>
14+
<div class="field">
15+
<label for="description">Description</label>
16+
<textarea id="description" pInputTextarea formControlName="description" class="w-full"
17+
[rows]="5"></textarea>
1618
</div>
1719

1820
<div class="flex justify-content-end gap-2">
19-
<p-button
20-
label="Cancel"
21-
icon="pi pi-times"
22-
styleClass="p-button-secondary"
23-
(click)="cancel()"
21+
<p-button label="Cancel" icon="pi pi-times" styleClass="p-button-secondary" (click)="cancel()"
2422
[disabled]="isLoading">
2523
</p-button>
26-
<p-button
27-
type="submit"
28-
label="Create Project"
29-
icon="pi pi-check"
30-
[loading]="isLoading"
24+
<p-button type="submit" label="Create Project" icon="pi pi-check" [loading]="isLoading"
3125
[disabled]="!projectForm.valid || isLoading">
3226
</p-button>
3327
</div>

‎src/app/features/projects/components/project-list/project-list.component.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<p-toolbar styleClass="mb-4 border-round border-1 surface-border" [style]="{'padding': '0.75rem'}">
22
<ng-template pTemplate="start">
3-
<button pButton pRipple label="New" icon="pi pi-plus" class="mr-2 p-button-outlined p-button-primary p-button-sm"></button>
4-
<button pButton pRipple label="Delete" icon="pi pi-trash" class="p-button-outlined p-button-secondary p-button-sm"></button>
3+
<button pButton pRipple label="New" icon="pi pi-plus" class="mr-2 p-button-outlined p-button-primary"></button>
4+
<button pButton pRipple label="Delete" icon="pi pi-trash" class="p-button-outlined p-button-secondary"></button>
55
</ng-template>
66

77
<ng-template pTemplate="end">
8-
<button pButton pRipple label="Export" icon="pi pi-upload" class="p-button-outlined p-button-secondary p-button-sm"
8+
<button pButton pRipple label="Export" icon="pi pi-upload" class="p-button-outlined p-button-secondary"
99
(onClick)="exportCSV(dt)"></button>
1010
</ng-template>
1111
</p-toolbar>
@@ -139,7 +139,7 @@
139139
<td class="text-center">
140140
<i class="pi" [ngClass]="{ 'text-green-500 pi-check-circle': true, 'text-red-500 pi-times-circle': false }"></i>
141141
</td>
142-
<td>
142+
<td class="text-center">
143143
<p-button icon="pi pi-pencil" class="mr-2" [rounded]="true" [outlined]="true" />
144144
<p-button icon="pi pi-trash" severity="danger" [rounded]="true" [outlined]="true" />
145145
</td>

‎src/app/features/task-item/components/task-item-create/task-item-create.component.html‎

Lines changed: 35 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,58 @@
11
<p-card header="Create New Task">
22
<form [formGroup]="taskForm" (ngSubmit)="onSubmit()">
33

4-
<div class="field mb-4">
5-
<label for="title" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Task Title</label>
6-
<input id="title" type="text" pInputText formControlName="title" class="w-full" [ngClass]="{'ng-invalid ng-dirty': isInvalid('title')}" />
7-
<small *ngIf="isInvalid('title')" class="p-error block mt-1">
4+
<div class="field">
5+
<label for="title">Task Title</label>
6+
<input id="title" type="text" pInputText formControlName="title" class="w-full" placeholder="Title"
7+
[ngClass]="{'ng-invalid ng-dirty': isInvalid('title')}" />
8+
<small *ngIf="isInvalid('title')" class="p-error">
89
Task title is required.
910
</small>
1011
</div>
1112

12-
<div class="field mb-4">
13-
<label for="projectId" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Project</label>
14-
<p-dropdown
15-
id="projectId"
16-
formControlName="projectId"
17-
[options]="projectOptions"
18-
placeholder="Select a Project"
19-
optionLabel="name"
20-
optionValue="value"
21-
styleClass="w-full"
22-
[filter]="projectOptions.length > 10"
23-
[showClear]="true"
13+
<div class="field">
14+
<label for="projectId">Project</label>
15+
<p-dropdown id="projectId" formControlName="projectId" [options]="projectOptions"
16+
placeholder="Select a Project" optionLabel="name" optionValue="value" styleClass="w-full"
17+
[filter]="projectOptions.length > 10" [showClear]="true"
2418
[ngClass]="{'ng-invalid ng-dirty': isInvalid('projectId')}">
2519
</p-dropdown>
26-
<small *ngIf="isInvalid('projectId')" class="p-error block mt-1">
20+
<small *ngIf="isInvalid('projectId')" class="p-error">
2721
Project selection is required.
2822
</small>
2923
</div>
3024

31-
<div class="field mb-4">
32-
<label for="status" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Status</label>
33-
<p-dropdown
34-
id="status"
35-
formControlName="status"
36-
[options]="statusOptions"
37-
placeholder="Select Status"
38-
optionLabel="name"
39-
optionValue="value"
40-
styleClass="w-full"
41-
[ngClass]="{'ng-invalid ng-dirty': isInvalid('status')}">
42-
</p-dropdown>
43-
<small *ngIf="isInvalid('status')" class="p-error block mt-1">
44-
Status is required.
45-
</small>
46-
</div>
47-
48-
<div class="field mb-4">
49-
<label for="dueDate" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Due Date (Optional)</label>
50-
<p-calendar
51-
id="dueDate"
52-
formControlName="dueDate"
53-
styleClass="w-full"
54-
[showIcon]="true"
55-
dateFormat="yy-mm-dd">
56-
</p-calendar>
25+
<div class="flex flex-column md:flex-row gap-3">
26+
<div class="field w-full md:w-6 mb-0">
27+
<label for="status">Status</label>
28+
<p-dropdown id="status" formControlName="status" [options]="statusOptions" placeholder="Select Status"
29+
optionLabel="name" optionValue="value" styleClass="w-full"
30+
[ngClass]="{'ng-invalid ng-dirty': isInvalid('status')}">
31+
</p-dropdown>
32+
<small *ngIf="isInvalid('status')" class="p-error">
33+
Status is required.
34+
</small>
35+
</div>
36+
37+
<div class="field w-full md:w-6">
38+
<label for="dueDate">Due Date (Optional)</label>
39+
<p-calendar id="dueDate" formControlName="dueDate" styleClass="w-full" [showIcon]="true"
40+
dateFormat="yy-mm-dd" placeholder="Due Date">
41+
</p-calendar>
42+
</div>
5743
</div>
5844

59-
<div class="field mb-4">
60-
<label for="description" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Description</label>
61-
<textarea id="description" pInputTextarea formControlName="description" class="w-full" [rows]="5"></textarea>
45+
<div class="field">
46+
<label for="description">Description</label>
47+
<textarea id="description" pInputTextarea formControlName="description" class="w-full"
48+
[rows]="5"></textarea>
6249
</div>
6350

6451
<div class="flex justify-content-end gap-2">
65-
<p-button
66-
label="Cancel"
67-
icon="pi pi-times"
68-
styleClass="p-button-secondary"
69-
(click)="cancel()"
52+
<p-button label="Cancel" icon="pi pi-times" styleClass="p-button-secondary" (click)="cancel()"
7053
[disabled]="isLoading">
7154
</p-button>
72-
<p-button
73-
type="submit"
74-
label="Create Task"
75-
icon="pi pi-check"
76-
[loading]="isLoading"
55+
<p-button type="submit" label="Create Task" icon="pi pi-check" [loading]="isLoading"
7756
[disabled]="!taskForm.valid || isLoading">
7857
</p-button>
7958
</div>

‎src/app/features/task-item/components/task-item-list/task-item-list.component.html‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,15 @@
1515
strokeWidth="6"></p-progressSpinner>
1616
</div>
1717
<button pButton pRipple label="Export" icon="pi pi-upload"
18-
class="p-button-outlined p-button-secondary p-button-sm"
18+
class="p-button-outlined p-button-secondary"
1919
(onClick)="exportCSV(dt)"></button>
2020
</div>
2121
</ng-template>
2222
</p-toolbar>
2323

2424
<p-table #dt [value]="tasks" dataKey="id" [loading]="isLoadingTasks" [rows]="10" [paginator]="true"
2525
[globalFilterFields]="['title', 'description', 'assignedUserName', 'statusName']"
26-
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} tasks" [showCurrentPageReport]="true"
27-
paginatorPosition="bottom" [rowsPerPageOptions]="[10, 25, 50]" [tableStyle]="{ 'min-width': '70rem' }">
26+
paginatorPosition="bottom" [rowsPerPageOptions]="[10, 25, 50]">
2827
<ng-template pTemplate="caption">
2928
<div class="flex">
3029
<p-button label="Clear" [outlined]="true" icon="pi pi-filter-slash" (onClick)="clear(dt)" />
@@ -57,13 +56,13 @@
5756
</p-columnFilter>
5857
</div>
5958
</th>
60-
<th style="min-width:8rem">
59+
<th style="min-width:10rem">
6160
<div class="flex align-items-center">
6261
Created At
6362
<p-columnFilter type="date" field="createdAt" display="menu" />
6463
</div>
6564
</th>
66-
<th style="min-width:8rem">
65+
<th style="min-width:10rem">
6766
<div class="flex align-items-center">
6867
Due Date
6968
<p-columnFilter type="date" field="dueDate" display="menu" />
@@ -94,7 +93,7 @@
9493
</p-columnFilter>
9594
</div>
9695
</th>
97-
<th style="width: 8rem" class="text-center"></th>
96+
<th style="width: 12rem" class="text-center"></th>
9897
</tr>
9998
</ng-template>
10099

@@ -109,7 +108,7 @@
109108
<td>
110109
<span class="p-column-title">Status</span>
111110
<p-tag *ngIf="!(showStatusDropdown && isAssignedToMe(task))" [value]="getStatusName(task.status)"
112-
[severity]="getTagSeverity(task.status)" styleClass="status-tag"
111+
[severity]="getTagSeverity(task.status)"
113112
[pTooltip]="isUnassigned(task) ? 'Task is unassigned' : 'Assigned to ' + task.assignedUserName"
114113
tooltipPosition="top" #tagElement
115114
[ngClass]="{'cursor-pointer hover:opacity-80': isAssignedToMe(task)}">
@@ -120,12 +119,10 @@
120119
(onChange)="onStatusChange(task); showStatusDropdown = !showStatusDropdown" appendTo="body"
121120
[showClear]="false">
122121
<ng-template pTemplate="selectedItem">
123-
<p-tag [value]="getStatusName(task.status)" [severity]="getTagSeverity(task.status)"
124-
styleClass="status-tag-option"></p-tag>
122+
<p-tag [value]="getStatusName(task.status)" [severity]="getTagSeverity(task.status)"></p-tag>
125123
</ng-template>
126124
<ng-template let-option pTemplate="item">
127-
<p-tag [value]="option.label" [severity]="getTagSeverity(option.value)"
128-
styleClass="status-tag-option"></p-tag>
125+
<p-tag [value]="option.label" [severity]="getTagSeverity(option.value)"></p-tag>
129126
</ng-template>
130127
</p-dropdown>
131128
</td>

‎src/app/features/task-item/components/task-item-list/task-item-list.component.scss‎

Lines changed: 0 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
:host {
2-
display: block;
3-
}
4-
51
:host ::ng-deep .project-tasks-card .p-card-title {
62
font-size: 1.25rem;
73
font-weight: 600;
@@ -14,97 +10,4 @@
1410

1511
:host ::ng-deep .project-tasks-card .p-card-content {
1612
padding: 0;
17-
}
18-
19-
:host ::ng-deep .p-inputtext-sm {
20-
font-size: 0.875rem;
21-
}
22-
23-
:host ::ng-deep .p-datatable.p-datatable-customers .p-datatable-tbody > tr {
24-
background-color: var(--surface-card);
25-
border-bottom: 1px solid var(--surface-border);
26-
color: var(--text-color);
27-
}
28-
29-
:host ::ng-deep .p-datatable.p-datatable-customers .p-datatable-tbody > tr:last-child {
30-
border-bottom: none;
31-
}
32-
33-
:host ::ng-deep .p-datatable.p-datatable-customers.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
34-
background-color: var(--surface-50);
35-
}
36-
37-
:host ::ng-deep .p-datatable.p-datatable-customers .p-datatable-tbody > tr:not(.p-datatable-emptymessage):hover {
38-
background-color: var(--surface-hover) !important;
39-
}
40-
41-
:host ::ng-deep .p-datatable.p-datatable-customers .p-datatable-tbody > tr > td {
42-
padding: 0.875rem 1rem;
43-
vertical-align: middle;
44-
border: none;
45-
}
46-
47-
:host ::ng-deep .status-tag {
48-
padding: 0.25rem 0.65rem;
49-
font-size: 0.75rem;
50-
font-weight: 600;
51-
border-radius: 12px;
52-
text-transform: uppercase;
53-
width: auto;
54-
display: inline-block;
55-
text-align: center;
56-
border: 1px solid transparent;
57-
}
58-
59-
:host ::ng-deep .p-tag-success.status-tag { background-color: var(--green-100); color: var(--green-700); border-color: var(--green-200);}
60-
:host ::ng-deep .p-tag-warning.status-tag { background-color: var(--orange-100); color: var(--orange-700); border-color: var(--orange-200);}
61-
:host ::ng-deep .p-tag-info.status-tag { background-color: var(--blue-100); color: var(--blue-700); border-color: var(--blue-200);}
62-
:host ::ng-deep .p-tag-danger.status-tag { background-color: var(--red-100); color: var(--red-700); border-color: var(--red-200);}
63-
:host ::ng-deep .p-tag-secondary.status-tag { background-color: var(--surface-200); color: var(--surface-700); border-color: var(--surface-300);}
64-
65-
:host ::ng-deep .status-tag-option {
66-
padding: 0.25rem 0.65rem;
67-
font-size: 0.75rem;
68-
font-weight: 600;
69-
border-radius: 12px;
70-
text-transform: uppercase;
71-
width: 100%;
72-
display: flex;
73-
justify-content: center;
74-
border: 1px solid transparent;
75-
}
76-
:host ::ng-deep .p-dropdown-panel .p-tag-success.status-tag-option { background-color: var(--green-100); color: var(--green-700); border-color: var(--green-200);}
77-
:host ::ng-deep .p-dropdown-panel .p-tag-warning.status-tag-option { background-color: var(--orange-100); color: var(--orange-700); border-color: var(--orange-200);}
78-
:host ::ng-deep .p-dropdown-panel .p-tag-info.status-tag-option { background-color: var(--blue-100); color: var(--blue-700); border-color: var(--blue-200);}
79-
:host ::ng-deep .p-dropdown-panel .p-tag-danger.status-tag-option { background-color: var(--red-100); color: var(--red-700); border-color: var(--red-200);}
80-
:host ::ng-deep .p-dropdown-panel .p-tag-secondary.status-tag-option { background-color: var(--surface-200); color: var(--surface-700); border-color: var(--surface-300);}
81-
82-
83-
:host ::ng-deep .user-avatar {
84-
width: 32px;
85-
height: 32px;
86-
font-size: 0.875rem;
87-
}
88-
:host ::ng-deep .avatar-me {
89-
background-color: var(--primary-100);
90-
color: var(--primary-700);
91-
}
92-
:host ::ng-deep .avatar-other {
93-
background-color: var(--surface-200);
94-
color: var(--surface-700);
95-
}
96-
97-
:host ::ng-deep .action-button.p-button.p-button-icon-only {
98-
width: 2.25rem;
99-
height: 2.25rem;
100-
}
101-
102-
:host ::ng-deep .p-paginator {
103-
border: none;
104-
padding: 1rem 0;
105-
}
106-
107-
:host ::ng-deep .p-datatable-loading-row td {
108-
padding-top: 1rem;
109-
padding-bottom: 1rem;
11013
}

‎src/assets/layout/_responsive.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -76,14 +76,14 @@
7676

7777
.layout-sidebar {
7878
transform: translateX(-100%);
79-
left: 0;
80-
top: 0;
81-
height: 100vh;
82-
border-top-left-radius: 0;
83-
border-bottom-left-radius: 0;
79+
left: 0 !important;
80+
top: 0 !important;
81+
height: 100vh !important;
82+
border-top-left-radius: 0 !important;
83+
border-bottom-left-radius: 0 !important;
8484
transition:
8585
transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99),
86-
left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
86+
left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99) !important;
8787
}
8888

8989
.layout-mask {

0 commit comments

Comments
 (0)