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

Fix search bar overlap on mobile

Browse source
This commit is contained in:
Taylor Buchanan 2019-10-19 19:45:44 -05:00
commit 69c8736a52
4 changed files with 86 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/Ombi/ClientApp/app/search/moviesearch.component.html
View file

@ -1,30 +1,41 @@
<!-- Movie tab -->
<div role="tabpanel" class="tab-pane active" id="MoviesTab">
<div class="input-group search-bar-background">
<input id="search" type="text" placeholder="{{ 'Search.SearchBarPlaceholder' | translate}}" class="form-control form-control-custom form-control-search form-control-withbuttons"
(keyup)="search($event)">
<div class="input-group-addon right-radius">
<div class="btn-group" role="group">
<a href="#" class="btn btn-sm btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
{{ 'Search.Suggestions' | translate }}
<i class="fa fa-chevron-down"></i>
</a>
<ul class="dropdown-menu">
<li><a (click)="popularMovies()" [translate]="'Search.Movies.PopularMovies'"></a></li>
<li><a (click)="upcomingMovies()" [translate]="'Search.Movies.UpcomingMovies'"></a></li>
<li><a (click)="topRatedMovies()" [translate]="'Search.Movies.TopRatedMovies'"></a></li>
<li><a (click)="nowPlayingMovies()" [translate]="'Search.Movies.NowPlayingMovies'"></a></li>
</ul>
<button class="btn btn-sm btn-primary-outline" (click)="refineOpen()">
{{ 'Search.Refine' | translate }}
<i class="fa" [ngClass]="{'fa-chevron-down': !refineSearchEnabled, 'fa-chevron-up': refineSearchEnabled}"></i>
</button>
</div>
<ng-template #FilterRef>
<div class="btn-group" role="group">
<a href="#" class="btn btn-sm btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
{{ 'Search.Suggestions' | translate }}
<i class="fa fa-chevron-down"></i>
</a>
<ul class="dropdown-menu">
<li><a (click)="popularMovies()" [translate]="'Search.Movies.PopularMovies'"></a></li>
<li><a (click)="upcomingMovies()" [translate]="'Search.Movies.UpcomingMovies'"></a></li>
<li><a (click)="topRatedMovies()" [translate]="'Search.Movies.TopRatedMovies'"></a></li>
<li><a (click)="nowPlayingMovies()" [translate]="'Search.Movies.NowPlayingMovies'"></a></li>
</ul>
<button class="btn btn-sm btn-primary-outline" (click)="refineOpen()">
{{ 'Search.Refine' | translate }}
<i class="fa" [ngClass]="{'fa-chevron-down': !refineSearchEnabled, 'fa-chevron-up': refineSearchEnabled}"></i>
</button>
</div>
</ng-template>
<div class="input-group search-bar-background">
<input id="search" type="text" placeholder="{{ 'Search.SearchBarPlaceholder' | translate}}"
class="form-control form-control-custom form-control-search form-control-withbuttons"
(keyup)="search($event)">
<div class="input-group-addon right-radius">
<div class="search-button-container-inline">
<ng-template [ngTemplateOutlet]="FilterRef"></ng-template>
</div>
<i class="fa fa-search"></i>
</div>
</div>
<div class="row search-button-container">
<ng-template [ngTemplateOutlet]="FilterRef"></ng-template>
</div>
<!-- Refine search options -->
<div class="row top-spacing form-group vcenter" *ngIf="refineSearchEnabled">
<div class="col-md-1">

2
src/Ombi/ClientApp/app/search/search.component.scss
View file

@ -3,7 +3,7 @@
padding-top: 5%
}
.form-control-search {
width: 77%;
padding-right: 165px;
}
}

53
src/Ombi/ClientApp/app/search/tvsearch.component.html
View file

@ -1,32 +1,44 @@
<!-- Movie tab -->
<div role="tabpanel" class="tab-pane" id="TvShowTab">
<ng-template #FilterRef>
<div class="btn-group" role="group">
<a href="#" class="btn btn-sm btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
{{ 'Search.Suggestions' | translate }}
<i class="fa fa-chevron-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<a (click)="popularShows()">{{ 'Search.TvShows.Popular' | translate }} </a>
</li>
<li>
<a (click)="trendingShows()">{{ 'Search.TvShows.Trending' | translate }}</a>
</li>
<li>
<a (click)="mostWatchedShows()">{{ 'Search.TvShows.MostWatched' | translate }}</a>
</li>
<li>
<a (click)="anticipatedShows()">{{ 'Search.TvShows.MostAnticipated' | translate }}</a>
</li>
</ul>
</div>
</ng-template>
<div class="input-group">
<input id="search" type="text" placeholder="{{ 'Search.SearchBarPlaceholder' | translate }}" class="form-control form-control-custom form-control-search form-control-withbuttons" (keyup)="search($event)">
<input id="search" type="text" placeholder="{{ 'Search.SearchBarPlaceholder' | translate }}"
class="form-control form-control-custom form-control-search form-control-withbuttons"
(keyup)="search($event)">
<div class="input-group-addon right-radius">
<div class="btn-group">
<a href="#" class="btn btn-sm btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
{{ 'Search.Suggestions' | translate }}
<i class="fa fa-chevron-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<a (click)="popularShows()">{{ 'Search.TvShows.Popular' | translate }} </a>
</li>
<li>
<a (click)="trendingShows()">{{ 'Search.TvShows.Trending' | translate }}</a>
</li>
<li>
<a (click)="mostWatchedShows()">{{ 'Search.TvShows.MostWatched' | translate }}</a>
</li>
<li>
<a (click)="anticipatedShows()">{{ 'Search.TvShows.MostAnticipated' | translate }}</a>
</li>
</ul>
<div class="search-button-container-inline">
<ng-template [ngTemplateOutlet]="FilterRef"></ng-template>
</div>
<i id="tvSearchButton" class="fa fa-search"></i>
</div>
</div>
<div class="row search-button-container">
<ng-template [ngTemplateOutlet]="FilterRef"></ng-template>
</div>
<remaining-requests [tv]="true" [quotaRefreshEvents]="tvRequested.asObservable()" #remainingTvShows></remaining-requests>
<!-- Movie content -->
@ -159,6 +171,7 @@
<br/>
<br/>
</div>
</div>
</div>
</div>

21
src/Ombi/ClientApp/styles/base.scss
View file

@ -389,6 +389,27 @@ $border-radius: 10px;
padding-right: 105px;
}
.search-button-container {
margin-top: 10px;
text-align: center;
}
@media (max-width: 450px) {
.form-control-search {
padding-right: 0 !important;
}
.search-button-container-inline {
display: none;
}
}
@media (min-width: 450px) {
.search-button-container {
display: none;
}
}
.input-group-addon .btn-group {
position: absolute;
right: 45px;