Skip to content

Divyanshu | Design improvement #513

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Saurabh186 merged 3 commits into from
Apr 1, 2026
Merged

Divyanshu | Design improvement #513

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0561c16
refactor: remove mat-card wrappers from tables and unused CSS variable
dvCodeWorld Apr 1, 2026
90c9278
Merge branch 'development' of https://github.com/Walkover-Web-Solutio…
dvCodeWorld Apr 1, 2026
416b8c8
refactor: improve sidebar layout and client switcher UI
dvCodeWorld Apr 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions apps/36-blocks-widget/src/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,6 @@
--font-size-28: 28px;
--font-size-30: 30px;
--font-size-36: 36px;

--custom-mat-form-field-height: 48px;
}

/* You can add global styles to this file, and also import other style files */
Expand Down
445 changes: 206 additions & 239 deletions apps/36-blocks/src/app/features/create-feature/create-feature.component.html
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions apps/36-blocks/src/app/features/create-feature/create-feature.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
:host {
display: block;
height: 100%;
}
.code-snippet-view {
transition: min-height 0.2s linear;
min-width: 500px;
Expand Down
222 changes: 105 additions & 117 deletions apps/36-blocks/src/app/features/feature/feature.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@if (loading$ | async; as loading) {
<div class="flex flex-col">
<div class="flex flex-col h-full">
@if (loading.dataLoading && (hasSomeFeatures$ | async) === null) { <proxy-loader></proxy-loader> }

<!-- Action Bar -->
Expand Down Expand Up @@ -41,128 +41,116 @@ <h4 class="my-0 text-secondary mat-body-1 font-semibold">Blocks</h4>
resource allocation, and a user-friendly dashboard for easy configuration.
</p>
} @if ((hasSomeFeatures$ | async) === true) {
<mat-card class="p-0 outline-card responsive-card grow">
<mat-card-content>
<div class="table-scroll">
<table
mat-table
[dataSource]="
(feature$ | async)?.data?.length
? (feature$ | async)?.data
: loading.dataLoading
? [1, 2, 3, 4, 5]
: []
"
class="default-table responsive-table"
>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="width-md-300">Name</th>
<td mat-cell *matCellDef="let element" data-label="Name">
@if (!loading.dataLoading) {
<span>{{ element.name }}</span>
} @else {
<ng-container [ngTemplateOutlet]="loadingRef"></ng-container>
}
</td>
</ng-container>
<div class="table-scroll">
<table
mat-table
[dataSource]="
(feature$ | async)?.data?.length ? (feature$ | async)?.data : loading.dataLoading ? [1, 2, 3, 4, 5] : []
"
class="default-table responsive-table"
>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="width-md-300">Name</th>
<td mat-cell *matCellDef="let element" data-label="Name">
@if (!loading.dataLoading) {
<span>{{ element.name }}</span>
} @else {
<ng-container [ngTemplateOutlet]="loadingRef"></ng-container>
}
</td>
</ng-container>

<!-- reference_id Column -->
<ng-container matColumnDef="reference_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="width-md-300">Reference Id</th>
<td mat-cell *matCellDef="let element" data-label="Reference Id">
@if (!loading.dataLoading) {
<div class="flex items-center gap-2">
<span
[matTooltip]="element.reference_id"
matTooltipPosition="above"
class="cursor-default"
>
{{
element.reference_id?.length > 15
? (element.reference_id | slice: 0:10) +
'...' +
(element.reference_id | slice: -5)
: element.reference_id
}}
</span>
<proxy-copy-button
[copyData]="element.reference_id"
tooltip="Copy Reference Id"
></proxy-copy-button>
</div>
} @else {
<ng-container [ngTemplateOutlet]="loadingRef"></ng-container>
}
</td>
</ng-container>
<!-- reference_id Column -->
<ng-container matColumnDef="reference_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="width-md-300">Reference Id</th>
<td mat-cell *matCellDef="let element" data-label="Reference Id">
@if (!loading.dataLoading) {
<div class="flex items-center gap-2 max-md:flex-col max-md:items-end">
Copy link
Copy Markdown

@windsurf-bot windsurf-bot bot Apr 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The responsive design for reference_id has been improved with max-md:flex-col and max-md:items-end, but this could cause the copy button to appear disconnected from the ID it's copying on mobile devices. Consider adding a visual indicator to maintain the relationship between the ID and its copy button when stacked vertically.

<span
[matTooltip]="element.reference_id"
matTooltipPosition="above"
class="cursor-pointer font-mono text-xs px-2 py-0.5 rounded-4 min-w-[150px]"
Copy link
Copy Markdown

@windsurf-bot windsurf-bot bot Apr 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The reference_id span has been changed from cursor-default to cursor-pointer, but there doesn't appear to be any click handler or interactive behavior associated with it. This might confuse users who expect something to happen when they click. Consider either adding interactive behavior or keeping it as cursor-default.

>
{{
element.reference_id?.length > 15
? (element.reference_id | slice: 0:10) + '...' + (element.reference_id | slice: -5)
: element.reference_id
}}
</span>
<proxy-copy-button
[copyData]="element.reference_id"
tooltip="Copy Reference Id"
></proxy-copy-button>
</div>
} @else {
<ng-container [ngTemplateOutlet]="loadingRef"></ng-container>
}
</td>
</ng-container>

<!-- Method Column -->
<ng-container matColumnDef="method">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="width-md-200">Method</th>
<td mat-cell *matCellDef="let element" data-label="Method">
@if (!loading.dataLoading) { @if (element.method?.name) {
{{ element.method?.name }}
} } @else {
<ng-container [ngTemplateOutlet]="loadingRef"></ng-container>
}
</td>
</ng-container>
<!-- Method Column -->
<ng-container matColumnDef="method">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="width-md-200">Method</th>
<td mat-cell *matCellDef="let element" data-label="Method">
@if (!loading.dataLoading) { @if (element.method?.name) {
{{ element.method?.name }}
} } @else {
<ng-container [ngTemplateOutlet]="loadingRef"></ng-container>
}
</td>
</ng-container>

<!-- Type Column -->
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="width-md-200">Type</th>
<td mat-cell *matCellDef="let element" data-label="Type">
@if (!loading.dataLoading) { @if (element.feature?.name) {
{{ element.feature?.name }}
} } @else {
<ng-container [ngTemplateOutlet]="loadingRef"></ng-container>
}
</td>
</ng-container>
<!-- Type Column -->
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="width-md-200">Type</th>
<td mat-cell *matCellDef="let element" data-label="Type">
@if (!loading.dataLoading) { @if (element.feature?.name) {
{{ element.feature?.name }}
} } @else {
<ng-container [ngTemplateOutlet]="loadingRef"></ng-container>
}
</td>
</ng-container>

<!-- Manage Column -->
<ng-container matColumnDef="manage">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element" data-label="Manage">
@if (!loading.dataLoading) {
<div class="actions flex justify-end pr-3">
<button matButton="outlined" [routerLink]="['manage', element.id]" class="mat-btn-md">
<mat-icon class="material-icons-outlined mat-icon-18 mat-icon-prefix"
>settings</mat-icon
>
Manage
</button>
</div>
}
</td>
</ng-container>
<!-- Manage Column -->
<ng-container matColumnDef="manage">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element" data-label="Manage">
@if (!loading.dataLoading) {
<div class="actions flex justify-end pr-3">
<button matButton="outlined" [routerLink]="['manage', element.id]" class="mat-btn-md">
<mat-icon class="material-icons-outlined mat-icon-18 mat-icon-prefix">settings</mat-icon>
Manage
</button>
</div>
}
</td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr
mat-row
*matRowDef="let row; columns: displayedColumns; let i = index"
class="hover-action"
[class.last-child]="i + 1 === pageSizeOptions[0]"
></tr>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr
mat-row
*matRowDef="let row; columns: displayedColumns; let i = index"
class="hover-action"
[class.last-child]="i + 1 === pageSizeOptions[0]"
></tr>

<tr *matNoDataRow>
<td class="mat-cell border-0" [attr.colspan]="displayedColumns.length">
<proxy-no-record-found [title]="'blocks'" [showBtn]="false"></proxy-no-record-found>
</td>
</tr>
</table>
</div>
<mat-paginator-goto
[length]="(feature$ | async)?.totalEntityCount"
[pageSize]="(feature$ | async)?.itemsPerPage || 25"
[pageSizeOptions]="pageSizeOptions"
(page)="pageChange($event)"
[pageIndex]="(feature$ | async)?.pageNumber - 1"
class="box-shadow-none"
></mat-paginator-goto>
</mat-card-content>
</mat-card>
<tr *matNoDataRow>
<td class="mat-cell border-0" [attr.colspan]="displayedColumns.length">
<proxy-no-record-found [title]="'blocks'" [showBtn]="false"></proxy-no-record-found>
</td>
</tr>
</table>
</div>
<mat-paginator-goto
[length]="(feature$ | async)?.totalEntityCount"
[pageSize]="(feature$ | async)?.itemsPerPage || 25"
[pageSizeOptions]="pageSizeOptions"
(page)="pageChange($event)"
[pageIndex]="(feature$ | async)?.pageNumber - 1"
class="box-shadow-none"
></mat-paginator-goto>
}
</div>
}
Expand Down
4 changes: 4 additions & 0 deletions apps/36-blocks/src/app/features/feature/feature.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
:host {
display: block;
height: 100%;
}
Loading
Loading