From 3494ae62f565dd7a6944be409a51ae0eb9d79284 Mon Sep 17 00:00:00 2001 From: Boris Voropaev Date: Mon, 15 Jan 2024 12:07:45 +0300 Subject: [PATCH] jumbotron pages --- .../component/layout/grid/grid.component.html | 6 - .../layout/jumbotron/jumbotron.component.html | 29 ++--- .../layout/jumbotron/jumbotron.component.ts | 31 +---- src/nir/css/_basics.scss | 48 +++----- src/nir/css/_grid.scss | 110 ++++++++---------- src/nir/css/_pages-section.scss | 27 +++-- 6 files changed, 96 insertions(+), 155 deletions(-) diff --git a/src/nir/component/layout/grid/grid.component.html b/src/nir/component/layout/grid/grid.component.html index 91ef665..905b0fd 100644 --- a/src/nir/component/layout/grid/grid.component.html +++ b/src/nir/component/layout/grid/grid.component.html @@ -4,15 +4,9 @@
-
-
-
- -
-
diff --git a/src/nir/component/layout/jumbotron/jumbotron.component.html b/src/nir/component/layout/jumbotron/jumbotron.component.html index ce0f69b..72d5757 100644 --- a/src/nir/component/layout/jumbotron/jumbotron.component.html +++ b/src/nir/component/layout/jumbotron/jumbotron.component.html @@ -1,23 +1,18 @@ -
-
+
+
-
-

{{name}}

- -

- Учреждено в 1998 -

+
+
+
+ Режим редактирования + +
+
-
-
-
- Режим редактирования - -
-
+
+

{{name}}

+ diff --git a/src/nir/component/layout/jumbotron/jumbotron.component.ts b/src/nir/component/layout/jumbotron/jumbotron.component.ts index 254feb0..2d54366 100644 --- a/src/nir/component/layout/jumbotron/jumbotron.component.ts +++ b/src/nir/component/layout/jumbotron/jumbotron.component.ts @@ -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); } diff --git a/src/nir/css/_basics.scss b/src/nir/css/_basics.scss index 5547ccd..e13966c 100644 --- a/src/nir/css/_basics.scss +++ b/src/nir/css/_basics.scss @@ -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) { diff --git a/src/nir/css/_grid.scss b/src/nir/css/_grid.scss index 2eb9625..0c66b10 100644 --- a/src/nir/css/_grid.scss +++ b/src/nir/css/_grid.scss @@ -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; } diff --git a/src/nir/css/_pages-section.scss b/src/nir/css/_pages-section.scss index 2cfb6de..a7019aa 100644 --- a/src/nir/css/_pages-section.scss +++ b/src/nir/css/_pages-section.scss @@ -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 {