diff options
| -rw-r--r-- | src/web/src/app/app.component.html | 12 | ||||
| -rw-r--r-- | src/web/src/app/app.component.ts | 25 | ||||
| -rw-r--r-- | src/web/src/app/film/film.component.css | 14 | ||||
| -rw-r--r-- | src/web/src/app/film/film.component.html | 20 | ||||
| -rw-r--r-- | src/web/src/app/film/film.component.ts | 3 | ||||
| -rw-r--r-- | src/web/src/app/home/home.component.ts | 14 | ||||
| -rw-r--r-- | src/web/src/app/search-item/search-item.component.html | 6 | ||||
| -rw-r--r-- | src/web/src/styles.css | 2 |
8 files changed, 57 insertions, 39 deletions
diff --git a/src/web/src/app/app.component.html b/src/web/src/app/app.component.html index 9efd8ad..6813821 100644 --- a/src/web/src/app/app.component.html +++ b/src/web/src/app/app.component.html @@ -5,11 +5,15 @@ <div class="container d-flex flex-column flex-md-row justify-content-between" > - <i - style="font-size: 3rem; color: white" - class="bi bi-arrow-left-circle-fill icon float-left" + <!-- <i + style="font-size: 2.5rem; color: white" + [hidden]=" + !(routes.startsWith('/home/') || routes.startsWith('/tv/')) + " + class="bi bi-arrow-left icon float-left" [routerLink]="['home']" - ></i> + ></i> --> + <span></span> <a class="py-2 d-flex flex-row align-items-center justify-content-center" href="#" diff --git a/src/web/src/app/app.component.ts b/src/web/src/app/app.component.ts index 87aaf53..fdbd59f 100644 --- a/src/web/src/app/app.component.ts +++ b/src/web/src/app/app.component.ts @@ -1,10 +1,23 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], }) -export class AppComponent { - title = 'client'; +export class AppComponent implements OnInit { + title = 'client'; + routes: string; + + /** + * + * + */ + constructor(route: Router) { + this.routes = route.url; + console.log(this.routes); + } + + ngOnInit(): void {} } diff --git a/src/web/src/app/film/film.component.css b/src/web/src/app/film/film.component.css index 08001a3..bad8255 100644 --- a/src/web/src/app/film/film.component.css +++ b/src/web/src/app/film/film.component.css @@ -6,21 +6,11 @@ font-family: "Playfair Display", sans-serif; } .img-s { - width: 100%; - overflow-y: scroll; - z-index: 0; - position: relative; + border-radius: 20px; + box-shadow: 5px 5px 20px 3px gray, -5px -5px 20px 3px gray; } .wrapper-content { - display: flex; - justify-content: center; width: 100%; - z-index: 100; - top: 76px; - position: absolute; - left: 0; - height: 100%; - padding: 5% 0px; } .main-div { diff --git a/src/web/src/app/film/film.component.html b/src/web/src/app/film/film.component.html index f7c8075..7e18536 100644 --- a/src/web/src/app/film/film.component.html +++ b/src/web/src/app/film/film.component.html @@ -1,12 +1,20 @@ <div class="w-100 main-div-wrapper"> - <img [src]="getImage() ? getImage() : ''" class="img-s" /> - <div class="wrapper-content" *ngIf="!loading"> <div class="wrapper-wrapper container"> - <div class="main-div container row" style="color: white"> - <div class="description m-auto px-5 pb-0"> + <div class="main-div container row mx-0 py-4" style="color: white"> + <div + class="col-md-12 col-lg-4 col-s-6 d-flex justify-content-center align-items-center flex-column" + > + <div class="p-s-5 p-lg-0"> + <img + [src]="getImage() ? getImage() : ''" + class="img-s img-fluid" + /> + </div> + </div> + <div class="description m-auto col-md-12 col-lg-8 px-5 pb-0"> <h1 - class="mt-5 mb-4 col-md-8 pl-0" + class="mt-3 mb-4 pl-0 text-center" style="font-size: xxx-large" > <strong> @@ -17,7 +25,7 @@ }}</strong > </h1> - <p class="mt-4 text-center" style="font-size: larger"> + <p class="mt-4 text-justify" style="font-size: larger"> {{ model.overview }} </p> </div> diff --git a/src/web/src/app/film/film.component.ts b/src/web/src/app/film/film.component.ts index 54a7499..d4e90f5 100644 --- a/src/web/src/app/film/film.component.ts +++ b/src/web/src/app/film/film.component.ts @@ -18,8 +18,7 @@ export class FilmComponent implements OnInit { id: string; constructor( private route: ActivatedRoute, - private service: MovieTVService, - private appService: AppService + private service: MovieTVService ) {} ngOnInit(): void { this.route.paramMap.subscribe((x) => { diff --git a/src/web/src/app/home/home.component.ts b/src/web/src/app/home/home.component.ts index 007fef0..ab3d963 100644 --- a/src/web/src/app/home/home.component.ts +++ b/src/web/src/app/home/home.component.ts @@ -1,15 +1,15 @@ import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; @Component({ - selector: 'app-home', - templateUrl: './home.component.html', - styleUrls: ['./home.component.css'] + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.css'], }) export class HomeComponent implements OnInit { + film_page = true; - constructor() { } - - ngOnInit(): void { - } + constructor(private route: Router) {} + ngOnInit(): void {} } diff --git a/src/web/src/app/search-item/search-item.component.html b/src/web/src/app/search-item/search-item.component.html index 513ba86..9a3beba 100644 --- a/src/web/src/app/search-item/search-item.component.html +++ b/src/web/src/app/search-item/search-item.component.html @@ -3,12 +3,14 @@ <img [src]="getImage()" alt="Not Found" class="example-option-img" /> </div> <div class="search-item-text col-sm-8 col-md-8"> - <div class="movie-title font-weight-bold text-uppercase"> + <div + class="movie-title font-weight-bold text-capitalize overflow-hidden" + > {{ getTitle() }} </div> <div class="year-wrapper"> <small class="year-wrapper-content"> - {{ getYear() }} | {{ model.media_type | titlecase }} + {{ getYear() }} | {{ model.media_type | uppercase }} </small> </div> </div> diff --git a/src/web/src/styles.css b/src/web/src/styles.css index 071fc51..8c0c651 100644 --- a/src/web/src/styles.css +++ b/src/web/src/styles.css @@ -57,6 +57,8 @@ body { .search-item-text .movie-title { font-size: 1.5rem; + text-overflow: ellipsis; + overflow: hidden; } .rating { |
