main page css

master
Boris Voropaev 2023-12-19 17:24:39 +03:00
parent d91923f76e
commit dff0f3c433
8 changed files with 78 additions and 9 deletions

View File

@ -1,9 +1,11 @@
<div class="header layout-corral">
<div class="header layout-corral" [class.rootpage]="isRootPage">
<a class="burger" (click)="openMobileMenu()">
<ico ico="burger_blue_40dp" [size]="36"></ico>
<ico *ngIf="!isRootPage" ico="burger_blue_40dp" [size]="36"></ico>
<ico *ngIf="isRootPage" ico="burger_white_40dp" [size]="36"></ico>
</a>
<a [routerLink]="rootPage?.link" class="logo">
<img src="assets\images\logo_vniigaz_1163x816.svg" alt="site logo">
<img *ngIf="!isRootPage" src="assets/images/logo_vniigaz_1163x816.svg" alt="ВНИИГАЗ">
<img *ngIf="isRootPage" src="assets/images/logo_vniigaz_wt_280x110.svg" alt="ВНИИГАЗ">
</a>
<pages-menu class="lvl-0"></pages-menu>

View File

@ -24,6 +24,10 @@ export class HeaderComponent {
return this.pagesService.rootPage;
}
get isRootPage(){
return !this.pagesService.currentPage?.parents.data.length && this.pagesService.currentPage
}
openMobileMenu(){
this.router.navigate([{outlets: {slider: 'pages-menu'}}], {skipLocationChange: true}).then();
}

View File

@ -1,7 +1,11 @@
<div class="jumbotron-bg space" [ngStyle]="bgStyle">
<div class="jumbotron-bg space" [ngStyle]="bgStyle" [class.rootpage-jumbotron]="isRootPage">
<div class="jumbotron-content layout-corral">
<header-user-bar></header-user-bar>
<h1 [ngStyle]="h1Style">{{name}}</h1>
<div class="jumbotron-content-center">
<h1 [ngStyle]="h1Style">{{name}}</h1>
<h4 *ngIf="isRootPage"> Учреждено в 1998 </h4>
</div>
</div>
</div>
<div class="space jumbotron-edit-field" *ngIf="editable">

View File

@ -100,4 +100,8 @@ export class JumbotronComponent {
this.pagesService.editMode = !this.pagesService.editMode;
}
get isRootPage(){
return !this.pagesService.currentPage?.parents.data.length && this.pagesService.currentPage
}
}

View File

@ -40,10 +40,29 @@ jumbotron{
right: 40px;
position: absolute;
}
h1{
margin: 0;
padding: $ps 0;
max-width: 100%;
.jumbotron-content-center{
align-self: center;
display: flex;
flex-direction: column;
align-items: center;
h1{
margin: 0;
padding: $ps 0;
max-width: 100%;
}
h4{
text-decoration: underline;
font-size: 24px;
font-weight: 400;
color: #fff;
font-family: PT Sans;
}
}
}
&.rootpage-jumbotron{
header-user-bar{
top: 100px !important
}
}
}

View File

@ -327,3 +327,29 @@ right-content{
}
}
.rootpage{
position: absolute;
max-width: 100%;
width: 1360px;
z-index: 1;
pages-menu{
a{
color: #FFF;
}
.item.nav::after{
background-image: url('../images/ico/chevron_right_white_24.svg') !important;
}
pages-menu{
background-color: transparent !important;
}
}
.locale drop-down{
svg{
color: #FFF !important;
}
}
}

View File

@ -0,0 +1,5 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" id="ico">
<rect x="6" y="10" width="28" height="4" fill="#FFF"/>
<rect x="6" y="18" width="28" height="4" fill="#FFF"/>
<rect x="6" y="26" width="28" height="4" fill="#FFF"/>
</svg>

After

Width:  |  Height:  |  Size: 277 B

View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="ico">
<path id="chevron_right_24" d="M16.0001 12L10.0001 18L8.6001 16.6L13.2001 12L8.6001 7.4L10.0001 6L16.0001 12Z" fill="#FFF"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 246 B