Skip to content

Commit 7071524

Browse files
jsfrochajsfrocha
committed
ContentDetailComponent Finished;
1 parent 2f041f6 commit 7071524

File tree

8 files changed

+226
-35
lines changed

8 files changed

+226
-35
lines changed

‎src/app/screens/content-detail/content-detail.component.html

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@
66
backUrl="/conteudo"
77
></t4e-page-header>
88
<section class="t4e-content-item">
9-
<div class="content__media-player">
9+
<div class="content__media-player" *ngIf="contentItem.videoUrl">
1010
<t4e-media-player
11-
*ngIf="contentItem.videoUrl"
1211
[videoUrl]="contentItem.videoUrl"
1312
[videoPoster]="getVideoPoster()"
1413
></t4e-media-player>
1514
</div>
15+
<div class="content__image" *ngIf="contentItem.imageUrl" [ngStyle]="{backgroundImage: 'url('+contentItem.imageUrl+')'}"></div>
1616
<div class="content__info">
1717
<div class="block" *ngFor="let block of contentInfoBlocks">
1818
<div class="block__title">{{block.title}}</div>
@@ -24,6 +24,26 @@
2424
<div class="text" [innerHTML]="contentItem.text"></div>
2525
</div>
2626
<div class="content__tags">
27-
27+
<div class="title">Tags</div>
28+
<div class="t4e-pills-list">
29+
<div class="pill-item"
30+
*ngIf="contentItem.provider"
31+
[routerLink]="['/conteudo']"
32+
[queryParams]="{provider: contentItem.provider.id}">
33+
{{contentItem.provider.title}}
34+
</div>
35+
<div class="pill-item"
36+
*ngIf="contentItem.stakeholder"
37+
[routerLink]="['/conteudo']"
38+
[queryParams]="{stakeholder: contentItem.stakeholder.id}">
39+
{{contentItem.stakeholder.title}}
40+
</div>
41+
<div class="pill-item"
42+
*ngIf="contentItem.tags && contentItem.tags[0]"
43+
[routerLink]="['/conteudo']"
44+
[queryParams]="{tag: contentItem.tags[0].id}">
45+
{{contentItem.tags[0].title}}
46+
</div>
47+
</div>
2848
</div>
2949
</section>

‎src/app/screens/content-detail/content-detail.component.scss

Lines changed: 52 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,26 @@
1010
margin-bottom: 60px;
1111
}
1212

13+
&__image {
14+
width: 100%;
15+
height: 570px;
16+
17+
background-repeat: no-repeat;
18+
background-size: cover;
19+
background-position: center;
20+
21+
border-radius: 40px;
22+
margin-bottom: 60px;
23+
24+
@include media-tablet {
25+
height: 400px;
26+
}
27+
28+
@include media-mobile-l {
29+
height: 200px;
30+
}
31+
}
32+
1333
&__info {
1434
display: flex;
1535
margin-left: 90px;
@@ -21,7 +41,8 @@
2141
margin-right: 45px;
2242
}
2343

24-
@include media-tablet {
44+
@include media-laptop-sm {
45+
justify-content: space-between;
2546
margin-right: 0;
2647
margin-left: 0;
2748
}
@@ -31,6 +52,10 @@
3152

3253
@include media-tablet {
3354
margin-right: 24px;
55+
56+
&:last-of-type {
57+
margin-right: 0;
58+
}
3459
}
3560

3661
&__title {
@@ -39,15 +64,20 @@
3964
}
4065

4166
&__value {
42-
@include font('bodyTextLarge');
67+
@include font('kpi');
4368
color: $color-primary-blue;
69+
70+
@include media-tablet {
71+
@include font('bodyText');
72+
}
4473
}
4574
}
4675
}
4776

4877
&__text {
4978
margin-left: 90px;
5079
margin-right: 90px;
80+
@include bodyTextFormatting();
5181

5282
@include media-laptop {
5383
margin-left: 45px;
@@ -65,12 +95,31 @@
6595
}
6696

6797
.text {
68-
@include bodyTextFormatting()
98+
@include font('bodyText', 130%);
99+
margin-bottom: 60px;
69100
}
70101
}
71102

72103
&__tags {
104+
margin-left: 90px;
105+
margin-right: 90px;
106+
margin-bottom: 120px;
107+
108+
@include media-laptop {
109+
margin-left: 45px;
110+
margin-right: 45px;
111+
}
112+
113+
@include media-tablet {
114+
margin-right: 0;
115+
margin-left: 0;
116+
}
73117

118+
.title {
119+
@include font('captions');
120+
color: $color-text-blue;
121+
margin-bottom: 16px;
122+
}
74123
}
75124
}
76125
}

‎src/app/screens/content-detail/content-detail.component.ts

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component, OnInit } from '@angular/core';
22
import {ActivatedRoute} from '@angular/router';
33
import {IContentItem} from '../../interfaces/content-item.interface';
4+
import {IPillItem} from '../../interfaces/pill-item.interface';
45

56
@Component({
67
selector: 't4e-content-detail',
@@ -12,6 +13,7 @@ export class ContentDetailComponent implements OnInit {
1213
contentItem: IContentItem
1314
loading: boolean;
1415
contentInfoBlocks: Array<{ title: string, value: string }> = [];
16+
tagPills: Array<IPillItem> = [];
1517

1618
constructor(
1719
private route: ActivatedRoute
@@ -22,6 +24,28 @@ export class ContentDetailComponent implements OnInit {
2224
this.loading = queryResult.data.loading;
2325
this.contentItem = queryResult.data.contentItem;
2426
this.contentInfoBlocks = this.getContentInfoBlocks();
27+
this.tagPills = [];
28+
if (this.contentItem.stakeholder) {
29+
this.tagPills.push({
30+
title: this.contentItem.stakeholder?.title,
31+
actionType: 'NAVIGATE',
32+
actionValue: '/conteudo?stakeholder='+this.contentItem.stakeholder?.id
33+
});
34+
}
35+
if (this.contentItem.provider) {
36+
this.tagPills.push({
37+
title: this.contentItem.provider?.title,
38+
actionType: 'NAVIGATE',
39+
actionValue: '/conteudo?provider='+this.contentItem.provider?.id
40+
})
41+
}
42+
if (this.contentItem.tags) {
43+
this.tagPills.push({
44+
title: this.contentItem.tags[0]?.title,
45+
actionType: 'NAVIGATE',
46+
actionValue: '/conteudo?tag='+this.contentItem.tags[0]?.id
47+
})
48+
}
2549
})
2650

2751

@@ -71,7 +95,11 @@ export class ContentDetailComponent implements OnInit {
7195
const wordCount = this.contentItem.text.split(' ').length;
7296
const readingTime = wordCount / WORDS_PER_MINUTE;
7397

74-
return readingTime.toFixed(0);
98+
if (readingTime < 1) {
99+
return 1;
100+
} else {
101+
return readingTime.toFixed(0);
102+
}
75103
}
76104

77105
getContentInfoBlocks(): Array<{ title: string, value: string }> {
@@ -87,7 +115,7 @@ export class ContentDetailComponent implements OnInit {
87115
break;
88116
case 'CONTENT-ARTICLE':
89117
infoBlocks.push({ title: 'Conteúdo', value: 'Artigo' })
90-
infoBlocks.push({ title: 'Tempo Leitura', value: this.getReadingTime() })
118+
infoBlocks.push({ title: 'Leitura', value: this.getReadingTime() + ' min' })
91119
infoBlocks.push({ title: 'Temática', value: this.contentItem.tags[0].title })
92120
break;
93121
default:

‎src/app/shared/shared.module.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ import { FooterComponent } from './components/footer/footer.component';
77
import { CarouselModule } from 'ngx-owl-carousel-o';
88
import { BlogArticleCardComponent } from './components/blog-article-card/blog-article-card.component';
99
import { FiltersComponent } from './components/filters/filters.component';
10-
import {ReactiveFormsModule} from '@angular/forms';
10+
import { ReactiveFormsModule} from '@angular/forms';
1111
import { ContentCardComponent } from './components/content-card/content-card.component';
1212
import { FilterDrawerComponent } from './components/filter-drawer/filter-drawer.component';
13-
import {ContentItemsService} from './services/content-items.service';
13+
import { ContentItemsService } from './services/content-items.service';
1414
import { MediaPlayerComponent } from './components/media-player/media-player.component';
1515

1616
const SHARED_COMPONENTS = [
@@ -30,7 +30,7 @@ const SHARED_SERVICES = [
3030

3131
@NgModule({
3232
declarations: [
33-
...SHARED_COMPONENTS
33+
...SHARED_COMPONENTS,
3434
],
3535
providers: [
3636
...SHARED_SERVICES

‎src/assets/pages/content-detail/top-image-mask.png

642 KB
Loading

‎src/theme/_components.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.t4e-pills-list {
2+
display: flex;
3+
flex-wrap: wrap;
4+
5+
.pill-item {
6+
@include font('captions');
7+
border-radius: 16px;
8+
padding: 7px 16px;
9+
background-color: lighten($color-primary-blue, 35%);
10+
color: $color-primary-blue;
11+
margin-right: 4px;
12+
}
13+
}

0 commit comments

Comments
 (0)