Home page desktop UI

src/app/tabs/home/home.component.html

@@ -5,15 +5,23 @@
     </header>
 
     <section class="video-section" [ngClass]="{'expand' : expandVideo }">
-        <div>
+        <iframe src="https://player.vimeo.com/video/393975453?title=0&portrait=0&byline=0&autoplay=1" frameborder="0"></iframe>
+
+        <div class="topic-name">
             <h2> English Class </h2>
             <p> Starts in </p>
             <div class="counter"> 00:00:59 </div>
         </div>
 
         <span class="tutor">
-            <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-            <span> Dwayne the Rock </span>
+            <p class="description">
+                <label> Living things: Chapter 2 </label>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi animi cum numquam sunt, eveniet dolorum tempora. Asperiores porro accusamus similique animi, recusandae corporis, reprehenderit at ab ipsam provident et tenetur.
+            </p>
+            <div class="profile-holder">
+                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                <span> Dwayne the Rock </span>
+            </div>
         </span>
     </section>
 
@@ -94,7 +102,7 @@
     <ul class="subject-list">
         <header> <h5> Today's Classes: </h5> </header>
 
-        <li class="attended">
+        <li>
             <div class="schedule">
                 <label> 3:30 PM </label>
                 <p> 40 Minutes </p>
@@ -106,10 +114,10 @@
                     <span> Dwayne the Rock </span>
                 </p>
             </div>
-            <button class="view-button"> Watch </button>
+
         </li>
 
-        <li class="absent">
+        <li>
             <div class="schedule">
                 <label> 4:20 PM </label>
                 <p> 40 Minutes </p>
@@ -121,7 +129,7 @@
                     <span> Dwayne the Rock </span>
                 </p>
             </div>
-            <button class="view-button"> Watch </button>
+
         </li>
 
         <header> <h5> Tomorrow: </h5> </header>
@@ -138,7 +146,7 @@
                     <span> Dwayne the Rock </span>
                 </p>
             </div>
-            <button class="view-button"> Watch </button>
+
         </li>
 
         <li class="attended">
@@ -153,7 +161,7 @@
                     <span> Dwayne the Rock </span>
                 </p>
             </div>
-            <button class="view-button"> Watch </button>
+
         </li>
 
         <header> <h5> Mon, June 29: </h5> </header>
@@ -170,7 +178,7 @@
                     <span> Dwayne the Rock </span>
                 </p>
             </div>
-            <button class="view-button"> Watch </button>
+
         </li>
 
         <li class="late">
@@ -185,7 +193,7 @@
                     <span> Dwayne the Rock </span>
                 </p>
             </div>
-            <button class="view-button"> Watch </button>
+
         </li>
 
         <header> <h5> Sat, June 30: </h5> </header>
@@ -202,7 +210,7 @@
                     <span> Dwayne the Rock </span>
                 </p>
             </div>
-            <button class="view-button"> Watch </button>
+
         </li>
 
         <li class="absent">
@@ -217,7 +225,7 @@
                     <span> Dwayne the Rock </span>
                 </p>
             </div>
-            <button class="view-button"> Watch </button>
+            
         </li>
     </ul>
 

src/app/tabs/home/home.component.scss

@@ -12,6 +12,12 @@
     padding: 0 5%;
     justify-content: space-between;
 
+    @media screen and (min-width: 1023px) {
+        justify-content: flex-end;
+        background-color: var(--black);
+        display: none;
+    }
+
     img {
         width: 35px;
         height: 35px;
@@ -29,6 +35,10 @@
         border: 0px;
         background-color: transparent;
 
+        @media screen and (min-width: 1023px) {
+            margin-left: 30px;
+        }
+
         &.profile-button {
             margin-left: 0;
             margin-right: auto;
@@ -39,8 +49,6 @@
 .video-section {
     position: relative;
     text-align: center;
-    background-color: var(--dark-grey);
-    height: 30vh;
     width: 90%;
     margin: 0 auto;
     border-radius: 5px;
@@ -53,17 +61,51 @@
     top: 0;
     z-index: 1;
     transition: width 0.5s;
+    overflow: hidden;
+    height: 30vh;
+
+    @media screen and (min-width: 1023px) {
+        justify-content: space-between;
+        background-color: var(--black);
+        height: 50vh;
+        align-items: center;
+        border-radius: 0px;
+        width: 100%;
+        padding: 0px 5%;
+        z-index: 1;
+    }
+
+    iframe {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-color: var(--dark-grey);
+
+        @media screen and (min-width: 1023px) {
+            position: relative;
+            display: block;
+            width: 40%;
+            height: 80%;
+            overflow: hidden;
+        }
+    }
 
     &.expand {
         width: 100%;
     }
 
     .tutor {
-        position: absolute;
-        left: 10px;
-        bottom: 10px;
         color: white;
 
+        @media screen and (min-width: 1023px) {
+            position: relative;
+            width: 30%;
+            text-align: left;
+            max-height: calc(50vh - 40px);
+        }
+
         img {
             width: 20px;
             height: 20px;
@@ -71,30 +113,86 @@
             margin-right: 5px;
             vertical-align: middle;
             overflow: hidden;
+
+            @media screen and (min-width: 1023px) {
+                width: 30px;
+                height: 30px;
+            }
         }
 
         span {
             font-size: 12px;
+
+            @media screen and (min-width: 1023px) {
+                font-size: 16px;
+            }
+        }
+
+        .description {
+            display: none;
+
+            @media screen and (min-width: 1023px) {
+                color: var(--light-grey);
+                font-size: 14px;
+                line-height: 1.7;
+                display: block;
+                text-align: left;
+            }
+
+            label {
+                display: block;
+                font-size: 20px;
+                font-weight: 500;
+                margin-bottom: 15px;
+                color: white;
+            }
+        }
+
+        .profile-holder {
+            @media screen and (min-width: 1023px) {
+                margin-top: 15px;
+            }
+        }
+    }
+
+    .topic-name {
+        @media screen and (min-width: 1023px) {
+            width: 30%;
         }
     }
 
     h2 {
         font-size: 20px;
         margin-bottom: 5px;
+
+        @media screen and (min-width: 1023px) {
+            font-size: 28px;
+            font-weight: 400;
+            margin-bottom: 10px;
+            letter-spacing: 1px;
+        }
     }
 
     p {
         font-size: 16px;
+
+        @media screen and (min-width: 1023px) {
+            font-size: 22px;
+            letter-spacing: 1px;
+        }
     }
 
     .counter {
         font-size: 28px;
         font-weight: 500;
         letter-spacing: 1px;
+
+        @media screen and (min-width: 1023px) {
+            font-size: 40px;
+        }
     }
 }
 
-
 .session-details {
     background-color: var(--ash-black);
     border-radius: 7px;
@@ -102,6 +200,15 @@
     width: 90%;
     margin: 20px auto;
 
+    @media screen and (min-width: 1023px) {
+        width: 56%;
+        margin: 5vh 0 0 4%;
+        background-color: white;
+        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+        border-radius: 30px;
+        height: 40vh;
+    }
+
     .show-details-button {
         width: 100%;
         background-color: var(--dark-grey);
@@ -115,6 +222,10 @@
         border-radius: 7px;
         padding: 0 5%;
 
+        @media screen and (min-width: 1023px) {
+            display: none;
+        }
+
         &.active .icon {
             transform: rotate(90deg);
         }
@@ -123,28 +234,46 @@
             fill: white;
             width: 15px;
             height: 15px;
+
+            @media screen and (min-width: 1023px) {
+                display: none;
+            }
         }
     }
 
 
     .segments {
-        margin-top: 5px;
-        background-color: var(--ash-black);
+        background-color: var(--dark-grey);
         display: flex;
         align-items: stretch;
         height: 40px;
         box-shadow: 0px 0px 5px var(--black);
-        margin-bottom: 20px;
+        overflow: hidden;
+        border-radius: 10px;
+        width: 90%;
+        margin: 20px auto 20px;
+
+        @media screen and (min-width: 1023px) {
+            height: 45px;
+            margin: 30px auto 20px;
+        }
 
         button {
             font-size: 14px;
             width: calc(100% / 2);
             border: 0px;
             background-color: transparent;
-            color: var(--light-grey);
+            color: white;
+            border-radius: 10px;
+
+            @media screen and (min-width: 1023px) {
+                font-size: 15px;
+
+            }
 
             &.active {
-                color: var(--teal-green);
+                background-color: var(--teal-green);
+                color: white;
             }
         }
     }
@@ -156,6 +285,10 @@
         height: 150px;
         overflow: auto;
 
+        @media screen and (min-width: 1023px) {
+            max-height: 100%;
+        }
+
         p {
             font-size: 14px;
             margin-bottom: 20px;
@@ -183,6 +316,13 @@
             border-radius: 10px;
             overflow: hidden;
             margin-bottom: 15px;
+
+            @media screen and (min-width: 1023px) {
+                background-color: white;
+                box-shadow: 0px 0px 5px var(--light-grey);
+                width: 98%;
+                margin: 5px auto 15px;
+            }
         }
 
         .content {
@@ -193,6 +333,11 @@
             color: white;
             font-size: 15px;
             display: block;
+
+            @media screen and (min-width: 1023px) {
+                color: var(--dark-grey);
+                font-size: 16px;
+            }
         }
 
         p {
@@ -218,6 +363,21 @@
     margin: 0 auto;
     list-style: none;
 
+    @media screen and (min-width: 1023px) {
+        width: 33%;
+        margin: 0;
+        max-height: 50vh;
+        position: fixed;
+        right: 2%;
+        top: calc(50vh - 30px);
+        background-color: white;
+        border-radius: 30px;
+        padding: 15px;
+        box-shadow: 0px 0px 10px rgba(black, 0.3);
+        z-index: 1;
+        overflow: auto;
+    }
+
     header {
         color: var(--black);
 
@@ -241,7 +401,6 @@
         padding: 15px 10px;
         margin-top: 15px;
         box-shadow: 0px 0px 5px -2px var(--black);
-        justify-content: space-between;
         position: relative;
 
         &::before {
@@ -274,7 +433,7 @@
     }
 
     .subject {
-        width: calc(100% - 180px);
+        flex-grow: 1;
         border-left: 1px solid #cecece;
         padding-left: 15px;
         overflow: hidden;
@@ -292,6 +451,7 @@
         color: white;
         font-size: 14px;
         width: 80px;
+        margin-left: 10px;
     }
 
     label {

src/app/tabs/home/home.component.ts

@@ -9,24 +9,33 @@ import { ScrollEvent } from 'ngx-scroll-event';
 })
 export class HomeComponent implements OnInit {
     expandVideo: boolean = false;
-    showClassDetails: boolean = false;
+    showClassDetails: boolean;
     selectedSegment: string = 'transcript';
 
 	constructor() { }
 
 	ngOnInit(): void {
+        if (window.innerWidth > 1023) {
+            this.showClassDetails = true;
+        } else {
+            this.showClassDetails = false;
+        }
 	}
 
 	public handleScroll(event: ScrollEvent) {
-        let container: any = event.originalEvent.srcElement;
+        if (window.innerWidth > 1023) {
 
-		if (event.isReachingTop || container.scrollTop < 100) {
-			this.expandVideo = false;
-		}
+        } else {
+            let container: any = event.originalEvent.srcElement;
 
-        if (event.isReachingBottom || container.scrollTop >= 100) {
-			this.expandVideo = true;
-		}
+    		if (event.isReachingTop || container.scrollTop < 100) {
+    			this.expandVideo = false;
+    		}
+
+            if (event.isReachingBottom || container.scrollTop >= 100) {
+    			this.expandVideo = true;
+    		}
+        }
 	}
 
 }

src/app/tabs/tabs.component.scss

@@ -1,11 +1,11 @@
 .page {
     height: 100vh;
     overflow: auto;
-    padding-left: 60px;
+    padding-bottom: 100px;
 
-    @media screen and (max-width: 1023px) {
-        padding-bottom: 100px;
-        padding-left: 0;
+    @media screen and (min-width: 1023px) {
+        padding-left: 75px;
+        padding-bottom: 0;
     }
 
     &::before {
@@ -19,6 +19,10 @@
         border-bottom-left-radius: 30px;
         border-bottom-right-radius: 30px;
         pointer-events: none;
+
+        @media screen and (min-width: 1023px) {
+            display: none;
+        }
     }
 }