rajukottedi/portfolio-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'fix: update project categories check and adjust border style in project detail popup' (#6) from task/popup-for-dynamic-form into develop

Browse Source 
Reviewed-on: #6
This commit is contained in:
rajukottedi 2026-02-16 09:26:17 +05:30
commit 15ad26c505
4 changed files with 61 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/admin/projects/project-detail-popup/project-detail-popup.html
View File

@ -88,7 +88,7 @@
</div> </div>
} }
@if (project.categories?.length) { @if (project.categories.length) {
<div class="detail-section"> <div class="detail-section">
<h4>Categories</h4> <h4>Categories</h4>
<div class="tag-list"> <div class="tag-list">

2
src/app/admin/projects/project-detail-popup/project-detail-popup.scss
View File

@ -4,7 +4,7 @@
max-height: 80vh; max-height: 80vh;
overflow-y: auto; overflow-y: auto;
background: var(--eerie-black-2, #1e1e1e); background: var(--eerie-black-2, #1e1e1e);
border: 1px solid var(--jet, #383838); border: 1.2px solid hsla(45, 100%, 72%, 0.45);
border-radius: 14px; border-radius: 14px;
} }

40
src/app/shared/dynamic-form/dynamic-form.scss
View File

@ -1,10 +1,18 @@
/* Dynamic form spacing and material tweaks to match popup theme */ /* Dynamic form spacing and material tweaks to match popup theme */
.full-width { width: 100%; display: block; } .full-width {
width: 100%;
display: block;
}
mat-form-field.full-width { margin-bottom: 12px; } mat-form-field.full-width {
margin-bottom: 12px;
}
/* Reduce label size slightly to fit popup */ /* Reduce label size slightly to fit popup */
mat-form-field .mat-form-field-label { font-size: 0.95rem; color: var(--light-gray-70); } mat-form-field .mat-form-field-label {
font-size: 0.95rem;
color: var(--light-gray-70);
}
/* Make input text contrast better */ /* Make input text contrast better */
.mat-input-element, .mat-input-element,
@ -15,10 +23,16 @@ textarea.mat-mdc-input-element,
} }
/* Smaller helper/hint text */ /* Smaller helper/hint text */
.mat-hint { color: var(--light-gray-70); font-size: 0.85rem; } .mat-hint {
color: var(--light-gray-70);
font-size: 0.85rem;
}
/* Error styling consistent with theme */ /* Error styling consistent with theme */
mat-error { color: #ff8a80; font-size: 0.9rem; } mat-error {
color: #ff8a80;
font-size: 0.9rem;
}
/* Outline border always visible, highlight on focus */ /* Outline border always visible, highlight on focus */
::ng-deep .mdc-notched-outline__leading, ::ng-deep .mdc-notched-outline__leading,
@ -34,8 +48,18 @@ mat-error { color: #ff8a80; font-size: 0.9rem; }
} }
/* Make array item fields inline on larger screens */ /* Make array item fields inline on larger screens */
.array-item-fields { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; } .array-item-fields {
.array-item-fields mat-form-field { flex: 1 1 auto; margin-bottom: 0; min-width: 120px; } display: flex;
gap: 12px;
align-items: baseline;
flex-wrap: wrap;
}
.array-item-fields mat-form-field {
flex: 1 1 auto;
margin-bottom: 0;
min-width: 120px;
}
/* Stack array item fields vertically on small screens */ /* Stack array item fields vertically on small screens */
@media (max-width: 580px) { @media (max-width: 580px) {
@ -83,6 +107,7 @@ mat-error { color: #ff8a80; font-size: 0.9rem; }
/* Force material label/input colors to match dark popup theme (covers MDC + legacy classes) */ /* Force material label/input colors to match dark popup theme (covers MDC + legacy classes) */
.themed-popup { .themed-popup {
::ng-deep .mat-form-field-label, ::ng-deep .mat-form-field-label,
::ng-deep .mat-mdc-floating-label, ::ng-deep .mat-mdc-floating-label,
::ng-deep .mat-form-field .mat-form-field-label { ::ng-deep .mat-form-field .mat-form-field-label {
@ -107,6 +132,7 @@ mat-error { color: #ff8a80; font-size: 0.9rem; }
opacity: 1 !important; opacity: 1 !important;
} }
} }
.form-array { .form-array {
margin-bottom: 20px; margin-bottom: 20px;
padding: 10px 0; padding: 10px 0;

9
src/styles.scss
View File

@ -507,9 +507,9 @@
.mat-mdc-text-field.mat-mdc-focused .mat-mdc-notched-outline .mat-mdc-notched-outline-path { .mat-mdc-text-field.mat-mdc-focused .mat-mdc-notched-outline .mat-mdc-notched-outline-path {
stroke: var(--orange-yellow-crayola) !important; stroke: var(--orange-yellow-crayola) !important;
border-color: var(--orange-yellow-crayola) !important; border-color: var(--orange-yellow-crayola) !important;
}
/* Additional overrides: set MDC theme variables and force a gold focus ring */ /* Additional overrides: set MDC theme variables and force a gold focus ring */
.themed-popup { // .themed-popup {
/* Override MDC primary color used by many Material components */ /* Override MDC primary color used by many Material components */
--mdc-theme-primary: var(--orange-yellow-crayola); --mdc-theme-primary: var(--orange-yellow-crayola);
--mdc-theme-on-primary: var(--smoky-black); --mdc-theme-on-primary: var(--smoky-black);
@ -529,9 +529,8 @@
.mat-mdc-text-field.mat-mdc-focused .mat-mdc-notched-outline-path { .mat-mdc-text-field.mat-mdc-focused .mat-mdc-notched-outline-path {
stroke: var(--orange-yellow-crayola) !important; stroke: var(--orange-yellow-crayola) !important;
} }
} // }
box-shadow: 0 6px 18px rgba(36,26,18,0.12) !important; // box-shadow: 0 6px 18px rgba(36,26,18,0.12) !important;
}
} }
.contacts-list { .contacts-list {