refactor: fixed comments

valor-software · Nov 2, 2023 · 6afda24 · 6afda24
1 parent 1b251c1
commit 6afda24
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 29 deletions.
diff --git a/libs/route-pages/blog/src/components/blog-item/blog-item.component.html b/libs/route-pages/blog/src/components/blog-item/blog-item.component.html
@@ -9,8 +9,8 @@
 					[alt]="_article.title">
 		</div>
 
-		<div class="text-container mt-6">
-			<p>{{_article.title | customSlice: 80}}</p>
+		<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"
@@ -27,8 +27,8 @@
 			      class="grey-color">{{_article?.readingTime + ' read'}}</span>
 		</div>
 
-		<div class="mt-4">
-			<span>{{_article.seoDescription | customSlice: 180}}</span>
+		<div class="mt-4 four-line-limit">
+			<span>{{_article.seoDescription}}</span>
 		</div>
 
 		<div class="mt-4">
@@ -49,8 +49,8 @@
 					[alt]="_article.title">
 		</div>
 
-		<div class="text-2xl w-full text-light_title_col leading-40 font-bold mt-6">
-			<p>{{_article?.title | customSlice: 80}}</p>
+		<div class="text-2xl w-full text-light_title_col leading-40 font-bold mt-6 two-line-limit">
+			<p>{{_article?.title}}</p>
 		</div>
 
 	</ng-container>
@@ -63,8 +63,9 @@
 					[alt]="_article.title">
 		</div>
 
-		<div class="text-4xl lg:text-5xl w-full text-light_title_col leading-44 lg:leading-56 font-bold mt-8 lg:mt-12">
-			<p>{{_article.title | customSlice: 80}}</p>
+		<div
+				class="text-4xl lg:text-5xl w-full text-light_title_col leading-44 lg:leading-56 font-bold mt-8 lg:mt-12 two-line-limit">
+			<p>{{_article.title}}</p>
 		</div>
 
 		<div *ngIf="_article.readingTime || _article.languages?.length"
@@ -81,8 +82,8 @@
 			      class="grey-color">{{_article?.readingTime + ' read'}}</span>
 		</div>
 
-		<div class="mt-6">
-			<span>{{_article.seoDescription | customSlice: 180}}</span>
+		<div class="mt-6 four-line-limit">
+			<span>{{_article.seoDescription}}</span>
 		</div>
 
 		<div class="mt-6">

diff --git a/libs/route-pages/blog/src/components/blog-item/blog-item.component.scss b/libs/route-pages/blog/src/components/blog-item/blog-item.component.scss
@@ -7,12 +7,6 @@ $red: #E24E63;
 
 .blog-item {
   flex-direction: column;
-
-  .text-container {
-    font-size: 28px;
-
-    @apply w-full text-light_title_col leading-40 font-bold;
-  }
 }
 
 .grey-color {
@@ -40,3 +34,19 @@ $red: #E24E63;
   transform: rotate(135deg);
   margin-left: 16px;
 }
+
+.two-line-limit {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /* number of lines to show */
+  line-clamp: 2;
+  -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;
+}
diff --git a/libs/route-pages/blog/src/pages/blog-page/blog-page.component.html b/libs/route-pages/blog/src/pages/blog-page/blog-page.component.html
@@ -1,20 +1,25 @@
 <section class="landing-section !pt-24 lg:!pt-40 !pb-0">
 	<div *ngIf="firstArticles.length > 0 && activeArticle"
 	     class="container flex flex-col lg:flex-row">
-		<blog-item
-				*ngIf="activeArticle?.title"
-				class="main-image lg:pt-0"
-				[showActiveArticle]="true"
-				[article]="activeArticle">
 
-			<button class="w-full lg:w-auto flex justify-center lg:justify-self-start">
-				<a href="javascript:void(0)"
-				   [routerLink]="[getRouteLink(activeArticle.title)]"
-				   class="btn-pink flex justify-center w-full">Check this article
-					<img src="assets/img/icons/arrow.svg" class="ml-2" alt="">
-				</a>
-			</button>
-		</blog-item>
+		<a *ngIf="activeArticle?.title"
+		   href="javascript:void(0)"
+		   [routerLink]="[getRouteLink(activeArticle.title)]"
+		   class="cursor-pointer main-image">
+			<blog-item
+					class="w-full lg:pt-0"
+					[showActiveArticle]="true"
+					[article]="activeArticle">
+
+				<button class="w-full lg:w-auto flex justify-center lg:justify-self-start">
+					<a href="javascript:void(0)"
+					   [routerLink]="[getRouteLink(activeArticle.title)]"
+					   class="btn-pink flex justify-center w-full">Check this article
+						<img src="assets/img/icons/arrow.svg" class="ml-2" alt="">
+					</a>
+				</button>
+			</blog-item>
+		</a>
 
 		<div class="first-articles">
 			<ng-container *ngFor="let article of firstArticles">