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

fix: update project categories check and adjust border style in project detail popup

Browse Source
This commit is contained in:
Bangara Raju Kottedi
2026-02-16 09:24:45 +05:30
parent 7d63845951
commit e529f101b7
4 changed files with 61 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/shared/dynamic-form/dynamic-form.scss
+55 -29
View File
@@ -1,41 +1,65 @@
/* 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 */
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 */
.mat-input-element,
input.mat-mdc-input-element,
textarea.mat-mdc-input-element,
.mat-mdc-input-element {
color: var(--white-1) !important;
color: var(--white-1) !important;
}
/* 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 */
mat-error { color: #ff8a80; font-size: 0.9rem; }
mat-error {
color: #ff8a80;
font-size: 0.9rem;
}
/* Outline border always visible, highlight on focus */
::ng-deep .mdc-notched-outline__leading,
::ng-deep .mdc-notched-outline__notch,
::ng-deep .mdc-notched-outline__trailing {
border-color: var(--light-gray-70) !important;
border-color: var(--light-gray-70) !important;
}
::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,
::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,
::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing {
border-color: var(--orange-yellow-crayola) !important;
border-color: var(--orange-yellow-crayola) !important;
}
/* Make array item fields inline on larger screens */
.array-item-fields { 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; }
.array-item-fields {
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 */
@media (max-width: 580px) {
@@ -52,37 +76,38 @@ mat-error { color: #ff8a80; font-size: 0.9rem; }
/* Hide subscript wrapper inside array items so fields align */
.array-item ::ng-deep .mat-mdc-form-field-subscript-wrapper {
display: none;
display: none;
}
/* Remove link at bottom-right of each array card */
.array-item-actions {
display: flex;
justify-content: center;
margin-top: 4px;
display: flex;
justify-content: center;
margin-top: 4px;
}
.remove-link {
background: none;
border: none;
color: rgba(255, 255, 255, 0.35);
font-size: 0.8rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 8px;
border-radius: 4px;
transition: color 0.2s ease, background 0.2s ease;
background: none;
border: none;
color: rgba(255, 255, 255, 0.35);
font-size: 0.8rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 8px;
border-radius: 4px;
transition: color 0.2s ease, background 0.2s ease;
&:hover {
color: hsl(0deg 75% 60%);
background: rgba(255, 70, 70, 0.1);
}
&:hover {
color: hsl(0deg 75% 60%);
background: rgba(255, 70, 70, 0.1);
}
}
/* Force material label/input colors to match dark popup theme (covers MDC + legacy classes) */
.themed-popup {
::ng-deep .mat-form-field-label,
::ng-deep .mat-mdc-floating-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;
}
}
.form-array {
margin-bottom: 20px;
padding: 10px 0;