Mobile UI changes for home page

.firebase/hosting.ZGlzdFxsbXMtYXBwLW5ldw.cache

@@ -39,6 +39,7 @@ assets/custom-icons/information.svg,1591670056330,2fb0cdf7a54fb27fcd5461b379a57d
 assets/custom-icons/like.svg,1592370132307,5f9f0595bc0a37d973232a7722109f2910e0a9e8be91dbcb0f0fcd80340ab598
 assets/custom-icons/link.svg,1592290835406,2c07191acf4af240019f6da72c65e71dad9fef9deaf04d90f20145c1fb239841
 assets/custom-icons/microscope.svg,1591670031112,8e3dfe16b2ff42e4a83050df2370c06c3251c106139bba9ff570db866135e031
+assets/custom-icons/missed-class.svg,1592547836861,85d91f1db7ab592bdaa63d3a4134a39160cb811374ff187dc0b780db02078468
 assets/custom-icons/money-growth.svg,1591670040955,fce9616268c9932e2531ff524accdb5a82ecbee149eb68100580146f09b85d9a
 assets/custom-icons/more.svg,1591677116018,8207372ec5304a64d33da1b21c92308d793d03f6cb83e0dd7c384f4db94de3f2
 assets/custom-icons/mortarboard.svg,1591670033049,226d6ad39b7ea5f7da6321237835319335d29a6571dce10378a88c42b5be4f2e
@@ -61,13 +62,12 @@ assets/icons/icon-384x384.png,1591723765605,e28ae36bf6b6f9c9a5eb8716806f3077d293
 assets/icons/icon-512x512.png,1591723765605,cb62ee904d0aa462c04667e945abbefe928c1c874d9a919ec237f3ebc1822dc9
 assets/icons/icon-72x72.png,1591723765606,215a8d62891dff36be3e0a554c28e627bbd34dea95aca21b718414452b581dce
 assets/icons/icon-96x96.png,1591723765606,5dbec692238f9b1305461df3fe87c910306d95db26941804b8929cd0d99bd508
-index.html,1592581636661,754ee34b6a6038e71905eaaf2828717d1d9f5352fdbc2b99361d89292b45cf84
-3rdpartylicenses.txt,1592581623693,d27e55275dcda3ed3bc3eb999269407011cf9c9afe9ddc3967da4edd98909d57
-ngsw.json,1592581636689,b31c570104509fceb64d172d3129b064163bcdc520e5c0853c210aacbe0edaf4
-safety-worker.js,1592581636691,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a
-styles.b49991c93601241d9fc5.css,1592581623693,04e80bd134276602afe8e8c3413181eec3770de18545c1e8f498856bbc8e7329
-worker-basic.min.js,1592581636691,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a
-assets/custom-icons/missed-class.svg,1592547836861,85d91f1db7ab592bdaa63d3a4134a39160cb811374ff187dc0b780db02078468
-ngsw-worker.js,1592581636690,40433abc9774bdb2aa53890310f0ca5017fe5b764eaa087ba509ab1ab8ea7be3
-main-es2015.84e9682eac56f8cfb981.js,1592581634936,6b480f38235d589a7084ae7374800a3686f2df7f81d15575fa9e2c299428a5c7
-main-es5.84e9682eac56f8cfb981.js,1592581633214,d404b4f8b7bffb6787a2abcd4cd811f0e69afd846020fd9ebf78e80fca39f446
+index.html,1592812676958,e1c73a61c71d5a52d7c99e6692ede105566e6a32551ef0e65d57c6639d5cac9b
+3rdpartylicenses.txt,1592812664073,d27e55275dcda3ed3bc3eb999269407011cf9c9afe9ddc3967da4edd98909d57
+ngsw.json,1592812676983,9865a2fa283ca82774be3c76f9f1464296709a70c55121123ac067b0481d8a7d
+safety-worker.js,1592812676985,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a
+styles.b49991c93601241d9fc5.css,1592812664073,04e80bd134276602afe8e8c3413181eec3770de18545c1e8f498856bbc8e7329
+worker-basic.min.js,1592812676985,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a
+ngsw-worker.js,1592812676984,40433abc9774bdb2aa53890310f0ca5017fe5b764eaa087ba509ab1ab8ea7be3
+main-es5.4fe0d7f366514f3a54e0.js,1592812673566,007515900e268b2beccb243affd905d0658cd843828a9a16f381eb11b56db73d
+main-es2015.4fe0d7f366514f3a54e0.js,1592812675222,b1a929b13b3c18e608654e5eb3ee84a18d6c246ffa47fe43866f5b343a8a4980

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

@@ -25,7 +25,7 @@
         </span>
     </section>
 
-    <section class="session-details">
+    <section class="session-details" [ngClass]="{'expand' : expandVideo }">
         <button class="show-details-button" (click)="showClassDetails  = !showClassDetails "
         [ngClass]="{'active' : showClassDetails }">
             <span>
@@ -102,7 +102,22 @@
     <ul class="subject-list">
         <header> <h5> Today's Classes: </h5> </header>
 
-        <li>
+        <li class="absent">
+            <div class="schedule">
+                <label> 9:30 PM </label>
+                <p> 1hr 40 Minutes </p>
+            </div>
+            <div class="subject">
+                <label> Science </label>
+                <p>
+                    <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                    <span> Dwayne the Rock </span>
+                </p>
+            </div>
+            <button class="view-button"> Watch </button>
+        </li>
+
+        <li class="late">
             <div class="schedule">
                 <label> 3:30 PM </label>
                 <p> 40 Minutes </p>
@@ -117,7 +132,7 @@
 
         </li>
 
-        <li>
+        <li class="attended">
             <div class="schedule">
                 <label> 4:20 PM </label>
                 <p> 40 Minutes </p>
@@ -134,7 +149,7 @@
 
         <header> <h5> Tomorrow: </h5> </header>
 
-        <li class="late">
+        <li>
             <div class="schedule">
                 <label> 5:30 PM </label>
                 <p> 40 Minutes </p>
@@ -149,7 +164,7 @@
 
         </li>
 
-        <li class="attended">
+        <li>
             <div class="schedule">
                 <label> 6:20 PM </label>
                 <p> 40 Minutes </p>
@@ -166,7 +181,7 @@
 
         <header> <h5> Mon, June 29: </h5> </header>
 
-        <li class="attended">
+        <li>
             <div class="schedule">
                 <label> 5:30 PM </label>
                 <p> 40 Minutes </p>
@@ -181,7 +196,7 @@
 
         </li>
 
-        <li class="late">
+        <li>
             <div class="schedule">
                 <label> 6:20 PM </label>
                 <p> 40 Minutes </p>
@@ -198,7 +213,7 @@
 
         <header> <h5> Sat, June 30: </h5> </header>
 
-        <li class="absent">
+        <li>
             <div class="schedule">
                 <label> 5:30 PM </label>
                 <p> 40 Minutes </p>
@@ -213,7 +228,7 @@
 
         </li>
 
-        <li class="absent">
+        <li>
             <div class="schedule">
                 <label> 6:20 PM </label>
                 <p> 40 Minutes </p>
@@ -225,7 +240,7 @@
                     <span> Dwayne the Rock </span>
                 </p>
             </div>
-            
+
         </li>
     </ul>
 

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

@@ -60,7 +60,7 @@
     position: -webkit-sticky;
     top: 0;
     z-index: 1;
-    transition: width 0.5s;
+    transition: width 0.5s, border-radius 0.5s;
     overflow: hidden;
     height: 30vh;
 
@@ -94,6 +94,7 @@
 
     &.expand {
         width: 100%;
+        border-radius: 0px;
     }
 
     .tutor {
@@ -199,6 +200,11 @@
     overflow: hidden;
     width: 90%;
     margin: 20px auto;
+    transition: width 0.5s, border-radius 0.5s;
+    position: sticky;
+    position: -webkit-sticky;
+    top: 30vh;
+    z-index: 1;
 
     @media screen and (min-width: 1023px) {
         width: 56%;
@@ -209,6 +215,15 @@
         height: 40vh;
     }
 
+    &.expand {
+        width: 100%;
+        border-radius: 0px;
+
+        .show-details-button {
+            border-radius: 0px;
+        }
+    }
+
     .show-details-button {
         width: 100%;
         background-color: var(--dark-grey);