💄 card recent new style changed

Author: marcode24

src/app/core/guards/is-auth.guard.ts

@@ -15,7 +15,6 @@ export class IsAuthGuard implements CanActivate {
     route: ActivatedRouteSnapshot,
     state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
       return this.authService.validateToken().pipe(tap(isAuthenticated => {
-        console.log({isAuthenticated});
         if (!isAuthenticated) {
           this.router.navigateByUrl('/').then(() => {
             this.authService.showModalAuth();

src/app/features/feed/pages/feed/feed.component.css

@@ -23,7 +23,7 @@
   max-width: inherit;
   display: flex;
   flex-direction: column;
-  transform: translate(0, 8px);
+  transform: translate(0, 1rem);
 }
 
 .banner {

src/app/features/feed/pages/feed/feed.component.html

@@ -26,7 +26,7 @@
           <span class="title">{{recentFeed.title | slice:0:35}}{{(recentFeed.title.length > 20)?'...':'' }}</span>
           <span class="writer">{{recentFeed.writer}}</span>
         </div>
-        <figure>
+        <figure *ngIf="recentFeed.image">
           <img [src]="recentFeed.image" alt="new title">
         </figure>
       </div>

src/app/features/feed/pages/feed/feed.component.ts

@@ -57,7 +57,7 @@ export class FeedComponent implements OnInit {
   }
 
   saveFeed(id: string) {
-    if(!this.authService.isAuthenticated) {
+    if(!this.authService.isAuthenticated()) {
       return this.authService.showModalAuth();
     }
     this.saveFeedSub.next(id);

src/app/features/home/components/components.module.ts

@@ -6,11 +6,11 @@ import { WebsitesCardComponent } from './websites-card/websites-card.component';
 
 @NgModule({
   declarations: [
-    WebsitesCardComponent
+    WebsitesCardComponent,
   ],
   imports: [
     CommonModule,
-    RouterModule
+    RouterModule,
   ],
   exports: [
     WebsitesCardComponent,

src/app/features/home/components/websites-card/websites-card.component.ts

@@ -36,4 +36,8 @@ export class WebsitesCardComponent implements OnInit {
     });
   }
 
+  public handleMissingImage(event: Event) {
+  (event.target as HTMLImageElement).style.display = 'none';
+  }
+
 }

src/app/features/home/home.component.html

@@ -12,7 +12,8 @@
         <app-card-new></app-card-new>
         <app-card-new></app-card-new>
       </div>
-      <app-news-container *ngIf="!isLoading" [feeds]="feeds" (moreItems)="onScroll()"></app-news-container>
+      <app-news-container [recentFeed]="recentFeed" *ngIf="!isLoading" [feeds]="feeds" (moreItems)="onScroll()">
+      </app-news-container>
     </div>
   </section>
   <section class="websites">

src/app/features/home/home.component.ts

@@ -23,6 +23,7 @@ export class HomeComponent implements OnInit, OnDestroy {
 
   public websites: Website[] = [];
   public feeds: Feed[] = [];
+  public recentFeed: Feed;
 
   private isAuthenticatedSub: Subscription;
 
@@ -67,13 +68,25 @@ export class HomeComponent implements OnInit, OnDestroy {
       next: ({ feeds, websites }) => {
         this.feeds = feeds;
         this.websites = websites;
+        this.setRecentFeed(0);
       },
       complete: () => {
         this.isLoading = false;
       }
     })
   }
 
+  private setRecentFeed(index: number): void {
+    if(index < this.feeds.length) {
+      const item = this.feeds[index];
+      if(!item.image || item.image === '') {
+        return this.setRecentFeed(index + 1);
+      } else {
+        this.recentFeed = item;
+      }
+    }
+  }
+
   getFeeds(): Observable<Feed[]> {
     return this.feedService.getFeeds(this.skip, this.limit, this.isAuthenticated).pipe(map(feeds => feeds));
   }

src/app/shared/new-card-recent/new-card-recent.component.css

@@ -0,0 +1,68 @@
+.card-recent {
+  width: 100%;
+  height: 20rem;
+  max-height: 20rem;
+  position: relative;
+}
+
+.card-recent img {
+  transition: 0.5s;
+  /* transition-delay: 0.4s; */
+  /* position: absolute; */
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+  filter: brightness(0.9);
+}
+
+.card-recent:hover img {
+  filter: brightness(0.7);
+}
+
+.card-recent .title-new {
+  position: absolute;
+  bottom: 16px;
+  left: 16px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box !important;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  white-space: normal;
+  min-height: 80px;
+  max-height: 125px;
+  max-width: 40rem;
+  text-decoration: none;
+  color: inherit;
+  text-shadow: rgb(230, 230, 230) 2px 0px 0px,
+    rgb(230, 230, 230) 1.75517px 0.958851px 0px,
+    rgb(230, 230, 230) 1.0806px 1.68294px 0px,
+    rgb(230, 230, 230) 0.141474px 1.99499px 0px,
+    rgb(230, 230, 230) -0.832294px 1.81859px 0px,
+    rgb(230, 230, 230) -1.60229px 1.19694px 0px,
+    rgb(230, 230, 230) -1.97998px 0.28224px 0px,
+    rgb(230, 230, 230) -1.87291px -0.701566px 0px,
+    rgb(230, 230, 230) -1.30729px -1.5136px 0px,
+    rgb(230, 230, 230) -0.421592px -1.95506px 0px,
+    rgb(230, 230, 230) 0.567324px -1.91785px 0px,
+    rgb(230, 230, 230) 1.41734px -1.41108px 0px,
+    rgb(230, 230, 230) 1.92034px -0.558831px 0px;
+  font-size: 28px;
+  cursor: pointer;
+}
+
+.card-recent .title-new:visited {
+  color: inherit;
+}
+
+.card-recent .title-new:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 480px) {
+  .card-recent .title-new {
+    font-size: 24px;
+  }
+}

src/app/shared/new-card-recent/new-card-recent.component.html

@@ -0,0 +1,4 @@
+<div class="card card-recent">
+  <img [src]="feed.image" alt="new-image-recent">
+  <a class="title-new" [routerLink]="['feed', feed._id]">{{feed.title}}</a>
+</div>