diff --git a/src/app/_modules/layout/header/header.component.html b/src/app/_modules/layout/header/header.component.html index 85a87db..cd8e885 100644 --- a/src/app/_modules/layout/header/header.component.html +++ b/src/app/_modules/layout/header/header.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/_modules/layout/jumbotron/jumbotron.component.html b/src/app/_modules/layout/jumbotron/jumbotron.component.html new file mode 100644 index 0000000..2840be7 --- /dev/null +++ b/src/app/_modules/layout/jumbotron/jumbotron.component.html @@ -0,0 +1,13 @@ +
+
+ +

{{name}}

+
+
+
+
+
+ Режим редактирования + +
+
\ No newline at end of file diff --git a/src/app/_modules/layout/jumbotron/jumbotron.component.scss b/src/app/_modules/layout/jumbotron/jumbotron.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/_modules/layout/jumbotron/jumbotron.component.ts b/src/app/_modules/layout/jumbotron/jumbotron.component.ts new file mode 100644 index 0000000..e85ab77 --- /dev/null +++ b/src/app/_modules/layout/jumbotron/jumbotron.component.ts @@ -0,0 +1,40 @@ +import { Component } from '@angular/core'; +import { PagesService } from '@app/_services/pages.service'; + +@Component({ + selector: 'jumbotron', + templateUrl: './jumbotron.component.html', + styleUrls: ['./jumbotron.component.scss'] +}) +export class JumbotronComponent { + + constructor( + private pagesService: PagesService, + ){} + + get currentPage(){ + return this.pagesService.currentPage + } + + get name(){ + return this.currentPage?.h1 + } + + get back(){ + let pictURL = this.currentPage?.picture?.data.links.open; + return {'background-image' : `url(${pictURL})`||'none'} + } + + get editable(){ + return this.currentPage?.permissions?.edit || this.currentPage?.permissions?.anything; + } + + get editMode(){ + return this.pagesService.editMode.value + } + + toggleEditMode(){ + this.pagesService.editMode.next(!this.editMode) + } + +} diff --git a/src/app/_modules/layout/layout.module.ts b/src/app/_modules/layout/layout.module.ts index 6dd8ccc..f347a30 100644 --- a/src/app/_modules/layout/layout.module.ts +++ b/src/app/_modules/layout/layout.module.ts @@ -12,6 +12,7 @@ import {SettingSiteComponent} from "@app/_modules/layout/setting-site/setting-si import {HeaderUserBarComponent} from "@app/_modules/layout/header/user-bar/header-user-bar.component"; import { LeftContentComponent } from './left-content/left-content.component'; import { RightContentComponent } from './right-content/right-content.component'; +import { JumbotronComponent } from './jumbotron/jumbotron.component'; @NgModule({ imports: [ @@ -29,7 +30,8 @@ import { RightContentComponent } from './right-content/right-content.component'; SettingSiteComponent, HeaderUserBarComponent, LeftContentComponent, - RightContentComponent + RightContentComponent, + JumbotronComponent ], exports: [ GridComponent, diff --git a/src/app/_modules/layout/left-content/left-content.component.html b/src/app/_modules/layout/left-content/left-content.component.html index 6c8d3b5..e69de29 100644 --- a/src/app/_modules/layout/left-content/left-content.component.html +++ b/src/app/_modules/layout/left-content/left-content.component.html @@ -1,20 +0,0 @@ -
-
- -

- {{pageName}} -

-
-
- - -
-
-
-
-
-
- Режим редактирования - -
-
diff --git a/src/app/_modules/pages/page/page.component.ts b/src/app/_modules/pages/page/page.component.ts index 29ee498..d24be52 100644 --- a/src/app/_modules/pages/page/page.component.ts +++ b/src/app/_modules/pages/page/page.component.ts @@ -70,7 +70,8 @@ export class PageComponent { 'sections.objectables.groups.fields.value', 'sidebars.groups.fields.value', 'sidebars.type', - 'permissions' + 'permissions', + 'picture' ]; this.pagesService.find(this.url, {include: include.join(',')}).subscribe(res => { this.page = res?.data; diff --git a/src/assets/css/_basics.scss b/src/assets/css/_basics.scss index 0aa3647..65ac856 100644 --- a/src/assets/css/_basics.scss +++ b/src/assets/css/_basics.scss @@ -2,10 +2,6 @@ - - - - * { font-family: "PT Sans"; } @@ -34,6 +30,66 @@ align-items: center; } +$layout-width: 1240px; +$page-width: 900px; + +$pxl:40px; +$pl:32px; +$p:24px; +$ps:16px; +$pxs:8px; +$pxxs:4px; + +.space{ + display: flex; + justify-content: center; + .layout-corral{ + max-width: calc($layout-width + 2 * $pxl); + padding: 0 $pxl; + flex-grow: 1; + } + .page-corral{ + max-width: calc($page-width + 2 * $pxl); + padding: 0 $pxl; + flex-grow: 1; + } +} + +jumbotron{ + .jumbotron-bg{ + height: 400px; + background-size: cover; + background-position: center; + .jumbotron-content{ + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + header-user-bar{ + align-self: flex-end; + margin-top: $pl; + } + h1{ + margin-top: calc( 0px - $pl ); + max-width: $page-width; + align-self: center; + width: 100%; + } + } + } + .jumbotron-edit-field{ + height: 60px; + .jumbotron-edit-field-row{ + max-width: calc($page-width + 2 * $pxl); + display: flex; + align-items: center; + justify-content: flex-end; + gap: $pxs; + } + } +} + + .menu, .page-header { display: flex; .block { @@ -219,67 +275,7 @@ body { justify-content: center; gap: 40px; left-content{ - flex-basis: 100%; - background-color: var(--light); - .background{ - width: 100%; - height: 400px; - background-size: cover; - background-position: center; - display: flex; - align-items: center; - flex-direction: column; - border-bottom: 1px solid var(--second-dis); - border-top: 1px solid var(--second-dis); - .left-content{ - width: 100%; - height: 100%; - max-width: 1280px; - margin: 0 40px; - position: relative; - display: flex; - flex-direction: row; - align-items: center; - .h1-jumbotron{ - display: inline-block; - border-bottom: 12px solid var(--blue-0); - font-family: PT Sans Narrow; - font-size: 76px; - font-weight: 700; - line-height:100%; - letter-spacing: 0.76px; - color: white; - } - header-user-bar{ - position: absolute; - right: 0; - top: 32px; - } - .menu{ - position: absolute; - left: 0px; - top: 18px; - } - } - } - .edit-field{ - height: 58px; - width: 100%; - background-color: var(--white); - display: flex; - justify-content: flex-end; - padding: 0 calc((100vw - 1330px)/2); - .edit-field-row{ - max-width: 1280px; - margin: 0 40px; - display: flex; - justify-content: right; - align-items: center; - font-size: 20px; - gap: 8px; - } - - } + } .main-content{ flex-basis: 840px; @@ -300,6 +296,15 @@ body { margin: 0 auto; } +h1{ + color: var(--white); + font-family: PT Sans Narrow; + font-size: 76px; + font-style: normal; + font-weight: 700; + line-height: 76px; /* 100% */ + letter-spacing: 0.76px; +} h2 { color: var(--second-act); @@ -472,6 +477,7 @@ html-section ul{ @media screen and (max-width: 1330px) { + .limiter { padding: 0 24px; } diff --git a/src/assets/css/_main-menu.scss b/src/assets/css/_main-menu.scss index fc09451..69b97ba 100644 --- a/src/assets/css/_main-menu.scss +++ b/src/assets/css/_main-menu.scss @@ -1,12 +1,9 @@ header{ - display: flex; - align-items: center; - justify-content: center; + background-color: var(--white); .header{ - width: 1280px; height: 80px; - margin: 12px 40px; + margin: 12px 0; display: flex; align-items: center; justify-content: space-between;