Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: redesign of blog article page #411

Merged
merged 2 commits into from
Nov 16, 2023
Merged

feat: redesign of blog article page #411

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0939844
feat: redesign of blog article page
ZhmenZH Nov 15, 2023
ff0e6ad
Merge pull request #410 from valor-software/feat/redesign-blog-articl…
ZhmenZH Nov 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions libs/common-docs/src/models/article.interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ export interface IArticle {
authorImg?: string;
secondAuthor?: string;
secondAuthorImg?: string;
secondAuthorPosition?: string;
domains: string[];
language: string;
bgImg: string;
Expand All @@ -13,7 +14,4 @@ export interface IArticle {
seoDescription?: string;
order?: number;
readingTime: string;

// ToDO: implement change of the languages
languages?: string[];
}
69 changes: 37 additions & 32 deletions libs/route-pages/blog/src/components/article/article.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,47 +4,52 @@
<ng-container *ngIf="changeBreadCrumbTitle?.length">
<breadCrumbs [changeTitle]="changeBreadCrumbTitle" class="w-full hidden md:block"></breadCrumbs>
</ng-container>
<div
class="w-full flex flex-col items-center md:mt-12 lg:mt-32 max-w-full lg:max-w-75% text-center text-light_title_col">
<p class="text-20 mb-4">{{article.date | date:'MMMM d, y'}}</p>
<p class="text-large font-bold md:text-64 leading-66 mb-8 md:mb-14">{{article.title}}</p>

<div *ngIf="article.author && article.secondAuthor; else oneAuthorTemplate">
<ng-template [ngTemplateOutlet]="authorImageTemplate"></ng-template>
<p class="md:text-large text-24 mb-4">{{article.author}} and {{article.secondAuthor}}</p>
</div>

<ng-template #oneAuthorTemplate>
<ng-template [ngTemplateOutlet]="authorImageTemplate"></ng-template>
<p class="md:text-large text-24 mb-4">{{article.author}}</p>
</ng-template>

<ng-template #authorImageTemplate>
<div class="w-70 h-70 rounded-full overflow-hidden mb-4"
*ngIf="article.authorImg && !article.secondAuthorImg">
<img class="w-full h-full object-cover"
[src]="article.authorImg"
[alt]="article.author">
</div>
<div class="flex flex-col-reverse lg:flex-row md:mt-12 lg:mt-32 justify-between">
<div class="article-info text-light_title_col">
<p class="text-20 mb-4 mt-4 lg:mt-0">{{article.date | date:'MMMM d, y'}}</p>
<p class="text-4xl leading-[40px] font-bold lg:text-48 lg:leading-[48px] text-left">{{article.title}}</p>

<div class="flex justify-center" *ngIf="article.authorImg && article.secondAuthorImg">
<div class="w-70 h-70 rounded-full overflow-hidden mb-4 mr-8">
<img class="w-full h-full object-cover"
[src]="article.authorImg"
[alt]="article.author">
<div class="flex flex-col md:flex-row mt-4 lg:mt-8">
<div class="flex author-background items-center">
<div class="w-10 h-10 rounded-full overflow-hidden"
*ngIf="article.authorImg">
<img class="w-full h-full object-cover"
[src]="article.authorImg"
[alt]="article.author">
</div>

<div class="flex flex-col items-start ml-4">
<span class="text-lg">{{article.author}}</span>
<span class="text-sm" *ngIf="article.position">{{article.position}}</span>
</div>
</div>

<div class="w-70 h-70 rounded-full overflow-hidden mb-4">
<img class="w-full h-full object-cover"
[src]="article.secondAuthorImg"
[alt]="article.secondAuthor">
<div class="flex mt-4 md:mt-0 md:ml-6 author-background items-center" *ngIf="article.secondAuthorImg">
<div class="w-10 h-10 rounded-full overflow-hidden"
*ngIf="article.secondAuthorImg">
<img class="w-full h-full object-cover"
[src]="article.secondAuthorImg"
[alt]="article.secondAuthor">
</div>

<div class="flex flex-col items-start ml-4">
<span class="text-lg">{{article.secondAuthor}}</span>
<span class="text-sm" *ngIf="article.secondAuthorPosition">{{article.secondAuthorPosition}}</span>
</div>
</div>
</div>

</ng-template>
</div>

<p class="text-20" *ngIf="article.position">{{article.position}}</p>
<div class="img-container-auto zoom-img-scale article-image">
<img
class="w-full h-full object-cover"
[src]="article.bgImg"
[alt]="article.title">
</div>
</div>

</div>
</section>
<section class="landing-section" *ngIf="article.content">
Expand Down
29 changes: 29 additions & 0 deletions libs/route-pages/blog/src/components/article/article.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
// ToDo: add base styles import
$bp-large: 1024px;

::ng-deep.turbo-table {
margin-top: 25px;
}
Expand Down Expand Up @@ -64,4 +67,30 @@

::ng-deep.block-citation > blockquote > .paragraph:first-of-type:after {
content: no-close-quote;
}

.article-info {
width: 47%;
display: flex;
flex-direction: column;
align-items: start;

@media (max-width: $bp-large) {
width: 100%;
}
}

.article-image {
height: 100%;
width: 47%;

@media (max-width: $bp-large) {
width: 100%;
}
}

.author-background {
background-color: #161617;
padding: 4px 12px 4px 6px;
border-radius: 73px;
}
73 changes: 30 additions & 43 deletions libs/route-pages/blog/src/components/blog-item/blog-item.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<div class="blog-item text-light_title_col" *ngIf="_article">

<ng-container *ngIf="!showLatestArticles && !showActiveArticle">

<div class="img-container-auto zoom-img-scale">
Expand All @@ -9,36 +8,34 @@
[alt]="_article.title">
</div>

<div class="text-2xl w-full text-light_title_col leading-40 font-bold mt-6 two-line-limit">
<p>{{_article.title}}</p>
</div>

<div *ngIf="_article.readingTime || _article.languages?.length"
class="flex mt-6"
[ngClass]="_article.languages?.length ? 'justify-between' : 'justify-end'">
<div *ngIf="_article.languages?.length"
class="flex items-center">
<span class="mr-2 grey-color">Also Available:</span>
<span>English</span>
<span class="arrow-down"></span>
<div class="flex flex-col card-background justify-between">
<div class="flex flex-col">
<div class="text-2xl w-full text-light_title_col leading-7 font-bold mt-4 two-line-limit">
<p>{{_article.title}}</p>
</div>

<div *ngIf="_article.readingTime"
class="flex mt-2 justify-end">
<span class="grey-color">{{_article?.readingTime + ' read'}}</span>
</div>

<div class="mt-2 three-line-limit"
[ngClass]="_article?.readingTime ? 'mt-2' : 'mt-4'">
<span>{{_article.seoDescription}}</span>
</div>
</div>

<span *ngIf="_article.readingTime"
class="grey-color">{{_article?.readingTime + ' read'}}</span>
</div>
<div class="flex flex-col mt-2">
<span class="domains" [innerHtml]="_article.domains | domainName"></span>

<div class="mt-4 four-line-limit">
<span>{{_article.seoDescription}}</span>
</div>
<div class="flex items-center mt-2">
<span class="mr-4 text-lg">By {{_article.author}}</span>
<span class="grey-color text-base">{{_article.date ?? '' | date}}</span>
</div>
</div>

<div class="mt-4">
<span class="domains" [innerHtml]="_article.domains | domainName"></span>
</div>

<div class="flex items-center mt-4">
<span class="mr-4 text-lg">By {{_article.author}}</span>
<span class="grey-color text-base">{{_article.date ?? '' | date}}</span>
</div>
</ng-container>

<ng-container *ngIf="showLatestArticles && _article.title">
Expand All @@ -49,10 +46,9 @@
[alt]="_article.title">
</div>

<div class="text-2xl w-full text-light_title_col leading-40 font-bold mt-6 two-line-limit">
<div class="text-2xl w-full text-light_title_col leading-7 font-bold mt-4 two-line-limit">
<p>{{_article?.title}}</p>
</div>

</ng-container>

<ng-container *ngIf="showActiveArticle">
Expand All @@ -64,33 +60,24 @@
</div>

<div
class="text-4xl lg:text-5xl w-full text-light_title_col leading-32 lg:leading-46 font-bold mt-8 lg:mt-12 two-line-limit">
class="text-4xl lg:text-5xl w-full text-light_title_col leading-32 lg:leading-46 font-bold mt-8 three-line-limit">
<p>{{_article.title}}</p>
</div>

<div *ngIf="_article.readingTime || _article.languages?.length"
class="flex mt-6 lg:mt-10"
[ngClass]="_article.languages?.length ? 'justify-between' : 'justify-end'">
<div *ngIf="_article.languages?.length"
class="flex items-center">
<span class="mr-2 grey-color">Also Available:</span>
<span>English</span>
<span class="arrow-down"></span>
</div>

<span *ngIf="_article.readingTime"
class="grey-color">{{_article?.readingTime + ' read'}}</span>
<div *ngIf="_article.readingTime"
class="flex mt-4 justify-end">
<span class="grey-color">{{_article?.readingTime + ' read'}}</span>
</div>

<div class="mt-6 four-line-limit">
<div class="mt-4 three-line-limit">
<span>{{_article.seoDescription}}</span>
</div>

<div class="mt-6">
<div class="mt-4">
<span class="domains" [innerHtml]="_article.domains | domainName"></span>
</div>

<div class="flex items-center mt-8">
<div class="flex items-center mt-4">
<span class="mr-4 text-lg">By {{_article.author}}</span>
<span class="grey-color text-base">{{_article.date ?? '' | date}}</span>
</div>
Expand Down
14 changes: 14 additions & 0 deletions libs/route-pages/blog/src/components/blog-item/blog-item.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,24 @@ $red: #E24E63;
-webkit-box-orient: vertical;
}

.three-line-limit {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3; /* number of lines to show */
line-clamp: 3;
-webkit-box-orient: vertical;
}

.four-line-limit {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4; /* number of lines to show */
line-clamp: 4;
-webkit-box-orient: vertical;
}

.card-background {
background-color: #2C2C2D;
padding: 0 8px 16px 8px;
height: 265px;
}