Skip to content

Commit b788bfb

Browse files
jr-rkjr-rk
authored
VSB-TUO/UI customization 3.0 (v7.6.5) (#957)
* Added UI first changes to v7.6.5 * Fixed compiler errors * Fixed double navbar * Fixed navbar visibility * mobile display header fix * fixed toggle nav menu item display * fixed missing logout && auth-nav-menu button * fixed login/logout expandable container style * fixed styles of header elements * Nav logo by language, backup font-family by design manual * Fixed colors of expandable nav menu * Added padding to navbar buttons * removed underline decoration from login/logout button * removed double outline/border on buttons and input fields * Changed the cookie consent box style * Changed mobile header logo display * Fixed responsive toggle navbar menu - mobile display * Fixed responsive footer display
1 parent 9be1e73 commit b788bfb

13 files changed

Lines changed: 75 additions & 22 deletions

File tree

‎src/app/header/header.component.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ export class HeaderComponent implements OnInit {
2121
public isAuthenticated: Observable<boolean>;
2222
public isMobile$: Observable<boolean>;
2323

24+
public logoSrc: string;
25+
2426
menuID = MenuID.PUBLIC;
2527
maxMobileWidth = WidthCategory.SM;
2628

@@ -33,6 +35,7 @@ export class HeaderComponent implements OnInit {
3335

3436
ngOnInit(): void {
3537
this.isMobile$ = this.windowService.isUpTo(this.maxMobileWidth);
38+
this.setLogo();
3639
}
3740

3841
public toggleNavbar(): void {
@@ -75,4 +78,13 @@ export class HeaderComponent implements OnInit {
7578

7679
return translations[slug] || '';
7780
}
81+
82+
/**
83+
* Sets the logo source based on the current language code
84+
*/
85+
setLogo() {
86+
this.logoSrc = this.localeService.getCurrentLanguageCode() === 'cs'
87+
? 'assets/images/vsb-cs-logo-w.svg'
88+
: 'assets/images/vsb-en-logo-w.svg';
89+
}
7890
}

‎src/app/navbar/navbar.component.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export class NavbarComponent extends MenuComponent implements OnInit {
3939

4040
public isMobile$: Observable<boolean>;
4141

42-
public logoSrc: string;
42+
public logoSrc: string;
4343

4444
constructor(protected menuService: MenuService,
4545
protected injector: Injector,
@@ -61,6 +61,9 @@ public logoSrc: string;
6161
this.setLogo();
6262
}
6363

64+
/**
65+
* Sets the logo source based on the current language code
66+
*/
6467
setLogo() {
6568
this.logoSrc = this.localeService.getCurrentLanguageCode() === 'cs'
6669
? 'assets/images/vsb-cs-logo-w.svg'

‎src/app/shared/animations/slide.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const slide = trigger('slide', [
1212

1313
export const slideMobileNav = trigger('slideMobileNav', [
1414

15-
state('expanded', style({ height: '*', minHeight: '*' })),
15+
state('expanded', style({ height: 'auto', minHeight: '100vh' })),
1616

1717
state('collapsed', style({ height: 0, minHeight: 0 })),
1818

‎src/app/shared/cookies/klaro-configuration.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,9 @@ export const klaroConfiguration: any = {
3333
hideLearnMore: false,
3434

3535
/*
36-
Override cookies modal styles according to customer requirements.
36+
Override cookies modal styles according to customer VSB-TUO requirements.
3737
*/
38-
stylePrefix: 'klaro customer-cookies',
38+
stylePrefix: 'klaro vsb-tuo-cookies',
3939

4040
/*
4141
Setting 'acceptAll' to 'true' will show an "accept all" button in the notice and

‎src/styles/_custom_variables.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
:root {
22

33
--lt-common-navbar-height: 80px;
4+
--lt-vsb-tuo-cyan: #00a499;
5+
--lt-vsb-tuo-cyan-hover: #026962;
6+
--lt-vsb-tuo-cyan-lighter: #52e3d9;
7+
--lt-vsb-tuo-black: #171f2b;
8+
--lt-vsb-tuo-darkgray: #828899;
9+
--lt-vsb-tuo-lightgray: #fafafa;
10+
411
--lt-clarin-purple: #7479b8;
512

613
--lt-clarin-yellow-bg: #fcf8e3;;

‎src/styles/_global-styles.scss‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -440,25 +440,25 @@ ul.dso-edit-menu-dropdown>li .nav-item.nav-link {
440440
}
441441
}
442442

443-
&.btn-secondary {
444-
&:focus {
445-
outline-color: darken($secondary, 20%);
446-
}
447-
}
443+
// &.btn-secondary {
444+
// &:focus {
445+
// outline-color: darken($secondary, 20%);
446+
// }
447+
// }
448448

449449
&.btn-danger:focus, &.btn-outline-danger:focus {
450450
outline-color: darken($danger, 20%);
451451
}
452452

453-
&.btn-primary:focus, &.btn-outline-primary:focus {
454-
outline-color: darken($primary, 5%);
455-
}
453+
// &.btn-primary:focus, &.btn-outline-primary:focus {
454+
// outline-color: darken($primary, 5%);
455+
// }
456456
}
457457

458458
dynamic-ng-bootstrap-checkbox .custom-control-input:focus ~ .custom-control-label::before {
459-
outline: 2px solid $gray-700 !important;
460459
box-shadow: none !important;
461-
outline-offset: 2px !important;
460+
// outline: 2px solid $gray-700 !important;
461+
// outline-offset: 2px !important;
462462
}
463463

464464
dynamic-ng-bootstrap-checkbox .custom-control-label::before {
@@ -488,8 +488,8 @@ ngb-accordion {
488488
}
489489
&:focus {
490490
box-shadow: none;
491-
outline: 2px solid lighten($gray-700, 10%);
492-
outline-offset: 2px !important;
491+
// outline: 2px solid lighten($gray-700, 10%);
492+
// outline-offset: 2px !important;
493493
}
494494
}
495495

src/styles/_clarin-styles.scss renamed to src/styles/_vsb-tuo-styles.scss

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,36 @@
2626
cursor: pointer;
2727
}
2828

29+
.vsb-tuo-cookies {
30+
.cm-modal {
31+
background-color: #fff !important;
32+
box-shadow: 0 10px 15px 0 rgba(0,0,0,0.2), 10px 10px 10px 2px rgba(0,0,0,0.19) !important;
33+
border: 1px var(--bs-secondary) solid !important;
34+
border-radius: var(--border-radius, 10px) !important;
35+
}
36+
37+
.cm-header span, .cm-list-title {
38+
color: #343a40 !important;
39+
}
40+
41+
.slider.round.active {
42+
background-color: var(--lt-vsb-tuo-cyan) !important;
43+
}
44+
45+
.cn-body a {
46+
color: var(--lt-vsb-tuo-cyan) !important;
47+
}
48+
49+
button.cm-btn {
50+
color: #fff !important;
51+
background-color: var(--lt-vsb-tuo-cyan) !important;
52+
}
53+
54+
button.cm-btn:hover {
55+
box-shadow: 0 0 0 0.2rem var(--lt-vsb-tuo-cyan-lighter) !important;
56+
}
57+
}
58+
2959
.btn-outline-secondary, .btn-outline-primary {
3060
border-color: var(--lt-clarin-purple) !important;
3161
color: var(--lt-clarin-purple) !important;

‎src/themes/custom/app/footer/footer.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,10 +55,10 @@ <h5 class="text-uppercase">Footer Content</h5>
5555
<!-- Copyright -->
5656
<div class="container">
5757
<div class="row">
58-
<div class="col-12 d-flex justify-content-end">
58+
<div class="col-12 d-flex justify-content-center">
5959
<!-- col-8.5 -->
6060
<div class="col-1" style="width: 70.8333%; flex: 0 0 70.8333%;max-width: 70.8333%;">
61-
<div class="bottom-footer p-1 d-flex justify-content-between align-items-center text-white">
61+
<div class="bottom-footer p-1 d-flex justify-content-center gapx-5 align-items-center text-white">
6262
<div class="content-container">
6363
<p class="m-0">
6464
<a class="text-white"

‎src/themes/custom/app/header/header.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<nav role="navigation" [attr.aria-label]="'nav.user.description' | translate" class="container navbar navbar-expand-md px-0">
33
<div class="d-flex flex-grow-1">
44
<a class="navbar-brand m-2" routerLink="/home">
5-
<img src="assets/images/vsb-cs-logo-w.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
5+
<img [src]="logoSrc" [attr.alt]="'menu.header.image.logo' | translate"/>
66
</a>
77
</div>
88
<div class="navbar-buttons d-flex flex-grow-1 ml-auto justify-content-end align-items-center gapx-1">

‎src/themes/custom/app/navbar/navbar.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ nav.navbar {
3737
@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
3838
> .navbar-inner-container {
3939
padding: 0 var(--bs-spacer);
40+
background-color: var(--lt-vsb-tuo-cyan);
4041
a.navbar-brand {
4142
display: none;
4243
}
@@ -46,7 +47,6 @@ nav.navbar {
4647
}
4748
padding: 0;
4849
}
49-
height: 80px;
5050
}
5151

5252
a.navbar-brand img {

0 commit comments

Comments
 (0)