From d8d63e11310117366d38e841f7b4488932440d70 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Mon, 22 Jun 2020 13:25:08 +0530 Subject: [PATCH] Home page desktop UI --- src/app/tabs/home/home.component.html | 34 +++-- src/app/tabs/home/home.component.scss | 186 ++++++++++++++++++++++++-- src/app/tabs/home/home.component.ts | 25 ++-- src/app/tabs/tabs.component.scss | 12 +- 4 files changed, 219 insertions(+), 38 deletions(-) diff --git a/src/app/tabs/home/home.component.html b/src/app/tabs/home/home.component.html index 11393d4..5e63da9 100644 --- a/src/app/tabs/home/home.component.html +++ b/src/app/tabs/home/home.component.html @@ -5,15 +5,23 @@
-
+ + +

English Class

Starts in

00:00:59
- - Dwayne the Rock +

+ + 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. +

+
+ + Dwayne the Rock +
@@ -94,7 +102,7 @@ diff --git a/src/app/tabs/home/home.component.scss b/src/app/tabs/home/home.component.scss index 0744a19..265604d 100644 --- a/src/app/tabs/home/home.component.scss +++ b/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 { diff --git a/src/app/tabs/home/home.component.ts b/src/app/tabs/home/home.component.ts index 38a9fc5..9f1d05b 100644 --- a/src/app/tabs/home/home.component.ts +++ b/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; + } + } } } diff --git a/src/app/tabs/tabs.component.scss b/src/app/tabs/tabs.component.scss index 184737a..2db0d9b 100644 --- a/src/app/tabs/tabs.component.scss +++ b/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; + } } }