From db75ec2807dd1cdf7ad47a69f6c860558f3f7fed Mon Sep 17 00:00:00 2001 From: Boris Voropaev Date: Tue, 16 Jan 2024 15:18:04 +0300 Subject: [PATCH] default cards section --- .../types/basic/cards/cards-section.module.ts | 4 +- .../item/cards-section-item.component.html | 1 + .../default/cards-item-default.component.html | 6 + .../default/cards-item-default.component.scss | 0 .../default/cards-item-default.component.ts | 47 ++++ src/nir/css/_grid.scss | 13 +- src/nir/css/_pages-section.scss | 241 ++++++++++-------- src/nir/images/ico/arrow_forward_24.svg | 3 + src/nir/images/ico/arrow_forward_24_hover.svg | 3 + src/vniigaz-v2/css/_pages-section.scss | 16 +- 10 files changed, 218 insertions(+), 116 deletions(-) create mode 100644 src/app/_modules/pages/sections/types/basic/cards/items/item/types/default/cards-item-default.component.html create mode 100644 src/app/_modules/pages/sections/types/basic/cards/items/item/types/default/cards-item-default.component.scss create mode 100644 src/app/_modules/pages/sections/types/basic/cards/items/item/types/default/cards-item-default.component.ts create mode 100644 src/nir/images/ico/arrow_forward_24.svg create mode 100644 src/nir/images/ico/arrow_forward_24_hover.svg diff --git a/src/app/_modules/pages/sections/types/basic/cards/cards-section.module.ts b/src/app/_modules/pages/sections/types/basic/cards/cards-section.module.ts index 9259510..0aed597 100644 --- a/src/app/_modules/pages/sections/types/basic/cards/cards-section.module.ts +++ b/src/app/_modules/pages/sections/types/basic/cards/cards-section.module.ts @@ -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 diff --git a/src/app/_modules/pages/sections/types/basic/cards/items/item/cards-section-item.component.html b/src/app/_modules/pages/sections/types/basic/cards/items/item/cards-section-item.component.html index ab6d3f5..fd899a6 100644 --- a/src/app/_modules/pages/sections/types/basic/cards/items/item/cards-section-item.component.html +++ b/src/app/_modules/pages/sections/types/basic/cards/items/item/cards-section-item.component.html @@ -12,5 +12,6 @@ +

{{type?.name}} is undefined

diff --git a/src/app/_modules/pages/sections/types/basic/cards/items/item/types/default/cards-item-default.component.html b/src/app/_modules/pages/sections/types/basic/cards/items/item/types/default/cards-item-default.component.html new file mode 100644 index 0000000..d878380 --- /dev/null +++ b/src/app/_modules/pages/sections/types/basic/cards/items/item/types/default/cards-item-default.component.html @@ -0,0 +1,6 @@ +
+
{{header}}
+
{{subheader}}
+
{{text}}
+ +
\ No newline at end of file diff --git a/src/app/_modules/pages/sections/types/basic/cards/items/item/types/default/cards-item-default.component.scss b/src/app/_modules/pages/sections/types/basic/cards/items/item/types/default/cards-item-default.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/_modules/pages/sections/types/basic/cards/items/item/types/default/cards-item-default.component.ts b/src/app/_modules/pages/sections/types/basic/cards/items/item/types/default/cards-item-default.component.ts new file mode 100644 index 0000000..7bf0801 --- /dev/null +++ b/src/app/_modules/pages/sections/types/basic/cards/items/item/types/default/cards-item-default.component.ts @@ -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'); + } + + + +} diff --git a/src/nir/css/_grid.scss b/src/nir/css/_grid.scss index 0c66b10..79925b2 100644 --- a/src/nir/css/_grid.scss +++ b/src/nir/css/_grid.scss @@ -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; } -} \ No newline at end of file + .main-content{ + padding: 0px 16px 64px; + } + +} + diff --git a/src/nir/css/_pages-section.scss b/src/nir/css/_pages-section.scss index dc7b39b..fd1d4b6 100644 --- a/src/nir/css/_pages-section.scss +++ b/src/nir/css/_pages-section.scss @@ -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 { diff --git a/src/nir/images/ico/arrow_forward_24.svg b/src/nir/images/ico/arrow_forward_24.svg new file mode 100644 index 0000000..c03312e --- /dev/null +++ b/src/nir/images/ico/arrow_forward_24.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/nir/images/ico/arrow_forward_24_hover.svg b/src/nir/images/ico/arrow_forward_24_hover.svg new file mode 100644 index 0000000..87b330f --- /dev/null +++ b/src/nir/images/ico/arrow_forward_24_hover.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/vniigaz-v2/css/_pages-section.scss b/src/vniigaz-v2/css/_pages-section.scss index f68d4f2..7b707cb 100644 --- a/src/vniigaz-v2/css/_pages-section.scss +++ b/src/vniigaz-v2/css/_pages-section.scss @@ -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; }