From ffaf5ae7439a2c39fb2d404149142db94dbb8339 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Tue, 16 Jun 2020 17:49:34 +0530 Subject: [PATCH] more page UI --- src/app/app-routing.module.ts | 2 - src/app/app.module.ts | 2 - src/app/profile/profile.component.html | 101 --------- src/app/profile/profile.component.scss | 182 --------------- src/app/profile/profile.component.spec.ts | 25 --- src/app/profile/profile.component.ts | 23 -- src/app/tabs/more/more.component.html | 134 ++++++++++- src/app/tabs/more/more.component.scss | 258 ++++++++++++++++++++++ src/app/tabs/more/more.component.ts | 14 +- src/app/tabs/tabs.component.html | 1 + src/assets/custom-icons/attendance-1.svg | 1 + src/assets/custom-icons/class.svg | 99 +++++++++ src/assets/custom-icons/duel.svg | 129 +++++++++++ src/assets/custom-icons/forum.svg | 1 + 14 files changed, 630 insertions(+), 342 deletions(-) delete mode 100644 src/app/profile/profile.component.html delete mode 100644 src/app/profile/profile.component.scss delete mode 100644 src/app/profile/profile.component.spec.ts delete mode 100644 src/app/profile/profile.component.ts create mode 100644 src/assets/custom-icons/attendance-1.svg create mode 100644 src/assets/custom-icons/class.svg create mode 100644 src/assets/custom-icons/duel.svg create mode 100644 src/assets/custom-icons/forum.svg diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index dfdd5df..7bde8ae 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -6,7 +6,6 @@ import { DetailsComponent } from './tabs/courses/details/details.component'; import { VideoChapterComponent } from './tabs/courses/video-chapter/video-chapter.component'; import { NotesDetailsComponent } from './tabs/courses/notes-details/notes-details.component'; import { CalendarComponent } from './calendar/calendar.component'; -import { ProfileComponent } from './profile/profile.component'; import { AttendanceComponent } from './tabs/more/attendance/attendance.component'; const routes: Routes = [ @@ -19,7 +18,6 @@ const routes: Routes = [ { component: VideoChapterComponent, path: 'video-chapter/:heading' }, { component: NotesDetailsComponent, path: 'notes-details/:heading' }, { component: CalendarComponent, path: 'calendar' }, - { component: ProfileComponent, path: 'profile' }, { component: AttendanceComponent, path: 'attendance'}, ]; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 0a03753..8311ad7 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -19,7 +19,6 @@ import { NotesDetailsComponent } from './tabs/courses/notes-details/notes-detail import { ServiceWorkerModule } from '@angular/service-worker'; import { environment } from '../environments/environment'; import { CalendarComponent } from './calendar/calendar.component'; -import { ProfileComponent } from './profile/profile.component'; import { AttendanceComponent } from './tabs/more/attendance/attendance.component'; @NgModule({ @@ -35,7 +34,6 @@ import { AttendanceComponent } from './tabs/more/attendance/attendance.component VideoChapterComponent, NotesDetailsComponent, CalendarComponent, - ProfileComponent, AttendanceComponent, ], imports: [ diff --git a/src/app/profile/profile.component.html b/src/app/profile/profile.component.html deleted file mode 100644 index 979f8f0..0000000 --- a/src/app/profile/profile.component.html +++ /dev/null @@ -1,101 +0,0 @@ -
-
- - - -
- -
-
-
- -
-
Dwayne The Rock
-

3000 XP

-
-
- -
- - - -
- -
-
    -
  • - -
    - -

    2 Teachers starred your profile

    -
    -
    • - -
  • - -
    - -

    Topper of 5 Tests

    -
    -
    • - -
  • - -
    - -

    2 Teachers starred your profile

    -
    -
    • - -
  • - -
    - -

    Topper of 5 Tests

    -
    -
    • -
- - -
    -
  • - -
    - -

    1000XP

    -
    -
    • - -
  • - -
    - -

    1XP

    -
    -
    • - -
  • - -
    - -

    10XP

    -
    -
    • - -
  • - -
    - -

    -19XP

    -
    -
    • -
-
-
diff --git a/src/app/profile/profile.component.scss b/src/app/profile/profile.component.scss deleted file mode 100644 index 7a4436d..0000000 --- a/src/app/profile/profile.component.scss +++ /dev/null @@ -1,182 +0,0 @@ -.page { - height: 100vh; - overflow: auto; - background-color: var(--ash-black); -} - - -.nav-header { - background-color: var(--ash-black); - display: flex; - align-items: center; - padding: 0 5%; - height: 60px; - position: sticky; - position: -webkit-sticky; - top: 0; - z-index: 1; - - button { - border: 0px; - background-color: transparent; - .icon { - width: 16px; - height: 16px; - fill: var(--light-grey); - } - - &.settings-button { - margin-left: auto; - - .icon { - width: 20px; - height: 20px; - } - } - } -} - -.upfold { - padding: 0 0 20px; - width: 100%; - text-align: center; - - figure { - width: 100px; - height: 100px; - margin: 0 auto 10px; - border-radius: 50%; - overflow: hidden; - border: 5px solid var(--dark-grey); - display: block; - - img { - width: 100%; - height: 100%; - object-fit: cover; - object-position: top; - display: block; - } - } - - h5 { - font-weight: 500; - font-size: 16px; - color: white; - } - - p { - font-size: 14px; - color: var(--light-grey); - } -} - -.segment-buttons { - display: flex; - align-items: stretch; - height: 35px; - border-radius: 7px; - overflow: hidden; - width: 90%; - margin: 0 auto 20px; - background-color: var(--dark-grey); - - button { - flex-grow: 1; - border-radius: 7px; - background-color: transparent; - color: white; - font-size: 13px; - border: 0px; - - &.active { - background-color: white; - color: var(--teal); - font-weight: 500; - } - } -} - - -.badge-list { - list-style: none; - width: 90%; - margin: 0 auto; - background-color: white; - border-radius: 10px; - padding: 0px 10px; - - li { - display: flex; - width: 100%; - align-items: center; - justify-content: space-between; - padding: 15px 10px; - border-bottom: 1px solid #f3f3f3; - } - - .icon { - width: 40px; - height: 40px; - } - - .content { - width: calc(100% - 60px); - } - - label { - display: block; - font-size: 16px; - color: var(--ash-black); - font-weight: 500; - } - - p { - font-size: 14px; - color: var(--light-grey); - } -} - - -.friend-list { - list-style: none; - width: 90%; - margin: 0 auto; - background-color: white; - border-radius: 10px; - padding: 0px 10px; - - li { - display: flex; - width: 100%; - align-items: center; - justify-content: space-between; - padding: 15px 10px; - border-bottom: 1px solid #f3f3f3; - } - - img { - width: 50px; - height: 50px; - border-radius: 50px; - overflow: hidden; - object-fit: cover; - object-position: top; - } - - .content { - width: calc(100% - 70px); - } - - label { - display: block; - font-size: 16px; - color: var(--ash-black); - font-weight: 500; - } - - p { - font-size: 14px; - color: var(--light-grey); - } -} diff --git a/src/app/profile/profile.component.spec.ts b/src/app/profile/profile.component.spec.ts deleted file mode 100644 index 692b234..0000000 --- a/src/app/profile/profile.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ProfileComponent } from './profile.component'; - -describe('ProfileComponent', () => { - let component: ProfileComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ ProfileComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(ProfileComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/profile/profile.component.ts b/src/app/profile/profile.component.ts deleted file mode 100644 index ddd21eb..0000000 --- a/src/app/profile/profile.component.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { Location } from '@angular/common'; - -@Component({ - selector: 'app-profile', - templateUrl: './profile.component.html', - styleUrls: ['./profile.component.scss'] -}) -export class ProfileComponent implements OnInit { - selectedSegment: string = 'badges'; - - constructor( - private location: Location - ) { } - - ngOnInit(): void { - } - - back() { - this.location.back(); - } - -} diff --git a/src/app/tabs/more/more.component.html b/src/app/tabs/more/more.component.html index 20309d6..0fffd9f 100644 --- a/src/app/tabs/more/more.component.html +++ b/src/app/tabs/more/more.component.html @@ -1 +1,133 @@ -

more works!

+
+ +
+ +
+ +
+
+
+ +
+
Dwayne The Rock
+

3000 XP

+
+
+ + + + +
+
    +
  • + +

    Attendance

    +
    • + +
  • + +

    My Class

    +
    • + +
  • + +

    Duel

    +
    • + +
  • + +

    Forum

    +
    • +
+ + +
+ +
+
+ + + +
+ +
+
    +
  • + +
    + +

    2 Teachers starred your profile

    +
    +
    • + +
  • + +
    + +

    Topper of 5 Tests

    +
    +
    • + +
  • + +
    + +

    2 Teachers starred your profile

    +
    +
    • + +
  • + +
    + +

    Topper of 5 Tests

    +
    +
    • +
+ + +
    +
  • + +
    + +

    1000XP

    +
    +
    • + +
  • + +
    + +

    1XP

    +
    +
    • + +
  • + +
    + +

    10XP

    +
    +
    • + +
  • + +
    + +

    -19XP

    +
    +
    • +
+
+
+ +
diff --git a/src/app/tabs/more/more.component.scss b/src/app/tabs/more/more.component.scss index e69de29..c82e2f4 100644 --- a/src/app/tabs/more/more.component.scss +++ b/src/app/tabs/more/more.component.scss @@ -0,0 +1,258 @@ +.page-container { + position: relative; +} + +.nav-header { + display: flex; + align-items: center; + padding: 0 5%; + height: 60px; + position: absolute; + top: 0; + z-index: 1; + width: 100%; + + button { + border: 0px; + background-color: transparent; + .icon { + width: 16px; + height: 16px; + fill: var(--light-grey); + } + + &.settings-button { + margin-left: auto; + + .icon { + width: 20px; + height: 20px; + } + } + } +} + +.upfold { + width: 100%; + text-align: center; + height: 30vh; + display: flex; + align-items: center; + justify-content: center; + background-color: var(--black); + + figure { + width: 100px; + height: 100px; + margin: 0 auto 10px; + border-radius: 50%; + overflow: hidden; + border: 5px solid var(--dark-grey); + display: block; + + img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: top; + display: block; + } + } + + h5 { + font-weight: 500; + font-size: 16px; + color: white; + } + + p { + font-size: 14px; + color: var(--light-grey); + } +} + +.profile-details-button { + width: 100%; + margin: 0 auto; + background-color: var(--dark-grey); + border: 0px; + display: flex; + align-items: center; + justify-content: space-between; + color: white; + font-size: 15px; + height: 50px; + border-radius: 0px; + padding: 0 5%; + + &.active .icon { + transform: rotate(0deg); + } + + .icon { + fill: white; + width: 15px; + height: 15px; + transform: rotate(90deg); + } +} + +.segment-buttons { + display: flex; + align-items: stretch; + height: 35px; + border-radius: 7px; + overflow: hidden; + width: 90%; + margin: 20px auto; + background-color: var(--dark-grey); + padding: 1px; + + button { + flex-grow: 1; + border-radius: 7px; + background-color: transparent; + color: white; + font-size: 13px; + border: 0px; + + &.active { + background-color: white; + color: var(--teal); + font-weight: 500; + } + } +} + +.more-page-list { + display: flex; + align-items: stretch; + flex-wrap: wrap; + justify-content: space-between; + width: 90%; + margin: 20px auto; + list-style: none; + + li { + text-align: center; + width: 30%; + background-color: white; + border-radius: 10px; + box-shadow: 1px 1px 5px var(--light-grey); + margin-bottom: 20px; + padding: 15px 15px 10px; + + .icon { + width: 40px; + height: 40px; + display: block; + margin: 0 auto; + } + + h4 { + font-weight: 500; + color: var(--dark-grey); + font-size: 13px; + margin-top: 5px; + } + } +} + +.logout-button { + display: block; + width: 90%; + margin: 0 auto 20px; + background-color: var(--danger); + color: white; + border: 0px; + border-radius: 5px; + height: 50px; + font-size: 16px; +} + +.badge-list { + list-style: none; + width: 90%; + margin: 0 auto; + border-radius: 10px; + padding: 0px 10px; + + li { + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; + padding: 15px 10px; + background-color: white; + box-shadow: 1px 1px 5px var(--light-grey); + border-radius: 15px; + margin-bottom: 15px; + } + + .icon { + width: 40px; + height: 40px; + } + + .content { + width: calc(100% - 60px); + } + + label { + display: block; + font-size: 16px; + color: var(--ash-black); + font-weight: 500; + } + + p { + font-size: 14px; + color: var(--light-grey); + } +} + + +.friend-list { + list-style: none; + width: 90%; + margin: 0 auto; + border-radius: 10px; + padding: 0px 10px; + + li { + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; + padding: 15px 10px; + background-color: white; + box-shadow: 1px 1px 5px var(--light-grey); + border-radius: 15px; + margin-bottom: 15px; + } + + img { + width: 50px; + height: 50px; + border-radius: 50px; + overflow: hidden; + object-fit: cover; + object-position: top; + } + + .content { + width: calc(100% - 70px); + } + + label { + display: block; + font-size: 16px; + color: var(--ash-black); + font-weight: 500; + } + + p { + font-size: 14px; + color: var(--light-grey); + } +} diff --git a/src/app/tabs/more/more.component.ts b/src/app/tabs/more/more.component.ts index b933c90..a075e87 100644 --- a/src/app/tabs/more/more.component.ts +++ b/src/app/tabs/more/more.component.ts @@ -1,15 +1,17 @@ import { Component, OnInit } from '@angular/core'; @Component({ - selector: 'app-more', - templateUrl: './more.component.html', - styleUrls: ['./more.component.scss'] + selector: 'app-more', + templateUrl: './more.component.html', + styleUrls: ['./more.component.scss'] }) export class MoreComponent implements OnInit { + selectedSegment: string = 'badges'; + profileDetails: boolean = false; - constructor() { } + constructor() { } - ngOnInit(): void { - } + ngOnInit(): void { + } } diff --git a/src/app/tabs/tabs.component.html b/src/app/tabs/tabs.component.html index ce5b630..bad54ea 100644 --- a/src/app/tabs/tabs.component.html +++ b/src/app/tabs/tabs.component.html @@ -1,6 +1,7 @@
+
diff --git a/src/assets/custom-icons/attendance-1.svg b/src/assets/custom-icons/attendance-1.svg new file mode 100644 index 0000000..22621d1 --- /dev/null +++ b/src/assets/custom-icons/attendance-1.svg @@ -0,0 +1 @@ + diff --git a/src/assets/custom-icons/class.svg b/src/assets/custom-icons/class.svg new file mode 100644 index 0000000..114982f --- /dev/null +++ b/src/assets/custom-icons/class.svg @@ -0,0 +1,99 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom-icons/duel.svg b/src/assets/custom-icons/duel.svg new file mode 100644 index 0000000..01768a6 --- /dev/null +++ b/src/assets/custom-icons/duel.svg @@ -0,0 +1,129 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom-icons/forum.svg b/src/assets/custom-icons/forum.svg new file mode 100644 index 0000000..1713bbf --- /dev/null +++ b/src/assets/custom-icons/forum.svg @@ -0,0 +1 @@ +