grid & jumbotron
Boris Voropaev
parent
ba80364349
commit
bdac1f5495
|
|
@ -2,18 +2,9 @@
|
|||
<router-outlet name="slider"></router-outlet>
|
||||
|
||||
|
||||
|
||||
<!-- <div class="wrapper {{classActive}}">
|
||||
<header></header>
|
||||
<div class="content">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<footer></footer>
|
||||
|
||||
</div> -->
|
||||
|
||||
<div class="wrapper">
|
||||
<header></header>
|
||||
<header class="space"></header>
|
||||
<jumbotron></jumbotron>
|
||||
<div class="content">
|
||||
<left-content></left-content>
|
||||
<div class="main-content">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="header">
|
||||
<div class="header layout-corral">
|
||||
<a class="burger" (click)="openMobileMenu()">
|
||||
<ico ico="burger_blue_40dp" [size]="36"></ico>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
<div class="jumbotron-bg space" [ngStyle]="back">
|
||||
<div class="jumbotron-content layout-corral">
|
||||
<header-user-bar></header-user-bar>
|
||||
<h1>{{name}}</h1>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space jumbotron-edit-field" *ngIf="editable">
|
||||
<div class="page-corral jumbotron-edit-field-row switch-host" (click)="toggleEditMode()">
|
||||
Режим редактирования
|
||||
<switch [val]="editMode"></switch>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="background" [ngStyle]="{'background-image':background}" *ngIf="pageName">
|
||||
<div class="left-content">
|
||||
<header-user-bar></header-user-bar>
|
||||
<h1 class="h1-jumbotron">
|
||||
{{pageName}}
|
||||
</h1>
|
||||
<div class="menu" *ngIf="editMode">
|
||||
<div class="block">
|
||||
<a (click)="editBackground()"><ico ico="edit_24"></ico></a>
|
||||
<a (click)="removeBackground()"><ico ico="delete_24"></ico></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="edit-field" *ngIf="editable">
|
||||
<div class="edit-field-row switch-host" (click)="toggleEditMode()">
|
||||
Режим редактирования
|
||||
<switch [val]="editMode"></switch>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue