UI polishing for home page

src/app/home-details/home-details.page.html

@@ -12,11 +12,11 @@
         <button *ngIf="newsDetails.type === 'VIDEO'">
             <ion-icon name="play"></ion-icon>
         </button>
-    </div>
 
-    <section class="content">
         <h4> {{ newsDetails.heading }} </h4>
+    </div>
 
+    <section class="content">
         <div class="details">
             {{ newsDetails.description }}
         </div>

src/app/home-details/home-details.page.scss

@@ -43,19 +43,49 @@
     height: 40%;
     overflow: hidden;
 
+    h4 {
+        font-size: 1.2rem;
+        margin: 0px;
+        line-height: 1.5;
+        font-weight: 500;
+        transition: opacity 0.1s;
+        padding: 10px 0;
+        position: absolute;
+        color: white;
+        bottom: 45px;
+        left: 6%;
+        width: 88%;
+        animation: fadeInFromBottom 0.5s forwards;
+    }
+
     button {
         width: 40px;
         height: 40px;
         position: absolute;
-        bottom: 10px;
-        right: 10px;
+        top: calc(50% - 20px);
+        left: calc(50% - 20px);
         display: flex;
         align-items: center;
         justify-content: center;
         background-color: rgba(var(--brand-red-rgb), 0.5);
         border-radius: 50%;
-        transform: translate(calc(-50vw + 40px), -15vh);
-        
+        animation: popin 0.3s forwards;
+        animation-delay: 0.5s;
+        transform: scale(0);
+
+        @keyframes popin {
+            0% {
+                transform: scale(0);
+            }
+
+            50% {
+                transform: scale(1.4);
+            }
+
+            100% {
+                transform: scale(1);
+            }
+        }
 
         ion-icon {
             color: white;
@@ -82,7 +112,7 @@
 
 .content {
     background-color: white;
-    padding: 0px 5% 5% 5%;
+    padding: 5%;
     margin: 0 auto;
     border-radius: 0px;
     transition: border-radius 0.3s, transform 0.3s, width 0.3s, margin 0.3s, box-shadow 0.3s;
@@ -107,17 +137,6 @@
     }
 }
 
-h4 {
-    font-size: 1.2rem;
-    margin: 0px;
-    line-height: 1.5;
-    font-weight: 500;
-    color: var(--brand-black);
-    transition: opacity 0.1s;
-    background-color: white;
-    padding: 10px 0;
-}
-
 .details {
     margin: 0px;
     font-size: 0.9rem;

src/app/home/home.page.html

@@ -14,9 +14,10 @@
         </section>
     </div>
 
-    <ion-slides [options]="slideOpts" *ngIf="selectedTab === 'news'" #slides>        
+    <ion-slides  #slides [options]="slideOpts" *ngIf="selectedTab === 'news'" >
 
-        <ion-slide *ngFor="let news of newsData; let i = index">            
+        <ion-slide *ngFor="let news of newsData; let i = index" 
+        [ngClass]="{'active' : selectedArticle === i}">
             <div class="image-holder">
                 <figure>
                     <img [src]="news.image">
@@ -26,9 +27,7 @@
                     <ion-icon name="play"></ion-icon>
                 </button>
 
-                <button
-                [ngClass]="{'hide' : selectedArticle !== null}"
-                *ngIf="news.type === 'ARTICLE'">
+                <button *ngIf="news.type === 'ARTICLE'">
                     <ion-icon name="newspaper"></ion-icon>
                 </button>
             </div>
@@ -55,7 +54,53 @@
                     </button>
                 </section>                
 
-                <button class="read-more" (click)="showNewsDetails(news)"> 
+                <button class="read-more" (click)="showNewsDetails(news);"> 
+                    <span> More </span>            
+                    <ion-icon name="chevron-forward-outline"></ion-icon> 
+                </button>
+            </section>
+
+        </ion-slide>
+
+        <ion-slide *ngFor="let news of newsData; let i = index" 
+        [ngClass]="{'active' : selectedArticle === i}">
+            <div class="image-holder">
+                <figure>
+                    <img [src]="news.image">
+                </figure>
+
+                <button *ngIf="news.type === 'VIDEO'">
+                    <ion-icon name="play"></ion-icon>
+                </button>
+
+                <button *ngIf="news.type === 'ARTICLE'">
+                    <ion-icon name="newspaper"></ion-icon>
+                </button>
+            </div>
+
+            <section class="content">
+                <h4> {{ news.heading }} </h4>
+
+                <div class="details">
+                    {{ news.description }}
+                </div>
+            </section>           
+
+            <section class="action-buttons">
+                <section class="shortcuts">
+                    <button class="wide-button" (click)="news.isLiked = !news.isLiked"
+                    [ngClass]="{'active' : news.isLiked}">
+                        <ion-icon *ngIf="!news.isLiked" name="heart-outline"></ion-icon>
+                        <ion-icon *ngIf="news.isLiked" name="heart"></ion-icon>
+                        <span> {{ news.isLiked ? news.likes + 1 : news.likes }} </span>
+                    </button>
+
+                    <button>
+                        <ion-icon name="share-social-outline"></ion-icon>
+                    </button>
+                </section>                
+
+                <button class="read-more" (click)="showNewsDetails(news);"> 
                     <span> More </span>            
                     <ion-icon name="chevron-forward-outline"></ion-icon> 
                 </button>

src/app/home/home.page.scss

@@ -202,14 +202,6 @@ ion-slides {
                     }
                 }
 
-                // &.bookmark-button {
-                //     &.active {
-                //         ion-icon, span {
-                //             color: var(--light-grey);
-                //         }
-                //     }
-                // }
-
                 span {
                     vertical-align: middle;
                     color: var(--light-grey);

src/app/home/home.page.ts

@@ -26,12 +26,17 @@ export type INews = {
 })
 
 export class HomePage implements OnInit {
-    @ViewChild('slides', {static: false}) slides: IonSlides;
+    @ViewChild('slides') slides: IonSlides;
     
     selectedTab: string = 'news';
     selectedArticle: number = null;    
 
-    slideOpts = { };
+    slideOpts = {
+        slidesPerView: 1.3,
+        spaceBetween: 30,
+        slidesOffsetBefore: 30,
+        slidesOffsetAfter: 30,
+    };
 
     newsData: Array<INews> = [];
 
@@ -78,44 +83,20 @@ export class HomePage implements OnInit {
             isBookmarked: false,
             likes: 308,
             comments: []
-        }];
-
-        this.slideOpts = {
-            slidesPerView: 1.3,
-            spaceBetween: 30,
-            slidesOffsetBefore: 30,
-            slidesOffsetAfter: 30,
-        };
-
+        }];                
     }
 
-    expandArticle(index: number) {
-        this.selectedArticle = index;        
-
-        this.slideOpts = {
-            slidesPerView: 1,
-            spaceBetween: 0,
-            slidesOffsetBefore: 0,
-            slidesOffsetAfter: 0,
-        };
+    ngAfterViewInit() {
+        this.selectedArticle = 0;       
+    }
 
-        // setTimeout(() => {
-        //     this.slides.slideTo(index);
-        // }, 200);
+    getIndex(e: any) {
+        console.log(this.slides);
     }
 
     showNewsDetails(news: any) {
         this.router.navigate(['/home-details', { news: JSON.stringify(news) }])
     }
 
-    closeArticle() {
-        this.selectedArticle = null;
-        
-        this.slideOpts = {
-            slidesPerView: 1.3,
-            spaceBetween: 30,
-            slidesOffsetBefore: 30,
-            slidesOffsetAfter: 30,
-        };
-    }
+    
 }