From d36ed2f41190c93abf85b202723fba3044a119c3 Mon Sep 17 00:00:00 2001 From: Boris Voropaev Date: Tue, 21 Nov 2023 12:50:30 +0300 Subject: [PATCH 1/6] pages-section css --- .../sections/add/add-section.component.scss | 17 ------- .../sections/menu/page-menu.component.html | 8 ++-- .../items/cards-section-items.component.scss | 11 ----- .../item/cards-section-item.component.scss | 6 +-- src/assets/css/_basics.scss | 44 +++---------------- src/assets/css/_pages-section.scss | 39 ++++++++++++++++ src/styles.scss | 3 +- 7 files changed, 52 insertions(+), 76 deletions(-) create mode 100644 src/assets/css/_pages-section.scss diff --git a/src/app/_modules/pages/sections/add/add-section.component.scss b/src/app/_modules/pages/sections/add/add-section.component.scss index 4cc3aa6..e69de29 100644 --- a/src/app/_modules/pages/sections/add/add-section.component.scss +++ b/src/app/_modules/pages/sections/add/add-section.component.scss @@ -1,17 +0,0 @@ -.add{ - position: relative; -.toggle{ - position:inherit; - display: flex; - gap:8px; - align-items: center; - drop-down{ - margin-top: 4px; - } - &.active{ - a{ - color: var(--prime-act); - } - } -} -} \ No newline at end of file diff --git a/src/app/_modules/pages/sections/menu/page-menu.component.html b/src/app/_modules/pages/sections/menu/page-menu.component.html index e25d580..322320b 100644 --- a/src/app/_modules/pages/sections/menu/page-menu.component.html +++ b/src/app/_modules/pages/sections/menu/page-menu.component.html @@ -1,8 +1,8 @@
- - - - + + + +
diff --git a/src/app/_modules/pages/sections/types/basic/cards/items/cards-section-items.component.scss b/src/app/_modules/pages/sections/types/basic/cards/items/cards-section-items.component.scss index fb9d97b..e69de29 100644 --- a/src/app/_modules/pages/sections/types/basic/cards/items/cards-section-items.component.scss +++ b/src/app/_modules/pages/sections/types/basic/cards/items/cards-section-items.component.scss @@ -1,11 +0,0 @@ -.items { - display: flex; - flex-direction: row; - align-items: stretch; - gap: 24px; - flex-wrap: wrap; - - cards-section-item { - width: 240px - } -} diff --git a/src/app/_modules/pages/sections/types/basic/cards/items/item/cards-section-item.component.scss b/src/app/_modules/pages/sections/types/basic/cards/items/item/cards-section-item.component.scss index 23b2875..8b13789 100644 --- a/src/app/_modules/pages/sections/types/basic/cards/items/item/cards-section-item.component.scss +++ b/src/app/_modules/pages/sections/types/basic/cards/items/item/cards-section-item.component.scss @@ -1,5 +1 @@ -.card { - height: 100%; - padding: 12px; - border: #dedede solid 1px; -} + diff --git a/src/assets/css/_basics.scss b/src/assets/css/_basics.scss index 8ff1b26..d7a1904 100644 --- a/src/assets/css/_basics.scss +++ b/src/assets/css/_basics.scss @@ -43,49 +43,17 @@ $pxxs:4px; - - - - - - - - - - - - - - - -.menu, .page-header { +.menu { display: flex; .block { background: #fff; border: 1px solid var(--second-dis); - border-radius: 12px; - padding: 12px 24px; + border-radius: $pxs; + padding: $pxs $ps; display: flex; - margin-bottom: 16px; - column-gap: 20px; - button { - background-position: center; - background-repeat: no-repeat; - padding: 0; - background-color: #ffffff; - border: none; - border-radius: 0; - &.up, &.down, &.edit, &.publish, &.unpublish, &.delete { - width: 24px; - height: 24px; - } - &.up {background-image: url("~src/assets/images/icons/arrow_upward_24dp.svg");} - &.down {background-image: url("~src/assets/images/icons/arrow_downward_24dp.svg");} - &.edit {background-image: url("~src/assets/images/icons/edit_24dp.svg");} - &.publish {background-image: url("~src/assets/images/icons/visibility_on_24dp.svg");} - &.unpublish {background-image: url("~src/assets/images/icons/visibility_off_24dp.svg");} - &.delete {background-image: url("~src/assets/images/icons/trash_24dp.svg");} - } + margin-bottom: $ps; + margin-top: $ps; + column-gap: $ps; } } diff --git a/src/assets/css/_pages-section.scss b/src/assets/css/_pages-section.scss new file mode 100644 index 0000000..90eada3 --- /dev/null +++ b/src/assets/css/_pages-section.scss @@ -0,0 +1,39 @@ +add-section{ + .add{ + position: relative; + .toggle{ + position:inherit; + display: flex; + gap:8px; + align-items: center; + drop-down{ + margin-top: 4px; + } + &.active{ + a{ + color: var(--prime-act); + } + } + } + } +} + + +.cards-section-items{ + .items { + display: flex; + flex-direction: row; + align-items: stretch; + gap: 24px; + flex-wrap: wrap; + + cards-section-item { + width: 240px; + .card { + height: 100%; + padding: 12px; + border: #dedede solid 1px; + } + } + } +} \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index 19e9526..57dc748 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -11,4 +11,5 @@ @import 'registry'; @import 'slider'; @import 'tables'; -@import 'tabs.scss'; \ No newline at end of file +@import 'tabs.scss'; +@import 'pages-section'; \ No newline at end of file From d699ca3f2871d3fbdc38564fc56d22b3aad49eda Mon Sep 17 00:00:00 2001 From: Boris Voropaev Date: Tue, 21 Nov 2023 15:58:10 +0300 Subject: [PATCH 2/6] root menu --- .../_modules/layout/header/header.component.ts | 5 +++++ .../left-content/left-content.component.ts | 16 ---------------- .../pages/menu/item/pages-menu-item.component.ts | 4 ++-- .../_modules/pages/menu/pages-menu.component.ts | 2 ++ .../basic/images/images-section.component.scss | 2 +- .../_modules/widjet/locale/locale.component.ts | 3 ++- src/assets/css/_basics.scss | 2 +- src/assets/css/_pages-section.scss | 8 +++++++- 8 files changed, 20 insertions(+), 22 deletions(-) diff --git a/src/app/_modules/layout/header/header.component.ts b/src/app/_modules/layout/header/header.component.ts index 2b713e1..b3e378f 100644 --- a/src/app/_modules/layout/header/header.component.ts +++ b/src/app/_modules/layout/header/header.component.ts @@ -14,6 +14,11 @@ export class HeaderComponent { public pagesService: PagesService ) { } + // ngOnInit(){ + // this.pagesService.root().subscribe( + // resp=> this.pagesService.rootPage = resp + // ) + // } get rootPage() { return this.pagesService.rootPage; diff --git a/src/app/_modules/layout/left-content/left-content.component.ts b/src/app/_modules/layout/left-content/left-content.component.ts index 54b7b27..d338c95 100644 --- a/src/app/_modules/layout/left-content/left-content.component.ts +++ b/src/app/_modules/layout/left-content/left-content.component.ts @@ -1,6 +1,4 @@ import {Component} from '@angular/core'; -import {Router} from "@angular/router"; -import {PagesService} from "@app/_services/pages.service"; @Component({ selector: 'left-content', @@ -9,20 +7,6 @@ import {PagesService} from "@app/_services/pages.service"; }) export class LeftContentComponent { - constructor( - private router: Router, - public pagesService: PagesService - ) { - } - - get rootPage() { - return this.pagesService.rootPage; - } - - openMobileMenu(){ - this.router.navigate([{outlets: {slider: 'pages-menu'}}], {skipLocationChange: true}).then(); - } - } diff --git a/src/app/_modules/pages/menu/item/pages-menu-item.component.ts b/src/app/_modules/pages/menu/item/pages-menu-item.component.ts index f980d17..aa9c02f 100644 --- a/src/app/_modules/pages/menu/item/pages-menu-item.component.ts +++ b/src/app/_modules/pages/menu/item/pages-menu-item.component.ts @@ -28,7 +28,7 @@ export class PagesMenuItemComponent { } get current(){ - return this.item.link == this.pagesService.currentPage.link + return this.item.link == this.pagesService.currentPage?.link } get selected(){ @@ -36,7 +36,7 @@ export class PagesMenuItemComponent { } get parent(){ - return !this.current && this.pagesService.currentPage.link.startsWith(this.item.link) + return !this.current && this.pagesService.currentPage?.link.startsWith(this.item.link) } get nav(){ diff --git a/src/app/_modules/pages/menu/pages-menu.component.ts b/src/app/_modules/pages/menu/pages-menu.component.ts index f96d1cd..639abd5 100644 --- a/src/app/_modules/pages/menu/pages-menu.component.ts +++ b/src/app/_modules/pages/menu/pages-menu.component.ts @@ -27,6 +27,7 @@ export class PagesMenuComponent implements OnInit { this.pagesService.rootPageSubject ]).subscribe( resp=>{ + console.log(resp) let [currentPage, rootPage] = resp if(currentPage){ let menuTree = currentPage.parents.data.reduceRight( @@ -39,6 +40,7 @@ export class PagesMenuComponent implements OnInit { }, currentPage); this.items = menuTree.children.data; }else{ + console.log(rootPage) this.items = rootPage?.data[0].children.data } } diff --git a/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss b/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss index 14d628e..c1903cf 100644 --- a/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss +++ b/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss @@ -71,7 +71,7 @@ } .carousel { - + width: 100%; display: flex; align-items: center; justify-content:center; diff --git a/src/app/_modules/widjet/locale/locale.component.ts b/src/app/_modules/widjet/locale/locale.component.ts index 3057c8c..b9ec9b1 100644 --- a/src/app/_modules/widjet/locale/locale.component.ts +++ b/src/app/_modules/widjet/locale/locale.component.ts @@ -17,8 +17,9 @@ export class LocaleComponent { ){} ngOnInit() { - this.pagesService.root().subscribe(res => { + this.pagesService.root({include:'children'}).subscribe(res => { this.locales = res.data; + this.pagesService.rootPage = res }); } diff --git a/src/assets/css/_basics.scss b/src/assets/css/_basics.scss index d7a1904..f16489e 100644 --- a/src/assets/css/_basics.scss +++ b/src/assets/css/_basics.scss @@ -19,7 +19,7 @@ // } .toggle-hide{ - visibility: collapse; + display: none; } .inline{ diff --git a/src/assets/css/_pages-section.scss b/src/assets/css/_pages-section.scss index 90eada3..d54b882 100644 --- a/src/assets/css/_pages-section.scss +++ b/src/assets/css/_pages-section.scss @@ -6,20 +6,26 @@ add-section{ display: flex; gap:8px; align-items: center; + padding-bottom: 8px; drop-down{ margin-top: 4px; } + &.active{ a{ color: var(--prime-act); } } } + .dropdown{ + left:48px; + top:32px; + } } } -.cards-section-items{ +cards-section-items{ .items { display: flex; flex-direction: row; From ec84a767967adf8af6bc7ef732faf5babddfb54c Mon Sep 17 00:00:00 2001 From: Boris Voropaev Date: Tue, 21 Nov 2023 17:31:56 +0300 Subject: [PATCH 3/6] root Pages --- .../_modules/pages/menu/pages-menu.component.ts | 2 -- .../basic/images/images-section.component.ts | 1 - .../_modules/widjet/locale/locale.component.ts | 17 +++++++++++++---- src/app/_services/pages.service.ts | 2 +- src/app/app.component.ts | 8 ++++++++ 5 files changed, 22 insertions(+), 8 deletions(-) diff --git a/src/app/_modules/pages/menu/pages-menu.component.ts b/src/app/_modules/pages/menu/pages-menu.component.ts index 639abd5..f96d1cd 100644 --- a/src/app/_modules/pages/menu/pages-menu.component.ts +++ b/src/app/_modules/pages/menu/pages-menu.component.ts @@ -27,7 +27,6 @@ export class PagesMenuComponent implements OnInit { this.pagesService.rootPageSubject ]).subscribe( resp=>{ - console.log(resp) let [currentPage, rootPage] = resp if(currentPage){ let menuTree = currentPage.parents.data.reduceRight( @@ -40,7 +39,6 @@ export class PagesMenuComponent implements OnInit { }, currentPage); this.items = menuTree.children.data; }else{ - console.log(rootPage) this.items = rootPage?.data[0].children.data } } diff --git a/src/app/_modules/pages/sections/types/basic/images/images-section.component.ts b/src/app/_modules/pages/sections/types/basic/images/images-section.component.ts index 30bbb32..cb07c34 100644 --- a/src/app/_modules/pages/sections/types/basic/images/images-section.component.ts +++ b/src/app/_modules/pages/sections/types/basic/images/images-section.component.ts @@ -47,7 +47,6 @@ export class ImagesSectionComponent { return type.name; } get imageClass(){ - console.log(this.imageType) return { small : this.imageType=='tiles', large : this.imageType=='full-width', diff --git a/src/app/_modules/widjet/locale/locale.component.ts b/src/app/_modules/widjet/locale/locale.component.ts index b9ec9b1..1d98ece 100644 --- a/src/app/_modules/widjet/locale/locale.component.ts +++ b/src/app/_modules/widjet/locale/locale.component.ts @@ -1,6 +1,7 @@ import { Component } from '@angular/core'; import {PagesService} from "@app/_services/pages.service"; import { environment } from '@environments/environment'; +import {Subscription} from "rxjs"; @Component({ selector: 'locale', @@ -11,16 +12,24 @@ export class LocaleComponent { public locales = []; public ddMenu:boolean; + private rootSubscription: Subscription constructor( public pagesService: PagesService ){} ngOnInit() { - this.pagesService.root({include:'children'}).subscribe(res => { - this.locales = res.data; - this.pagesService.rootPage = res - }); + this.pagesService.rootPageSubject.subscribe( + + res=>{ + console.log(res) + this.locales = res?.data + } + ) + } + + ngOnDestroy() { + this.rootSubscription.unsubscribe() } get rootPage() { diff --git a/src/app/_services/pages.service.ts b/src/app/_services/pages.service.ts index 9a6293e..415825b 100644 --- a/src/app/_services/pages.service.ts +++ b/src/app/_services/pages.service.ts @@ -22,7 +22,7 @@ export class PagesService { } set currentPage(val: any) { this.currentPageSubject.next(val); - this.rootPage = val?.parents?.data[0] || val; + // this.rootPage = val?.parents?.data[0] || val; this.setMetaFromPage(val); } get rootPage() { diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 7908d3d..3f91a51 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -10,6 +10,7 @@ import {Subscription} from "rxjs"; styleUrls: ['app.component.scss']}) export class AppComponent { public subscription: Subscription; + private rootSubscription: Subscription constructor(private authService: AuthenticationService, private pagesService: PagesService, private titleService: Title, private metaService: Meta) { authService.checkUser(); @@ -18,8 +19,15 @@ export class AppComponent { }); } + ngOnInit() { + this.rootSubscription = this.pagesService.root({include:'children'}).subscribe(res => { + this.pagesService.rootPage = res + }); + } + ngOnDestroy() { this.subscription?.unsubscribe(); + this.rootSubscription.unsubscribe() } applyMetaData(data: any) { From b5e999d7d96826608960dda5a8ac093fb17e312d Mon Sep 17 00:00:00 2001 From: Boris Voropaev Date: Wed, 22 Nov 2023 09:51:21 +0300 Subject: [PATCH 4/6] logo link --- .../_modules/layout/header/header.component.ts | 5 ++--- .../_modules/pages/menu/pages-menu.component.ts | 6 +++--- .../menu/slider-menu/slider-menu.component.html | 2 +- .../menu/slider-menu/slider-menu.component.ts | 4 ++-- .../_modules/widjet/locale/locale.component.ts | 11 ++++++++--- src/app/_services/pages.service.ts | 15 ++++++++------- src/app/app.component.ts | 3 ++- 7 files changed, 26 insertions(+), 20 deletions(-) diff --git a/src/app/_modules/layout/header/header.component.ts b/src/app/_modules/layout/header/header.component.ts index b3e378f..700de46 100644 --- a/src/app/_modules/layout/header/header.component.ts +++ b/src/app/_modules/layout/header/header.component.ts @@ -16,7 +16,7 @@ export class HeaderComponent { } // ngOnInit(){ // this.pagesService.root().subscribe( - // resp=> this.pagesService.rootPage = resp + // resp=> this.pagesService.rootPages = resp // ) // } @@ -27,5 +27,4 @@ export class HeaderComponent { openMobileMenu(){ this.router.navigate([{outlets: {slider: 'pages-menu'}}], {skipLocationChange: true}).then(); } - -} +} \ No newline at end of file diff --git a/src/app/_modules/pages/menu/pages-menu.component.ts b/src/app/_modules/pages/menu/pages-menu.component.ts index f96d1cd..d8df33b 100644 --- a/src/app/_modules/pages/menu/pages-menu.component.ts +++ b/src/app/_modules/pages/menu/pages-menu.component.ts @@ -24,10 +24,10 @@ export class PagesMenuComponent implements OnInit { this.subscription = combineLatest([ this.pagesService.currentPageSubject, - this.pagesService.rootPageSubject + this.pagesService.rootPagesSubject ]).subscribe( resp=>{ - let [currentPage, rootPage] = resp + let [currentPage, rootPages] = resp if(currentPage){ let menuTree = currentPage.parents.data.reduceRight( (menuTree,item)=>{ @@ -39,7 +39,7 @@ export class PagesMenuComponent implements OnInit { }, currentPage); this.items = menuTree.children.data; }else{ - this.items = rootPage?.data[0].children.data + this.items = rootPages?.data[0].children.data } } ) diff --git a/src/app/_modules/pages/menu/slider-menu/slider-menu.component.html b/src/app/_modules/pages/menu/slider-menu/slider-menu.component.html index 66082c8..ba5f5c3 100644 --- a/src/app/_modules/pages/menu/slider-menu/slider-menu.component.html +++ b/src/app/_modules/pages/menu/slider-menu/slider-menu.component.html @@ -1,7 +1,7 @@
- +
!!! diff --git a/src/app/_modules/pages/menu/slider-menu/slider-menu.component.ts b/src/app/_modules/pages/menu/slider-menu/slider-menu.component.ts index 01b3c31..f2592bf 100644 --- a/src/app/_modules/pages/menu/slider-menu/slider-menu.component.ts +++ b/src/app/_modules/pages/menu/slider-menu/slider-menu.component.ts @@ -15,8 +15,8 @@ export class SliderMenuComponent { ) { } - get rootPage() { - return this.pagesService.rootPage; + get rootPages() { + return this.pagesService.rootPages; } } diff --git a/src/app/_modules/widjet/locale/locale.component.ts b/src/app/_modules/widjet/locale/locale.component.ts index 1d98ece..34f8952 100644 --- a/src/app/_modules/widjet/locale/locale.component.ts +++ b/src/app/_modules/widjet/locale/locale.component.ts @@ -19,7 +19,7 @@ export class LocaleComponent { ){} ngOnInit() { - this.pagesService.rootPageSubject.subscribe( + this.pagesService.rootPagesSubject.subscribe( res=>{ console.log(res) @@ -32,8 +32,13 @@ export class LocaleComponent { this.rootSubscription.unsubscribe() } - get rootPage() { - return this.pagesService.rootPage; + + get rootPage(){ + return this.pagesService.rootPage + } + + get rootPages() { + return this.pagesService.rootPages; } flag(localeName:string){ diff --git a/src/app/_services/pages.service.ts b/src/app/_services/pages.service.ts index 415825b..c2565d8 100644 --- a/src/app/_services/pages.service.ts +++ b/src/app/_services/pages.service.ts @@ -7,29 +7,30 @@ import {Observable, BehaviorSubject} from "rxjs"; @Injectable({providedIn: 'root'}) export class PagesService { public currentPageSubject = new BehaviorSubject(null); - public rootPageSubject = new BehaviorSubject(null); + public rootPagesSubject = new BehaviorSubject(null); public metaSubject = new BehaviorSubject({title: '', description: '', keywords: ''}); public editModeSubject = new BehaviorSubject(false); public showDeletedSubject = new BehaviorSubject(false); public menuSelectedLink: string; constructor(private http: HttpClient) { - //this.find('/').subscribe(res => {this.rootPage = res.data}); + //this.find('/').subscribe(res => {this.rootPages = res.data}); } + rootPage:any get currentPage() { return this.currentPageSubject.value; } set currentPage(val: any) { this.currentPageSubject.next(val); - // this.rootPage = val?.parents?.data[0] || val; + this.rootPage = val?.parents?.data[0] || val; this.setMetaFromPage(val); } - get rootPage() { - return this.rootPageSubject.value; + get rootPages() { + return this.rootPagesSubject.value; } - set rootPage(val: any) { - this.rootPageSubject.next(val); + set rootPages(val: any) { + this.rootPagesSubject.next(val); } get editMode() { diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 3f91a51..833981b 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -21,10 +21,11 @@ export class AppComponent { ngOnInit() { this.rootSubscription = this.pagesService.root({include:'children'}).subscribe(res => { - this.pagesService.rootPage = res + this.pagesService.rootPages = res }); } + ngOnDestroy() { this.subscription?.unsubscribe(); this.rootSubscription.unsubscribe() From 2194432c09d1ab74699e8167cf60044b625d0173 Mon Sep 17 00:00:00 2001 From: Boris Voropaev Date: Wed, 22 Nov 2023 14:10:48 +0300 Subject: [PATCH 5/6] admin control panel --- .../page/administration-page.component.html | 9 +- .../page/administration-page.component.scss | 21 -- .../administrate-site-pages.component.html | 9 +- .../administrate-site-pages.component.scss | 171 ----------------- .../tree/item/pages-tree-item.component.html | 35 ++-- .../tree/item/pages-tree-item.component.ts | 5 +- .../pages/tree/pages-tree.component.scss | 181 ------------------ src/app/_services/pages.service.ts | 5 +- src/assets/css/_admin.scss | 148 ++++++++++++++ src/assets/css/_grid.scss | 29 +-- src/assets/images/ico/add_web_page_24.svg | 3 + ...ow_drop_down_24-1.svg => drop_down_24.svg} | 0 src/styles.scss | 3 +- 13 files changed, 210 insertions(+), 409 deletions(-) create mode 100644 src/assets/css/_admin.scss create mode 100644 src/assets/images/ico/add_web_page_24.svg rename src/assets/images/ico/{arrow_drop_down_24-1.svg => drop_down_24.svg} (100%) diff --git a/src/app/_modules/administration/page/administration-page.component.html b/src/app/_modules/administration/page/administration-page.component.html index 5b7fe4b..15d3c31 100644 --- a/src/app/_modules/administration/page/administration-page.component.html +++ b/src/app/_modules/administration/page/administration-page.component.html @@ -1,15 +1,16 @@ -
-
-

Панель управления

+
+
+

Панель управления

-
+

Страница не найдена

+ \ No newline at end of file diff --git a/src/app/_modules/administration/page/administration-page.component.scss b/src/app/_modules/administration/page/administration-page.component.scss index 7195ade..8b13789 100644 --- a/src/app/_modules/administration/page/administration-page.component.scss +++ b/src/app/_modules/administration/page/administration-page.component.scss @@ -1,22 +1 @@ -.line{ - display: inline-block; - border-bottom: 12px solid var(--blue-0); - margin-top: 24px; - margin-bottom: 40px; - h1{ - display: inline; - padding-right: 40px; - vertical-align: 2px; - font-family: PT Sans Narrow; - font-size: 76px; - font-style: normal; - font-weight: 700; - line-height: 60px; /* 100% */ - letter-spacing: 0.76px; - color: var(--second-act); - } -} -:host{ - font-size: 20px; -} diff --git a/src/app/_modules/administration/site-pages/administrate-site-pages.component.html b/src/app/_modules/administration/site-pages/administrate-site-pages.component.html index ac13a87..194e958 100644 --- a/src/app/_modules/administration/site-pages/administrate-site-pages.component.html +++ b/src/app/_modules/administration/site-pages/administrate-site-pages.component.html @@ -1,3 +1,8 @@ - - Показать удаленные +
+ + + Показать удаленные + + +
diff --git a/src/app/_modules/administration/site-pages/administrate-site-pages.component.scss b/src/app/_modules/administration/site-pages/administrate-site-pages.component.scss index b1af125..e69de29 100644 --- a/src/app/_modules/administration/site-pages/administrate-site-pages.component.scss +++ b/src/app/_modules/administration/site-pages/administrate-site-pages.component.scss @@ -1,171 +0,0 @@ - - -.item.home .bar .mid .info .logo::before{ - background-image: url('~src/assets/images/icons/home_page_24dp.svg'); - } - - .item:not(.home){ - .bar{ - padding-left: 50px; - - } - .item .bar{ - padding-left: 100px; - } - .item .item .bar{ - padding-left: 150px; - } - .item .item .item .bar{ - padding-left: 200px; - } - - .item .item .item .item .bar{ - padding-left: 250px; - } - } - - - - .item { - .bar { - display: flex; - flex-direction: row; - align-items: center; - padding: 16px 0; - border-bottom: #E0E0E0 solid 1px; - .left { - flex-shrink: 0; - width: 40px; - height: 24px; - cursor: pointer; - .toggle { - border:none; - width: 100%; - height: 100%; - background: transparent url("~src/assets/images/icons/expand_less_20.svg") 50% 50% no-repeat; - transform: rotate(90deg); - transition: transform .3s; - } - } - .mid { - flex-grow: 1; - padding: 0 16px; - .info { - display: flex; - flex-direction: row; - align-items: center; - .logo { - display: flex; - align-items: center; - justify-content: center; - position: relative; - flex-shrink: 0; - width: 40px; - height: 40px; - margin-right: 16px; - border-radius: 100px; - background-color: var(--prime); - color: #ffffff; - span{ - display: none; - - } - &::before { - content: ""; - display: block; - background: transparent url("~src/assets/images/icons/web_page_24dp.svg")no-repeat; - width: 24px; - height: 24px; - } - - img { - width: 100%; - height: 100%; - border-radius: 100px; - object-fit: cover; - background-color: #ffffff; - } - } - .name { - p { - margin: 0; - a { - color: var(--grey-7); - } - &.sub { - font-size: 0.875rem; - color: #7f7f7f; - } - } - } - } - } - .right { - display: flex; - flex-direction: row; - align-items: center; - flex-shrink: 1; - button { - margin-left: 24px; - &.edit { - background-image: url('~src/assets/images/icons/edit_24dp.svg'); - } - &.add { - background-image: url('~src/assets/images/icons/add_library_dark_24.svg'); - } - &.delete { - background-image: url('~src/assets/images/icons/close_24dp.svg'); - } - &.move { - background-image: url('~src/assets/images/icons/drag-n-drop_24.svg'); - cursor: move; - } - } - } - .right-home { - width: 144px; - } - } - .items { - display: none; - - } - &.active { - >.bar { - .left { - .toggle { - transform: rotate(180deg); - } - } - } - >.items { - display: block; - } - } - } - - - @media screen and (max-width: 1330px) { - .item { - .bar { - .mid { - padding: 0 12px; - .info .logo { - display: none; - } - } - .right { - display: none; - } - } - .items { - padding-left: 16px; - } - &.company { - .items { - padding-left: 40px; - } - } - } - } - \ No newline at end of file diff --git a/src/app/_modules/pages/tree/item/pages-tree-item.component.html b/src/app/_modules/pages/tree/item/pages-tree-item.component.html index 8f9ebbd..98f4a45 100644 --- a/src/app/_modules/pages/tree/item/pages-tree-item.component.html +++ b/src/app/_modules/pages/tree/item/pages-tree-item.component.html @@ -1,26 +1,35 @@ -
+
- +
- +

{{page.name}}

-
- - - - - - -
+ + + + + + + + + + + + + + +
-
- +
+
diff --git a/src/app/_modules/pages/tree/item/pages-tree-item.component.ts b/src/app/_modules/pages/tree/item/pages-tree-item.component.ts index 0044012..eb7fd39 100644 --- a/src/app/_modules/pages/tree/item/pages-tree-item.component.ts +++ b/src/app/_modules/pages/tree/item/pages-tree-item.component.ts @@ -15,7 +15,10 @@ export class PagesTreeItemComponent { public touched = false; public subscription: Subscription; - constructor(public pagesService: PagesService, private formsService: FormsService, private listsService: ListsService) { + constructor( + public pagesService: PagesService, + private formsService: FormsService, + private listsService: ListsService) { } ngOnInit() { diff --git a/src/app/_modules/pages/tree/pages-tree.component.scss b/src/app/_modules/pages/tree/pages-tree.component.scss index ec08638..e69de29 100644 --- a/src/app/_modules/pages/tree/pages-tree.component.scss +++ b/src/app/_modules/pages/tree/pages-tree.component.scss @@ -1,181 +0,0 @@ - -.item:not(.home){ - .bar{ - padding-left: 50px; - - } - .item .bar{ - padding-left: 100px; - } - .item .item .bar{ - padding-left: 150px; - } - .item .item .item .bar{ - padding-left: 200px; - } - - .item .item .item .item .bar{ - padding-left: 250px; - } - } - - - -.item { - flex-direction: column; - align-items: stretch; - .bar { - display: flex; - flex-direction: row; - align-items: center; - padding: 16px 0; - border-bottom: #E0E0E0 solid 1px; - .left { - flex-shrink: 0; - width: 40px; - height: 24px; - cursor: pointer; - .toggle { - border:none; - width: 100%; - height: 100%; - background: transparent url("~src/assets/images/icons/expand_less_20.svg") 50% 50% no-repeat; - transform: rotate(90deg); - transition: transform .3s; - } - } - .mid { - flex-grow: 1; - padding: 0 16px; - .info { - display: flex; - flex-direction: row; - align-items: center; - .logo { - display: flex; - align-items: center; - justify-content: center; - position: relative; - flex-shrink: 0; - width: 40px; - height: 40px; - margin-right: 16px; - border-radius: 100px; - background-color: var(--prime); - color: #ffffff; - cursor: move; - span{ - display: none; - - } - &::before { - content: ""; - display: block; - background: transparent url("~src/assets/images/icons/web_page_24dp.svg")no-repeat; - width: 24px; - height: 24px; - } - &.orphan::before{ - background-image: url('~src/assets/images/icons/home_page_24dp.svg'); - } - img { - width: 100%; - height: 100%; - border-radius: 100px; - object-fit: cover; - background-color: #ffffff; - } - } - .name { - p { - margin: 0; - a { - color: var(--grey-7); - } - &.sub { - font-size: 0.875rem; - color: #7f7f7f; - } - } - } - } - } - .right { - display: flex; - flex-direction: row; - align-items: center; - flex-shrink: 1; - button { - margin-left: 24px; - &.edit { - background-image: url('~src/assets/images/icons/edit_24dp.svg'); - } - &.add { - background-image: url('~src/assets/images/icons/add_library_dark_24.svg'); - } - &.delete { - background-image: url('~src/assets/images/icons/close_24dp.svg'); - } - &.move { - background-image: url('~src/assets/images/icons/drag-n-drop_24.svg'); - cursor: move; - } - &.clone { - width: 24px; - background-color: #dedede; - } - &.restore { - width: 24px; - background-color: #dedede; - } - } - .orphan{ - margin-right: 48px; - } - } - .right-home { - width: 144px; - } - } - .items { - display: none; - - } - &.active { - >.bar { - .left { - .toggle { - transform: rotate(180deg); - } - } - } - >.items { - display: block; - } - } -} - - -@media screen and (max-width: 1330px) { - .item { - .bar { - .mid { - padding: 0 12px; - .info .logo { - display: none; - } - } - .right { - display: none; - } - } - .items { - padding-left: 16px; - } - &.company { - .items { - padding-left: 40px; - } - } - } -} diff --git a/src/app/_services/pages.service.ts b/src/app/_services/pages.service.ts index c2565d8..83fa4ca 100644 --- a/src/app/_services/pages.service.ts +++ b/src/app/_services/pages.service.ts @@ -16,7 +16,10 @@ export class PagesService { constructor(private http: HttpClient) { //this.find('/').subscribe(res => {this.rootPages = res.data}); } - rootPage:any + rootPage={ + link:'', + slug:environment.defaultLocale + } get currentPage() { return this.currentPageSubject.value; diff --git a/src/assets/css/_admin.scss b/src/assets/css/_admin.scss new file mode 100644 index 0000000..9aa4031 --- /dev/null +++ b/src/assets/css/_admin.scss @@ -0,0 +1,148 @@ +.administration-page{ + font-size: 20px; + h2{ + color: var(--second-act); + margin-bottom: 48px; + } + +} + + +.site-admin-control{ + display: flex; + justify-content: space-between; + cursor: pointer; + .site-admin-control-toggle{ + display: flex; + align-items: center; + gap: 16px; + } + +} +administrate-site-pages>pages-tree{ + display: block; + margin-bottom: 128px; +} + + +pages-tree{ + +.item:not(.home){ + .bar{ + padding-left: 50px; + + } + .item .bar{ + padding-left: 100px; + } + .item .item .bar{ + padding-left: 150px; + } + .item .item .item .bar{ + padding-left: 200px; + } + + .item .item .item .item .bar{ + padding-left: 250px; + } + + .item .item .item .item .item .bar{ + padding-left: 300px; + } + } + + + +.item { + flex-direction: column; + align-items: stretch; + .bar { + display: flex; + flex-direction: row; + align-items: center; + padding: 16px 0; + border-bottom: #E0E0E0 solid 1px; + .left { + flex-shrink: 0; + width: 40px; + height: 24px; + cursor: pointer; + + } + .mid { + flex-grow: 1; + padding: 0 16px; + .info { + display: flex; + flex-direction: row; + align-items: center; + .logo { + display: flex; + align-items: center; + justify-content: center; + position: relative; + flex-shrink: 0; + width: 40px; + height: 40px; + margin-right: 16px; + border-radius: 100px; + background-color: var(--prime); + color: #ffffff; + cursor: move; + &:hover{ + background-color: var(--prime-act); + } + span{ + display: none; + } + } + .name { + p { + margin: 0; + a { + color: var(--grey-7); + } + &.sub { + font-size: 0.875rem; + color: #7f7f7f; + } + } + } + } + } + .right { + display: flex; + flex-direction: row; + align-items: center; + flex-shrink: 1; + gap: 8px; + } + } +} + + +@media screen and (max-width: 1330px) { + .item { + .bar { + .mid { + padding: 0 12px; + .info .logo { + display: none; + } + } + .right { + display: none; + } + } + .items { + padding-left: 16px; + } + &.company { + .items { + padding-left: 40px; + } + } + } +} + +} \ No newline at end of file diff --git a/src/assets/css/_grid.scss b/src/assets/css/_grid.scss index f603cc5..4d66ab3 100644 --- a/src/assets/css/_grid.scss +++ b/src/assets/css/_grid.scss @@ -169,24 +169,25 @@ footer{ pages-menu-item{ display: flex; flex-direction: column; - -} - -.item{ - display: flex; - align-items: flex-start; - drop-down{ - margin-left: -24px; - } - min-height: 24px; - >a{ - margin-top: 4px; - &.active { - color: #000000; + .item{ + display: flex; + align-items: flex-start; + drop-down{ + margin-left: -24px; + } + min-height: 24px; + >a{ + margin-top: 4px; + &.active { + color: #000000; + } } } + } + + .pages{ width: 100%; } \ No newline at end of file diff --git a/src/assets/images/ico/add_web_page_24.svg b/src/assets/images/ico/add_web_page_24.svg new file mode 100644 index 0000000..24ab34f --- /dev/null +++ b/src/assets/images/ico/add_web_page_24.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/ico/arrow_drop_down_24-1.svg b/src/assets/images/ico/drop_down_24.svg similarity index 100% rename from src/assets/images/ico/arrow_drop_down_24-1.svg rename to src/assets/images/ico/drop_down_24.svg diff --git a/src/styles.scss b/src/styles.scss index 57dc748..686d428 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -12,4 +12,5 @@ @import 'slider'; @import 'tables'; @import 'tabs.scss'; -@import 'pages-section'; \ No newline at end of file +@import 'pages-section'; +@import 'admin'; \ No newline at end of file From 37c330d295c388d76249c1e13fba373fe83bac8c Mon Sep 17 00:00:00 2001 From: Boris Voropaev Date: Wed, 22 Nov 2023 14:54:48 +0300 Subject: [PATCH 6/6] layout --- .../user-bar/header-user-bar.component.ts | 1 + .../layout/jumbotron/jumbotron.component.html | 4 ++-- .../layout/jumbotron/jumbotron.component.ts | 19 ++++++++++++++++--- .../left-content/left-content.component.html | 2 +- .../right-content.component.html | 2 +- .../right-content/right-content.component.ts | 9 ++++++++- src/assets/css/_grid.scss | 4 ++++ 7 files changed, 33 insertions(+), 8 deletions(-) diff --git a/src/app/_modules/layout/header/user-bar/header-user-bar.component.ts b/src/app/_modules/layout/header/user-bar/header-user-bar.component.ts index f933e4a..e31ee79 100644 --- a/src/app/_modules/layout/header/user-bar/header-user-bar.component.ts +++ b/src/app/_modules/layout/header/user-bar/header-user-bar.component.ts @@ -58,6 +58,7 @@ export class HeaderUserBarComponent { } link(link: string) { + this.pagesService.currentPageSubject.next(null); this.close() this.router.navigate([link]).then(); } diff --git a/src/app/_modules/layout/jumbotron/jumbotron.component.html b/src/app/_modules/layout/jumbotron/jumbotron.component.html index 9972ebf..3b5bf6e 100644 --- a/src/app/_modules/layout/jumbotron/jumbotron.component.html +++ b/src/app/_modules/layout/jumbotron/jumbotron.component.html @@ -1,7 +1,7 @@ -
+
-

{{name}}

+

{{name}}

diff --git a/src/app/_modules/layout/jumbotron/jumbotron.component.ts b/src/app/_modules/layout/jumbotron/jumbotron.component.ts index 8c3b083..2ad5e97 100644 --- a/src/app/_modules/layout/jumbotron/jumbotron.component.ts +++ b/src/app/_modules/layout/jumbotron/jumbotron.component.ts @@ -20,9 +20,22 @@ export class JumbotronComponent { return this.currentPage?.h1 || this.currentPage?.name } - get back(){ - let pictURL = this.currentPage?.picture?.data.links.open; - return {'background-image' : `url(${pictURL})`||'none'} + get bgStyle(){ + let height = 50; + let pictURL:string; + if (this.currentPage){ + height = 150; + pictURL = this.currentPage?.picture?.data.links.open; + } + + return { + 'background-image' : `url(${pictURL})`||'none', + 'height': (pictURL?400:height) + 'px' + } + } + + get h1Style(){ + return { color: this.currentPage?.picture?'var(--white)':'var(--second-act)'} } get editable(){ 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 30b99f9..54e286d 100644 --- a/src/app/_modules/layout/left-content/left-content.component.html +++ b/src/app/_modules/layout/left-content/left-content.component.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/_modules/layout/right-content/right-content.component.html b/src/app/_modules/layout/right-content/right-content.component.html index 2ea0efe..2e81f78 100644 --- a/src/app/_modules/layout/right-content/right-content.component.html +++ b/src/app/_modules/layout/right-content/right-content.component.html @@ -1 +1 @@ - + diff --git a/src/app/_modules/layout/right-content/right-content.component.ts b/src/app/_modules/layout/right-content/right-content.component.ts index 2cfc12b..e594d33 100644 --- a/src/app/_modules/layout/right-content/right-content.component.ts +++ b/src/app/_modules/layout/right-content/right-content.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { PagesService } from '@app/_services/pages.service'; @Component({ selector: 'right-content', @@ -6,5 +7,11 @@ import { Component } from '@angular/core'; styleUrls: ['./right-content.component.scss'] }) export class RightContentComponent { - + constructor( + private pagesService:PagesService + ){} + get show(){ + return !!this.pagesService.currentPage + } + } diff --git a/src/assets/css/_grid.scss b/src/assets/css/_grid.scss index 4d66ab3..715b524 100644 --- a/src/assets/css/_grid.scss +++ b/src/assets/css/_grid.scss @@ -58,12 +58,16 @@ jumbotron{ left-content{ + flex-basis: 180px; + flex-shrink: 0; pages-menu:not(.lvl-0,.open){ display: none; } } right-content{ + flex-basis: 180px; + flex-shrink: 0; .item{display: none;} pages-menu.current{ pages-menu-item>.item{