Fix loading card style inconsistency#1358
Fix loading card style inconsistency#1358SAN-MUYUN wants to merge 3 commits intoCATcher-org:masterfrom
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR fixes the visual inconsistency of the loading card by adding elevation and removing rounded corners.
- Introduces a
.loading-cardclass on the loadingmat-cardfor consistent styling. - Defines CSS rules to flatten corners and maintain shadow depth.
- Keeps spinner centered with flexbox layout.
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/app/shared/issue-tables/issue-tables.component.html | Added loading-card class and mat-elevation-z8, removed old tag formatting |
| src/app/shared/issue-tables/issue-tables.component.css | Defined .loading-card styles to override border-radius and add transparent border |
Comments suppressed due to low confidence (1)
src/app/shared/issue-tables/issue-tables.component.html:299
- Angular templates should not reference
this; remove thethis.prefix so the binding reads*ngIf="issues.isLoading$ | async".
*ngIf="this.issues.isLoading$ | async"
| <mat-card | ||
| *ngIf="this.issues.isLoading$ | async" | ||
| class="mat-elevation-z8 loading-card" | ||
| style="display: flex; justify-content: center; align-items: center" |
There was a problem hiding this comment.
[nitpick] Consider moving inline flexbox styles into the .loading-card CSS class for cleaner templates and centralized styling.
There was a problem hiding this comment.
Could consider this if no other components uses loading-card
| .loading-card { | ||
| border-radius: 0% !important; |
There was a problem hiding this comment.
[nitpick] Avoid using !important if possible; increase selector specificity or adjust style ordering so border-radius: 0; is applied without !important.
| .loading-card { | |
| border-radius: 0% !important; | |
| .mat-table .loading-card { | |
| border-radius: 0%; |
| } | ||
|
|
||
| .loading-card { | ||
| border-radius: 0% !important; |
There was a problem hiding this comment.
[nitpick] Using 0% is functionally equivalent to 0; consider changing to border-radius: 0; for clarity.
| border-radius: 0% !important; | |
| border-radius: 0 !important; |
NorbertLoh
left a comment
NorbertLoh
left a comment
There was a problem hiding this comment.
I like the visual change. Since it is mainly a visual change. No logic is touched 👍. Nit to fix otherwise LGTM!
| } | ||
|
|
||
| .loading-card { | ||
| border-radius: 0% !important; |
| <mat-card | ||
| *ngIf="this.issues.isLoading$ | async" | ||
| class="mat-elevation-z8 loading-card" | ||
| style="display: flex; justify-content: center; align-items: center" |
There was a problem hiding this comment.
Could consider this if no other components uses loading-card
| <mat-card *ngIf="this.issues.isLoading$ | async" style="display: flex; justify-content: center; align-items: center"> | ||
| <mat-card | ||
| *ngIf="this.issues.isLoading$ | async" | ||
| class="mat-elevation-z8 loading-card" |
There was a problem hiding this comment.
Nitpick. Doing mat-elevation-z8 seems to cast a shadow on the table header. Might be difficult but see if there is any alternative
|
Thanks for the suggestions! I will look into them and make changes accordingly. Removing the shadow at the top border of the card is a bit more difficult, I will see what I can do about it. 👍 |
|
@NorbertLoh The shadow cast on the header table is now removed. Adjustments to code is made according to the suggestions. |
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #1358 +/- ##
==========================================
- Coverage 58.39% 58.19% -0.20%
==========================================
Files 104 104
Lines 2579 2605 +26
Branches 291 306 +15
==========================================
+ Hits 1506 1516 +10
- Misses 1022 1038 +16
Partials 51 51 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Summary:
Fixes #1330
Changes Made:
Add CSS design to the loading card component, to give a shadow and remove the round edges.
Before:
image is taken from issue #1330 itself
After:
Proposed Commit Message: