- - -
- - - - - - - - - - - - {{ title }} app is running! - - - - - -
- - -

Resources

-

Here are some links to help you get started:

- -
- - - - Learn Angular - - - - - - - CLI Documentation - - - - - - - - Angular Blog - - - - -
- - -

Next Steps

-

What do you want to do next with your app?

- - - -
-
- - - New Component -
- -
- - - Angular Material -
- -
- - - Add PWA Support -
- -
- - - Add Dependency -
- -
- - - Run and Watch Tests -
- -
- - - Build for Production -
-
- - -
- 
ng generate component xyz
- 
ng add @angular/material
- 
ng add @angular/pwa
- 
ng add _____
- 
ng test
- 
ng build --prod
-
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+ +
+
- - - - - - - -
- - - - - - - - - - - - \ No newline at end of file diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e69de29..c8b4321 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -0,0 +1,12 @@ +.app { + display: flex; + justify-content: flex-start; + flex-direction: row; + + .main { + width: 100%; + display: flex; + justify-content: flex-start; + flex-direction: column; + } +} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2c3ba29..6e3e61a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,18 +1,24 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; +import { BrowserModule } from "@angular/platform-browser"; +import { NgModule } from "@angular/core"; -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; +import { AppRoutingModule } from "./app-routing.module"; +import { AppComponent } from "./app.component"; +import { SidebarModule } from "./sidebar/sidebar.module"; +import { MovieModule } from "./movie/movie.module"; +import { SearchBarModule } from "./search-bar/search-bar.module"; +import { LoaderModule } from "./loader/loader.module"; @NgModule({ - declarations: [ - AppComponent - ], + declarations: [AppComponent], imports: [ BrowserModule, - AppRoutingModule + AppRoutingModule, + SidebarModule, + MovieModule, + SearchBarModule, + LoaderModule ], providers: [], - bootstrap: [AppComponent] + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/src/app/loader/loader-routing.module.ts b/src/app/loader/loader-routing.module.ts new file mode 100644 index 0000000..3512c86 --- /dev/null +++ b/src/app/loader/loader-routing.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + + +const routes: Routes = []; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class LoaderRoutingModule { } diff --git a/src/app/loader/loader.component.html b/src/app/loader/loader.component.html new file mode 100644 index 0000000..dc0e70c --- /dev/null +++ b/src/app/loader/loader.component.html @@ -0,0 +1 @@ +
diff --git a/src/app/loader/loader.component.scss b/src/app/loader/loader.component.scss new file mode 100644 index 0000000..19a8e9c --- /dev/null +++ b/src/app/loader/loader.component.scss @@ -0,0 +1,15 @@ +@import "variables"; +.ngma-loader { + border: 5px solid $dark; /* Light grey */ + border-top: 5px solid $secondary-color; /* Blue */ + border-radius: 50%; + width: 50px; + height: 50px; + animation: spin 0.8s linear infinite; + margin: 20px auto; + } + + @keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } \ No newline at end of file diff --git a/src/app/loader/loader.component.spec.ts b/src/app/loader/loader.component.spec.ts new file mode 100644 index 0000000..35adf49 --- /dev/null +++ b/src/app/loader/loader.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LoaderComponent } from './loader.component'; + +describe('LoaderComponent', () => { + let component: LoaderComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LoaderComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LoaderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/loader/loader.component.ts b/src/app/loader/loader.component.ts new file mode 100644 index 0000000..abc1ffc --- /dev/null +++ b/src/app/loader/loader.component.ts @@ -0,0 +1,14 @@ +import { Component, OnInit, Input } from "@angular/core"; + +@Component({ + selector: "app-loader", + templateUrl: "./loader.component.html", + styleUrls: ["./loader.component.scss"], +}) +export class LoaderComponent implements OnInit { + @Input() loading: boolean; + + constructor() {} + + ngOnInit(): void {} +} diff --git a/src/app/loader/loader.module.ts b/src/app/loader/loader.module.ts new file mode 100644 index 0000000..236ec83 --- /dev/null +++ b/src/app/loader/loader.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { LoaderRoutingModule } from './loader-routing.module'; + + +@NgModule({ + declarations: [], + imports: [ + CommonModule, + LoaderRoutingModule + ] +}) +export class LoaderModule { } diff --git a/src/app/movie/models/movie.models.ts b/src/app/movie/models/movie.models.ts new file mode 100644 index 0000000..df5193f --- /dev/null +++ b/src/app/movie/models/movie.models.ts @@ -0,0 +1,10 @@ +export interface Movie { + id: number; + key: string; + name: string; + description: string; + rate: string; + length: string; + img: string; + cover: string; +} diff --git a/src/app/movie/movie-routing.module.ts b/src/app/movie/movie-routing.module.ts new file mode 100644 index 0000000..99ec9d7 --- /dev/null +++ b/src/app/movie/movie-routing.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { MovieComponent } from './movie.component'; + +const routes: Routes = [ + { path: 'movies', component: MovieComponent } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class MovieRoutingModule { } diff --git a/src/app/movie/movie.component.html b/src/app/movie/movie.component.html new file mode 100644 index 0000000..dec82d5 --- /dev/null +++ b/src/app/movie/movie.component.html @@ -0,0 +1,33 @@ + + + + +
+ +
+
+ + {{movies.length}} Movies + +
+ SORT BY: + +
+
+
+
+
+ +
+ movie poster +
+

{{movie.Title}}

+

{{movie.Year}}

+ +
+
+
+
\ No newline at end of file diff --git a/src/app/movie/movie.component.scss b/src/app/movie/movie.component.scss new file mode 100644 index 0000000..e57907e --- /dev/null +++ b/src/app/movie/movie.component.scss @@ -0,0 +1,134 @@ +@import 'variables'; + +:host{ + display: flex; + justify-content: flex-start; + flex-direction: column; +} + + +.ngmp-main-container{ + display: flex; + justify-content: flex-start; + flex-direction: row; +} + +.ngmp-movies-container{ + display: flex; + justify-content: flex-start; + flex-direction: column; + width: 100%; + max-height: 100vh; + + .ngmp-movies-list-header { + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: row; + padding: 1em; + + .ngmp-movies-count{ + color: $secondary-title; + } + + .ngmp-movies-sort{ + color: $primary-title; + padding-right: 1em; + font-size: 0.8em; + } + + select{ + background-color: lighten($primary-color, 15); + border: none; + color: $primary-title; + height: 2.5em; + width: 9em; + font-size: 1.2em; + margin-left: 1em; + } + } + + hr{ + width: 100%; + border-color: $primary-color-light; + opacity: 0.6; + } + + .ngmp-movies-list{ + display: flex; + justify-content: flex-start; + flex-direction: row; + flex-wrap: wrap; + padding: 1em; + } + + .ngmp-movie{ + margin-bottom: 1.8em; + flex-basis: 25%; + + a{ + color: $primary-title; + } + figure{ + padding: 0; + margin: 0; + img{ + -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); + -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); + box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); + } + } + .ngmp-movie-title, + .ngmp-movie-rate{ + display: block; + // margin-top: 0.3em; + } + + .ngmp-movie-title{ + color: $green; + margin: 15px 0 5px; + } + .ngmp-movie-rate{ + color: $grey; + margin: 0; + } + } +} + +@media only screen and (max-width : 48em) { + .main-container{ + flex-direction: column; + + .genres-list{ + width: 100%; + height: auto; + padding: 0.8em; + } + .genre-list-items{ + display: flex; + justify-content: flex-start; + flex-direction: row; + overflow-x: scroll; + overflow-y: hidden; + margin: 0; + + li{ + margin-right: 1em; + } + } + + .movies-container{ + width: 100%; + + .movie{ + flex-basis: 50%!important; + justify-content: space-between; + } + figure{ + img{ + max-width: 8em; + } + } + } + } +} diff --git a/src/app/movie/movie.component.spec.ts b/src/app/movie/movie.component.spec.ts new file mode 100644 index 0000000..4b78a9e --- /dev/null +++ b/src/app/movie/movie.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MovieComponent } from './movie.component'; + +describe('MovieComponent', () => { + let component: MovieComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MovieComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MovieComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/movie/movie.component.ts b/src/app/movie/movie.component.ts new file mode 100644 index 0000000..6751371 --- /dev/null +++ b/src/app/movie/movie.component.ts @@ -0,0 +1,25 @@ +import { Component, OnInit } from "@angular/core"; + +import { Movie } from "./models/movie.models"; +import { MovieService } from "./services/movie.services"; + +@Component({ + selector: "app-movie", + templateUrl: "./movie.component.html", + styleUrls: ["./movie.component.scss"], +}) +export class MovieComponent implements OnInit { + public movies: Movie[]; + public visibleMovies: Movie[]; + sortBy: any = "id"; + public l = console.log; + + constructor(private movieService: MovieService) { + movieService.getMovies().subscribe((movies) => { + this.movies = movies; + this.l("getMovies", movies); + }); + } + + ngOnInit(): void {} +} diff --git a/src/app/movie/movie.module.ts b/src/app/movie/movie.module.ts new file mode 100644 index 0000000..b5c2c57 --- /dev/null +++ b/src/app/movie/movie.module.ts @@ -0,0 +1,19 @@ +import { NgModule } from "@angular/core"; +import { CommonModule } from "@angular/common"; +import { FormsModule } from "@angular/forms"; +import { RouterModule } from "@angular/router"; +import { HttpClientModule } from "@angular/common/http"; + +import { MovieRoutingModule } from "./movie-routing.module"; +import { MovieComponent } from "./movie.component"; +import { SearchBarComponent } from "../search-bar/search-bar.component"; +import { LoaderComponent } from "../loader/loader.component"; + +import { MovieService } from "./services/movie.services"; + +@NgModule({ + declarations: [MovieComponent, SearchBarComponent, LoaderComponent], + imports: [CommonModule, MovieRoutingModule, FormsModule, HttpClientModule], + providers: [HttpClientModule, MovieService], +}) +export class MovieModule {} diff --git a/src/app/movie/services/movie.services.ts b/src/app/movie/services/movie.services.ts new file mode 100644 index 0000000..34a2025 --- /dev/null +++ b/src/app/movie/services/movie.services.ts @@ -0,0 +1,46 @@ +import { Injectable } from "@angular/core"; + +// RxJs +import { Observable } from "rxjs/internal/Observable"; +import { of } from "rxjs/internal/observable/of"; +import { HttpClient } from "@angular/common/http"; +import { catchError, tap, map } from "rxjs/operators"; + +import { Movie } from "../models/movie.models"; +import { API_CONIG } from "../../shared/constants"; + +@Injectable() +export class MovieService { + private moviesEndpoint = `${API_CONIG.API_ENDPOINT}?apikey=${API_CONIG.API_KEY}`; + constructor(private http: HttpClient) {} + + getMovies() { + var url: string = `${this.moviesEndpoint}&s=people`; + return this.http.get(url).pipe( + map((res: any) => res.Search), + catchError(this.handleError("getMovies", [])) + ); + } + + getMovieById(id: number): Observable { + const url = `${this.moviesEndpoint}/${id}`; + return this.http.get(url).pipe( + tap((_) => console.log(`fetched movie with id=${id}`)), + catchError(this.handleError(`getMovie id=${id}`)) + ); + } + + /** + * Handle Http operation that failed. + * Let the app continue. + * @param operation - name of the operation that failed + * @param result - optional value to return as the observable result + */ + private handleError(operation = "operation", result?: T) { + return (error: any): Observable => { + console.log(`${operation} failed: ${error.message}`); + // Let the app keep running by returning an empty result. + return of(result as T); + }; + } +} diff --git a/src/app/search-bar/search-bar-routing.module.ts b/src/app/search-bar/search-bar-routing.module.ts new file mode 100644 index 0000000..dc2811b --- /dev/null +++ b/src/app/search-bar/search-bar-routing.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + + +const routes: Routes = []; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class SearchBarRoutingModule { } diff --git a/src/app/search-bar/search-bar.component.html b/src/app/search-bar/search-bar.component.html new file mode 100644 index 0000000..2330a59 --- /dev/null +++ b/src/app/search-bar/search-bar.component.html @@ -0,0 +1,4 @@ +
+ search icon + +
\ No newline at end of file diff --git a/src/app/search-bar/search-bar.component.scss b/src/app/search-bar/search-bar.component.scss new file mode 100644 index 0000000..af0f802 --- /dev/null +++ b/src/app/search-bar/search-bar.component.scss @@ -0,0 +1,42 @@ +@import "variables"; + +.ngmp-search-bar { + position: relative; + + input { + display: block; + width: 100%; + background-color: darken($primary-color, 4); + border: 1px solid darken($primary-color, 4); + color: $primary-title; + padding: 1.5em; + border: none; + outline: none; + font-size: 1em; + padding-left: 4em; + + &::-webkit-input-placeholder { + color: $primary-color-light; + } + + &:-ms-input-placeholder { + color: $primary-color-light; + } + + &::placeholder { + color: $primary-color-light; + } + + &:focus { + outline: none !important; + border: 1px solid $primary-color-light; + } + } + + img { + position: absolute; + top: calc(50% - 1em); + left: 1em; + width: 2em; + } +} diff --git a/src/app/search-bar/search-bar.component.spec.ts b/src/app/search-bar/search-bar.component.spec.ts new file mode 100644 index 0000000..de8089e --- /dev/null +++ b/src/app/search-bar/search-bar.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SearchBarComponent } from './search-bar.component'; + +describe('SearchBarComponent', () => { + let component: SearchBarComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SearchBarComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SearchBarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/search-bar/search-bar.component.ts b/src/app/search-bar/search-bar.component.ts new file mode 100644 index 0000000..f219834 --- /dev/null +++ b/src/app/search-bar/search-bar.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-search-bar', + templateUrl: './search-bar.component.html', + styleUrls: ['./search-bar.component.scss'] +}) +export class SearchBarComponent implements OnInit { + searchText: any = ''; + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/search-bar/search-bar.module.ts b/src/app/search-bar/search-bar.module.ts new file mode 100644 index 0000000..d033bcc --- /dev/null +++ b/src/app/search-bar/search-bar.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { SearchBarRoutingModule } from './search-bar-routing.module'; + + +@NgModule({ + declarations: [], + imports: [ + CommonModule, + SearchBarRoutingModule + ] +}) +export class SearchBarModule { } diff --git a/src/app/shared/constants.ts b/src/app/shared/constants.ts new file mode 100644 index 0000000..8b68a2a --- /dev/null +++ b/src/app/shared/constants.ts @@ -0,0 +1,5 @@ +export class API_CONIG { + public static API_ENDPOINT='http://www.omdbapi.com/'; + public static API_KEY='f79aeba3'; + } + \ No newline at end of file diff --git a/src/app/sidebar/sidebar-routing.module.ts b/src/app/sidebar/sidebar-routing.module.ts new file mode 100644 index 0000000..1c05dbf --- /dev/null +++ b/src/app/sidebar/sidebar-routing.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + + +const routes: Routes = []; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class SidebarRoutingModule { } diff --git a/src/app/sidebar/sidebar.component.html b/src/app/sidebar/sidebar.component.html new file mode 100644 index 0000000..f6a6398 --- /dev/null +++ b/src/app/sidebar/sidebar.component.html @@ -0,0 +1,17 @@ +
+ BM + +
\ No newline at end of file diff --git a/src/app/sidebar/sidebar.component.scss b/src/app/sidebar/sidebar.component.scss new file mode 100644 index 0000000..ea6b331 --- /dev/null +++ b/src/app/sidebar/sidebar.component.scss @@ -0,0 +1,41 @@ +@import "variables"; + +.sidebar { + width: 100px; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + padding: 1em 0; + border-right: 1px solid; + + a { + color: $light; + } + + nav { + width: 100%; + display: flex; + flex-direction: column; + text-align: center; + margin-top: 2em; + + a { + padding: 0.5em; + margin-bottom: 0.5em; + + &.active { + background-color: $secondary-color; + } + } + + img { + max-width: 1.5em; + } + } + + @media only screen and (max-width: 48em) { + width: 50px; + } +} diff --git a/src/app/sidebar/sidebar.component.spec.ts b/src/app/sidebar/sidebar.component.spec.ts new file mode 100644 index 0000000..f29709f --- /dev/null +++ b/src/app/sidebar/sidebar.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SidebarComponent } from './sidebar.component'; + +describe('SidebarComponent', () => { + let component: SidebarComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SidebarComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SidebarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/sidebar/sidebar.component.ts b/src/app/sidebar/sidebar.component.ts new file mode 100644 index 0000000..f841d58 --- /dev/null +++ b/src/app/sidebar/sidebar.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-sidebar', + templateUrl: './sidebar.component.html', + styleUrls: ['./sidebar.component.scss'] +}) +export class SidebarComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/sidebar/sidebar.module.ts b/src/app/sidebar/sidebar.module.ts new file mode 100644 index 0000000..f718b97 --- /dev/null +++ b/src/app/sidebar/sidebar.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { SidebarRoutingModule } from './sidebar-routing.module'; +import { SidebarComponent } from './sidebar.component'; + + +@NgModule({ + exports: [ SidebarComponent ], + declarations: [ SidebarComponent ], + imports: [ + CommonModule, + SidebarRoutingModule + ] +}) +export class SidebarModule { } diff --git a/src/assets/icons/eye.svg b/src/assets/icons/eye.svg new file mode 100644 index 0000000..d79c2ee --- /dev/null +++ b/src/assets/icons/eye.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/folder.svg b/src/assets/icons/folder.svg new file mode 100644 index 0000000..52f928e --- /dev/null +++ b/src/assets/icons/folder.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/heart.svg b/src/assets/icons/heart.svg new file mode 100644 index 0000000..c9e7900 --- /dev/null +++ b/src/assets/icons/heart.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/monitor.svg b/src/assets/icons/monitor.svg new file mode 100644 index 0000000..9461e02 --- /dev/null +++ b/src/assets/icons/monitor.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/search.svg b/src/assets/icons/search.svg new file mode 100644 index 0000000..7264f1f --- /dev/null +++ b/src/assets/icons/search.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/favicon.ico b/src/favicon.ico index 997406ad22c29aae95893fb3d666c30258a09537..d00cafc07bbec54b161a6ccb4d0cd27f97b97939 100644 GIT binary patch literal 4286 zcmeH}dr(x@9mmhzyHA$|c9(U*ee&34S(b;w!on^RQGp<@1yNvuU4m4DS|9NdYN8O3 zsPz#bXzZ9~(u|t=XrnQ4QsczTv^CRA5?fl^B&JQ%Oj;c^&Lo<(6Z!UcmzW_=r-|jC z{NZ6fmvioUe9!rv-|x4VF^>MMRwg{z^RbLgWsErpdd2P|g!hp`eW$o_#$Vif-m}2> z!UBT3HWAI=LV)^f7{}@9znHKR#l!+a==-+$xBG>$jl>KhTB%eXE-Ehmw?=CSD`Tp{ zQ=(GBx$fL>j8+$p&Z!7%N;_sl&l;WM;Ck z)yl#$DGRHjRAIZ_7Ir$FVVlhsj*5y3r>3Sx5bDXv$<%NELN1rTNBU;7#rp2Z-n~dn zE`q`K8WK#^=6h37!1*HyT#bD zm7!}DLwdFp)2C;mxw#Pw7cPL&Xha|oKx=C&%w{v{>+2(JwOS3*_qg-&FYX#1Cf!OH zQ_sR|osB03cfp)r3dityWITHbuA`Tbe(DPB2hKyEm4fY0GVI&O;Bd&{^%lcoiNlZj z8GiB$hQ8elo?;$ZSsAFStBvRj+QDEjqTkTa5ZQ}HqY?B2l{Gb=ZR+cV&JZH~-@@sd zh20}hLhp1#-!gz{9fL?%I*9m(hM`+B0JY7CUOM~!0}Rbg91;_i@Rsn{_B6xp!wh?l zFl^q#kd-S(Zf-8w$3V7dj-1(KGSQyuBJHov|L6mYI&ZC5y$YK6HJE056~3ZM?Ao~l zmb5I)s0t#_-+`*8b_9YUG&BZ~VmDx255x06AHRdvAj67B8HQ*-g8s-MhNs95UEK`Y zxG7MnqCtLuq@<)T$=9x1ESBq3|6C@MofnHG&pfn#Jpyg*&`#R{ec~ZhS2to{b3Y3G z?Rezm-_UpJBbT;7`27{AZDJ_!Cg9}BU*YD>n|S-}b13v>Mb2E^$iZZZMoxhk zZm$F_Ep6DaVFPqJ-38J#5MLL4eEi2dhlb$FoC$;dHN@&SV)^prSi5!&6gm@h89o%Q z9Kxzs{tWm0AS^kBP}6<-N*Ky33UK-I6$s_()vIV~YCz>e^2rPtyoKbGi8|Pv9PPIb zJv}{w@BNE}U0;h+h3?~HkIx77RO?u*z8*3~I-F?^P`pA{y9TMd&cX52dq{oZ6W9*^ z3AX*C(D;|2q?FF@)8p8&6Qunqjvs#!?))??dxW7jz`?#TtusnPirp-rSdi*HNTYrg|nkBfe zoX4}Ivwb^5OFQj_;$isUH~s$yd9@MBYU@$%pO5?N8emV)#;h`iXMV=8U;zhaCn z-H!jh5#j6#w6z5h3WY#<_Z(@Z+$kZN>6QoM}`!u=qZWoy3c)@QLE24|8sf{baOEkZywt13k-tBZL^?$8&Z_+&rd`~P8`FOhH(euCeCd9!+gzt$Mnqv|8 WLe7d2#ef)ER7UVbA90rWFXcZ+D@PCj literal 948 zcmV;l155mgP)CBYU7IjCFmI-B}4sMJt3^s9NVg!P0 z6hDQy(L`XWMkB@zOLgN$4KYz;j0zZxq9KKdpZE#5@k0crP^5f9KO};h)ZDQ%ybhht z%t9#h|nu0K(bJ ztIkhEr!*UyrZWQ1k2+YkGqDi8Z<|mIN&$kzpKl{cNP=OQzXHz>vn+c)F)zO|Bou>E z2|-d_=qY#Y+yOu1a}XI?cU}%04)zz%anD(XZC{#~WreV!a$7k2Ug`?&CUEc0EtrkZ zL49MB)h!_K{H(*l_93D5tO0;BUnvYlo+;yss%n^&qjt6fZOa+}+FDO(~2>G z2dx@=JZ?DHP^;b7*Y1as5^uphBsh*s*z&MBd?e@I>-9kU>63PjP&^#5YTOb&x^6Cf z?674rmSHB5Fk!{Gv7rv!?qX#ei_L(XtwVqLX3L}$MI|kJ*w(rhx~tc&L&xP#?cQow zX_|gx$wMr3pRZIIr_;;O|8fAjd;1`nOeu5K(pCu7>^3E&D2OBBq?sYa(%S?GwG&_0-s%_v$L@R!5H_fc)lOb9ZoOO#p`Nn`KU z3LTTBtjwo`7(HA6 z7gmO$yTR!5L>Bsg!X8616{JUngg_@&85%>W=mChTR;x4`P=?PJ~oPuy5 zU-L`C@_!34D21{fD~Y8NVnR3t;aqZI3fIhmgmx}$oc-dKDC6Ap$Gy>a!`A*x2L1v0 WcZ@i?LyX}70000 - NgMovieApp + ng-movie-app diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss new file mode 100644 index 0000000..f2099fa --- /dev/null +++ b/src/sass/_variables.scss @@ -0,0 +1,20 @@ +$green: #67e419; +$grey: #f3f3f3; +$blue: #25282d; +$lightBlue: #00B5E9; +$light: #ffffff; +$dark: #000000; +$yellow: #FFB11A; + + +$primary-color: $blue; +$primary-color-dark: darken($primary-color, 8); +$primary-color-light: lighten($primary-color, 10); +$secondary-color: $green; + +$primary-link: $blue; +$secondary-link: $lightBlue; + +$primary-title: $light; +$secondary-title: $yellow; + diff --git a/src/sass/styles.scss b/src/sass/styles.scss new file mode 100644 index 0000000..a6bb905 --- /dev/null +++ b/src/sass/styles.scss @@ -0,0 +1,23 @@ +@import 'variables'; + +html { + font-size: 62.5%; /* with the standard base font size of 16px this will be equal to 10px */ +} +body { + font-size: 160%; /* 160% of 10px ~ 16px, understood by all browsers */ + font-size: 1.6rem; /* 1.6 * 10px ~ 16px, understood by all major browsers and IE9+ */ + margin: 0; + padding: 0; + background: $blue; + box-sizing: border-box; + font-family: -apple-system, 'BlinkMacSystemFont', '.SFNSDisplay-Regular', + 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', + sans-serif; +} + +*, +*:before, +*:after { + box-sizing: inherit; + font-family: inherit; +}