💄 card recent new style changed

marcode24 · marcode24 · commit 78aa99ea68e3 · 2022-07-18T13:53:04.000-05:00
diff --git a/src/app/core/guards/is-auth.guard.ts b/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();
diff --git a/src/app/features/feed/pages/feed/feed.component.css b/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 {
diff --git a/src/app/features/feed/pages/feed/feed.component.html b/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>
diff --git a/src/app/features/feed/pages/feed/feed.component.ts b/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);
diff --git a/src/app/features/home/components/components.module.ts b/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,
diff --git a/src/app/features/home/components/websites-card/websites-card.component.ts b/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';
+  }
+
 }
diff --git a/src/app/features/home/home.component.html b/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">
diff --git a/src/app/features/home/home.component.ts b/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));
   }
diff --git a/src/app/shared/new-card-recent/new-card-recent.component.css b/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;
+  }
+}
diff --git a/src/app/shared/new-card-recent/new-card-recent.component.html b/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>
diff --git a/src/app/shared/new-card-recent/new-card-recent.component.ts b/src/app/shared/new-card-recent/new-card-recent.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Feed } from '@models/feed.model';
+
+@Component({
+  selector: 'app-new-card-recent',
+  templateUrl: './new-card-recent.component.html',
+  styleUrls: ['./new-card-recent.component.css']
+})
+export class NewCardRecentComponent implements OnInit {
+
+  @Input() feed: Feed;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/shared/news-container/news-container.component.html b/src/app/shared/news-container/news-container.component.html
@@ -1,4 +1,5 @@
 <div class="news" infiniteScroll [infiniteScrollDistance]="1" (scrolled)="onScroll()">
+  <app-new-card-recent *ngIf="recentFeed" [feed]="recentFeed"></app-new-card-recent>
   <div class="card card-new" *ngFor="let feed of feeds; let i = index">
     <figure *ngIf="feed.image">
       <img [src]="feed.image" alt="news-image" loading="lazy">
diff --git a/src/app/shared/news-container/news-container.component.ts b/src/app/shared/news-container/news-container.component.ts
@@ -15,6 +15,7 @@ import { UserService } from '@services/user.service';
 export class NewsContainerComponent implements OnInit {
   private isAuthenticated: boolean = false;
   @Input() feeds: Feed[] = [];
+  @Input() recentFeed: Feed;
   @Output() moreItems: EventEmitter<boolean> = new EventEmitter();
   private saveFeedSub: Subject<string> = new Subject();
 
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
@@ -1,25 +1,29 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { RouterModule } from '@angular/router';
 
 import { NewsContainerComponent } from './news-container/news-container.component';
 import { ButtonTopComponent } from './button-top/button-top.component';
 import { ToggleThemeComponent } from './toggle-theme/toggle-theme.component';
+import { NewCardRecentComponent } from './new-card-recent/new-card-recent.component';
 
 @NgModule({
   declarations: [
     NewsContainerComponent,
     ButtonTopComponent,
-    ToggleThemeComponent
+    ToggleThemeComponent,
+    NewCardRecentComponent
   ],
   imports: [
     CommonModule,
     InfiniteScrollModule,
+    RouterModule
   ],
   exports: [
     NewsContainerComponent,
     ButtonTopComponent,
-    ToggleThemeComponent
+    ToggleThemeComponent,
   ]
 })
 export class SharedModule { }

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@`
`23`	`23`	`max-width: inherit;`
`24`	`24`	`display: flex;`
`25`	`25`	`flex-direction: column;`
`26`		`- transform: translate(0, 8px);`
	`26`	`+ transform: translate(0, 1rem);`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`.banner {`
Original file line number	Diff line number	Diff line change
`@@ -57,7 +57,7 @@ export class FeedComponent implements OnInit {`
`57`	`57`	`}`
`58`	`58`
`59`	`59`	`saveFeed(id: string) {`
`60`		`- if(!this.authService.isAuthenticated) {`
	`60`	`+ if(!this.authService.isAuthenticated()) {`
`61`	`61`	`return this.authService.showModalAuth();`
`62`	`62`	`}`
`63`	`63`	`this.saveFeedSub.next(id);`
Original file line number	Diff line number	Diff line change
`@@ -36,4 +36,8 @@ export class WebsitesCardComponent implements OnInit {`
`36`	`36`	`});`
`37`	`37`	`}`
`38`	`38`
	`39`	`+ public handleMissingImage(event: Event) {`
	`40`	`+ (event.target as HTMLImageElement).style.display = 'none';`
	`41`	`+ }`
	`42`	`+`
`39`	`43`	`}`