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

root page news cards

master
Boris Voropaev 2024-01-23 17:12:46 +03:00
parent 00ab8112ff
commit 5e28df51c0
11 changed files with 136 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/_modules/publications/list/publications-list.component.ts
View File

@ -56,6 +56,7 @@ export class PublicationsListComponent {
fetch(controls: any) {
controls.filters.page = this.page.id;
let include = ['posters'];
console.log('controls.page',controls.page)
let params = {page: controls.page || 1, filters: JSON.stringify(controls.filters), include: include.join(',')};
this.publicationsService.list(params).subscribe(result => {
this.listsService.result(this.listId).next(result);

13
src/gbu/component/layout/grid/grid.component.html
View File

@ -8,7 +8,18 @@
<div class="content-grid layout-corral">
<!-- <left-content></left-content> -->
<div class="main-content">
<router-outlet></router-outlet>
<div *ngIf="isRootPage" class="main-news">
<div *ngFor="let publications of news" class="main-news-item">
<a [routerLink]="publications.link" class="main-news-item-header">
<h3>{{publications.name}}</h3>
</a>
<a *ngFor="let page of publications.publications" class="main-news-item-card" [routerLink]="page.link">
<img src="{{page.img}}" alt="">
<h4>{{page.name}}</h4>
</a>
</div>
</div>
<router-outlet></router-outlet>
</div>
<right-content></right-content>
</div>

52
src/gbu/component/layout/grid/grid.component.ts
View File

@ -2,6 +2,7 @@ import {Component} from '@angular/core';
import {Subscription} from "rxjs";
import {ListsService} from "@app/_services";
import { PagesService } from '@app/_services/pages.service';
import {PublicationsService} from "@app/_services/publications.service";
@Component({
selector: 'grid',
@ -15,14 +16,62 @@ export class GridComponent {
public bright: number = 150;
public contrast: number = 100;
public news:any;
subscription?: Subscription;
constructor(
private listsService: ListsService, private pagesService: PagesService
private listsService: ListsService, private pagesService: PagesService, private publicationsService: PublicationsService
) {
}
ngOnInit() {
this.pagesService.currentPageSubject.subscribe(
currentPage=>{
if(currentPage && this.isRootPage){
console.log('currentPage',currentPage.link)
this.pagesService.find(currentPage.link,{include: 'children.children'}).subscribe(
resp=> {
let children = resp.data.children.data;
this.news = children.find(
(child:any) => {
if (!child.children) {
return false
} else {
return child.children.data.reduce(
(resp:boolean, page:any ) =>{
return resp && page.type.name == 'publications'
}, true
)
}
}
).children.data
this.news.forEach(page => {
this.publicationsService.list({
page:1,
filters:JSON.stringify({
page: page.id
}),
include: 'posters'
}).subscribe(
resp=>{
page.publications = resp.data.slice(0,3).map(
publication => ({
name: publication.name,
img: publication.posters.data[0].links.thumb,
link: publication.link
})
);
}
)
});
}
)
}
}
)
this.subscription = this.listsService.result('class').subscribe(val => {
this.classActive = val;
});
@ -36,4 +85,5 @@ export class GridComponent {
return this.pagesService.currentPage && this.pagesService.currentPage.parents && this.pagesService.currentPage.parents.data.length == 0
}
}

3
src/gbu/component/layout/header/header.component.html
View File

@ -16,7 +16,8 @@
</div>
<div class="header-contact">
<div class="header-contact-left">
<img src="assets/images/logo_gbu.png">
<a routerLink="/"><img src="assets/images/logo_gbu.png"></a>
<div>
<span>Государственное бюджетное<br>учреждение города Москвы</span><br>
<strong>«Жилищник Таганского района»</strong>

6
src/gbu/component/layout/jumbotron/jumbotron.component.html
View File

@ -1,7 +1,7 @@
<div class="space" *ngIf="!isRootPage">
<div class="jumbotron-content layout-corral">
<header-user-bar></header-user-bar>
<div class="breadcrumbs" *ngIf="parents.length>1">
<div class="breadcrumbs" *ngIf="parents?.length>1">
<div *ngFor="let parent of parents">
<a [routerLink]="parent.link">
<span>{{parent.name}}</span>
@ -11,7 +11,7 @@
<div>{{currentPage.name}}</div>
</div>
<h1>{{name}}</h1>
<img [src]="pagePicture">
<img [src]="pagePicture" *ngIf="pagePicture">
</div>
</div>
@ -19,7 +19,7 @@
<div class="space root-page" *ngIf="isRootPage">
<div class="jumbotron-content layout-corral">
<header-user-bar></header-user-bar>
<div class="breadcrumbs" *ngIf="parents.length>1">
<div class="breadcrumbs" *ngIf="parents?.length>1">
<div *ngFor="let parent of parents">
<a [routerLink]="parent.link">
<span>{{parent.name}}</span>

8
src/gbu/component/layout/jumbotron/jumbotron.component.ts
View File

@ -28,8 +28,8 @@ export class JumbotronComponent {
if(this.currentPage.picture){
this.pagePicture = this.currentPage.picture.data.links.open
}else{
let parents = this.currentPage.parents.data
let content = parents.map(page=>page.picture).filter(page=>page)
let parents = this.currentPage.parents?.data
let content = parents?.map(page=>page.picture).filter(page=>page)
this.pagePicture = content.pop()?.data.links.open
}
}else{this.pagePicture = null;}
@ -45,7 +45,7 @@ export class JumbotronComponent {
if(this.currentPage){
name = this.currentPage?.h1 || this.currentPage?.name;
let parents = this.currentPage?.parents?.data
if (parents[1]) name = parents[1].h1|| parents[1].name
if (parents&&parents[1]) name = parents[1].h1|| parents[1].name
}
return name
}
@ -91,7 +91,7 @@ export class JumbotronComponent {
}
get isRootPage(){
return !this.pagesService.currentPage?.parents.data.length && this.pagesService.currentPage
return !this.pagesService.currentPage?.parents?.data.length && this.pagesService.currentPage
}
get since(){

17
src/gbu/component/layout/right-content/right-content.component.html
View File

@ -1,19 +1,24 @@
<a>
<a class="right-card">
<ico ico="web_req_48" [size]="48"></ico>
<span>Электронное обращение</span>
</a>
<a>
<a class="right-card">
<ico ico="lightbulb_48" [size]="48"></ico>
<span>Прием показаний и оплата электроэнергии</span>
</a>
<a>
<a class="right-card">
<ico ico="water_48" [size]="48"></ico>
<span>Прием показаний приборов учета воды</span>
</a>
<a>
<a class="right-card">
<ico ico="get_n_pay_48" [size]="48"></ico>
<span>Получить и оплатить ЕПД</span>
</a>
<img src="assets/images/adv_00.png">
<img src="assets/images/adv_01.png">
<a class="right-baner">
<img src="assets/images/adv_00.png">
</a>
<a class="right-baner">
<img src="assets/images/adv_01.png">
</a>

10
src/gbu/css/_basics.scss
View File

@ -258,14 +258,12 @@ h3 {
margin-bottom: 0px;
}
h4 {
color: var(--second-act);
font-family:"PT Serif";
font-size: 24px;
color: #6A6868;
font-family: "PT Serif";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 32px; /* 133.333% */
letter-spacing: 0.24px;
margin:0;
line-height: 25px;
}
a {

40
src/gbu/css/_grid.scss
View File

@ -137,24 +137,24 @@ jumbotron{
}
right-content{
width: 272px;
width: 258px;
display: flex;
flex-direction: column;
gap: 24px;
a{
.right-card{
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
padding: 24px;
gap:16px;
border-radius: 4px;
span{
text-align: center;
}
}
img{
width: 100%;
border-radius: 4px;
}
}
.main-content{
@ -203,6 +203,40 @@ pages-menu-item{
margin-top: 32px;
}
.main-news{
.main-news-item{
display: flex;
flex-wrap: wrap;
gap: 32px;
margin-bottom: 32px;
.main-news-item-header{
width: 100%;
margin-bottom: -8px;
h3{
color: #000;
}
}
.main-news-item-card{
width: 308px;
flex-grow: 1;
display: flex;
flex-direction: column;
background-color: #fff;
border-radius: 4px;
overflow: hidden;
img {
width: 100%;
height: 308px;
object-fit: cover;
}
h4{
margin: 16px;
}
}
}
}
@media screen and (max-width: 1330px){
.space{

5
src/gbu/css/_main-menu.scss
View File

@ -56,9 +56,12 @@ header{
align-items: center;
gap: 8px;
img{
a{
width: 91px;
height: 96px;
img{
width: 100%;
}
}
div{
width: 280px;

8
src/gbu/css/_pages-section.scss
View File

@ -656,7 +656,9 @@ publications-list{
}
publication-page {
background-color: #FFF;
display: block;
padding: 32px;
.date{
color: var(--second);
margin-bottom: 16px;
@ -737,6 +739,10 @@ publication-page {
}
page-sections{
padding: 0;
}
}