From cef9be23468549f171713b39721e3a8d582a834f Mon Sep 17 00:00:00 2001 From: kj1352 Date: Wed, 17 Jun 2020 11:26:44 +0530 Subject: [PATCH] Partial commit subject Forum --- .../hosting.ZGlzdFxsbXMtYXBwLW5ldw.cache | 46 ++-- .../courses/details/details.component.html | 93 ++++++- .../courses/details/details.component.scss | 246 ++++++++++++++++++ .../tabs/courses/details/details.component.ts | 3 +- src/assets/custom-icons/bookmark.svg | 1 + src/assets/custom-icons/comment.svg | 1 + src/assets/custom-icons/like.svg | 50 ++++ src/assets/custom-icons/share.svg | 1 + 8 files changed, 410 insertions(+), 31 deletions(-) create mode 100644 src/assets/custom-icons/bookmark.svg create mode 100644 src/assets/custom-icons/comment.svg create mode 100644 src/assets/custom-icons/like.svg create mode 100644 src/assets/custom-icons/share.svg diff --git a/.firebase/hosting.ZGlzdFxsbXMtYXBwLW5ldw.cache b/.firebase/hosting.ZGlzdFxsbXMtYXBwLW5ldw.cache index 6e3d1b9..614c6e1 100644 --- a/.firebase/hosting.ZGlzdFxsbXMtYXBwLW5ldw.cache +++ b/.firebase/hosting.ZGlzdFxsbXMtYXBwLW5ldw.cache @@ -1,5 +1,9 @@ favicon.ico,1591660351498,2c19690e9587bae12f419b34d2edeecc76808099540a9c9f4ea6194116cfc8f7 manifest.webmanifest,1591723813630,648e3277153af7b5ba06a2fb0a1da6b89f858f631f124008b5d5726744ab43f4 +polyfills-es2015.690002c25ea8557bb4b0.js,1591723916472,3e7c89812bf4fd87f9db14f54068690ed64b8be5e64316c9703f9616bef0b00e +polyfills-es5.9e286f6d9247438cbb02.js,1591723919562,4f1a99830dd49db1d1cffcb8b4a23931d26817406e84ff1924e315758d4437e8 +runtime-es2015.1eba213af0b233498d9d.js,1591723916214,8351e28e6622d0d4825d766649b2ae0e8767c34304fff594f102bfe52b7e4e29 +runtime-es5.1eba213af0b233498d9d.js,1591723916214,8351e28e6622d0d4825d766649b2ae0e8767c34304fff594f102bfe52b7e4e29 assets/custom-icons/add.svg,1591670038987,0beaf5cea5310deddf58f5dc94cffc2c26cecfaa5890aae565ab9705ee342506 assets/custom-icons/atomic.svg,1591670021393,48c2717734d3d37cbf7dabaf6fb22f0e5fcd662e319e9e61417c46461e236d8d assets/custom-icons/balance-sheet.svg,1591670023346,bc016780bfc19a6ef0e62332aa22139bcc237a6e19f070e51ce90e76919c66aa @@ -25,7 +29,11 @@ assets/custom-icons/money-growth.svg,1591670040955,fce9616268c9932e2531ff524accd assets/custom-icons/more.svg,1591677116018,8207372ec5304a64d33da1b21c92308d793d03f6cb83e0dd7c384f4db94de3f2 assets/custom-icons/mortarboard.svg,1591670033049,226d6ad39b7ea5f7da6321237835319335d29a6571dce10378a88c42b5be4f2e assets/custom-icons/newspaper.svg,1591670054424,3b6d1b91044b650e42124be91b5161d988e2f900cff843f74018ce614216527c +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/settings.svg,1591855957022,b8064cc999c75e79d1ca9306425e1e9fe9fe5c0b52cdd4fe184418613435ed20 +assets/custom-icons/star-medal.svg,1591857296783,70d31060ab666163c8c0397e4bacb9a0d5a32cab1437ea81f7c3b8569e24d046 assets/custom-icons/tab.svg,1591670015221,e521af92e8d3b8cf4f57a85f1091e3839200f65b52a3177703a02233783660f0 assets/icons/icon-128x128.png,1591723765595,1331bbcee85eb4c732d2b2468c0118ead141aa56c741dc1a93a54d4812e79d4d assets/icons/icon-144x144.png,1591723765602,ab4052ca6640d9378a090b7a6825df604c939ec738dae88d89500aee8eb7087f @@ -35,20 +43,24 @@ 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,1591859976810,d1b6a2ca3180b5631b7d3d345574ee2faaf2bbb302331f8a531e9e12bc78ded4 -3rdpartylicenses.txt,1591859967077,25cfb16f34dfd006ac8df880c23735d9fd75be3aa69fcfbd2f13b9b42add2368 -ngsw.json,1591859976831,03c739de8c383926f715a64a9e210e87627ba55104fbd16a6004987413d295fd -polyfills-es2015.690002c25ea8557bb4b0.js,1591723916472,3e7c89812bf4fd87f9db14f54068690ed64b8be5e64316c9703f9616bef0b00e -runtime-es2015.1eba213af0b233498d9d.js,1591723916214,8351e28e6622d0d4825d766649b2ae0e8767c34304fff594f102bfe52b7e4e29 -runtime-es5.1eba213af0b233498d9d.js,1591723916214,8351e28e6622d0d4825d766649b2ae0e8767c34304fff594f102bfe52b7e4e29 -safety-worker.js,1591859976832,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a -styles.7003c259858c27ffbfcc.css,1591859967077,5d9cdd8c0befba4473e41fc8f531ae8236ff2178638d85d994314960504e15eb -worker-basic.min.js,1591859976832,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a -assets/custom-icons/number-1-medal.svg,1591857318704,f52fb954e5e12c14af3671c2b419248932f49255049bcc820d9e50ae3f319200 -assets/custom-icons/plus.svg,1591852726572,a96d4d299742c206fe67437318fb570cc69359356a7f6ab9ccde30deee8e0af6 -assets/custom-icons/settings.svg,1591855957022,b8064cc999c75e79d1ca9306425e1e9fe9fe5c0b52cdd4fe184418613435ed20 -assets/custom-icons/star-medal.svg,1591857296783,70d31060ab666163c8c0397e4bacb9a0d5a32cab1437ea81f7c3b8569e24d046 -polyfills-es5.9e286f6d9247438cbb02.js,1591723919562,4f1a99830dd49db1d1cffcb8b4a23931d26817406e84ff1924e315758d4437e8 -ngsw-worker.js,1591859976831,40433abc9774bdb2aa53890310f0ca5017fe5b764eaa087ba509ab1ab8ea7be3 -main-es2015.2f069b420a31c7186041.js,1591859975039,ff2a96ec3176a11f611fa254963df3232c6988e6ff0dcd1683ac664bb514db32 -main-es5.2f069b420a31c7186041.js,1591859974085,e5bfec9a6e904739a094b68fe0a1445f5a02d308b1c10a403344cf3d20135b4e +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 diff --git a/src/app/tabs/courses/details/details.component.html b/src/app/tabs/courses/details/details.component.html index 47a41e4..75458b8 100644 --- a/src/app/tabs/courses/details/details.component.html +++ b/src/app/tabs/courses/details/details.component.html @@ -24,18 +24,18 @@ [ngClass]="{'active': selectedSegment === 'forum' }"> Forum -
-
-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab vel reiciendis. Repudiandae nobis pariatur laboriosam, natus quidem quos architecto provident similique officiis vero at cum excepturi eius, eligendi aperiam. -

- -
-
-
- +
diff --git a/src/app/tabs/courses/details/details.component.scss b/src/app/tabs/courses/details/details.component.scss index ee16314..4ad5f7b 100644 --- a/src/app/tabs/courses/details/details.component.scss +++ b/src/app/tabs/courses/details/details.component.scss @@ -327,3 +327,249 @@ } } } + +.forum-details { + .add-post { + width: 90%; + margin: 10px auto; + textarea { + border: 0px; + height: 70px; + display: block; + width: 100%; + font-size: 16px; + color: var(--light-grey); + padding: 10px; + background-color: transparent; + border-bottom: 2px solid var(--dark-grey); + resize: none; + margin-bottom: 20px; + } + } + + .input-holder { + display: flex; + align-items: center; + width: 100%; + justify-content: flex-start; + margin-bottom: 10px; + background-color: var(--ash-black); + border-radius: 5px; + padding: 10px; + height: 50px; + + .icon { + width: 20px; + height: 20px; + fill: var(--light-grey); + } + + input { + font-size: 14px; + border: 0px; + background-color: transparent; + padding: 0 10px; + color: var(--light-grey); + display: block; + flex-grow: 1; + + &[type="file"] { + height: auto; + } + } + } + + .add-post-button { + margin-top: 20px; + display: block; + width: 100px; + margin-left: auto; + height: 40px; + font-size: 14px; + background-color: var(--teal-green); + color: white; + border: 0px; + border-radius: 7px; + } + + .more-options-slideup { + position: fixed; + width: 100%; + background-color: var(--ash-black); + left: 0; + bottom: 0; + z-index: 1; + transform: translateY(100vh); + transition: box-shadow 0.5s, transform 0.5s; + + &.active { + box-shadow: 0 0 100vw 100vh rgba(black, 0.8); + transform: translateY(0); + } + + header { + background-color: var(--ash-black); + filter: brightness(85%); + display: flex; + align-items: center; + height: 45px; + padding: 0 5%; + position: relative; + } + + .close-button { + border: 0px; + background-color: transparent; + margin-left: auto; + + .icon { + width: 13px; + height: 13px; + fill: var(--light-grey); + } + } + + h4 { + color: var(--light-grey); + font-size: 14px; + font-weight: 400; + } + + ul { + position: relative; + list-style: none; + padding: 0 5%; + + li { + text-align: center; + color: white; + margin: 20px auto; + font-size: 14px; + } + } + } +} + + +.forum-post-list { + list-style: none; + width: 100%; + margin: 20px auto 0; + overflow: hidden; + + li { + background-color: var(--ash-black); + padding: 20px 5%; + border-bottom: 1px solid var(--dark-grey); + position: relative; + } + + .book-mark-button { + position: absolute; + right: 10px; + top: 0; + border: 0px; + background-color: transparent; + + .icon { + width: 20px; + height: 20px; + fill: var(--light-grey); + } + } + + h5 { + font-size: 16px; + color: white; + font-weight: 400; + margin: 0px auto 15px; + } + + p { + font-size: 14px; + color: var(--light-grey); + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + max-height: 50px; + margin: 15px auto; + line-height: 1.7; + } + + .author { + display: flex; + align-items: center; + width: 100%; + margin: 15px auto; + + img { + width: 20px; + height: 20px; + border-radius: 50%; + margin-right: 7px; + } + + label { + font-size: 12px; + color: white; + } + + .time-stamp { + margin-left: 20px; + color: var(--light-grey); + font-size: 12px; + + &::before { + content: ''; + width: 5px; + height: 5px; + background-color: var(--light-grey); + border-radius: 50%; + display: inline-block; + margin-right: 7px; + vertical-align: middle; + } + } + } + + .action-buttons { + display: flex; + align-items: center; + width: 100%; + + button { + background-color: transparent; + color: var(--light-grey); + border: 0px; + padding: 0 10px; + + .icon { + width: 15px; + height: 15px; + margin-right: 5px; + fill: var(--light-grey); + } + + span { + vertical-align: top; + font-size: 12px; + } + + &.more-button { + margin-left: auto; + border: 1px solid var(--light-grey); + border-radius: 5px; + display: flex; + align-items: center; + justify-content: center; + + .icon { + margin-right: 0; + } + } + } + } + + +} diff --git a/src/app/tabs/courses/details/details.component.ts b/src/app/tabs/courses/details/details.component.ts index f2c1b98..19d67f9 100644 --- a/src/app/tabs/courses/details/details.component.ts +++ b/src/app/tabs/courses/details/details.component.ts @@ -9,10 +9,11 @@ import { Location } from '@angular/common'; styleUrls: ['./details.component.scss'] }) export class DetailsComponent implements OnInit { - selectedSegment: string = 'home'; + selectedSegment: string = 'forum'; heading: string; routeSubscription: Subscription; selectedChapter: number = 1; + showMorePostOptions: boolean = false; constructor( private route: ActivatedRoute, diff --git a/src/assets/custom-icons/bookmark.svg b/src/assets/custom-icons/bookmark.svg new file mode 100644 index 0000000..f3b79a7 --- /dev/null +++ b/src/assets/custom-icons/bookmark.svg @@ -0,0 +1 @@ + diff --git a/src/assets/custom-icons/comment.svg b/src/assets/custom-icons/comment.svg new file mode 100644 index 0000000..5142b05 --- /dev/null +++ b/src/assets/custom-icons/comment.svg @@ -0,0 +1 @@ + diff --git a/src/assets/custom-icons/like.svg b/src/assets/custom-icons/like.svg new file mode 100644 index 0000000..21197be --- /dev/null +++ b/src/assets/custom-icons/like.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom-icons/share.svg b/src/assets/custom-icons/share.svg new file mode 100644 index 0000000..e1f0659 --- /dev/null +++ b/src/assets/custom-icons/share.svg @@ -0,0 +1 @@ +