From cbc51f1137cee70c24804897795d1d66690cab68 Mon Sep 17 00:00:00 2001
From: kj1352 <nikhilkj24@gmail.com>
Date: Fri, 19 Jun 2020 10:29:33 +0530
Subject: [PATCH] Status text in calendar

---
 .../hosting.ZGlzdFxsbXMtYXBwLW5ldw.cache      | 48 +++++++++++--------
 src/app/calendar/calendar.component.html      | 37 +++++++++-----
 src/app/calendar/calendar.component.scss      | 37 +++++++++++++-
 3 files changed, 86 insertions(+), 36 deletions(-)

diff --git a/.firebase/hosting.ZGlzdFxsbXMtYXBwLW5ldw.cache b/.firebase/hosting.ZGlzdFxsbXMtYXBwLW5ldw.cache
index 614c6e1..b394878 100644
--- a/.firebase/hosting.ZGlzdFxsbXMtYXBwLW5ldw.cache
+++ b/.firebase/hosting.ZGlzdFxsbXMtYXBwLW5ldw.cache
@@ -4,26 +4,36 @@ polyfills-es2015.690002c25ea8557bb4b0.js,1591723916472,3e7c89812bf4fd87f9db14f54
 polyfills-es5.9e286f6d9247438cbb02.js,1591723919562,4f1a99830dd49db1d1cffcb8b4a23931d26817406e84ff1924e315758d4437e8
 runtime-es2015.1eba213af0b233498d9d.js,1591723916214,8351e28e6622d0d4825d766649b2ae0e8767c34304fff594f102bfe52b7e4e29
 runtime-es5.1eba213af0b233498d9d.js,1591723916214,8351e28e6622d0d4825d766649b2ae0e8767c34304fff594f102bfe52b7e4e29
+assets/custom-icons/add-person.svg,1592315931240,5d43642454bb12f632c317bab8a89c18f5ba9143da79623a3d24797cc0f92ef6
 assets/custom-icons/add.svg,1591670038987,0beaf5cea5310deddf58f5dc94cffc2c26cecfaa5890aae565ab9705ee342506
 assets/custom-icons/atomic.svg,1591670021393,48c2717734d3d37cbf7dabaf6fb22f0e5fcd662e319e9e61417c46461e236d8d
+assets/custom-icons/attendance-1.svg,1592309320413,a3173e6410386ae73d9dbf1e9f4890cc56e563b4ebc5fb2b0dcea7451da7fdac
+assets/custom-icons/attendance.svg,1592292570940,d58cc27e0a6d67073a1af7fb26a0b2738b2b205e0c4a307f8f2d330dce90d109
 assets/custom-icons/balance-sheet.svg,1591670023346,bc016780bfc19a6ef0e62332aa22139bcc237a6e19f070e51ce90e76919c66aa
 assets/custom-icons/bell.svg,1591670027237,573c0d8ec1b109c2f5aac611060deb690b999477044e413cb4876cb1ef56fc8b
 assets/custom-icons/book (1).svg,1591670042956,929aa072b6ed981800c87d0586c1f3a2485eb2698e134de2f3b8be20cb7d703b
 assets/custom-icons/book.svg,1591670046795,929aa072b6ed981800c87d0586c1f3a2485eb2698e134de2f3b8be20cb7d703b
 assets/custom-icons/calendar.svg,1591670019330,86593b34bb094a0308ff9aae96b373e7561d95737a97b62c5df257d9aa94730c
 assets/custom-icons/checkmark.svg,1591690835621,43eb6373652ac8270f0f7964cb43fe789f3bb5b1d9ec32bf2a9537f40130df2a
+assets/custom-icons/class.svg,1592309166232,247c7db07bf3dcc9e76d80ce122becb73077679de93d389b92923c9147f38617
+assets/custom-icons/close-circle.svg,1592281807401,3365f8d2f9db966884b6012d1de562a477757fd1d20379fa65fe823829066810
 assets/custom-icons/close.svg,1591685459998,bda284bcf2ce73de2da27269744959dd96094126526d5dd021d8d58d3eb02083
 assets/custom-icons/cloud-computing.svg,1591670058237,4a6ce752f63c5ec1e6ed00bc9dd642e151b30916ee603a9d1d0a24fdb7781f7d
 assets/custom-icons/delete.svg,1591670050596,ecb168e66062b855ec3d8be4fe8d1df786c29b740fd2a7f4e4a68871b4c271c1
 assets/custom-icons/discuss.svg,1591670017330,41c4b861e256a256cba57c925e9958aa43f0296fecb0da38aaeb8cbee210f15e
+assets/custom-icons/document.svg,1592290789477,d5f9aee8b6a06ce794719fe4e074f944b9a0110fb7204e3f1ee91ad327defab6
 assets/custom-icons/down-arrow.svg,1591691050636,47f2b5d048be7bb7d04ece942053923e5caaa76df6b738313c7cf2ff3dc4f57c
 assets/custom-icons/download.svg,1591670052533,3b4b194581220038e6235224923bd4c990e2c8609865c946ffa5cc24e7c13f9f
+assets/custom-icons/duel.svg,1592309435728,dcbb4dffba44a0e57a2cce161f27ea9c5c42ea3e4c5cfbc3b3fbfaa5c2f9affb
 assets/custom-icons/edit.svg,1591670025299,0a3c0ddf3e300c7f40214542758e7cb95907ba45f366dcf0cf5bbe7473aed3b5
 assets/custom-icons/flask.svg,1591670029174,ec753ec598159f42d7c1b5e8bdaf2768475e20308bbe1f9321b2b9b6ca3bc727
 assets/custom-icons/folder.svg,1591670036971,ff596b961aa3bf39968e69c946ca3197b64f83cc19d37820265e85020a966ad5
+assets/custom-icons/forum.svg,1592309516460,a2653011964697eb2f57d08ac3573a14246995bc77cfee5282253f9837f436c2
 assets/custom-icons/globe.svg,1591670048690,1fdc780fc12f486a70f2825e51064c7ebe497e6db5a308c2ffa5b6d86a552b41
+assets/custom-icons/hashtag.svg,1592315789488,49e2d3a41333c2c6ec84b6bb5e00c3a61ba1d4c4b02f321fa2fdd90dbb9d3a85
 assets/custom-icons/home.svg,1591677387594,fcc78971c4496f782b894d47df39954b657488ceaa83189092978429c600493f
 assets/custom-icons/information.svg,1591670056330,2fb0cdf7a54fb27fcd5461b379a57dda72483f48e400217db1162fe2416b30ea
+assets/custom-icons/link.svg,1592290835406,2c07191acf4af240019f6da72c65e71dad9fef9deaf04d90f20145c1fb239841
 assets/custom-icons/microscope.svg,1591670031112,8e3dfe16b2ff42e4a83050df2370c06c3251c106139bba9ff570db866135e031
 assets/custom-icons/money-growth.svg,1591670040955,fce9616268c9932e2531ff524accdb5a82ecbee149eb68100580146f09b85d9a
 assets/custom-icons/more.svg,1591677116018,8207372ec5304a64d33da1b21c92308d793d03f6cb83e0dd7c384f4db94de3f2
@@ -32,9 +42,11 @@ assets/custom-icons/newspaper.svg,1591670054424,3b6d1b91044b650e42124be91b5161d9
 assets/custom-icons/number-1-medal.svg,1591857318704,f52fb954e5e12c14af3671c2b419248932f49255049bcc820d9e50ae3f319200
 assets/custom-icons/play-button.svg,1591670044893,247291e419f46dbc2166588629cc5a21c19b0ec8a87e3ffe95a5b7c3fa4d5b52
 assets/custom-icons/plus.svg,1591852726572,a96d4d299742c206fe67437318fb570cc69359356a7f6ab9ccde30deee8e0af6
+assets/custom-icons/question-mark.svg,1592281930425,a2cda20fd2f192049c662f7e3319cc36775e49a00e56549002eb494dfc8bb716
 assets/custom-icons/settings.svg,1591855957022,b8064cc999c75e79d1ca9306425e1e9fe9fe5c0b52cdd4fe184418613435ed20
 assets/custom-icons/star-medal.svg,1591857296783,70d31060ab666163c8c0397e4bacb9a0d5a32cab1437ea81f7c3b8569e24d046
 assets/custom-icons/tab.svg,1591670015221,e521af92e8d3b8cf4f57a85f1091e3839200f65b52a3177703a02233783660f0
+assets/custom-icons/warning.svg,1592281874839,5ea86bd525dfa83ebe77cf93d8367426202e54f7c07aab182301c7c46ccdbad7
 assets/icons/icon-128x128.png,1591723765595,1331bbcee85eb4c732d2b2468c0118ead141aa56c741dc1a93a54d4812e79d4d
 assets/icons/icon-144x144.png,1591723765602,ab4052ca6640d9378a090b7a6825df604c939ec738dae88d89500aee8eb7087f
 assets/icons/icon-152x152.png,1591723765603,b1cb2eb328c9eedac5eb3994d04c73040c462a73cf7254c38eafa2d582a078d6
@@ -43,24 +55,18 @@ 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,1592317337347,8c2fdbfc5939841a13cb1b0ca25f914f04baf7e79f7065dce99902a38ba22dee
-3rdpartylicenses.txt,1592317324768,d27e55275dcda3ed3bc3eb999269407011cf9c9afe9ddc3967da4edd98909d57
-ngsw.json,1592317337374,0e8cc36b6d9cfd935cd57542bbe64677bc6b8c7674ba97dd7100fa697b660311
-safety-worker.js,1592317337376,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a
-styles.b31fc0685d3c66a06d73.css,1592317324769,0221e2a0f6ca6255770f8f3a290cc774f05f8540c0493fbddfac4dfa32eabfd9
-worker-basic.min.js,1592317337375,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a
-assets/custom-icons/add-person.svg,1592315931240,5d43642454bb12f632c317bab8a89c18f5ba9143da79623a3d24797cc0f92ef6
-assets/custom-icons/attendance-1.svg,1592309320413,a3173e6410386ae73d9dbf1e9f4890cc56e563b4ebc5fb2b0dcea7451da7fdac
-assets/custom-icons/attendance.svg,1592292570940,d58cc27e0a6d67073a1af7fb26a0b2738b2b205e0c4a307f8f2d330dce90d109
-assets/custom-icons/class.svg,1592309166232,247c7db07bf3dcc9e76d80ce122becb73077679de93d389b92923c9147f38617
-assets/custom-icons/close-circle.svg,1592281807401,3365f8d2f9db966884b6012d1de562a477757fd1d20379fa65fe823829066810
-assets/custom-icons/document.svg,1592290789477,d5f9aee8b6a06ce794719fe4e074f944b9a0110fb7204e3f1ee91ad327defab6
-assets/custom-icons/duel.svg,1592309435728,dcbb4dffba44a0e57a2cce161f27ea9c5c42ea3e4c5cfbc3b3fbfaa5c2f9affb
-assets/custom-icons/forum.svg,1592309516460,a2653011964697eb2f57d08ac3573a14246995bc77cfee5282253f9837f436c2
-assets/custom-icons/hashtag.svg,1592315789488,49e2d3a41333c2c6ec84b6bb5e00c3a61ba1d4c4b02f321fa2fdd90dbb9d3a85
-assets/custom-icons/link.svg,1592290835406,2c07191acf4af240019f6da72c65e71dad9fef9deaf04d90f20145c1fb239841
-assets/custom-icons/question-mark.svg,1592281930425,a2cda20fd2f192049c662f7e3319cc36775e49a00e56549002eb494dfc8bb716
-assets/custom-icons/warning.svg,1592281874839,5ea86bd525dfa83ebe77cf93d8367426202e54f7c07aab182301c7c46ccdbad7
-ngsw-worker.js,1592317337375,40433abc9774bdb2aa53890310f0ca5017fe5b764eaa087ba509ab1ab8ea7be3
-main-es2015.bc3224f66cae59054dab.js,1592317335634,3bfdd9916a16fd4e951182d4d17f8435b02183a1a449a08a486e7d16ccbbbc9c
-main-es5.bc3224f66cae59054dab.js,1592317334007,287b96a3554b12c9e9c35449be7ed9003a32c1bb115cee6a4364d1f3da02986f
+index.html,1592379316672,410289b6de4ac9486d6af7f7bd0181a777b73a965ea3f26e6b146f8704134adb
+3rdpartylicenses.txt,1592379303314,d27e55275dcda3ed3bc3eb999269407011cf9c9afe9ddc3967da4edd98909d57
+ngsw.json,1592379316703,9ebffd930c84c21a55b4d4ca0af2c00a8d86d16cead735d0b1b7a18c7f420bb5
+safety-worker.js,1592379316705,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a
+styles.706a8214263f92d7e9ad.css,1592379303314,f6348497794f701300aac680cc90fd9a46262a9824d8be9a8dba3d83c11c37cc
+worker-basic.min.js,1592379316705,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a
+assets/custom-icons/bookmark.svg,1592371606164,557e6eab92592373a25eb4d7a00a66813ef95e94a3050646d838cc48296e0aed
+assets/custom-icons/comment.svg,1592370163004,5a17f4ec1fc3120562f418c9692ce84706427830a9d8eaf573b9227975d19fd4
+assets/custom-icons/forum-outline.svg,1592375498831,412f3f8a159402989ed90032889045acd27f0fd076fecc66e9bca5ce5d17157c
+assets/custom-icons/like.svg,1592370132307,5f9f0595bc0a37d973232a7722109f2910e0a9e8be91dbcb0f0fcd80340ab598
+assets/custom-icons/reply.svg,1592374381475,e40d9f0a18921d7e71be76da2a7454d9c15a18e601699c2538d8540106004dc9
+assets/custom-icons/share.svg,1592370200760,ce33e77f3437923daddeefe080c52c8d91ac9216efc7b6e3ffdef54f2a096beb
+ngsw-worker.js,1592379316704,40433abc9774bdb2aa53890310f0ca5017fe5b764eaa087ba509ab1ab8ea7be3
+main-es2015.b0a5baf64fe4c0ab8c40.js,1592379314949,f94e61205248713b0a988c98d9113a37056e67bdf3705882796d1ea4a61eb751
+main-es5.b0a5baf64fe4c0ab8c40.js,1592379313132,1731d41fb9cc9c5de5afe4b7480bbf3e8173848ea43f3b506702df73fdcdd3dd
diff --git a/src/app/calendar/calendar.component.html b/src/app/calendar/calendar.component.html
index 80fd562..edf17de 100644
--- a/src/app/calendar/calendar.component.html
+++ b/src/app/calendar/calendar.component.html
@@ -35,36 +35,47 @@
         <ul>
             <li class="attended">
                 <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                <div class="content">
-                    <label> Mathematics class </label>
-                    <p> 8:00 AM to 10:00 AM </p>
+                <div class="content-holder">
+                    <div class="content">
+                        <label> Mathematics class </label>
+                        <p> 8:00 AM to 10:00 AM </p>
+                    </div>
+                    <span class="status"> Attended </span>
                 </div>
-
             </li>
 
             <li class="absent">
                 <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
-                <div class="content">
-                    <label> Physics class </label>
-                    <p> 11:00 AM to 1:00 PM </p>
+                <div class="content-holder">
+                    <div class="content">
+                        <label> Physics class </label>
+                        <p> 11:00 AM to 1:00 PM </p>
+                    </div>
+                    <span class="status"> Absent </span>
                 </div>
 
             </li>
 
             <li class="late">
                 <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/warning.svg"></svg-icon>
-                <div class="content">
-                    <label> Chemistry class </label>
-                    <p> 2:00 PM to 3:00 PM </p>
+                <div class="content-holder">
+                    <div class="content">
+                        <label> Chemistry class </label>
+                        <p> 2:00 PM to 3:00 PM </p>
+                    </div>
+                    <span class="status"> Late by 10 mins </span>
                 </div>
 
             </li>
 
             <li class="progress">
                 <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/question-mark.svg"></svg-icon>
-                <div class="content">
-                    <label> Social Science class </label>
-                    <p> 4:00 AM to 5:00 PM </p>
+                <div class="content-holder">
+                    <div class="content">
+                        <label> Social Science class </label>
+                        <p> 4:00 AM to 5:00 PM </p>
+                    </div>
+                    <span class="status"> Progress </span>
                 </div>
 
             </li>
diff --git a/src/app/calendar/calendar.component.scss b/src/app/calendar/calendar.component.scss
index 5cfb0ad..b1387fd 100644
--- a/src/app/calendar/calendar.component.scss
+++ b/src/app/calendar/calendar.component.scss
@@ -11,6 +11,10 @@
     align-items: center;
     padding: 0 5%;
     height: 60px;
+    position: sticky;
+    position: -webkit-sticky;
+    top: 0;
+    z-index: 1;
 
     .close-button {
         border: 0px;
@@ -40,7 +44,7 @@
 .calendar-holder {
     position: sticky;
     position: -webkit-sticky;
-    top: 0;
+    top: 60px;
     background-color: var(--ash-black);
     left: 0;
     padding-top: 15px;
@@ -164,6 +168,10 @@
             .status-icon {
                 fill: var(--green);
             }
+
+            .status {
+                color: var(--green);
+            }
             &::before {
                 border-color: var(--green);
             }
@@ -174,6 +182,10 @@
                 fill: var(--danger);
             }
 
+            .status {
+                color: var(--danger);
+            }
+
             &::before {
                 border-color: var(--danger);
             }
@@ -184,6 +196,10 @@
                 fill: rgba(orange, 0.5);
             }
 
+            .status {
+                color: rgba(orange, 0.8);
+            }
+
             &::before {
                 border-color: rgba(orange, 0.5);
             }
@@ -194,6 +210,10 @@
                 fill: var(--teal);
             }
 
+            .status {
+                color: var(--teal);
+            }
+
             &::before {
                 border-color: var(--teal);
             }
@@ -222,8 +242,21 @@
             background-color: white;
         }
 
-        .content {
+        .content-holder {
             width: calc(100% - 40px);
+            display: flex;
+            padding: 0 10px;
+            align-items: center;
+
+            .content {
+                width: calc(100% - 150px);
+            }
+
+            .status {
+                font-size: 14px;
+                text-align: right;
+                flex-grow: 1;
+            }
         }
 
         label {