diff --git a/package-lock.json b/package-lock.json index 6c79098..9439b71 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1455,6 +1455,32 @@ "to-fast-properties": "^2.0.0" } }, + "@fortawesome/angular-fontawesome": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.6.1.tgz", + "integrity": "sha512-ARQjtRuT+ZskzJDJKPwuiGO3+7nS0iyNLU/uHVJHfG4LwGJxwVIGldwg1SU957sra0Z0OtWEajHMhiS4vB9LwQ==" + }, + "@fortawesome/fontawesome-common-types": { + "version": "0.2.28", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz", + "integrity": "sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "1.2.28", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz", + "integrity": "sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.28" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "5.13.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.0.tgz", + "integrity": "sha512-IHUgDJdomv6YtG4p3zl1B5wWf9ffinHIvebqQOmV3U+3SLw4fC+LUCCgwfETkbTtjy5/Qws2VoVf6z/ETQpFpg==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.28" + } + }, "@istanbuljs/schema": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.2.tgz", diff --git a/package.json b/package.json index 1b40c82..9c8413a 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,9 @@ "@angular/platform-browser": "~9.1.3", "@angular/platform-browser-dynamic": "~9.1.3", "@angular/router": "~9.1.3", + "@fortawesome/angular-fontawesome": "^0.6.1", + "@fortawesome/fontawesome-svg-core": "^1.2.28", + "@fortawesome/free-solid-svg-icons": "^5.13.0", "rxjs": "~6.5.4", "tslib": "^1.10.0", "zone.js": "~0.10.2" diff --git a/src/app/core/commons/variables.less b/src/app/core/commons/variables.less new file mode 100644 index 0000000..d9bc831 --- /dev/null +++ b/src/app/core/commons/variables.less @@ -0,0 +1,10 @@ +@color-white: white; +@color-gray: #f2f3f7; +@color-gray1: #f2f3f7df; +@color-gray2: #d9dbe3; +@color-gray3: #979cac; +@color-black: #414452; +@color-green: #9bc837; +@color-green1: #8cc837; +@color-blue: #30b6dd; +@color-blue1: #64b6dd; diff --git a/src/app/core/mocks/mocked-data.ts b/src/app/core/mocks/mocked-data.ts index f831078..bfb19d2 100644 --- a/src/app/core/mocks/mocked-data.ts +++ b/src/app/core/mocks/mocked-data.ts @@ -5,21 +5,65 @@ export const fakeVideoList: CourseItemInfo[] = [ id: 1, title: 'video_1', createdAtDate: new Date, - durationTime: '120', - description: 'description of 1st video' - }, + durationTime: 120, + description: + `Lorem, ipsum dolor sit amet consectetur adipisicing elit. + Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus + nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla. + Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus + nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla. + ` + } , { id: 2, title: 'video_2', createdAtDate: new Date, - durationTime: '120', - description: 'description of 2nd video' + durationTime: 180, + description: + `Lorem, ipsum dolor sit amet consectetur adipisicing elit. + Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus + nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla. + Lorem, ipsum dolor sit amet consectetur adipisicing elit. + Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus + ` }, { id: 3, title: 'video_3', createdAtDate: new Date, - durationTime: '120', - description: 'description of 3st video' + durationTime: 180, + description: + `Lorem, ipsum dolor sit amet consectetur adipisicing elit. + Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus + nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla. + Lorem, ipsum dolor sit amet consectetur adipisicing elit. + Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus + ` + }, + { + id: 4, + title: 'video_4', + createdAtDate: new Date, + durationTime: 132, + description: + `Lorem, ipsum dolor sit amet consectetur adipisicing elit. + Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus + nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla. + Lorem, ipsum dolor sit amet consectetur adipisicing elit. + Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus + ` + }, + { + id: 5, + title: 'video_5', + createdAtDate: new Date, + durationTime: 120, + description: + `Lorem, ipsum dolor sit amet consectetur adipisicing elit. + Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus + nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla. + Lorem, ipsum dolor sit amet consectetur adipisicing elit. + Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus + ` } ]; diff --git a/src/app/core/models/course-item.interface.ts b/src/app/core/models/course-item.interface.ts index 5113956..a5361ca 100644 --- a/src/app/core/models/course-item.interface.ts +++ b/src/app/core/models/course-item.interface.ts @@ -3,6 +3,6 @@ export interface CourseItemInfo { id: number; title: string; createdAtDate: Date; - durationTime: string; + durationTime: number; description: string; } diff --git a/src/app/core/pipes/transform-minutes.pipe.ts b/src/app/core/pipes/transform-minutes.pipe.ts new file mode 100644 index 0000000..6fb81e3 --- /dev/null +++ b/src/app/core/pipes/transform-minutes.pipe.ts @@ -0,0 +1,34 @@ +import { Pipe, PipeTransform } from '@angular/core'; +/* + * Transform time in hh:mm format + * Usage: + * time | transformMinutesToHours + * Example: + * {{ 120 | transformMinutesToHours }} + * formats to: 2h + * + * {{ 16 | transformMinutesToHours }} + * formats to: 16min + * + * {{ 61 | transformMinutesToHours }} + * formats to: 1h 1min +*/ +const MINUTE_IN_SEC: number = 60; +@Pipe({name: 'transformMinutesToHours'}) + +export class TransformMinutesToHoursPipe implements PipeTransform { + public transform(time: number): string { + if (time < MINUTE_IN_SEC) { + return `${time}min`; + } + + if (time % MINUTE_IN_SEC === 0) { + return `${Math.floor(time / MINUTE_IN_SEC)}h`; + } + + const hours: number = Math.floor(time / MINUTE_IN_SEC); + const minutes: number = time % MINUTE_IN_SEC; + + return `${hours}h ${minutes}min`; + } +} diff --git a/src/app/course-page/course-page.component.html b/src/app/course-page/course-page.component.html new file mode 100644 index 0000000..b9d1c81 --- /dev/null +++ b/src/app/course-page/course-page.component.html @@ -0,0 +1 @@ +

course-page works!

diff --git a/src/app/course-page/course-page.component.less b/src/app/course-page/course-page.component.less new file mode 100644 index 0000000..e69de29 diff --git a/src/app/course-page/course-page.component.spec.ts b/src/app/course-page/course-page.component.spec.ts new file mode 100644 index 0000000..c795e29 --- /dev/null +++ b/src/app/course-page/course-page.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CoursePageComponent } from './course-page.component'; + +describe('CoursePageComponent', () => { + let component: CoursePageComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CoursePageComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CoursePageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/course-page/course-page.component.ts b/src/app/course-page/course-page.component.ts new file mode 100644 index 0000000..550e833 --- /dev/null +++ b/src/app/course-page/course-page.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-course-page', + templateUrl: './course-page.component.html', + styleUrls: ['./course-page.component.less'] +}) +export class CoursePageComponent { } diff --git a/src/app/course-page/course-page.module.ts b/src/app/course-page/course-page.module.ts new file mode 100644 index 0000000..abd3368 --- /dev/null +++ b/src/app/course-page/course-page.module.ts @@ -0,0 +1,10 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { CoursePageComponent } from './course-page.component'; + +@NgModule({ + declarations: [CoursePageComponent], + exports: [CoursePageComponent], + imports: [CommonModule] +}) +export class CoursePageModule { } diff --git a/src/app/home-page/course-list/course-item/course-item.component.html b/src/app/home-page/course-list/course-item/course-item.component.html new file mode 100644 index 0000000..d3b6d33 --- /dev/null +++ b/src/app/home-page/course-list/course-item/course-item.component.html @@ -0,0 +1,39 @@ +
  • +
    +
    + +
    + + title: {{item.title}} + +
    + +
    +

    + + {{item.durationTime | transformMinutesToHours}} +

    +

    + + {{item.createdAtDate | date}} +

    +
    + +
    + +
    + {{item.description}} +
    +
    + +
    + + +
    +
    • \ No newline at end of file diff --git a/src/app/home-page/course-list/course-item/course-item.component.less b/src/app/home-page/course-list/course-item/course-item.component.less new file mode 100644 index 0000000..e54ca20 --- /dev/null +++ b/src/app/home-page/course-list/course-item/course-item.component.less @@ -0,0 +1,87 @@ +@import '../../../core/commons/variables'; + +.course-list-item { + display: flex; + flex-wrap: nowrap; + padding: 20px; + border: 1px solid @color-gray; + background-color: @color-white; + border-radius: 6px; + box-shadow: 5px 5px 18px @color-gray2; + margin-bottom: 20px; + + &-data { + width: 80%; + padding-right: 50px; + font-family: 'SourseSansPro Regular'; + + &-header { + align-items: center; + display: flex; + justify-content: space-between; + + &-info { + display: flex; + color: @color-gray2; + + p:first-child { + margin-right: 20px; + } + } + + &-title { + display: flex; + a { + font-size: 30px; + text-decoration: none; + text-transform: uppercase; + + &:hover { + text-decoration: underline; + } + } + } + } + + &-text { + line-height: 2; + } + } + + &-actions { + display: flex; + align-items: center; + justify-content: center; + width: 20%; + + button { + height: 25px; + width: 200px; + margin-right: 8px; + margin-left: 8px; + background-color: @color-blue; + color: @color-white; + border-radius: 3px; + border: none; + font-size: 12px; + font-family: 'SourseSansPro Semibold'; + cursor: pointer; + outline: none; + &:hover { + background-color: @color-blue1; + } + } + } + + &-loadmore { + margin-top: 15px; + display: flex; + justify-content: center; + align-items: center; + height: 50px; + border: 1px solid @color-gray; + box-shadow: 5px 5px 18px @color-gray2; + background-color: @color-white; + border-radius: 6px; + } +} \ No newline at end of file diff --git a/src/app/home-page/course-list/course-item/course-item.component.spec.ts b/src/app/home-page/course-list/course-item/course-item.component.spec.ts new file mode 100644 index 0000000..699fc04 --- /dev/null +++ b/src/app/home-page/course-list/course-item/course-item.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CourseItemComponent } from './course-item.component'; + +describe('CourseItemComponent', () => { + let component: CourseItemComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CourseItemComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CourseItemComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home-page/course-list/course-item/course-item.component.ts b/src/app/home-page/course-list/course-item/course-item.component.ts new file mode 100644 index 0000000..91fed04 --- /dev/null +++ b/src/app/home-page/course-list/course-item/course-item.component.ts @@ -0,0 +1,24 @@ +import { Component, Input, Output, EventEmitter } from '@angular/core'; +import { IconDefinition, faEdit, faTrash, faClock, faCalendar } from '@fortawesome/free-solid-svg-icons'; +import { CourseItemInfo } from 'src/app/core/models'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'app-course-item', + templateUrl: './course-item.component.html', + styleUrls: ['./course-item.component.less'] +}) +export class CourseItemComponent { + @Input() public item: CourseItemInfo; + @Input() public routerLink: Router; + @Output() public onDeleteCourse: EventEmitter = new EventEmitter(); + + public editButtonIcon: IconDefinition = faEdit; + public trashButtonIcon: IconDefinition = faTrash; + public clockButtonIcon: IconDefinition = faClock; + public calendarButtonIcon: IconDefinition = faCalendar; + + public onDeleteCourseEmit(id: number): void { + return this.onDeleteCourse.emit(id); + } +} diff --git a/src/app/home-page/course-list/course-list.component.html b/src/app/home-page/course-list/course-list.component.html index 500bef8..7833452 100644 --- a/src/app/home-page/course-list/course-list.component.html +++ b/src/app/home-page/course-list/course-list.component.html @@ -1,19 +1,12 @@ -

    course-list works!

    -
      -
    • -

      - id: {{item.id}} -

      -

      - title: {{item.title}} -

      -

      - created: {{item.createdAtDate}} -

      -

      - duration: {{item.durationTime}} -

      -
      • + - - diff --git a/src/app/home-page/course-list/course-list.component.less b/src/app/home-page/course-list/course-list.component.less index 35fd24b..3938adb 100644 --- a/src/app/home-page/course-list/course-list.component.less +++ b/src/app/home-page/course-list/course-list.component.less @@ -1,8 +1,18 @@ -.course-list-items { +@import '../../core/commons/variables'; + +.course-list { list-style-type: none; padding-inline-start: 0; - .course-list-item { - padding: 20px; - border: 1px solid gray; + + &-item-loadmore { + margin-top: 15px; + display: flex; + justify-content: center; + align-items: center; + height: 50px; + border: 1px solid @color-gray; + box-shadow: 5px 5px 18px @color-gray2; + background-color: @color-white; + border-radius: 6px; } -} +} \ No newline at end of file diff --git a/src/app/home-page/course-list/course-list.component.ts b/src/app/home-page/course-list/course-list.component.ts index e92a5d8..7d249b3 100644 --- a/src/app/home-page/course-list/course-list.component.ts +++ b/src/app/home-page/course-list/course-list.component.ts @@ -7,6 +7,9 @@ import { CourseItemInfo } from 'src/app/core/models'; styleUrls: ['./course-list.component.less'] }) export class CourseListComponent { - @Input() public courses: CourseItemInfo[] = []; + + public onDeleteCourse(id: number): void { + console.log(id); + } } diff --git a/src/app/home-page/home-page.component.html b/src/app/home-page/home-page.component.html index 4f02074..b782d6b 100644 --- a/src/app/home-page/home-page.component.html +++ b/src/app/home-page/home-page.component.html @@ -1,7 +1,9 @@ -
      - -
      +
      +
      + +
      -
      - -
      +
      + +
      +
      \ No newline at end of file diff --git a/src/app/home-page/home-page.component.less b/src/app/home-page/home-page.component.less index e69de29..4d598cc 100644 --- a/src/app/home-page/home-page.component.less +++ b/src/app/home-page/home-page.component.less @@ -0,0 +1,8 @@ +@import '../core/commons/variables'; + +.course-page { + padding-bottom: 30px; + &-toolbox { + padding-top: 25px; + } +} \ No newline at end of file diff --git a/src/app/home-page/home-page.component.ts b/src/app/home-page/home-page.component.ts index 3ca2d63..6c5d298 100644 --- a/src/app/home-page/home-page.component.ts +++ b/src/app/home-page/home-page.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { fakeVideoList } from '../core/mocks/mocked-data'; import { CourseItemInfo } from '../core/models'; @@ -7,7 +7,11 @@ import { CourseItemInfo } from '../core/models'; templateUrl: './home-page.component.html', styleUrls: ['./home-page.component.less'] }) -export class HomePageComponent { +export class HomePageComponent implements OnInit { - public courses: CourseItemInfo[] = fakeVideoList; + public courses: CourseItemInfo[]; + + public ngOnInit(): void { + this.courses = fakeVideoList; + } } diff --git a/src/app/home-page/home-page.module.ts b/src/app/home-page/home-page.module.ts index 25904cd..789ba3b 100644 --- a/src/app/home-page/home-page.module.ts +++ b/src/app/home-page/home-page.module.ts @@ -1,10 +1,14 @@ import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; import { CommonModule } from '@angular/common'; import { HomePageComponent } from './home-page.component'; import { CourseListComponent } from './course-list/course-list.component'; import { ToolboxComponent } from './toolbox/toolbox.component'; import { SearchComponent } from './toolbox/search/search.component'; import { AddCourseComponent } from './toolbox/add-course/add-course.component'; +import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; +import { CourseItemComponent } from './course-list/course-item/course-item.component'; +import { TransformMinutesToHoursPipe } from '../core/pipes/transform-minutes.pipe'; @NgModule({ declarations: [ @@ -12,11 +16,15 @@ import { AddCourseComponent } from './toolbox/add-course/add-course.component'; CourseListComponent, ToolboxComponent, SearchComponent, - AddCourseComponent + AddCourseComponent, + CourseItemComponent, + TransformMinutesToHoursPipe ], exports: [HomePageComponent], imports: [ - CommonModule + CommonModule, + FontAwesomeModule, + FormsModule ] }) export class HomePageModule { } diff --git a/src/app/home-page/toolbox/add-course/add-course.component.html b/src/app/home-page/toolbox/add-course/add-course.component.html index 7102df9..84f5202 100644 --- a/src/app/home-page/toolbox/add-course/add-course.component.html +++ b/src/app/home-page/toolbox/add-course/add-course.component.html @@ -1 +1,8 @@ -

      add-course works!

      +
      + +
      \ No newline at end of file diff --git a/src/app/home-page/toolbox/add-course/add-course.component.less b/src/app/home-page/toolbox/add-course/add-course.component.less index e69de29..36f00b0 100644 --- a/src/app/home-page/toolbox/add-course/add-course.component.less +++ b/src/app/home-page/toolbox/add-course/add-course.component.less @@ -0,0 +1,34 @@ +@import '../../../core/commons/variables'; + +.add-course { + margin-top: 26px; + display: flex; + justify-content: flex-end; + + &-button { + display: flex; + align-items: center; + justify-content: center; + width: 138px; + height: 36px; + border: none; + background: @color-blue; + color: @color-white; + border-radius: 3px; + font-family: 'SourseSansPro Semibold'; + font-size: 14px; + cursor: pointer; + outline: none; + &:hover { + background: @color-blue1 + } + + &-text { + padding-left: 10px; + } + + &-icon { + font-size: 20px; + } + } +} \ No newline at end of file diff --git a/src/app/home-page/toolbox/add-course/add-course.component.ts b/src/app/home-page/toolbox/add-course/add-course.component.ts index 10943a1..74dd6e8 100644 --- a/src/app/home-page/toolbox/add-course/add-course.component.ts +++ b/src/app/home-page/toolbox/add-course/add-course.component.ts @@ -1,3 +1,5 @@ +import { IconDefinition, faPlus } from '@fortawesome/free-solid-svg-icons'; + import { Component } from '@angular/core'; @Component({ @@ -5,4 +7,6 @@ import { Component } from '@angular/core'; templateUrl: './add-course.component.html', styleUrls: ['./add-course.component.less'] }) -export class AddCourseComponent { } +export class AddCourseComponent { + public addCourseIcon: IconDefinition = faPlus; +} diff --git a/src/app/home-page/toolbox/search/search.component.html b/src/app/home-page/toolbox/search/search.component.html index c99423e..efec2aa 100644 --- a/src/app/home-page/toolbox/search/search.component.html +++ b/src/app/home-page/toolbox/search/search.component.html @@ -1 +1,10 @@ -

      search works!

      +
      + + + +
      \ No newline at end of file diff --git a/src/app/home-page/toolbox/search/search.component.less b/src/app/home-page/toolbox/search/search.component.less index e69de29..01ed44c 100644 --- a/src/app/home-page/toolbox/search/search.component.less +++ b/src/app/home-page/toolbox/search/search.component.less @@ -0,0 +1,48 @@ +@import "../../../core/commons/variables"; + +.toolbox-search { + align-items: center; + display: flex; + position: relative; + width: 400px; + + &-icon { + position: absolute; + left: 14px; + transform: scale(-1, 1); + color: @color-gray3; + } + + input { + width: 80%; + height: 35px; + padding-left: 40px; + border: 1px solid @color-gray2; + border-radius: 3px; + outline: none; + background: @color-white; + color: @color-black; + margin-right: 10px; + font-family: 'SourseSansPro Semibold'; + font-size: 14px; + &::placeholder { + color: @color-gray2; + } + } + + button { + width: 100px; + height: 37px; + border: none; + background: @color-green; + color: @color-white; + border-radius: 3px; + font-family: 'SourseSansPro Semibold'; + font-size: 14px; + cursor: pointer; + outline: none; + &:hover { + background: @color-green1; + } + } +} diff --git a/src/app/home-page/toolbox/search/search.component.ts b/src/app/home-page/toolbox/search/search.component.ts index e540d7d..ba137b9 100644 --- a/src/app/home-page/toolbox/search/search.component.ts +++ b/src/app/home-page/toolbox/search/search.component.ts @@ -1,8 +1,16 @@ import { Component } from '@angular/core'; +import { IconDefinition, faSearch } from '@fortawesome/free-solid-svg-icons'; @Component({ selector: 'app-search', templateUrl: './search.component.html', styleUrls: ['./search.component.less'] }) -export class SearchComponent { } +export class SearchComponent { + public faSearchIcon: IconDefinition = faSearch; + public searchResult: string = ''; + + public searchCourses(): void { + console.log(this.searchResult); + } +} diff --git a/src/app/home-page/toolbox/toolbox.component.html b/src/app/home-page/toolbox/toolbox.component.html index 5750867..b2eea31 100644 --- a/src/app/home-page/toolbox/toolbox.component.html +++ b/src/app/home-page/toolbox/toolbox.component.html @@ -1 +1,4 @@ -

      toolbox works!

      +
      + + +
      diff --git a/src/app/home-page/toolbox/toolbox.component.ts b/src/app/home-page/toolbox/toolbox.component.ts index fb35349..47de0eb 100644 --- a/src/app/home-page/toolbox/toolbox.component.ts +++ b/src/app/home-page/toolbox/toolbox.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'app-toolbox', diff --git a/src/app/root/app-routing.module.ts b/src/app/root/app-routing.module.ts index d425c6f..7222fdd 100644 --- a/src/app/root/app-routing.module.ts +++ b/src/app/root/app-routing.module.ts @@ -1,7 +1,12 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; +import { HomePageComponent } from '../home-page/home-page.component'; +import { CoursePageComponent } from '../course-page/course-page.component'; -const routes: Routes = []; +const routes: Routes = [ + { path: '', component: HomePageComponent }, + { path: 'course-page', component: CoursePageComponent } +]; @NgModule({ imports: [RouterModule.forRoot(routes)], diff --git a/src/app/root/app.component.html b/src/app/root/app.component.html index e7bb927..a826fdc 100644 --- a/src/app/root/app.component.html +++ b/src/app/root/app.component.html @@ -1,7 +1,8 @@ - -
      - - - - -
      \ No newline at end of file + +
      +
      + Courses +
      + +
      + diff --git a/src/app/root/app.component.less b/src/app/root/app.component.less index f6e19c4..c53e4ec 100644 --- a/src/app/root/app.component.less +++ b/src/app/root/app.component.less @@ -1,3 +1,15 @@ -.container { - padding: 0 60px; +@import "../core/commons/variables"; + +.wrapper { + background-color: @color-gray; + min-height: calc(100% - 120px); +} + +.breadcrumbs { + background-color: @color-white; + font-size: 14px; + font-family: 'SourseSansPro Semibold'; + align-items: center; + display: flex; + height: 50px; } \ No newline at end of file diff --git a/src/app/root/app.component.ts b/src/app/root/app.component.ts index c279c2f..ea64448 100644 --- a/src/app/root/app.component.ts +++ b/src/app/root/app.component.ts @@ -5,6 +5,4 @@ import { Component } from '@angular/core'; templateUrl: './app.component.html', styleUrls: ['./app.component.less'] }) -export class AppComponent { - public title: string = 'angular-project'; -} +export class AppComponent { } diff --git a/src/app/root/app.module.ts b/src/app/root/app.module.ts index 83b4834..7f39d32 100644 --- a/src/app/root/app.module.ts +++ b/src/app/root/app.module.ts @@ -7,6 +7,7 @@ import { CoreModule } from '../core/core.module'; import { LoginPageModule } from '../login-page/login-page.module'; import { HomePageModule } from '../home-page/home-page.module'; import { SharedModule } from '../shared/shared.module'; +import { CoursePageModule } from '../course-page/course-page.module'; @NgModule({ declarations: [ @@ -17,6 +18,7 @@ import { SharedModule } from '../shared/shared.module'; AppRoutingModule, CoreModule, SharedModule, + CoursePageModule, LoginPageModule, HomePageModule ], diff --git a/src/app/shared/footer/footer.component.html b/src/app/shared/footer/footer.component.html index f72936d..4b1db74 100644 --- a/src/app/shared/footer/footer.component.html +++ b/src/app/shared/footer/footer.component.html @@ -1 +1,3 @@ -

      footer

      +
      +

      Copyright © Videocourses. All rigths reserved

      +
      diff --git a/src/app/shared/footer/footer.component.less b/src/app/shared/footer/footer.component.less index e69de29..72bd95e 100644 --- a/src/app/shared/footer/footer.component.less +++ b/src/app/shared/footer/footer.component.less @@ -0,0 +1,12 @@ +@import '../../core/commons/variables'; + +.footer { + align-items: center; + background-color: @color-black; + color: @color-white; + font-family: 'SourseSansPro Regular'; + font-size: 14px; + height: 60px; + display: flex; + justify-content: flex-end; +} diff --git a/src/app/shared/header/header-login/header-login.component.html b/src/app/shared/header/header-login/header-login.component.html index 885bcda..1032f21 100644 --- a/src/app/shared/header/header-login/header-login.component.html +++ b/src/app/shared/header/header-login/header-login.component.html @@ -1 +1,21 @@ -

      header-login!

      + diff --git a/src/app/shared/header/header-login/header-login.component.less b/src/app/shared/header/header-login/header-login.component.less index e69de29..38db3c8 100644 --- a/src/app/shared/header/header-login/header-login.component.less +++ b/src/app/shared/header/header-login/header-login.component.less @@ -0,0 +1,22 @@ +@import "../../../core/commons/variables"; + +.header-login { + display: flex; + height: 100%; + align-items: center; + font-family: 'SourseSansPro Regular'; + color: @color-white; + font-size: 14px; + + &-username { + margin-right: 20px; + } + + &-logoff { + text-decoration: none; + color: @color-white; + &:hover { + color: @color-gray1; + } + } +} \ No newline at end of file diff --git a/src/app/shared/header/header-login/header-login.component.ts b/src/app/shared/header/header-login/header-login.component.ts index f5c56ea..c31fb11 100644 --- a/src/app/shared/header/header-login/header-login.component.ts +++ b/src/app/shared/header/header-login/header-login.component.ts @@ -1,8 +1,12 @@ import { Component } from '@angular/core'; +import { IconDefinition, faUser, faArrowRight } from '@fortawesome/free-solid-svg-icons'; @Component({ selector: 'app-header-login', templateUrl: './header-login.component.html', styleUrls: ['./header-login.component.less'] }) -export class HeaderLoginComponent { } +export class HeaderLoginComponent { + public faUserIcon: IconDefinition = faUser; + public faUserLogout: IconDefinition = faArrowRight; +} diff --git a/src/app/shared/header/header-logo/header-logo.component.html b/src/app/shared/header/header-logo/header-logo.component.html index 85ede7c..bd10641 100644 --- a/src/app/shared/header/header-logo/header-logo.component.html +++ b/src/app/shared/header/header-logo/header-logo.component.html @@ -1 +1,3 @@ -

      header-logo

      + \ No newline at end of file diff --git a/src/app/shared/header/header-logo/header-logo.component.less b/src/app/shared/header/header-logo/header-logo.component.less index e69de29..6e085ce 100644 --- a/src/app/shared/header/header-logo/header-logo.component.less +++ b/src/app/shared/header/header-logo/header-logo.component.less @@ -0,0 +1,4 @@ +.header-logo { + display: flex; + height: 100%; +} diff --git a/src/app/shared/header/header.component.html b/src/app/shared/header/header.component.html index 65b4c80..acfd219 100644 --- a/src/app/shared/header/header.component.html +++ b/src/app/shared/header/header.component.html @@ -1,8 +1,4 @@ -
      - - +
      + +
      \ No newline at end of file diff --git a/src/app/shared/header/header.component.less b/src/app/shared/header/header.component.less index 9ffb8c3..ff12afa 100644 --- a/src/app/shared/header/header.component.less +++ b/src/app/shared/header/header.component.less @@ -1,4 +1,12 @@ +@import "../../core/commons/variables"; + .header { + background-color: @color-black; display: flex; justify-content: space-between; -} \ No newline at end of file + height: 60px; + + &-logo { + display: flex; + } +} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 69ba603..c8a8cff 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -4,6 +4,7 @@ import { HeaderComponent } from './header/header.component'; import { FooterComponent } from './footer/footer.component'; import { HeaderLoginComponent } from './header/header-login/header-login.component'; import { HeaderLogoComponent } from './header/header-logo/header-logo.component'; +import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; @NgModule({ declarations: [ @@ -17,7 +18,8 @@ import { HeaderLogoComponent } from './header/header-logo/header-logo.component' FooterComponent ], imports: [ - CommonModule + CommonModule, + FontAwesomeModule ] }) export class SharedModule { } diff --git a/src/assets/fonts/oswald-bold/Oswald-Bold.woff b/src/assets/fonts/oswald-bold/Oswald-Bold.woff new file mode 100644 index 0000000..3235009 Binary files /dev/null and b/src/assets/fonts/oswald-bold/Oswald-Bold.woff differ diff --git a/src/assets/fonts/oswald-bold/Oswald-Bold.woff2 b/src/assets/fonts/oswald-bold/Oswald-Bold.woff2 new file mode 100644 index 0000000..b9363b1 Binary files /dev/null and b/src/assets/fonts/oswald-bold/Oswald-Bold.woff2 differ diff --git a/src/assets/fonts/sourse-sans-pro-light/SourceSansPro-Light.woff b/src/assets/fonts/sourse-sans-pro-light/SourceSansPro-Light.woff new file mode 100644 index 0000000..2a926e6 Binary files /dev/null and b/src/assets/fonts/sourse-sans-pro-light/SourceSansPro-Light.woff differ diff --git a/src/assets/fonts/sourse-sans-pro-light/SourceSansPro-Light.woff2 b/src/assets/fonts/sourse-sans-pro-light/SourceSansPro-Light.woff2 new file mode 100644 index 0000000..00ff0b5 Binary files /dev/null and b/src/assets/fonts/sourse-sans-pro-light/SourceSansPro-Light.woff2 differ diff --git a/src/assets/fonts/sourse-sans-pro-regular/SourceSansPro-Regular.woff b/src/assets/fonts/sourse-sans-pro-regular/SourceSansPro-Regular.woff new file mode 100644 index 0000000..cc9a0be Binary files /dev/null and b/src/assets/fonts/sourse-sans-pro-regular/SourceSansPro-Regular.woff differ diff --git a/src/assets/fonts/sourse-sans-pro-regular/SourceSansPro-Regular.woff2 b/src/assets/fonts/sourse-sans-pro-regular/SourceSansPro-Regular.woff2 new file mode 100644 index 0000000..7991fc0 Binary files /dev/null and b/src/assets/fonts/sourse-sans-pro-regular/SourceSansPro-Regular.woff2 differ diff --git a/src/assets/fonts/sourse-sans-pro-semibold/SourceSansPro-SemiBold.woff b/src/assets/fonts/sourse-sans-pro-semibold/SourceSansPro-SemiBold.woff new file mode 100644 index 0000000..61ec4ff Binary files /dev/null and b/src/assets/fonts/sourse-sans-pro-semibold/SourceSansPro-SemiBold.woff differ diff --git a/src/assets/fonts/sourse-sans-pro-semibold/SourceSansPro-SemiBold.woff2 b/src/assets/fonts/sourse-sans-pro-semibold/SourceSansPro-SemiBold.woff2 new file mode 100644 index 0000000..f70d46f Binary files /dev/null and b/src/assets/fonts/sourse-sans-pro-semibold/SourceSansPro-SemiBold.woff2 differ diff --git a/src/assets/img/play-logo.svg b/src/assets/img/play-logo.svg new file mode 100644 index 0000000..691c65a --- /dev/null +++ b/src/assets/img/play-logo.svg @@ -0,0 +1,26 @@ + + + + 01122ACF-56F9-4DD4-9C1B-786368FB40D1 + Created with sketchtool. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/less/modules/_fonts.less b/src/assets/less/modules/_fonts.less new file mode 100644 index 0000000..ee7817e --- /dev/null +++ b/src/assets/less/modules/_fonts.less @@ -0,0 +1,31 @@ +@font-face { + font-family: 'Oswald'; + src: url('/assets/fonts/oswald-bold/Oswald-Bold.woff2') format('woff2'), + url('/assets/fonts/Bold/Oswald-Bold.woff') format('woff'); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: 'SourseSansPro Semibold'; + src: url('/assets/fonts/sourse-sans-pro-semibold/SourceSansPro-SemiBold.woff2') format('woff2'), + url('/assets/fonts/sourse-sans-pro-semibold/SourceSansPro-SemiBold.woff') format('woff'); + font-weight: 600; + font-style: normal; +} + +@font-face { + font-family: 'SourseSansPro Regular'; + src: url('/assets/fonts/sourse-sans-pro-regular/SourceSansPro-Regular.woff2') format('woff2'), + url('/assets/fonts/sourse-sans-pro-regular/SourceSansPro-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'SourseSansPro Light'; + src: url('/assets/fonts/sourse-sans-pro-light/SourceSansPro-Light.woff2') format('woff2'), + url('/assets/fonts/sourse-sans-pro-light/SourceSansPro-Light.woff') format('woff'); + font-weight: 300; + font-style: normal; +} \ No newline at end of file diff --git a/src/styles.less b/src/styles.less index e69de29..c7486fe 100644 --- a/src/styles.less +++ b/src/styles.less @@ -0,0 +1,10 @@ +@import "assets/less/modules/_fonts.less"; + +html, body { + margin: 0; + height: 100%; +} + +.container { + padding: 0 60px; +}