Andrey
/
object-type-constructor-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

default cards section

master
Boris Voropaev 2024-01-16 15:18:04 +03:00
parent 225b221415
commit db75ec2807
10 changed files with 218 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/_modules/pages/sections/types/basic/cards/cards-section.module.ts
View File

@ -7,6 +7,7 @@ import {CardsItemPersonsComponent} from "@app/_modules/pages/sections/types/basi
import {CardsItemPartnersComponent} from "@app/_modules/pages/sections/types/basic/cards/items/item/types/partners/cards-item-partners.component";
import {SortablejsModule} from "@dustfoundation/ngx-sortablejs";
import { WidjetModule } from '@app/_modules/widjet/widjet.module';
import { CardsItemDefaultComponent } from './items/item/types/default/cards-item-default.component';
@NgModule({
@ -20,7 +21,8 @@ import { WidjetModule } from '@app/_modules/widjet/widjet.module';
CardsSectionItemsComponent,
CardsSectionItemComponent,
CardsItemPersonsComponent,
CardsItemPartnersComponent
CardsItemPartnersComponent,
CardsItemDefaultComponent
],
exports: [
CardsSectionComponent

1
src/app/_modules/pages/sections/types/basic/cards/items/item/cards-section-item.component.html
View File

@ -12,5 +12,6 @@
</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>
<cards-item-default *ngSwitchCase="'cards-section-default'" [card]="card"></cards-item-default>
<p *ngSwitchDefault>{{type?.name}} is undefined</p>
</div>

6
src/app/_modules/pages/sections/types/basic/cards/items/item/types/default/cards-item-default.component.html Normal file
View File

@ -0,0 +1,6 @@
<div [class]="style">
<div *ngIf="header" class="card-header">{{header}}</div>
<div *ngIf="subheader" class="card-subheader">{{subheader}}</div>
<div *ngIf="text" class="card-text">{{text}}</div>
<img *ngIf="image" [src]="image" class="card-image">
</div>

0
src/app/_modules/pages/sections/types/basic/cards/items/item/types/default/cards-item-default.component.scss Normal file
View File

47
src/app/_modules/pages/sections/types/basic/cards/items/item/types/default/cards-item-default.component.ts Normal file
View File

@ -0,0 +1,47 @@
import { Component, Input } from '@angular/core';
import {ObjectsService} from "@app/_services";
@Component({
selector: 'cards-item-default',
templateUrl: './cards-item-default.component.html',
styleUrls: ['./cards-item-default.component.scss']
})
export class CardsItemDefaultComponent {
constructor(private objectsService: ObjectsService) {}
@Input() card:any;
ngOnInit(){
console.log(this.card)
console.log(this.objectsService.getValue(this.card, 'card-style'))
console.log(this.objectsService.getValue(this.card, 'header'))
console.log(this.objectsService.getValue(this.card, 'subheader'))
console.log(this.objectsService.getValue(this.card, 'text'))
console.log(this.objectsService.getValue(this.card, 'image'))
console.log(this.objectsService.getValue(this.card, 'link'))
}
get style() {
return this.objectsService.getValue(this.card, 'card-style').name;
}
get header() {
return this.objectsService.getValue(this.card, 'header');
}
get subheader() {
return this.objectsService.getValue(this.card, 'subheader');
}
get text() {
return this.objectsService.getValue(this.card, 'text');
}
get image() {
return this.objectsService.getValue(this.card, 'image')?.links?.full+'?width=500';
}
get link() {
return this.objectsService.getValue(this.card, 'link');
}
}

13
src/nir/css/_grid.scss
View File

@ -166,7 +166,11 @@ pages-menu-item{
}
}
}
@media screen and (max-width: 1024px){
.main-content{
padding: 0px 24px 100px;
}
}
@media screen and (max-width: 720px){
jumbotron{
@ -187,4 +191,9 @@ pages-menu-item{
gap: 24px;
}
}
.main-content{
padding: 0px 16px 64px;
}
}

241
src/nir/css/_pages-section.scss
View File

@ -30,6 +30,11 @@ page-sections{
.section, page-sections{
display: flex;
align-items: center;
max-width: 100%;
page-section{
display: block;
max-width: 100%;
}
>div{
width: 100%;
header-section, html-section, .swiper-box{
@ -134,116 +139,6 @@ add-section, publications-list{
}
}
.page-section-cards{
width: 100%;
}
cards-section{
display: block;
width: 100%;
max-width: 1200px;
.cards-add{
direction: ltr;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-top: 1px solid var(--second-dis);
border-bottom: 1px solid var(--second-dis);
margin-bottom: 40px;
ico{
cursor: pointer;
svg{
color: var(--prime) !important;
}
&:hover{
svg{
color: var(--prime-act) !important;
}
}
}
}
}
cards-section-items{
.items {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 24px;
flex-wrap: wrap;
cards-section-item {
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)
}
.details a{
display: inline-flex;
align-items: center;
}
}
cards-item-partners{
a{
display: block;
width: 100%;
height: 252px;
padding: 16px;
border-radius: 12px;
border: 1px solid var(--second-dis);
background-color: var(--white);
overflow: hidden;
img{
object-fit: contain;
width: 100%;
height: 100%;
transition: transform 0.1s;
&:hover{
transform: scale(1.05);
}
}
}
}
}
}
}
images-section{
display: block;
@ -613,6 +508,132 @@ video-section{
}
}
cards-section{
display: block;
width: 100%;
max-width: 1100px;
.cards-add{
direction: ltr;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-top: 1px solid var(--second-dis);
border-bottom: 1px solid var(--second-dis);
margin-bottom: 40px;
ico{
cursor: pointer;
svg{
color: var(--prime) !important;
}
&:hover{
svg{
color: var(--prime-act) !important;
}
}
}
}
cards-section-items{
display: flex;
width: 100%;
}
}
.cards-section-default{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
cards-section-item{
flex-basis: 340px;
flex-shrink: 1;
}
.alternative{
display: flex;
flex-direction: column;
align-items: center;
.card-header{
font-family: PT Serif;
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: 125%;
color: var(--bk44);
order: 1;
text-align: center;
}
.card-image{
width: 120px;
height: 120px;
object-fit: scale-down;
}
.card-subheader, .card-text{
display: none;
}
}
.default{
display: flex;
flex-direction: column;
cursor: pointer;
margin-bottom: -8px;
.card-image{
width: 100%;
max-height: 212px;
height: calc(( 100vw - 32px ) * 0.62);
border: 1px solid var(--bk22);
border-radius: 8px;
object-fit: cover;
}
.card-subheader{
font-family: PT Sans;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 27px;
color: var(--bk66);
order: 1;
margin-top: 16px;
}
.card-header{
font-family: PT Serif;
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: 125%;
color: var(--bk44);
order: 2;
margin-top: 8px;
}
.card-text{
display: none;
}
&::after{
order: 3;
content: '';
width: 120px;
height: 24px;
background-image: url(/assets/images/ico/arrow_forward_24.svg);
}
&:hover{
.card-image{
border-color: var(--bk44);
}
.card-subheader{
color: var(--bk88);
}
.card-header{
color: var(--bk66);
}
&::after{
background-image: url(/assets/images/ico/arrow_forward_24_hover.svg);
}
}
}
}
@media screen and (max-width: 767px) {
.pagination {

3
src/nir/images/ico/arrow_forward_24.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="24" viewBox="0 0 120 24" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M114.586 10.5821L108.004 4L106.59 5.41421L112.175 11H4V13H112.168L106.59 18.5783L108.004 19.9925L114.586 13.4105L116 11.9963L114.586 10.5821Z" fill="#009CAD"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 313 B

3
src/nir/images/ico/arrow_forward_24_hover.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="24" viewBox="0 0 120 24" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M114.586 10.5821L108.004 4L106.59 5.41421L112.175 11H4V13H112.168L106.59 18.5783L108.004 19.9925L114.586 13.4105L116 11.9963L114.586 10.5821Z" fill="#006275"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 313 B

16
src/vniigaz-v2/css/_pages-section.scss
View File

@ -32,12 +32,12 @@ html-section {
text-indent: 30px;
ul{
padding: 0;
margin-bottom: 0;
margin-bottom: 32px;
>li{
list-style: none;
line-height: 32px;
text-indent: -32px;
padding-left: 32px;
padding-inline-start: 32px;
&::before{
display: inline-block;
content: "";
@ -45,13 +45,23 @@ html-section {
height: 2px;
background-color: var(--prime);
margin-bottom: 5px;
margin-right: 16px;
margin-inline-end: 16px;
}
}
*+li{
margin-top: 24px;
}
}
ol{
padding: 0;
>li{
line-height: 32px;
margin-inline-start: 24px;
margin-bottom: 32px;
text-indent: 0;
padding-inline-start: 8px;
}
}
ul+*{
margin-bottom: 20px;
}