Merge branch 'menu2'
Boris Voropaev
commit
1be628ef2b
|
|
@ -130,7 +130,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1264px) {
|
||||
@media screen and (max-width: 1330px) {
|
||||
.authentication {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1264px) {
|
||||
@media screen and (max-width: 1330px) {
|
||||
.main {
|
||||
.left {
|
||||
margin-right: 0;
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1264px) {
|
||||
@media screen and (max-width: 1330px) {
|
||||
.member {
|
||||
.left {
|
||||
.avatar {
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1264px){
|
||||
@media screen and (max-width: 1330px){
|
||||
.footer{
|
||||
padding: 40px 24px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@media screen and (max-width: 1264px){
|
||||
@media screen and (max-width: 1330px){
|
||||
|
||||
.hidemobile{
|
||||
display: none !important;
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
|
||||
|
||||
|
||||
@media screen and (min-width: 1264px){
|
||||
@media screen and (min-width: 1330px){
|
||||
.showmobile{
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -130,12 +130,12 @@
|
|||
justify-content: normal;
|
||||
align-items: stretch;
|
||||
align-content: stretch;
|
||||
padding: 0 calc( (100% - 1300px) / 2);
|
||||
padding: 0 calc( (100% - 1400px) / 2);
|
||||
position: relative;
|
||||
.logo {
|
||||
width:114px;
|
||||
height: 80px;
|
||||
margin: 12px 24px 12px 40px;
|
||||
margin: 12px 24px 12px 60px;
|
||||
background-image: url('~src/assets/images/logo_vniigaz_1163x816.svg');
|
||||
background-size: contain;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -168,7 +168,7 @@
|
|||
align-content: stretch;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
margin-right: 40px;
|
||||
margin-right: 60px;
|
||||
button{
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@
|
|||
|
||||
|
||||
}
|
||||
@media screen and (max-width: 1264px) {
|
||||
@media screen and (max-width: 1330px) {
|
||||
.user {
|
||||
.avatar {
|
||||
background-color: var(--white);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import {RouterModule} from "@angular/router";
|
|||
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
|
||||
|
||||
import {PagesModule} from "@app/_modules/pages/pages.module";
|
||||
|
||||
import { PagesMenuModule } from '../pages/menu/pages-menu.module';
|
||||
import {HeaderComponent} from "@app/_modules/layout/header/header.component";
|
||||
import {FooterComponent} from "@app/_modules/layout/footer/footer.component";
|
||||
import {GridComponent} from "@app/_modules/layout/grid/grid.component";
|
||||
|
|
@ -18,6 +18,7 @@ import {HeaderUserBarComponent} from "@app/_modules/layout/header/user-bar/heade
|
|||
ReactiveFormsModule,
|
||||
RouterModule,
|
||||
PagesModule,
|
||||
PagesMenuModule
|
||||
],
|
||||
declarations: [
|
||||
GridComponent,
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
height: 500px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1264px) {
|
||||
@media screen and (max-width: 1330px) {
|
||||
.row {
|
||||
flex-direction: column;
|
||||
.tagline {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="expand" [ngClass]="{toggle:children?.length, open:showChildren}" (click)="showChildren=!showChildren"></div>
|
||||
|
||||
<a [routerLink]="item.link" routerLinkActive="active" (click)="select(item)"
|
||||
[ngClass]="{'active-mob':item.link==currentURL}"><span>{{item.name}}</span></a>
|
||||
<a [routerLink]="item.depth>=2?null:item.link" routerLinkActive="active" (click)="select(item)"
|
||||
[ngClass]="{'current-item':item.link==currentURL,'parent-item':parentItem}"><span>{{item.name}}</span></a>
|
||||
|
||||
<pages-menu *ngIf="children?.length" [items]="children"
|
||||
(onSelected)="select($event)" [ngClass]="{'hide-children':!showChildren}"></pages-menu>
|
||||
(onSelected)="select($event)" [ngClass]="{'hide-children':!showChildren,'current-item':item.link==currentURL,'parent-item':parentItem}"></pages-menu>
|
||||
|
|
|
|||
|
|
@ -25,6 +25,10 @@ export class PagesMenuItemComponent {
|
|||
return this.item?.children?.data;
|
||||
}
|
||||
|
||||
get parentItem(){
|
||||
return this.currentURL.startsWith(this.item.link)
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export class PagesMenuComponent {
|
|||
|
||||
|
||||
get visibleItems() {
|
||||
return this.items.filter(item => {
|
||||
return this.items?.filter(item => {
|
||||
return this.hiddenPages.indexOf(item.link) === -1;
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
|
||||
import {PagesMenuComponent} from "@app/_modules/pages/menu/pages-menu.component";
|
||||
import {PagesMenuItemComponent} from "@app/_modules/pages/menu/item/pages-menu-item.component";
|
||||
import {RouterModule} from "@angular/router";
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule,
|
||||
|
||||
],
|
||||
declarations: [
|
||||
PagesMenuComponent,
|
||||
PagesMenuItemComponent,
|
||||
|
||||
],
|
||||
exports: [
|
||||
PagesMenuComponent,
|
||||
|
||||
]
|
||||
})
|
||||
export class PagesMenuModule {}
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
</div>
|
||||
<div class="limiter">
|
||||
<div class="line">
|
||||
<h1>{{pageTopName||page?.name}}</h1>
|
||||
<h1 *ngIf="!loading">{{pageTopName}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -17,16 +17,23 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="limiter">
|
||||
<!-- <div class="limiter">
|
||||
<page-breadcrumbs [page]="page"></page-breadcrumbs>
|
||||
</div>
|
||||
<div class="limiter pages" [ngSwitch]="page?.type?.name || page?.type">
|
||||
<content-page *ngSwitchCase="'content'" [page]="page" [editMode]="editMode"></content-page>
|
||||
<publications-page *ngSwitchCase="'publications'" [page]="page" [editMode]="editMode"></publications-page>
|
||||
<registry-page *ngSwitchCase="'registry'" [page]="page" [editMode]="editMode"></registry-page>
|
||||
<publication-page *ngSwitchCase="'publication'" [page]="page" [editMode]="editMode"></publication-page>
|
||||
<tk-structure-page *ngSwitchCase="'tk-structure'" [page]="page" [editMode]="editMode"></tk-structure-page>
|
||||
<p *ngSwitchDefault>Page type {{page?.type?.name}} is undefined</p>
|
||||
</div> -->
|
||||
<div class="limiter double-column">
|
||||
<div class="pages" [ngSwitch]="page?.type?.name || page?.type">
|
||||
<content-page *ngSwitchCase="'content'" [page]="page" [editMode]="editMode"></content-page>
|
||||
<publications-page *ngSwitchCase="'publications'" [page]="page" [editMode]="editMode"></publications-page>
|
||||
<registry-page *ngSwitchCase="'registry'" [page]="page" [editMode]="editMode"></registry-page>
|
||||
<publication-page *ngSwitchCase="'publication'" [page]="page" [editMode]="editMode"></publication-page>
|
||||
<tk-structure-page *ngSwitchCase="'tk-structure'" [page]="page" [editMode]="editMode"></tk-structure-page>
|
||||
<p *ngSwitchDefault>Page type {{page?.type?.name}} is undefined</p>
|
||||
</div>
|
||||
<div class="sub-menu">
|
||||
<!-- <pre>{{page.children.data.length|json}}</pre> -->
|
||||
<pages-menu [items]="menuItems" (onSelected)="itemSelect($event)"></pages-menu>
|
||||
<!-- <pre>{{menuItems|json}}</pre> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" *ngIf="!loading && !page">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
.content {
|
||||
background-color: #F6F6F6;
|
||||
padding-bottom: 120px;
|
||||
.limiter{
|
||||
max-width: 1280px;
|
||||
}
|
||||
.row {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -20,11 +23,12 @@
|
|||
.block{
|
||||
position: absolute;
|
||||
top:136px;
|
||||
left: calc((100% - 900px) / 2);
|
||||
left: calc((100% - 1280px) / 2);
|
||||
}
|
||||
.limiter{
|
||||
|
||||
display: block;
|
||||
|
||||
.line{
|
||||
display: inline-block;
|
||||
border-bottom: 12px solid var(--blue-0);
|
||||
|
|
@ -70,7 +74,27 @@
|
|||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1264px) {
|
||||
@media screen and (min-width: 1330px){
|
||||
.double-column{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 40px;
|
||||
.pages{
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.sub-menu{
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
flex-basis: 360px;
|
||||
width: 360px;
|
||||
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1330px) {
|
||||
.nav-info{
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ export class PageComponent {
|
|||
public page: any;
|
||||
public editMode: boolean;
|
||||
public loading = false;
|
||||
public menuItems:any[]
|
||||
private url: string;
|
||||
private inited = false;
|
||||
routeSubscription?: Subscription;
|
||||
|
|
@ -38,13 +39,26 @@ export class PageComponent {
|
|||
}
|
||||
|
||||
get pageTopName(){
|
||||
return this.page?.parents?.data[1]?.name;
|
||||
let item:any;
|
||||
let name:string
|
||||
if(this.menuItems){
|
||||
item = this.menuItems.find(item=>this.page.link.startsWith(item.link))
|
||||
name= item?.name;
|
||||
if (item?.depth>=2){
|
||||
item = item.children.data.find(item=>this.page.link.startsWith(item.link))
|
||||
name= item?.name;
|
||||
}
|
||||
}
|
||||
return name||this.page.name;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
this.listsService.controls().subscribe(res => {
|
||||
this.inited ? this.fetch() : this.inited = true;
|
||||
this.fetchMenu();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
|
|
@ -70,16 +84,25 @@ export class PageComponent {
|
|||
'sections.objectables.groups.fields.value',
|
||||
'sidebars.groups.fields.value',
|
||||
'sidebars.type',
|
||||
'permissions'
|
||||
'permissions',
|
||||
'children.children'
|
||||
];
|
||||
this.pagesService.find(this.url, {include: include.join(',')}).subscribe(res => {
|
||||
this.page = res?.data;
|
||||
this.page = res?.data;
|
||||
this.loading = false;
|
||||
}, error => {
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
fetchMenu() {
|
||||
let include = ['children.children'];
|
||||
this.pagesService.root({include: include.join(',')}).subscribe(res => {
|
||||
this.menuItems = res.data;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
toggleEditMode() {
|
||||
this.editMode = !this.editMode;
|
||||
}
|
||||
|
|
@ -88,6 +111,10 @@ export class PageComponent {
|
|||
this.formsService.createModel('page-background', {extraProps: {attach: {pageId: this.page.id}}});
|
||||
}
|
||||
|
||||
itemSelect(event){
|
||||
console.log('EVENT',event)
|
||||
}
|
||||
|
||||
removeBackground() {
|
||||
if (confirm('Вы деествительно хотите удалить этот фон?')) {
|
||||
this.pagesService.deleteBackground(this.page.id).subscribe(res => {
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1264px) {
|
||||
@media screen and (max-width: 1330px) {
|
||||
.title {
|
||||
span {
|
||||
font-size: 1rem !important;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import {RegistriesModule} from "@app/_modules/registries/registries.module";
|
|||
import {PublicationsModule} from "@app/_modules/publications/publications.module";
|
||||
import {TkStructurePageComponent} from "@app/_modules/pages/page/types/tk-structure/tk-structure-page.component";
|
||||
import {HomepageModule} from "@app/_modules/pages/home/homepage.module";
|
||||
import { PagesMenuModule } from './menu/pages-menu.module';
|
||||
|
||||
const routes: Routes = [
|
||||
{path: '', component: HomepageComponent},
|
||||
|
|
@ -28,7 +29,8 @@ const routes: Routes = [
|
|||
PageSectionsModule,
|
||||
PageSidebarsModule,
|
||||
RegistriesModule,
|
||||
PublicationsModule
|
||||
PublicationsModule,
|
||||
PagesMenuModule
|
||||
],
|
||||
declarations: [
|
||||
PageComponent,
|
||||
|
|
|
|||
|
|
@ -6,8 +6,6 @@ import {RegistriesModule} from "@app/_modules/registries/registries.module";
|
|||
import {PublicationsModule} from "@app/_modules/publications/publications.module";
|
||||
import {PagesListComponent} from "@app/_modules/pages/list/pages-list.component";
|
||||
import {PagesListItemComponent} from "@app/_modules/pages/list/item/pages-list-item.component";
|
||||
import {PagesMenuComponent} from "@app/_modules/pages/menu/pages-menu.component";
|
||||
import {PagesMenuItemComponent} from "@app/_modules/pages/menu/item/pages-menu-item.component";
|
||||
import {RouterModule} from "@angular/router";
|
||||
import {PaginationModule} from "@app/_modules/pagination/pagination.module";
|
||||
import {SearchSectionsComponent} from "@app/_modules/pages/sections/search/search-sections.component";
|
||||
|
|
@ -30,8 +28,6 @@ import {SortablejsModule} from "ngx-sortablejs";
|
|||
SortablejsModule,
|
||||
],
|
||||
declarations: [
|
||||
PagesMenuComponent,
|
||||
PagesMenuItemComponent,
|
||||
PagesListComponent,
|
||||
PagesListItemComponent,
|
||||
PagesTreeComponent,
|
||||
|
|
@ -40,7 +36,6 @@ import {SortablejsModule} from "ngx-sortablejs";
|
|||
SearchSectionsItemComponent,
|
||||
],
|
||||
exports: [
|
||||
PagesMenuComponent,
|
||||
PagesListComponent,
|
||||
SearchSectionsComponent,
|
||||
PagesTreeComponent,
|
||||
|
|
|
|||
|
|
@ -37,7 +37,6 @@ export class AddSectionComponent {
|
|||
return item;
|
||||
});
|
||||
let attach = {modelType: this.modelType, modelId: this.page.id, group: 'sections', ord: this.ord};
|
||||
console.log(type);
|
||||
this.formsService.createObject(type, {extraProps: {attach: attach}});
|
||||
this.hideDD();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,9 +37,9 @@
|
|||
}
|
||||
.image {
|
||||
img{
|
||||
width: 273px;
|
||||
width: 265px;
|
||||
object-fit: cover;
|
||||
height: 204px;
|
||||
height: 190px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(45, 45, 45, 0.27);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export class ImageGroupSectionComponent {
|
|||
}
|
||||
|
||||
ngOnInit() {
|
||||
console.log(this.section);
|
||||
// console.log(this.section);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,35 @@
|
|||
<div class="member">
|
||||
<!-- <pre>{{item | json}}</pre> -->
|
||||
<h1 *ngIf="name" [innerHTML]="name"></h1>
|
||||
<img *ngIf="photo" [src]="photo" (click)="fullScreen=true"/>
|
||||
<h4 *ngIf="position" [innerHTML]="position"></h4>
|
||||
<p *ngIf="document" class="doc"><a [href]="document">Документ</a> </p>
|
||||
<p *ngIf="email"><a href="mailto:{{email}}">{{email}}</a></p>
|
||||
<p *ngIf="phone"><a href="tel:{{phone}}">{{phone}}</a></p>
|
||||
<p *ngIf="description" [innerHTML]="description"></p>
|
||||
</div>
|
||||
<img [src]="photo" class="full-screen" *ngIf="fullScreen" (click)="fullScreen=false"/>
|
||||
|
||||
<page-menu [editMode]="editMode" [section]="member" [modelId]="modelId" [modelType]="'modelType'"></page-menu>
|
||||
|
||||
<img [src]="image" class="image" [class.pointer]="imageFull" (click)="showImage=imageFull&&true"/>
|
||||
|
||||
<div class="name" [innerHTML]="name"></div>
|
||||
|
||||
<div class="position" [innerHTML]="position" *ngIf="position"></div>
|
||||
|
||||
<a class="link tel" [innerHTML]="phone" [href]="'tel:'+phone" *ngIf="phone"></a>
|
||||
|
||||
<a class="link mail" [innerHTML]="email" [href]="'mailto:'+email" *ngIf="email"></a>
|
||||
|
||||
<div class="doc" *ngIf="docLink">
|
||||
<div class="doc-icon" [style.backgroundImage]="docIcon">
|
||||
</div>
|
||||
<div class="doc-link">
|
||||
<a [textContent]="docName" class="title" [href]="docLink" target="_blank"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="more">
|
||||
<a *ngIf="description" (click)="showDescription=true">
|
||||
Подробнее <img src="/assets/images/icons/chevron_right_24dp.svg" alt="">
|
||||
</a>
|
||||
<div *ngIf="showDescription" class="modal" (click)="showDescription=false">
|
||||
<div [innerHTML]="description"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img [src]="image" class="full-screen" [hidden]="!showImage" (click)="showImage=false"/>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,34 +1,137 @@
|
|||
.member {
|
||||
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 32px;
|
||||
font-style: normal;
|
||||
|
||||
|
||||
|
||||
color:#2D2D2D;
|
||||
h1{
|
||||
font-family: PT Sans Narrow;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
font-size: 50px;
|
||||
line-height: 60px; /* 120% */
|
||||
font-weight: 700;
|
||||
.member{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
>*{
|
||||
width: 100%;
|
||||
}
|
||||
.doc{
|
||||
display: block;
|
||||
background: url('~src/assets/images/icons/document/document_60dp.svg') top left no-repeat;
|
||||
padding-left: 62px;
|
||||
min-height: 60px;
|
||||
>div{
|
||||
>*{margin-bottom: 16px;}
|
||||
}
|
||||
img{
|
||||
max-width: 345px;
|
||||
.menu {
|
||||
|
||||
}
|
||||
.image {
|
||||
// background: url("/assets/images/view-man.svg") center no-repeat;
|
||||
&.pointer{
|
||||
cursor: pointer;
|
||||
}
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
height: 338px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(45, 45, 45, 0.27);
|
||||
|
||||
}
|
||||
.name {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 32px; /* 133.333% */
|
||||
letter-spacing: 0.24px;
|
||||
color:#6C6C6C
|
||||
}
|
||||
.position {
|
||||
font-size: 20px;
|
||||
}
|
||||
.more {
|
||||
font-size: 20px;
|
||||
img{
|
||||
vertical-align: -6px;
|
||||
}
|
||||
}
|
||||
.link{
|
||||
font-size: 20px;
|
||||
display: inline-block;
|
||||
&.tel::before{
|
||||
content: '';
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
vertical-align: -3px;
|
||||
margin-right: 4px;
|
||||
background: url('~src/assets/images/icons/phone_blue_24dp.svg') center no-repeat;
|
||||
}
|
||||
&.mail::before{
|
||||
content: '';
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
vertical-align: -5px;
|
||||
margin-right: 4px;
|
||||
background: url('~src/assets/images/icons/mail_blue_24dp.svg') center no-repeat;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.doc{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.doc-icon{
|
||||
margin-left: -8px;
|
||||
flex-basis: 60px;
|
||||
align-items: flex-start;
|
||||
flex-shrink: 0;
|
||||
height: 60px;
|
||||
background: center no-repeat;
|
||||
background-image: url('~src/assets/images/icons/document/document_60dp.svg');
|
||||
background-size: contain;
|
||||
}
|
||||
.doc-link{
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
flex-basis: 200px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
a{
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
.description{
|
||||
color: #6C6C6C;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.full-screen{
|
||||
position: fixed;
|
||||
top:0;
|
||||
z-index: 200;
|
||||
left: 0;
|
||||
background-color: rgba(45, 45, 45, 0.63);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
object-fit: contain;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
.modal{
|
||||
position: fixed;
|
||||
top:0;
|
||||
z-index: 200;
|
||||
left: 0;
|
||||
background-color: rgba(45, 45, 45, 0.63);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
div{
|
||||
background-color: #fff;
|
||||
width: 50vw;
|
||||
min-width: 400px;
|
||||
border-radius: 12px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
.hidden{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,12 @@ import {Router} from "@angular/router";
|
|||
})
|
||||
export class MemberSectionItemComponent {
|
||||
@Input() id: any;
|
||||
@Input() editMode: boolean;
|
||||
@Input() member:any;
|
||||
@Input() section: any;
|
||||
public cover = '/assets/images/icons/view_man_273_370dp.svg';
|
||||
|
||||
public showImage:boolean;
|
||||
|
||||
constructor(
|
||||
private formsService: FormsService,
|
||||
|
|
@ -18,57 +24,84 @@ export class MemberSectionItemComponent {
|
|||
}
|
||||
|
||||
public item: any;
|
||||
public fullScreen: boolean;
|
||||
public fullScreen = false;
|
||||
public showDescription = false;
|
||||
|
||||
ngOnInit() {
|
||||
this.fetch();
|
||||
|
||||
}
|
||||
|
||||
fetch() {
|
||||
this.objectsService.fetchObject(this.id, {include: 'groups.fields.value'}).subscribe(res => {
|
||||
this.item = res.data;
|
||||
get modelId() {
|
||||
return this.section.id;
|
||||
}
|
||||
|
||||
|
||||
getFields(member){
|
||||
|
||||
let fields:any = {};
|
||||
member.groups.data.forEach(group =>{
|
||||
group.fields.data.forEach(field =>{
|
||||
if(field.name&&field?.value?.data[0]){
|
||||
|
||||
fields[field.name] = field?.value?.data[0]
|
||||
}
|
||||
})
|
||||
})
|
||||
return fields
|
||||
}
|
||||
|
||||
parseParam(param: string): any {
|
||||
let result = '';
|
||||
this?.item?.groups?.data[0]?.fields?.data.forEach(res => {
|
||||
if (param === res.name) {
|
||||
result = res.value.data[0];
|
||||
}
|
||||
});
|
||||
return result;
|
||||
get image(){
|
||||
return this.getFields(this.member)['member-image']?.links?.full || this.cover
|
||||
}
|
||||
get imageFull(){
|
||||
return !!this.getFields(this.member)['member-image']?.links?.full
|
||||
}
|
||||
|
||||
parseParamFile(param: string): string {
|
||||
return this.parseParam(param)?.links?.full;
|
||||
get name(){
|
||||
return this.getFields(this.member)['member-name-required']
|
||||
}
|
||||
|
||||
get name() {
|
||||
return this.parseParam('member-name-required');
|
||||
get position(){
|
||||
return this.getFields(this.member)['member-position-required']
|
||||
}
|
||||
|
||||
get photo() {
|
||||
return this.parseParamFile('member-image');
|
||||
get phone(){
|
||||
return this.getFields(this.member)['member-phone']
|
||||
}
|
||||
|
||||
get position() {
|
||||
return this.parseParam('member-position-required');
|
||||
get email(){
|
||||
return this.getFields(this.member)['member-email']
|
||||
}
|
||||
|
||||
get document() {
|
||||
return this.parseParamFile('member-doc');
|
||||
get docLink(){
|
||||
return this.getFields(this.member)['member-doc']?.links.download
|
||||
}
|
||||
get docIcon(){
|
||||
return this.iconUrl(this.getFields(this.member)['member-doc'].extension)
|
||||
}
|
||||
private iconUrl(name:string){
|
||||
if (name)return ICON_TYPE[name] && `url(/assets/images/icons/document/${ICON_TYPE[name]}.svg)`
|
||||
}
|
||||
get docName(){
|
||||
return this.getFields(this.member)['member-doc'].name
|
||||
}
|
||||
|
||||
get phone() {
|
||||
return this.parseParam('member-phone');
|
||||
get description(){
|
||||
return this.getFields(this.member)['member-description']
|
||||
}
|
||||
|
||||
get email() {
|
||||
return this.parseParam('member-email');
|
||||
}
|
||||
|
||||
get description() {
|
||||
return this.parseParam('member-description');
|
||||
}
|
||||
}
|
||||
|
||||
const ICON_TYPE:any={
|
||||
rtf:'DOC',
|
||||
docx:'DOC',
|
||||
doc:'DOC',
|
||||
xl:'XLS',
|
||||
xls:'XLS',
|
||||
xlsx:'XLS',
|
||||
ppt:'PPT',
|
||||
pptx:'PPT',
|
||||
jpg:'JPG',
|
||||
jpeg:'JPG',
|
||||
pdf:'PDF'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,10 @@
|
|||
</div>
|
||||
<div class="list">
|
||||
<div class="item" *ngFor="let member of members; let i=index;">
|
||||
<member-section-item [editMode]="editMode" [member]="member" [section]="section"></member-section-item>
|
||||
|
||||
<!--
|
||||
|
||||
<page-menu [editMode]="editMode" [section]="member" [modelId]="modelId" [modelType]="modelType"></page-menu>
|
||||
<img [src]="getFields(member)['member-image']?.links?.full || cover" class="image" (click)="showImage[i]=true"/>
|
||||
<div class="name" [innerHTML]="getFields(member)['member-name-required']"></div>
|
||||
|
|
@ -21,15 +25,18 @@
|
|||
</div>
|
||||
<div class="more">
|
||||
<a *ngIf="getFields(member)['member-description']" (click)="showDescription=true">
|
||||
<!-- [href]="getLink(member.id)" -->
|
||||
|
||||
Подробнее <img src="/assets/images/icons/chevron_right_24dp.svg" alt="">
|
||||
</a>
|
||||
<div *ngIf="showDescription" class="modal" (click)="showDescription=false">
|
||||
<div [innerHTML]="getFields(member)['member-description']"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <pre >{{getFields(member)|json}}</pre> -->
|
||||
|
||||
<img [src]="getFields(member)['member-image']?.links?.full || cover" class="full-screen" [hidden]="!showImage[i]" (click)="showImage[i]=false"/>
|
||||
-->
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -36,151 +36,22 @@
|
|||
align-content: flex-start;
|
||||
gap: 40px;
|
||||
|
||||
|
||||
.item {
|
||||
object-fit: cover;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.item{
|
||||
flex-grow: 0;
|
||||
flex-basis: 270px;
|
||||
flex-basis: 253px;
|
||||
width: 253px;
|
||||
gap: 16px;
|
||||
overflow: hidden;
|
||||
>*{
|
||||
width: 100%;
|
||||
}
|
||||
>div{
|
||||
>*{margin-bottom: 16px;}
|
||||
}
|
||||
.menu {
|
||||
|
||||
}
|
||||
.image {
|
||||
// background: url("/assets/images/view-man.svg") center no-repeat;
|
||||
|
||||
object-fit: cover;
|
||||
height: 370px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(45, 45, 45, 0.27);
|
||||
|
||||
}
|
||||
.image {
|
||||
cursor: pointer;
|
||||
// background: url("/assets/images/view-man.svg") center no-repeat;
|
||||
img {
|
||||
width: 273px;
|
||||
object-fit: cover;
|
||||
height: 370px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(45, 45, 45, 0.27);
|
||||
}
|
||||
}
|
||||
.name {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 32px; /* 133.333% */
|
||||
letter-spacing: 0.24px;
|
||||
color:#6C6C6C
|
||||
}
|
||||
.position {
|
||||
font-size: 20px;
|
||||
}
|
||||
.more {
|
||||
font-size: 20px;
|
||||
img{
|
||||
vertical-align: -6px;
|
||||
}
|
||||
}
|
||||
.link{
|
||||
font-size: 20px;
|
||||
display: inline-block;
|
||||
&.tel::before{
|
||||
content: '';
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
vertical-align: -3px;
|
||||
margin-right: 4px;
|
||||
background: url('~src/assets/images/icons/phone_blue_24dp.svg') center no-repeat;
|
||||
}
|
||||
&.mail::before{
|
||||
content: '';
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
vertical-align: -5px;
|
||||
margin-right: 4px;
|
||||
background: url('~src/assets/images/icons/mail_blue_24dp.svg') center no-repeat;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.doc{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.doc-icon{
|
||||
flex-basis: 60px;
|
||||
align-items: flex-start;
|
||||
flex-shrink: 0;
|
||||
height: 60px;
|
||||
background: center no-repeat;
|
||||
background-image: url('~src/assets/images/icons/document/document_60dp.svg');
|
||||
background-size: contain;
|
||||
}
|
||||
.doc-link{
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
flex-basis: 200px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
a{
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
.description{
|
||||
color: #6C6C6C;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.full-screen{
|
||||
position: fixed;
|
||||
top:0;
|
||||
z-index: 200;
|
||||
left: 0;
|
||||
background-color: rgba(45, 45, 45, 0.63);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
object-fit: contain;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
.modal{
|
||||
position: fixed;
|
||||
top:0;
|
||||
z-index: 200;
|
||||
left: 0;
|
||||
background-color: rgba(45, 45, 45, 0.63);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
div{
|
||||
background-color: #fff;
|
||||
width: 50vw;
|
||||
min-width: 400px;
|
||||
border-radius: 12px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
.hidden{
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@
|
|||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1264px) {
|
||||
@media screen and (max-width: 1330px) {
|
||||
.item {
|
||||
.bar {
|
||||
.mid {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ pagination {
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1264px) {
|
||||
@media screen and (max-width: 1330px) {
|
||||
registry-entry {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1264px) {
|
||||
@media screen and (max-width: 1330px) {
|
||||
.profile {
|
||||
padding: 24px 0;
|
||||
.user {
|
||||
|
|
|
|||
|
|
@ -160,7 +160,7 @@ html-section ul{
|
|||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 1264px) {
|
||||
@media screen and (min-width: 1330px) {
|
||||
.fullwidth {
|
||||
width: 100vw;
|
||||
margin-left: calc((1160px - 100vw) / 2);
|
||||
|
|
@ -197,7 +197,7 @@ html-section ul{
|
|||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1264px) {
|
||||
@media screen and (max-width: 1330px) {
|
||||
.limiter {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
@media screen and (max-width: 1264px){
|
||||
|
||||
@media screen and (max-width: 1330px){
|
||||
|
||||
.sub-menu{ display: none};
|
||||
|
||||
.grid-menu {
|
||||
a{
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
}
|
||||
|
||||
|
||||
a.active-mob span{
|
||||
a.current-item span{
|
||||
border-bottom: 2px solid rgba(255, 255, 255, 0.63);
|
||||
}
|
||||
}
|
||||
|
|
@ -92,167 +92,159 @@
|
|||
|
||||
|
||||
|
||||
@media screen and (min-width: 1264px){
|
||||
|
||||
@media screen and (min-width: 1330px){
|
||||
pages-menu {
|
||||
|
||||
pages-menu-item {
|
||||
|
||||
a {
|
||||
transition: all 0.3s;
|
||||
&:not(:hover).active{
|
||||
|
||||
>span{
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
&>pages-menu {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
&.hidden{
|
||||
pages-menu {
|
||||
display:none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.grid-menu>pages-menu>pages-menu-item>a.active:not(:hover)>span,
|
||||
.grid-menu>pages-menu>pages-menu-item.hidden>a.active>span {
|
||||
padding-top: 2px;
|
||||
border-bottom: 2px solid var(--blue-1) ;
|
||||
color: var(--blue-1);
|
||||
display: none;
|
||||
}
|
||||
|
||||
// level 1
|
||||
pages-menu {
|
||||
|
||||
.grid-menu>pages-menu {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
margin: 0 4px;
|
||||
overflow: hidden;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
|
||||
&>pages-menu-item {
|
||||
animation: slide-from-top-and-fade-in 0.2s;
|
||||
>pages-menu-item {
|
||||
animation: slide-from-top-and-fade-in 0.2s;
|
||||
padding: 0 20px;
|
||||
margin: 0 -4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
padding: 0 20px;
|
||||
margin: 0 -4px;
|
||||
&:hover:not(.hidden) {
|
||||
background-color: #004077;
|
||||
a{
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
align-items: center;
|
||||
|
||||
&>a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
a {
|
||||
color: #0070BA;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 32px;
|
||||
|
||||
|
||||
// &:hover {
|
||||
// text-decoration: none;
|
||||
// color: white;
|
||||
// background: #004077;
|
||||
// }
|
||||
}
|
||||
|
||||
&>:hover {
|
||||
& > pages-menu {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
&>pages-menu:first-child {
|
||||
&>pages-menu {
|
||||
display: flex;
|
||||
&.current-item{
|
||||
>span{
|
||||
display: inline-block;
|
||||
border-bottom: 2px solid #0070BA;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// level 2
|
||||
&>pages-menu {
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
max-width: 100%;
|
||||
background-color: #004077;
|
||||
z-index: 1000;
|
||||
padding: 24px calc( (100% - 1400px) / 2);;
|
||||
margin: 0;
|
||||
|
||||
&>pages-menu-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
text-align: left;
|
||||
|
||||
// &.hidden {display: none;}
|
||||
|
||||
&>a {
|
||||
font-family: PT Sans;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 32px; /* 160% */
|
||||
color: white;
|
||||
|
||||
&>span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
&.depth{
|
||||
>a::after{
|
||||
content:"";
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url('~src/assets/images/icons/chevron_right_24dp.svg');
|
||||
transform: rotateZ(90deg);
|
||||
transition: transform 0.3s;
|
||||
vertical-align: -6px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
&.hover {
|
||||
>a::after{
|
||||
transform: rotateZ(-90deg);
|
||||
}
|
||||
>pages-menu {
|
||||
position:absolute ;
|
||||
height: 68px;
|
||||
background-color: #FFF;
|
||||
top:104px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
>pages-menu-item{
|
||||
animation: slide-from-top-and-fade-in 0.2s;
|
||||
padding: 0 20px;
|
||||
margin: 0 -4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
// level 3
|
||||
&>pages-menu {
|
||||
position: relative;
|
||||
padding: 20px 0 0 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: left;
|
||||
&>pages-menu-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 20px 0 0 0;
|
||||
a{
|
||||
opacity: 0.63;
|
||||
}
|
||||
a:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.sub-menu{
|
||||
pages-menu {
|
||||
display: block;
|
||||
padding-left: 8px;
|
||||
}
|
||||
a{
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
>pages-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
>pages-menu-item{
|
||||
>a{
|
||||
display: none;
|
||||
};
|
||||
a{
|
||||
span{
|
||||
color: #6C6C6C;
|
||||
font-family: PT Sans Narrow;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 32px; /* 133.333% */
|
||||
letter-spacing: 0.24px;
|
||||
|
||||
}
|
||||
}
|
||||
:hover{
|
||||
color:var(--blue-2)
|
||||
}
|
||||
.current-item{
|
||||
color:var(--blue-1)
|
||||
}
|
||||
>pages-menu{
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
background: #FFF;
|
||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.27);
|
||||
}
|
||||
>pages-menu:not(.parent-item){
|
||||
display: none;
|
||||
|
||||
}
|
||||
}
|
||||
>pages-menu-item.depth{
|
||||
>pages-menu{
|
||||
|
||||
|
||||
>pages-menu-item{
|
||||
>a{display: none;}
|
||||
pages-menu{
|
||||
display: none;
|
||||
&.parent-item{
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue