From 5c7de2cf5eb2436e6a87a0d22b86224e4965dd32 Mon Sep 17 00:00:00 2001 From: Boris Voropaev Date: Tue, 28 Nov 2023 17:02:13 +0300 Subject: [PATCH] custom jumbotron --- angular.json | 10 +- .../layout/jumbotron/jumbotron.component.html | 15 +++ .../layout/jumbotron/jumbotron.component.scss | 0 .../layout/jumbotron/jumbotron.component.ts | 93 +++++++++++++++++++ src/vniigaz-v2/css/_grid.scss | 2 + src/vniigaz-v2/css/_main-menu.scss | 24 +++-- src/vniigaz-v2/vniigaz-v2.env.dev.ts | 2 +- 7 files changed, 134 insertions(+), 12 deletions(-) create mode 100644 src/vniigaz-v2/component/layout/jumbotron/jumbotron.component.html create mode 100644 src/vniigaz-v2/component/layout/jumbotron/jumbotron.component.scss create mode 100644 src/vniigaz-v2/component/layout/jumbotron/jumbotron.component.ts diff --git a/angular.json b/angular.json index 36e4a17..d0c6320 100644 --- a/angular.json +++ b/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": "**/*", diff --git a/src/vniigaz-v2/component/layout/jumbotron/jumbotron.component.html b/src/vniigaz-v2/component/layout/jumbotron/jumbotron.component.html new file mode 100644 index 0000000..5ba35c1 --- /dev/null +++ b/src/vniigaz-v2/component/layout/jumbotron/jumbotron.component.html @@ -0,0 +1,15 @@ +
+
+ +

{{name}}

+
+
+
+
+
+
+ Режим редактирования + +
+
+
\ No newline at end of file diff --git a/src/vniigaz-v2/component/layout/jumbotron/jumbotron.component.scss b/src/vniigaz-v2/component/layout/jumbotron/jumbotron.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/vniigaz-v2/component/layout/jumbotron/jumbotron.component.ts b/src/vniigaz-v2/component/layout/jumbotron/jumbotron.component.ts new file mode 100644 index 0000000..2729ea7 --- /dev/null +++ b/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; + } + +} diff --git a/src/vniigaz-v2/css/_grid.scss b/src/vniigaz-v2/css/_grid.scss index 1b6612a..a0f6a5b 100644 --- a/src/vniigaz-v2/css/_grid.scss +++ b/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; diff --git a/src/vniigaz-v2/css/_main-menu.scss b/src/vniigaz-v2/css/_main-menu.scss index c8929af..e6fac2b 100644 --- a/src/vniigaz-v2/css/_main-menu.scss +++ b/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); } diff --git a/src/vniigaz-v2/vniigaz-v2.env.dev.ts b/src/vniigaz-v2/vniigaz-v2.env.dev.ts index c304f3b..55dbc91 100644 --- a/src/vniigaz-v2/vniigaz-v2.env.dev.ts +++ b/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' };