From bf30b7917179c0affe46583292d8b9ee9c41c13e Mon Sep 17 00:00:00 2001 From: Ab30657 Date: Sun, 11 Apr 2021 00:33:53 +0545 Subject: added fonts and design --- src/web/package-lock.json | 46 +++++++++++++++++- src/web/package.json | 2 + src/web/src/app/app.component.html | 52 +++++++++++++++++++++ src/web/src/app/film/film.component.css | 11 +++-- src/web/src/app/film/film.component.html | 21 +++++++-- src/web/src/app/film/film.component.ts | 7 +-- src/web/src/app/home/home.component.html | 1 + .../src/app/search-bar/search-bar.component.html | 2 +- .../src/app/search-item/search-item.component.css | 2 +- .../src/app/search-item/search-item.component.html | 10 ++-- src/web/src/assets/Playfair_Display_SC.zip | Bin 0 -> 555428 bytes src/web/src/assets/movies.svg | 1 + src/web/src/assets/netflix.svg | 1 + src/web/src/index.html | 38 +++++++-------- src/web/src/styles.css | 52 +++++++++++++++++---- 15 files changed, 199 insertions(+), 47 deletions(-) create mode 100644 src/web/src/assets/Playfair_Display_SC.zip create mode 100644 src/web/src/assets/movies.svg create mode 100644 src/web/src/assets/netflix.svg (limited to 'src') diff --git a/src/web/package-lock.json b/src/web/package-lock.json index adb6cd4..931b97b 100644 --- a/src/web/package-lock.json +++ b/src/web/package-lock.json @@ -2816,6 +2816,16 @@ "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", "dev": true }, + "bindings": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", + "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", + "dev": true, + "optional": true, + "requires": { + "file-uri-to-path": "1.0.0" + } + }, "bl": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz", @@ -2914,6 +2924,11 @@ "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.1.tgz", "integrity": "sha512-SpiDSOcbg4J/PjVSt4ny5eY6j74VbVSjROY4Fb/WIUXBV9cnb5luyR4KnPvNoXuGnBK1T+nJIWqRsvU3yP8Mcg==" }, + "bootstrap-icons": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.4.1.tgz", + "integrity": "sha512-EcATaAGsRgyy4NtnwXlNzkgWttpb6PqcXCoLtZZKdZtAYJU/WYqoQFxuGFKAppOlf7NmKpvGtSsC/921H7LIjg==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -5589,6 +5604,13 @@ } } }, + "file-uri-to-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", + "dev": true, + "optional": true + }, "fill-range": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", @@ -5699,6 +5721,11 @@ "integrity": "sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA==", "dev": true }, + "font-awesome": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz", + "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=" + }, "for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", @@ -8306,6 +8333,13 @@ "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz", "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==" }, + "nan": { + "version": "2.14.2", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz", + "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==", + "dev": true, + "optional": true + }, "nanoid": { "version": "3.1.22", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.22.tgz", @@ -13761,7 +13795,11 @@ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", "dev": true, - "optional": true + "optional": true, + "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1" + } }, "glob-parent": { "version": "3.1.0", @@ -14519,7 +14557,11 @@ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", "dev": true, - "optional": true + "optional": true, + "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1" + } }, "glob-parent": { "version": "3.1.0", diff --git a/src/web/package.json b/src/web/package.json index b108059..667d1ac 100644 --- a/src/web/package.json +++ b/src/web/package.json @@ -23,6 +23,8 @@ "@angular/router": "~11.2.1", "@schematics/angular": "^9.1.0", "bootstrap": "4.1.1", + "bootstrap-icons": "^1.4.1", + "font-awesome": "^4.7.0", "ngx-bootstrap": "^6.2.0", "rxjs": "~6.6.0", "tslib": "^2.0.0", diff --git a/src/web/src/app/app.component.html b/src/web/src/app/app.component.html index 0680b43..9efd8ad 100644 --- a/src/web/src/app/app.component.html +++ b/src/web/src/app/app.component.html @@ -1 +1,53 @@ + diff --git a/src/web/src/app/film/film.component.css b/src/web/src/app/film/film.component.css index 9b69d7c..08001a3 100644 --- a/src/web/src/app/film/film.component.css +++ b/src/web/src/app/film/film.component.css @@ -1,7 +1,9 @@ .main-div-wrapper { - overflow: auto; + overflow: hidden; + position: relative; height: auto; width: 100%; + font-family: "Playfair Display", sans-serif; } .img-s { width: 100%; @@ -12,11 +14,10 @@ .wrapper-content { display: flex; justify-content: center; - align-items: center; width: 100%; z-index: 100; - top: 0; - position: fixed; + top: 76px; + position: absolute; left: 0; height: 100%; padding: 5% 0px; @@ -32,6 +33,6 @@ .wrapper-wrapper { background-color: rgba(0, 0, 0, 0.8); - height: 100%; + min-height: 100%; font-size: 20px; } diff --git a/src/web/src/app/film/film.component.html b/src/web/src/app/film/film.component.html index 300494b..f7c8075 100644 --- a/src/web/src/app/film/film.component.html +++ b/src/web/src/app/film/film.component.html @@ -4,18 +4,29 @@
-
-

- {{ model.original_title }} +
+

+ + {{ + type === "tv" + ? model.name + : model.original_title + }}

-

+

{{ model.overview }}

-

Watch it here

+

+ Watch It Here +

diff --git a/src/web/src/app/film/film.component.ts b/src/web/src/app/film/film.component.ts index 2e25f41..54a7499 100644 --- a/src/web/src/app/film/film.component.ts +++ b/src/web/src/app/film/film.component.ts @@ -26,7 +26,6 @@ export class FilmComponent implements OnInit { this.type = x.get('type'); this.id = x.get('id'); //Start Scraping and loading the spinner - this.loading = false; //this.data.getUsers().subscribe((data) => { // this.users = data; @@ -35,9 +34,9 @@ export class FilmComponent implements OnInit { }); this.service.searchById(this.type, +this.id).subscribe((x: any) => { this.model = x; + this.loading = false; console.log(this.model); }); - console.log(this.model); // //Get Providers List /*this.service @@ -52,6 +51,8 @@ export class FilmComponent implements OnInit { } getImage() { - return 'https://image.tmdb.org/t/p/original' + this.model.poster_path; + return this.model + ? 'https://image.tmdb.org/t/p/original' + this.model.poster_path + : ''; } } diff --git a/src/web/src/app/home/home.component.html b/src/web/src/app/home/home.component.html index d32cdaa..7e59fe0 100644 --- a/src/web/src/app/home/home.component.html +++ b/src/web/src/app/home/home.component.html @@ -2,6 +2,7 @@
+
diff --git a/src/web/src/app/search-bar/search-bar.component.html b/src/web/src/app/search-bar/search-bar.component.html index 08a58e0..88d9c1d 100644 --- a/src/web/src/app/search-bar/search-bar.component.html +++ b/src/web/src/app/search-bar/search-bar.component.html @@ -4,7 +4,7 @@ class="example-full-width" appearance="outline" > - Discover + Discover
-
- star_rate -
+
+
+ +
+
{{ getRating() }} diff --git a/src/web/src/assets/Playfair_Display_SC.zip b/src/web/src/assets/Playfair_Display_SC.zip new file mode 100644 index 0000000..ce89b2d Binary files /dev/null and b/src/web/src/assets/Playfair_Display_SC.zip differ diff --git a/src/web/src/assets/movies.svg b/src/web/src/assets/movies.svg new file mode 100644 index 0000000..0f5cc91 --- /dev/null +++ b/src/web/src/assets/movies.svg @@ -0,0 +1 @@ +movie_night \ No newline at end of file diff --git a/src/web/src/assets/netflix.svg b/src/web/src/assets/netflix.svg new file mode 100644 index 0000000..c4a279c --- /dev/null +++ b/src/web/src/assets/netflix.svg @@ -0,0 +1 @@ +netflix \ No newline at end of file diff --git a/src/web/src/index.html b/src/web/src/index.html index 004e9bb..8e4a9d4 100644 --- a/src/web/src/index.html +++ b/src/web/src/index.html @@ -1,22 +1,22 @@ - - - Client - - - - - - - - - - + + + Client + + + + + + + + + + diff --git a/src/web/src/styles.css b/src/web/src/styles.css index 46e8be8..071fc51 100644 --- a/src/web/src/styles.css +++ b/src/web/src/styles.css @@ -1,5 +1,6 @@ /* You can add global styles to this file, and also import other style files */ - +@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&display=swap"); +@import "~bootstrap-icons/font/bootstrap-icons.css"; html, body { height: 100%; @@ -11,13 +12,14 @@ body { } .mat-option { + font-family: "Playfair Display", sans-serif; height: 115px !important; - font-family: cascadia code !important; font-size: large !important; padding: 10px !important; } .mat-form-field { - font-family: cascadia code !important; + font-family: "Playfair Display", sans-serif; + font-weight: 500; font-size: large !important; } .mat-form-field-flex { @@ -53,18 +55,23 @@ body { white-space: normal; } -.searchitem-text .movie-title { - font-size: 23px; +.search-item-text .movie-title { + font-size: 1.5rem; } .rating { text-align: center; } -.rating .material-icons { - font-size: 2rem; - color: yellow; +.rating div i { + color: #ffdc3f; } +.rating-content { + font-size: 1.5rem; +} +.mat-input-element { + font-size: x-large !important; +} .mat-autocomplete-panel { max-height: 600px !important; } @@ -132,3 +139,32 @@ body { flex-direction: column; } } + +.cover-img { + -webkit-mask-image: -webkit-gradient( + linear, + left top, + left bottom, + from(rgba(0, 0, 0, 1)), + to(rgba(0, 0, 0, 0)) + ); + mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)); +} + +.theading { + color: white; + padding: 0px 10px; +} + +a { + text-decoration: none; +} + +a:hover { + text-decoration: none; +} + +.icon:hover { + color: gray !important; + transition: 0.4s; +} -- cgit v1.2.3