custom jumbotron

angular.json

@@ -96,11 +96,19 @@
                 {
                   "replace": "src/app/_modules/layout/footer/footer.component.ts",
                   "with": "src/vniigaz-v2/component/layout/footer/footer.component.ts"
+                },
+                {
+                  "replace": "src/app/_modules/layout/jumbotron/jumbotron.component.ts",
+                  "with": "src/vniigaz-v2/component/layout/jumbotron/jumbotron.component.ts"
                 }
               ],
               "inlineStyleLanguage": "scss",
               "assets": [
-                {"glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/"},
+                {
+                  "glob": "**/*", 
+                  "input": "node_modules/tinymce", 
+                  "output": "/tinymce/"
+                },
                 "src/favicon.ico",
                 {
                   "glob": "**/*",

src/vniigaz-v2/component/layout/jumbotron/jumbotron.component.html

@@ -0,0 +1,15 @@
+<div class="jumbotron-bg space" [ngStyle]="bgStyle">
+    <div class="jumbotron-content layout-corral">
+        <header-user-bar></header-user-bar>
+        <h1  [ngStyle]="h1Style">{{name}}</h1>
+        <div></div>
+    </div>
+</div>
+<div class="space jumbotron-edit-field" *ngIf="editable">
+    <div class="layout-corral jumbotron-edit-field-row">
+        <div class="switch-host" (click)="toggleEditMode()">
+            Режим редактирования
+            <switch [val]="editMode"></switch>       
+        </div>         
+    </div>
+</div>

src/vniigaz-v2/component/layout/jumbotron/jumbotron.component.ts

@@ -0,0 +1,93 @@
+import { Component } from '@angular/core';
+import { PagesService } from '@app/_services/pages.service';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'jumbotron',
+  templateUrl: './jumbotron.component.html',
+  styleUrls: ['./jumbotron.component.scss']
+})
+export class JumbotronComponent {
+  private subscription:Subscription 
+  public currentPage:any;
+  public contentPage:any;
+
+  constructor(
+    private pagesService: PagesService,
+  ){}
+
+  ngOnInit(){
+    this.subscription = this.pagesService.currentPageSubject.subscribe(
+      resp=> {
+        this.currentPage = resp;
+        if (this.currentPage) {
+          if(this.currentPage.picture){
+            this.contentPage = this.currentPage
+          }else{
+            let include = [
+              'parents.picture',
+            ];
+            let url = this.currentPage.link;
+            if (url) this.pagesService.find(url, {include: include.join(',')}).subscribe(res => {
+              this.contentPage = res.data.parents.data.findLast(page=>page.picture)
+            }, error => {
+              console.log(error)
+            });
+          }
+        }else{this.contentPage = null;}
+      }
+    )
+  }
+  ngOnDestoy(){
+    this.subscription.unsubscribe()
+  }
+
+
+
+
+
+
+  get name(){
+    return this.contentPage?.h1 || this.contentPage?.name
+  }
+
+  get bgStyle(){
+    let height = 50;
+    let pictURL:string;
+    if (this.contentPage){
+      height = 150;
+      pictURL = this.contentPage?.picture?.data.links.open;
+    }
+    
+    return {
+      'background-image' : `url(${pictURL})`||'none',
+      'height': (this.mainPage?700:pictURL?400:height) + 'px'
+    }
+  }
+
+  get h1Style(){
+    return { 
+      color: this.contentPage?.picture?'var(--white)':'var(--second-act)',
+      'align-self': this.mainPage?'center':'left',
+      'text-align': this.mainPage?'center':'left',
+      'width': this.mainPage?'900px':'100%'
+    }
+  }
+
+  get mainPage(){
+    return this.currentPage?.parents?.data.length === 0;
+  }
+
+  get editable(){
+    return this.currentPage?.permissions?.edit || this.currentPage?.permissions?.anything;
+  }
+
+  get editMode(){
+    return this.pagesService.editMode;
+  }
+
+  toggleEditMode(){
+    this.pagesService.editMode = !this.pagesService.editMode;
+  }
+
+}

src/vniigaz-v2/css/_grid.scss

@@ -44,6 +44,8 @@ jumbotron{
   }
   .jumbotron-edit-field{
     height: 60px;
+    background-color: var(--white);
+    border-bottom: 1px solid var(--second-dis);
     .jumbotron-edit-field-row{
       div{
         display: flex;

src/vniigaz-v2/css/_main-menu.scss

@@ -163,11 +163,13 @@ right-content{
         }
         &.lvl-1{display: none;}
         &.lvl-2{
-          font-family: PT Sans Narrow;
-          font-size: 24px;
-          font-weight: 700;
-          line-height: 32px;
-          letter-spacing: 0.24px;
+          a{
+            font-family: "PT Sans Narrow";
+            font-size: 24px;
+            font-weight: 700;
+            line-height: 32px;
+            letter-spacing: 0.24px;
+          }
           &.current>a,&.parent>a{
             color: var(--prime);
           }
@@ -193,11 +195,13 @@ right-content{
           color: var(--second);
         }
         &.lvl-1{
-          font-family: PT Sans Narrow;
-          font-size: 24px;
-          font-weight: 700;
-          line-height: 32px;
-          letter-spacing: 0.24px;
+          a{
+            font-family: "PT Sans Narrow";
+            font-size: 24px;
+            font-weight: 700;
+            line-height: 32px;
+            letter-spacing: 0.24px;
+          }
           &.current>a,&.parent>a{
             color: var(--prime);
           }

src/vniigaz-v2/vniigaz-v2.env.dev.ts

@@ -6,7 +6,7 @@ export const environment = {
   production: false,
   apiUrl: 'http://api.nircms.lc',
   clientId: 2,
-  clientSecret: 'z1QAYw4VxcRLXyspskb4LiA2dS9Lx1WAvEzxQPR1',
+  clientSecret: 'SoQdwJzNSVfFd9Bqa4wAEYxCTxzdvKd5PJZIlGqo',
   project: 'vniigaz-v2',
   defaultLocale: 'ru'
 };