cyril/client-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui feedback updates

Browse Source
This commit is contained in:
Cyril Joseph 2025-07-27 16:50:25 -03:00
parent 47ff5377c1
commit 2db8d71231
7 changed files with 130 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.component.html
View File

@ -4,4 +4,4 @@
<router-outlet></router-outlet>
</main>
<app-footer></app-footer>
<app-footer [isUserLoggedIn]="isUserLoggedIn" ></app-footer>

4
src/app/carnet/travel-plan/travel-plan.component.ts
View File

@ -107,6 +107,8 @@ export class TravelPlanComponent {
visits: this.visitsCount
});
}
this.visitsCount = 1;
}
fyiAction(country: Country): void {
@ -166,6 +168,7 @@ export class TravelPlanComponent {
dialogRef.afterClosed().subscribe(result => {
if (result) {
this.transitsCount = this.visitsCount;
this.selectedAvailableTransitCountry = this.selectedAvailableVisitCountry;
this.addVisitCountryToCollection();
this.addTransitCountryToCollection();
@ -192,6 +195,7 @@ export class TravelPlanComponent {
visits: this.transitsCount
});
}
this.transitsCount = 1;
}
IsCountryExists(countryType: string, country: Country): boolean {

2
src/app/common/footer/footer.component.html
View File

@ -1,4 +1,4 @@
<footer class="footer">
<footer class="footer" [ngClass]="{'general': !isUserLoggedIn}">
<div class="footer-content">
<div class="footer-links">
<a href="#">Privacy Policy</a>

25
src/app/common/footer/footer.component.scss
View File

@ -1,9 +1,8 @@
.footer {
color: var(--mat-sys-primary);
background: var(--mat-sys-primary-container);
color: var(--mat-sys-on-primary);
background: var(--mat-sys-primary);
padding: 8px;
border-top: 1px solid var(--mat-sys-outline-variant);
backdrop-filter: blur(10px);
/* Fixed footer styles */
position: fixed;
@ -27,22 +26,36 @@
gap: 24px;
a {
color: var(--mat-sys-secondary);
color: var(--mat-sys-on-primary);
background: var(--mat-sys-primary);
text-decoration: none;
transition: color 0.3s ease;
&:hover {
color: var(--mat-sys-primary);
transform: scale(103%);
}
}
}
.copyright {
color: var(--mat-sys-secondary);
font-size: 12px;
}
}
/* footer styles - not logged in users */
.footer.general {
color: #000000;
background: #ffffff;
.footer-links {
a {
color: #000000;
background: #ffffff;
}
}
}
@media (max-width: 600px) {
.footer {
padding: 16px;

6
src/app/common/footer/footer.component.ts
View File

@ -1,12 +1,14 @@
import { Component } from '@angular/core';
import { Component, Input } from '@angular/core';
import { AngularMaterialModule } from '../../shared/module/angular-material.module';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-footer',
imports: [AngularMaterialModule],
imports: [AngularMaterialModule, CommonModule],
templateUrl: './footer.component.html',
styleUrl: './footer.component.scss'
})
export class FooterComponent {
currentYear = new Date().getFullYear();
@Input() isUserLoggedIn = false;
}

51
src/app/common/secured-header/secured-header.component.scss
View File

@ -4,9 +4,9 @@
align-items: center;
padding: 0 24px;
height: 64px;
color: var(--mat-sys-primary);
background: var(--mat-sys-primary-container);
box-shadow: var(--mat-sys-level2);
color: var(--custom-nav-color);
background: var(--custom-nav-background-color);
border-bottom: 1px solid var(--mat-sys-outline-variant);
position: relative;
z-index: 100; // Higher than footer's z-index
@ -31,6 +31,20 @@
align-items: center;
gap: 24px;
button {
color: var(--custom-nav-color);
background-color: var(--custom-nav-background-color);
&:hover {
color: var(--custom-nav-background-color);
background-color: var(--custom-nav-color);
}
}
.mat-mdc-button:hover>.mat-mdc-button-persistent-ripple::before {
opacity: 0;
}
// .nav-link {
// cursor: pointer;
// padding: 8px 12px;
@ -48,15 +62,21 @@
position: relative;
.profile-button {
color: var(--mat-sys-primary);
background: var(--mat-sys-primary-container);
color: var(--custom-nav-background-color);
background-color: var(--custom-nav-color);
&:hover {
color: var(--custom-nav-color);
background-color: var(--custom-nav-background-color);
}
}
.profile-menu {
position: absolute;
right: 0;
top: 48px;
background-color: var(--mat-sys-secondary-container);
color: var(--mat-sys-on-primary-container);
background-color: var(--mat-sys-primary-container);
border-radius: 4px;
box-shadow: var(--mat-sys-level3);
min-width: 200px;
@ -68,12 +88,12 @@
align-items: center;
gap: 8px;
padding: 12px 16px;
background-color: #fff;
color: var(--mat-sys-secondary);
color: var(--mat-sys-on-primary-container);
background-color: var(--mat-sys-primary-container);
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
mat-icon {
color: var(--mat-sys-secondary);
color: var(--mat-sys-on-primary-container);
}
}
@ -85,15 +105,16 @@
padding: 8px 16px;
border: none;
cursor: pointer;
background-color: var(--mat-sys-surface-container);
color: var(--mat-sys-secondary);
color: var(--mat-sys-on-primary-container);
background-color: var(--mat-sys-primary-container);
mat-icon {
color: var(--mat-sys-secondary);
}
// mat-icon {
// color: var(--mat-sys-on-primary-container);
// }
&:hover {
background-color: var(--mat-sys-secondary-container);
color: var(--mat-sys-on-primary);
background-color: var(--mat-sys-primary);
}
}
}

68
src/styles.scss
View File

@ -22,9 +22,6 @@ body {
container-text-line-height:1.7, // line height should be atleast 1.5 times text size
outlined-label-text-size:0.875rem));
/* stepper */
@include mat.stepper-overrides((header-height:50px));
/* list */
@include mat.list-overrides((list-item-label-text-size:0.875rem,
list-item-label-text-line-height:1.7, // line height should be atleast 1.5 times text size
@ -37,4 +34,69 @@ body {
/*select options*/
--mat-option-label-text-size: 0.875rem;
/* stepper */
@include mat.stepper-overrides((header-height:50px,
header-hover-state-layer-color:var(--mat-sys-primary),
header-focus-state-layer-color:var(--mat-sys-primary),
));
.mat-step-header:hover:not([aria-disabled]),
.mat-step-header:hover[aria-disabled=false] {
.mat-step-icon {
color: var(--mat-sys-on-primary-container);
background-color: var(--mat-sys-primary-container);
}
.mat-step-label {
color: var(--mat-sys-on-primary);
}
}
.mat-step-header:focus:not([aria-disabled]),
.mat-step-header:focus[aria-disabled=false] {
.mat-step-icon {
color: var(--mat-sys-on-primary-container);
background-color: var(--mat-sys-primary-container);
}
.mat-step-label {
color: var(--mat-sys-on-primary);
}
}
/* expansion panel */
@include mat.expansion-overrides((header-hover-state-layer-color:var(--mat-sys-primary),
header-focus-state-layer-color:var(--mat-sys-primary),
));
.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover {
.mat-expansion-panel-header-title {
color: var(--mat-sys-on-primary);
}
.mat-expansion-indicator svg {
fill: var(--mat-sys-on-primary);
}
}
/* button */
@include mat.button-overrides((protected-container-color: var(--custom-button-background-color),
protected-container-elevation-shadow:var(--custom-button-hover-color),
protected-label-text-color:var(--custom-button-color)));
/* Nav bar */
.navbar-menu {
.mat-mdc-button:hover>.mat-mdc-button-persistent-ripple::before {
opacity: 0;
}
}
.profile-container {
.profile-button:hover>.mat-mdc-button-persistent-ripple::before {
opacity: 0;
}
}
}