github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-08-20 13:23:20 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

* Improved the responsiveness for mobile views on the detail pages

Browse source
This commit is contained in:
tidusjar 2021-01-08 21:05:19 +00:00
commit 74db3cd573
7 changed files with 15 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
View file

@ -9,12 +9,12 @@
<section id="info-wrapper"> <section id="info-wrapper">
<div class="small-middle-container"> <div class="small-middle-container">
<div class="row"> <div class="row justify-content-center justify-content-sm-start">
<media-poster [posterPath]="'https://image.tmdb.org/t/p/w300/' + movie.posterPath"></media-poster> <media-poster [posterPath]="'https://image.tmdb.org/t/p/w300/' + movie.posterPath"></media-poster>
<!--Next to poster--> <!--Next to poster-->
<div class="col-12 col-lg-3 col-xl-3 media-row"> <div class="col-12 col-lg-2 col-xl-3 media-row">
<social-icons [homepage]="movie.homepage" [theMoviedbId]="movie.id" [hasTrailer]="movie.videos?.results?.length > 0" (openTrailer)="openDialog()" [imdbId]="movie.imdbId" [twitter]="movie.externalIds.twitterId" [facebook]="movie.externalIds.facebookId" <social-icons [homepage]="movie.homepage" [theMoviedbId]="movie.id" [hasTrailer]="movie.videos?.results?.length > 0" (openTrailer)="openDialog()" [imdbId]="movie.imdbId" [twitter]="movie.externalIds.twitterId" [facebook]="movie.externalIds.facebookId"
[instagram]="movie.externalIds.instagramId" [available]="movie.available" [plexUrl]="movie.plexUrl" [embyUrl]="movie.embyUrl" [jellyfinUrl]="movie.jellyfinUrl"></social-icons> [instagram]="movie.externalIds.instagramId" [available]="movie.available" [plexUrl]="movie.plexUrl" [embyUrl]="movie.embyUrl" [jellyfinUrl]="movie.jellyfinUrl"></social-icons>

6
src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.html
View file

@ -7,12 +7,12 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div <div
class="col-xl-10 col-lg-11 offset-xl-2 offset-lg-1 col-md-8 col-sm-7 col-8 offset-md-4 offset-sm-5 offset-4"> class="col-xl-11 col-lg-8 offset-xl-1 offset-lg-4 col-md-8 col-sm-7 col-12 offset-md-4 offset-sm-5 mobile-top-text">
<h1>{{title}} <span *ngIf="releaseDate" class="grey-text align-middle"> <h1 class="large-text">{{title}} <span *ngIf="releaseDate" class="grey-text align-middle">
({{releaseDate | amLocal | amDateFormat: 'YYYY'}})</span> ({{releaseDate | amLocal | amDateFormat: 'YYYY'}})</span>
</h1> </h1>
<h5 class="tagline grey-text">{{tagline}}</h5> <h2 class="tagline grey-text">{{tagline}}</h2>
</div> </div>
</div> </div>
</div> </div>

3
src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.scss Normal file
View file

@ -0,0 +1,3 @@
.large-text {
font: 500 40px/30px Roboto, "Helvetica Neue", sans-serif;
}

1
src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.ts
View file

@ -4,6 +4,7 @@ import { DomSanitizer, SafeStyle } from "@angular/platform-browser";
@Component({ @Component({
selector: "top-banner", selector: "top-banner",
templateUrl: "./top-banner.component.html", templateUrl: "./top-banner.component.html",
styleUrls: ["top-banner.component.scss"]
}) })
export class TopBannerComponent { export class TopBannerComponent {

4
src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.html
View file

@ -19,13 +19,13 @@
<section id="info-wrapper"> <section id="info-wrapper">
<div class="small-middle-container"> <div class="small-middle-container">
<div class="row"> <div class="row justify-content-center justify-content-sm-start">
<media-poster [posterPath]="tv.images?.medium"></media-poster> <media-poster [posterPath]="tv.images?.medium"></media-poster>
<!--Next to poster--> <!--Next to poster-->
<div class="col-12 col-lg-3 col-xl-3 media-row"> <div class="col-12 col-lg-2 col-xl-3 media-row">
<social-icons [homepage]="tv.homepage" [tvdbId]="tv.id" [hasTrailer]="tv.trailer" <social-icons [homepage]="tv.homepage" [tvdbId]="tv.id" [hasTrailer]="tv.trailer"
(openTrailer)="openDialog()" [imdbId]="tv.imdbId" [available]="tv.available || tv.partlyAvailable" (openTrailer)="openDialog()" [imdbId]="tv.imdbId" [available]="tv.available || tv.partlyAvailable"

9
src/Ombi/ClientApp/src/app/media-details/media-details.component.scss
View file

@ -5,13 +5,10 @@
h1 { h1 {
font-size: 1.5rem; font-size: 1.5rem;
} }
.mobile-poster { .mobile-top-text {
display: block; margin-bottom: 170px;
position: absolute;
width: 70px;
left: 12px;
bottom: 2px;
} }
#info-wrapper .sidebar-poster { #info-wrapper .sidebar-poster {
margin-top: -126px !important; margin-top: -126px !important;
} }

2
src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts
View file

@ -24,7 +24,7 @@ export enum SearchFilterType {
}) })
export class MyNavComponent implements OnInit { export class MyNavComponent implements OnInit {
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset) isHandset$: Observable<boolean> = this.breakpointObserver.observe([Breakpoints.Small, Breakpoints.Handset, Breakpoints.XSmall])
.pipe( .pipe(
map(result => result.matches) map(result => result.matches)
); );