Skip to content

Commit

Permalink
Components added
Browse files Browse the repository at this point in the history
SooryaSoorya committed Apr 26, 2020
1 parent 0bce990 commit 25150fb
Showing 44 changed files with 1,008 additions and 581 deletions.
26 changes: 20 additions & 6 deletions angular.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ng-movie-app": {
@@ -28,8 +28,13 @@
"src/assets"
],
"styles": [
"src/styles.scss"
"src/sass/styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/sass"
]
},
"scripts": []
},
"configurations": {
@@ -92,8 +97,13 @@
"src/assets"
],
"styles": [
"src/styles.scss"
"src/sass/styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/sass"
]
},
"scripts": []
}
},
@@ -123,6 +133,10 @@
}
}
}
}},
"defaultProject": "ng-movie-app"
}
}
},
"defaultProject": "ng-movie-app",
"cli": {
"analytics": "301ddb63-0dd9-4272-8607-807ce9c67d97"
}
}
52 changes: 26 additions & 26 deletions package.json
Original file line number Diff line number Diff line change
@@ -11,37 +11,37 @@
},
"private": true,
"dependencies": {
"@angular/animations": "~9.0.6",
"@angular/common": "~9.0.6",
"@angular/compiler": "~9.0.6",
"@angular/core": "~9.0.6",
"@angular/forms": "~9.0.6",
"@angular/platform-browser": "~9.0.6",
"@angular/platform-browser-dynamic": "~9.0.6",
"@angular/router": "~9.0.6",
"rxjs": "~6.5.4",
"@angular/animations": "9.1.2",
"@angular/common": "9.1.2",
"@angular/compiler": "9.1.2",
"@angular/core": "9.1.2",
"@angular/forms": "9.1.2",
"@angular/platform-browser": "9.1.2",
"@angular/platform-browser-dynamic": "9.1.2",
"@angular/router": "9.1.2",
"rxjs": "6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
"zone.js": "0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.900.6",
"@angular/cli": "~9.0.6",
"@angular/compiler-cli": "~9.0.6",
"@angular/language-service": "~9.0.6",
"@angular-devkit/build-angular": "0.901.1",
"@angular/cli": "9.1.1",
"@angular/compiler-cli": "9.1.2",
"@angular/language-service": "9.1.2",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/jasmine": "3.5.0",
"@types/jasminewd2": "2.0.3",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"jasmine-core": "3.5.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "4.3.0",
"karma-chrome-launcher": "3.1.0",
"karma-coverage-istanbul-reporter": "2.1.0",
"karma-jasmine": "2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~5.18.0",
"typescript": "~3.7.5"
"protractor": "5.4.3",
"ts-node": "8.3.0",
"tslint": "5.18.0",
"typescript": "3.7.5"
}
}
19 changes: 13 additions & 6 deletions src/app/app-routing.module.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,18 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";


const routes: Routes = [];
import { MovieComponent } from "./movie/movie.component";
const routes: Routes = [
{ path: "", component: MovieComponent },
{
path: "movie",
loadChildren: () =>
import("./movie/movie.module").then((m) => m.MovieModule)
},
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
exports: [RouterModule],
})
export class AppRoutingModule { }
export class AppRoutingModule {}
27 changes: 27 additions & 0 deletions src/app/app.component.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 9 additions & 0 deletions src/app/app.component.css.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

536 changes: 4 additions & 532 deletions src/app/app.component.html

Large diffs are not rendered by default.

12 changes: 12 additions & 0 deletions src/app/app.component.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
26 changes: 16 additions & 10 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
@@ -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 {}
11 changes: 11 additions & 0 deletions src/app/loader/loader-routing.module.ts
Original file line number Diff line number Diff line change
@@ -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 { }
1 change: 1 addition & 0 deletions src/app/loader/loader.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<div class="ngma-loader" *ngIf="loading"></div>
15 changes: 15 additions & 0 deletions src/app/loader/loader.component.scss
Original file line number Diff line number Diff line change
@@ -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); }
}
25 changes: 25 additions & 0 deletions src/app/loader/loader.component.spec.ts
Original file line number Diff line number Diff line change
@@ -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<LoaderComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ LoaderComponent ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(LoaderComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
14 changes: 14 additions & 0 deletions src/app/loader/loader.component.ts
Original file line number Diff line number Diff line change
@@ -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 {}
}
14 changes: 14 additions & 0 deletions src/app/loader/loader.module.ts
Original file line number Diff line number Diff line change
@@ -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 { }
10 changes: 10 additions & 0 deletions src/app/movie/models/movie.models.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
export interface Movie {
id: number;
key: string;
name: string;
description: string;
rate: string;
length: string;
img: string;
cover: string;
}
14 changes: 14 additions & 0 deletions src/app/movie/movie-routing.module.ts
Original file line number Diff line number Diff line change
@@ -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 { }
33 changes: 33 additions & 0 deletions src/app/movie/movie.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<app-search-bar></app-search-bar>
<app-loader [loading]="!movies"></app-loader>


<div class="ngmp-main-container">

<div *ngIf="movies" class="ngmp-movies-container">
<div class="ngmp-movies-list-header">
<span class="ngmp-movies-count">
{{movies.length}} Movies
</span>
<div class="ngmp-movies-sort">
SORT BY:
<select [(ngModel)]="sortBy">
<option value="rate">Rate</option>
<option value="id">Lastest</option>
</select>
</div>
</div>
<hr>
<div class="ngmp-movies-list">
<div *ngFor="let movie of movies" class="ngmp-movie">
<a [routerLink]="">
<figure>
<img src="{{movie.Poster}}" alt="movie poster">
</figure>
<h3 class="ngmp-movie-title">{{movie.Title}}</h3>
<p class="ngmp-movie-rate">{{movie.Year}}</p>
</a>
</div>
</div>
</div>
</div>
134 changes: 134 additions & 0 deletions src/app/movie/movie.component.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
}
25 changes: 25 additions & 0 deletions src/app/movie/movie.component.spec.ts
Original file line number Diff line number Diff line change
@@ -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<MovieComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MovieComponent ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(MovieComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
25 changes: 25 additions & 0 deletions src/app/movie/movie.component.ts
Original file line number Diff line number Diff line change
@@ -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 {}
}
19 changes: 19 additions & 0 deletions src/app/movie/movie.module.ts
Original file line number Diff line number Diff line change
@@ -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 {}
46 changes: 46 additions & 0 deletions src/app/movie/services/movie.services.ts
Original file line number Diff line number Diff line change
@@ -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<Movie> {
const url = `${this.moviesEndpoint}/${id}`;
return this.http.get<Movie>(url).pipe(
tap((_) => console.log(`fetched movie with id=${id}`)),
catchError(this.handleError<Movie>(`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<T>(operation = "operation", result?: T) {
return (error: any): Observable<T> => {
console.log(`${operation} failed: ${error.message}`);
// Let the app keep running by returning an empty result.
return of(result as T);
};
}
}
11 changes: 11 additions & 0 deletions src/app/search-bar/search-bar-routing.module.ts
Original file line number Diff line number Diff line change
@@ -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 { }
4 changes: 4 additions & 0 deletions src/app/search-bar/search-bar.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<div class="ngmp-search-bar">
<img src="assets/icons/search.svg" alt="search icon">
<input [(ngModel)]="searchText" name="searchText" type="search" placeholder="Search" aria-label="Search">
</div>
42 changes: 42 additions & 0 deletions src/app/search-bar/search-bar.component.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
25 changes: 25 additions & 0 deletions src/app/search-bar/search-bar.component.spec.ts
Original file line number Diff line number Diff line change
@@ -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<SearchBarComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SearchBarComponent ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(SearchBarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
15 changes: 15 additions & 0 deletions src/app/search-bar/search-bar.component.ts
Original file line number Diff line number Diff line change
@@ -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 {
}

}
14 changes: 14 additions & 0 deletions src/app/search-bar/search-bar.module.ts
Original file line number Diff line number Diff line change
@@ -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 { }
5 changes: 5 additions & 0 deletions src/app/shared/constants.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export class API_CONIG {
public static API_ENDPOINT='http://www.omdbapi.com/';
public static API_KEY='f79aeba3';
}

11 changes: 11 additions & 0 deletions src/app/sidebar/sidebar-routing.module.ts
Original file line number Diff line number Diff line change
@@ -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 { }
17 changes: 17 additions & 0 deletions src/app/sidebar/sidebar.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<div class="sidebar">
<a href="">BM</a>
<nav>
<a href="#">
<img src="assets/icons/eye.svg" alt="sidebar nav link icon">
</a>
<a href="#" class="active">
<img src="assets/icons/monitor.svg" alt="sidebar nav link icon">
</a>
<a href="#">
<img src="assets/icons/folder.svg" alt="sidebar nav link icon">
</a>
<a href="#">
<img src="assets/icons/heart.svg" alt="sidebar nav link icon">
</a>
</nav>
</div>
41 changes: 41 additions & 0 deletions src/app/sidebar/sidebar.component.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
25 changes: 25 additions & 0 deletions src/app/sidebar/sidebar.component.spec.ts
Original file line number Diff line number Diff line change
@@ -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<SidebarComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SidebarComponent ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(SidebarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
15 changes: 15 additions & 0 deletions src/app/sidebar/sidebar.component.ts
Original file line number Diff line number Diff line change
@@ -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 {
}

}
16 changes: 16 additions & 0 deletions src/app/sidebar/sidebar.module.ts
Original file line number Diff line number Diff line change
@@ -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 { }
44 changes: 44 additions & 0 deletions src/assets/icons/eye.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 41 additions & 0 deletions src/assets/icons/folder.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
42 changes: 42 additions & 0 deletions src/assets/icons/heart.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 44 additions & 0 deletions src/assets/icons/monitor.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 39 additions & 0 deletions src/assets/icons/search.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/favicon.ico
Binary file not shown.
2 changes: 1 addition & 1 deletion src/index.html
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>NgMovieApp</title>
<title>ng-movie-app</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
20 changes: 20 additions & 0 deletions src/sass/_variables.scss
Original file line number Diff line number Diff line change
@@ -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;

23 changes: 23 additions & 0 deletions src/sass/styles.scss
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit 25150fb

Please sign in to comment.