page section css

master
Boris Voropaev 2023-11-29 15:28:34 +03:00
parent 03495e7b39
commit 1b74e60b76
14 changed files with 131 additions and 73 deletions

View File

@ -1,3 +1 @@
.add {
margin-bottom: 24px;
}

View File

@ -6,12 +6,14 @@ import {CardsSectionItemComponent} from "@app/_modules/pages/sections/types/basi
import {CardsItemPersonsComponent} from "@app/_modules/pages/sections/types/basic/cards/items/item/types/persons/cards-item-persons.component";
import {CardsItemPartnersComponent} from "@app/_modules/pages/sections/types/basic/cards/items/item/types/partners/cards-item-partners.component";
import {SortablejsModule} from "ngx-sortablejs";
import { WidjetModule } from '@app/_modules/widjet/widjet.module';
@NgModule({
imports: [
CommonModule,
SortablejsModule
SortablejsModule,
WidjetModule
],
declarations: [
CardsSectionComponent,

View File

@ -1,7 +1,14 @@
<div class="card" [ngSwitch]="type?.name">
<div class="menu" *ngIf="editMode">
<button type="button" (click)="edit()">edit</button>
<button type="button" (click)="delete()">delete</button>
<div class="block">
<a>
<ico ico="edit_24" (click)="edit()"></ico>
</a>
<a>
<ico ico="delete_24" (click)="delete()"></ico>
</a>
</div>
</div>
<cards-item-persons *ngSwitchCase="'cards-section-persons'" [card]="card"></cards-item-persons>
<cards-item-partners *ngSwitchCase="'cards-section-partners'" [card]="card"></cards-item-partners>

View File

@ -1,8 +1,8 @@
<div class="image">
<img [src]="image?.links?.thumb" />
<img *ngIf="image?.links?.thumb" [src]="image?.links?.thumb" />
</div>
<div class="title">{{name}}</div>
<div class="subtitle">{{position}}</div>
<div class="phone">{{phone}}</div>
<div class="email">{{email}}</div>
<div class="title" *ngIf="name">{{name}}</div>
<div class="subtitle" *ngIf="position">{{position}}</div>
<div class="phone" *ngIf="phone">{{phone}}</div>
<div class="email" *ngIf="email">{{email}}</div>

View File

@ -1,20 +1 @@
:host{
color: var(--second-act);
font-family: PT Sans;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 32px;
a {
color: var(--prime);
&:hover{
color: var(--prime-act);
};
}
>div{
display: block;
margin-top: -16px;
margin-bottom: -16px;
}
}

View File

@ -1,5 +0,0 @@
iframe {
width: 100%;
height: 400px;
margin-bottom: 40px;
}

View File

@ -1,5 +1,4 @@
iframe {
width: 100%;
height: 400px;
margin-bottom: 40px;
}

View File

@ -3,5 +3,4 @@ iframe {
max-width: 720px;
min-height: 400px;
height: 100%;
margin-bottom: 24px;
}

View File

@ -46,6 +46,9 @@ $pxxs:4px;
.menu {
display: flex;
.block {
a{
height: 24px;
}
background: #fff;
border: 1px solid var(--second-dis);
border-radius: $pxs;

View File

@ -42,11 +42,6 @@ export class JumbotronComponent {
this.subscription.unsubscribe();
}
get name(){
let name:string
if(this.currentPage){

View File

@ -31,7 +31,7 @@
}
$layout-width: 1280px;
$page-width: 900px;
$page-width: 840px;
$pxl:40px;
$pl:32px;
@ -46,6 +46,9 @@ $pxxs:4px;
.menu {
display: flex;
.block {
a{
height: 24px;
}
background: #fff;
border: 1px solid var(--second-dis);
border-radius: $pxs;
@ -212,6 +215,15 @@ body {
margin: 0 auto;
}
p {
font-family: PT Sans;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 32px;
margin: 0;
}
h1{
color: var(--white);
font-family: PT Sans Narrow;
@ -230,7 +242,6 @@ h2 {
font-weight: 700;
line-height: 60px; /* 120% */
letter-spacing: 0.5px;
padding-top: 16px;
margin:0;
}
h3 {
@ -241,7 +252,6 @@ h3 {
font-weight: 700;
line-height: 60px; /* 120% */
letter-spacing: 0.36px;
padding-top: 8px;
margin:0;
}
h4 {
@ -252,7 +262,6 @@ h4 {
font-weight: 700;
line-height: 44px; /* 133.333% */
letter-spacing: 0.24px;
padding-top: 8px;
margin:0;
}
@ -277,6 +286,12 @@ a {
}
}
iframe {
width: 100%;
height: 400px;
}
span.link {
font-weight: normal;
color: #86898E;

View File

@ -59,31 +59,27 @@ jumbotron{
}
left-content{
display: none;
}
right-content{
flex-basis: 180px;
flex-shrink: 0;
.item{display: none;}
pages-menu.current{
pages-menu-item>.item{
display: flex;
}
}
}
.content-sapce{
flex-grow: 1;
.content-grid{
display: flex;
>*{
flex-grow: 1;
justify-content: center;
left-content{
display: none;
}
right-content{
flex-shrink: 0;
pages-menu.current{
pages-menu-item>.item{
display: flex;
}
}
}
.main-content{
width: 100%;
max-width: $page-width;
max-width: 100%;
width: $page-width;
}
}

View File

@ -134,6 +134,7 @@ slider-menu{
}
}
right-content{
padding-top: 40px;
drop-down{
display: none;
}
@ -144,11 +145,14 @@ right-content{
}
.item.lvl-0{
padding: 0;
>a{
display: none;
}
&.nav+pages-menu{
pages-menu.lvl-2{
width: 400px;
margin-left: 40px;
border-radius: 8px;
background: var(#FFF);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.27);
@ -183,6 +187,8 @@ right-content{
&:not(.nav)+pages-menu{
width: 360px;
margin-left: 40px;
border-radius: 8px;
background: var(#FFF);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.27);

View File

@ -1,9 +1,22 @@
pages-section{
.section {
margin-top: 24px;
display: flex;
page-sections{
margin-top: 40px;
margin-bottom: 120px;
display: flex;
flex-direction: column;
gap:24px;
.section{
display: flex;
flex-direction: column;
}
h2{
margin-bottom: 8px;
}
h4 {
margin-bottom: -16px;
}
p+p{
padding-top: 16px;
}
}
@ -43,11 +56,60 @@ cards-section-items{
flex-wrap: wrap;
cards-section-item {
width: 240px;
.card {
height: 100%;
padding: 12px;
border: #dedede solid 1px;
width: 252px;
cards-item-persons{
display: flex;
flex-direction: column;
gap: 16px;
.image{
width: 100%;
height: 338px;
border-radius: 12px;
border: 1px solid var(--second-dis);
background: url('../images/view-man.svg') var(--white) center / 65% no-repeat;
overflow: hidden;
img{
object-fit: cover;
width: 100%;
height: 100%;
}
}
.title{
font-family: PT Sans Narrow;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 32px;
letter-spacing: 0.24px;
color: var(--second);
}
.subtitle{
color: var(--dark);
}
.subtitle{
color: var(--dark);
}
.email{
color:var(--prime)
}
}
cards-item-partners{
a{
display: block;
width: 100%;
height: 252px;
padding: 16px;
border-radius: 12px;
border: 1px solid var(--second-dis);
img{
object-fit: contain;
width: 100%;
height: 100%;
}
}
}
}
}