jumbotron pages
Boris Voropaev
parent
fc551b234c
commit
3494ae62f5
|
|
@ -4,15 +4,9 @@
|
|||
<div class="wrapper" [class.this-root-page] = "isRootPage">
|
||||
<header class="space"></header>
|
||||
<jumbotron></jumbotron>
|
||||
<div class="space content-sapce">
|
||||
<div class="content-grid layout-corral">
|
||||
<left-content></left-content>
|
||||
<div class="main-content">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<right-content></right-content>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="space"></footer>
|
||||
</div>
|
||||
<fullscreen-gallery></fullscreen-gallery>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,18 @@
|
|||
<div class="jumbotron-bg space" [ngStyle]="bgStyle" [class.rootpage-jumbotron]="isRootPage">
|
||||
<div class="jumbotron-content layout-corral">
|
||||
<div class="jumbotron-bg space" [ngStyle]="bgStyle">
|
||||
<div class="jumbotron-content">
|
||||
|
||||
<div class="jumbotron-content-center">
|
||||
<h1 [ngStyle]="h1Style">{{name}}</h1>
|
||||
<!-- <h1 *ngIf="isRootPage" [ngStyle]="h1Style">
|
||||
Сертификация<br>
|
||||
продукции, работ и услуг</h1> -->
|
||||
<h4 *ngIf="since">
|
||||
<a href="https://vniigaz.gazprom.ru/" target="_blank">Учреждено в 1998</a>
|
||||
</h4>
|
||||
<div class="jumbotron-edit-field" *ngIf="editable" dir="ltr">
|
||||
<div class="jumbotron-edit-field-row">
|
||||
<div class="switch-host" (click)="toggleEditMode()">
|
||||
Режим редактирования
|
||||
<switch [val]="editMode"></switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="space jumbotron-edit-field" *ngIf="editable" dir="ltr">
|
||||
<div class="layout-corral jumbotron-edit-field-row">
|
||||
<div class="switch-host" (click)="toggleEditMode()">
|
||||
Режим редактирования
|
||||
<switch [val]="editMode"></switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jumbotron-content-center">
|
||||
<h1 *ngIf="!isRootPage">{{name}}</h1>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -41,49 +41,20 @@ export class JumbotronComponent {
|
|||
}
|
||||
|
||||
get name(){
|
||||
let name:string
|
||||
if(this.currentPage){
|
||||
name = this.currentPage?.h1 || this.currentPage?.name;
|
||||
let parents = this.currentPage?.parents?.data
|
||||
if(parents){
|
||||
if (parents[1]?.type.name=='nav-page'){
|
||||
if (parents[2]) name = parents[2].h1|| parents[2].name
|
||||
}else{
|
||||
if (parents[1]) name = parents[1].h1|| parents[1].name
|
||||
}
|
||||
}
|
||||
}
|
||||
return name
|
||||
return this.currentPage?.h1 || this.currentPage?.name
|
||||
}
|
||||
|
||||
get bgStyle(){
|
||||
let height = 70;
|
||||
let pictURL:string;
|
||||
if (this.pagePicture){
|
||||
height = 150;
|
||||
pictURL = this.pagePicture;
|
||||
}
|
||||
|
||||
return {
|
||||
'background-image' : `url(${pictURL})`||'none',
|
||||
'height': (this.mainPage?700:pictURL?400:height) + 'px'
|
||||
}
|
||||
}
|
||||
|
||||
get h1Style(){
|
||||
return {
|
||||
color: this.pagePicture?'var(--white)':'var(--second-act)',
|
||||
'align-self': this.mainPage?'center':'flex-start',
|
||||
'text-align': this.mainPage?'center':'left',
|
||||
'width': this.mainPage?'900px':null,
|
||||
'border-bottom':this.mainPage?null:'12px solid #2EB2E8'
|
||||
}
|
||||
}
|
||||
|
||||
get mainPage(){
|
||||
return this.currentPage?.parents?.data.length === 0;
|
||||
}
|
||||
|
||||
get editable(){
|
||||
return this.currentPage&&(this.authService.privileges?.admin|| this.authService.privileges?.editor);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -199,7 +199,7 @@ body {
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
color: var(--second-act);
|
||||
background-color: var(--light);
|
||||
background-color: var(--bg);
|
||||
font-size: 20px;
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
|
|
@ -216,33 +216,29 @@ body {
|
|||
}
|
||||
|
||||
p {
|
||||
color: var(--bk88);
|
||||
font-family: PT Sans;
|
||||
font-size: 20px;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 32px;
|
||||
margin: 0;
|
||||
line-height: 27px;
|
||||
}
|
||||
|
||||
h1{
|
||||
color: var(--white);
|
||||
font-family: PT Sans Narrow;
|
||||
font-size: 76px;
|
||||
font-family: PT Serif;
|
||||
font-size: 64px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 76px; /* 100% */
|
||||
letter-spacing: 0.76px;
|
||||
font-weight: 400;
|
||||
line-height: 125%; /* 80px */
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--second-act);
|
||||
font-family: PT Sans Narrow;
|
||||
font-size: 50px;
|
||||
color: var(--bk66);
|
||||
font-family: PT Serif;
|
||||
font-size: 40px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 60px; /* 120% */
|
||||
letter-spacing: 0.5px;
|
||||
margin:0;
|
||||
font-weight: 400;
|
||||
line-height: 125%; /* 50px */
|
||||
}
|
||||
h3 {
|
||||
color: var(--second-act);
|
||||
|
|
@ -348,23 +344,7 @@ span.link {
|
|||
100% {transform:scale(1); opacity:0.5;}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
h1{
|
||||
font-size: 50px;
|
||||
line-height: 60px;
|
||||
}
|
||||
h2{
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
}
|
||||
h3{
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
h4{
|
||||
color:var(--second);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 1330px) {
|
||||
|
|
|
|||
|
|
@ -11,83 +11,58 @@
|
|||
|
||||
jumbotron{
|
||||
.jumbotron-bg{
|
||||
height: 400px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
max-height: 150vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
background-size:contain;
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: var(--bg-dk);
|
||||
height: 480px;
|
||||
.jumbotron-content{
|
||||
height: 100%;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.user-bar{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
header-user-bar{
|
||||
top: $pl;
|
||||
right: 40px;
|
||||
position: absolute;
|
||||
}
|
||||
.jumbotron-content-center{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
h1{
|
||||
margin: 0;
|
||||
padding: $ps 0;
|
||||
max-width: 100%;
|
||||
background: linear-gradient(to top, var(--bg), transparent);
|
||||
.jumbotron-edit-field{
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
padding-inline: 24px;
|
||||
.jumbotron-edit-field-row{
|
||||
div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $pxs;
|
||||
}
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.jumbotron-edit-field{
|
||||
height: 60px;
|
||||
background-color: var(--white);
|
||||
border-bottom: 1px solid var(--second-dis);
|
||||
.jumbotron-edit-field-row{
|
||||
div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $pxs;
|
||||
}
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.jumbotron-content-center{
|
||||
text-align: center;
|
||||
h1{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.content-sapce{
|
||||
flex-grow: 1;
|
||||
.content-grid{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 40px 0 120px;
|
||||
|
||||
left-content{
|
||||
display: none;
|
||||
}
|
||||
|
||||
right-content{
|
||||
flex-shrink: 0;
|
||||
pages-menu.current{
|
||||
pages-menu-item>.item{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-content{
|
||||
max-width: 100%;
|
||||
width: $page-width;
|
||||
}
|
||||
|
||||
}
|
||||
.main-content{
|
||||
max-width: 100%;
|
||||
padding: 0px 32px 120px;
|
||||
}
|
||||
|
||||
.this-root-page{
|
||||
|
|
@ -184,8 +159,21 @@ pages-menu-item{
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px){
|
||||
jumbotron{
|
||||
.jumbotron-bg{
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 720px){
|
||||
jumbotron{
|
||||
.jumbotron-bg{
|
||||
height: 66vw;
|
||||
}
|
||||
}
|
||||
footer{
|
||||
padding: 16px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,6 +27,26 @@ page-sections{
|
|||
}
|
||||
}
|
||||
|
||||
.section, page-sections{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
>div{
|
||||
header-section, html-section, .swiper-box{
|
||||
display: block;
|
||||
width: 720px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
add-section, page-menu{
|
||||
display: block;
|
||||
width: 720px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
html-section {
|
||||
ul{
|
||||
padding: 0;
|
||||
|
|
@ -290,13 +310,6 @@ images-section{
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.swiper-box{
|
||||
width: 100% !important;
|
||||
height: 75vw !important;
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
|
||||
.fullscreen {
|
||||
|
|
|
|||
Loading…
Reference in New Issue