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

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

@ -1,10 +1,7 @@
<!-- Movie tab --> <!-- Movie tab -->
<div role="tabpanel" class="tab-pane active" id="MoviesTab"> <div role="tabpanel" class="tab-pane active" id="MoviesTab">
<div class="input-group search-bar-background"> <ng-template #FilterRef>
<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"> <div class="btn-group" role="group">
<a href="#" class="btn btn-sm btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <a href="#" class="btn btn-sm btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
{{ 'Search.Suggestions' | translate }} {{ 'Search.Suggestions' | translate }}
@ -21,10 +18,24 @@
<i class="fa" [ngClass]="{'fa-chevron-down': !refineSearchEnabled, 'fa-chevron-up': refineSearchEnabled}"></i> <i class="fa" [ngClass]="{'fa-chevron-down': !refineSearchEnabled, 'fa-chevron-up': refineSearchEnabled}"></i>
</button> </button>
</div> </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> <i class="fa fa-search"></i>
</div> </div>
</div> </div>
<div class="row search-button-container">
<ng-template [ngTemplateOutlet]="FilterRef"></ng-template>
</div>
<!-- Refine search options --> <!-- Refine search options -->
<div class="row top-spacing form-group vcenter" *ngIf="refineSearchEnabled"> <div class="row top-spacing form-group vcenter" *ngIf="refineSearchEnabled">
<div class="col-md-1"> <div class="col-md-1">

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

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

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

@ -1,9 +1,7 @@
<!-- Movie tab --> <!-- Movie tab -->
<div role="tabpanel" class="tab-pane" id="TvShowTab"> <div role="tabpanel" class="tab-pane" id="TvShowTab">
<div class="input-group"> <ng-template #FilterRef>
<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="btn-group" role="group">
<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"> <a href="#" class="btn btn-sm btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
{{ 'Search.Suggestions' | translate }} {{ 'Search.Suggestions' | translate }}
<i class="fa fa-chevron-down"></i> <i class="fa fa-chevron-down"></i>
@ -23,10 +21,24 @@
</li> </li>
</ul> </ul>
</div> </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)">
<div class="input-group-addon right-radius">
<div class="search-button-container-inline">
<ng-template [ngTemplateOutlet]="FilterRef"></ng-template>
</div>
<i id="tvSearchButton" class="fa fa-search"></i> <i id="tvSearchButton" class="fa fa-search"></i>
</div> </div>
</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> <remaining-requests [tv]="true" [quotaRefreshEvents]="tvRequested.asObservable()" #remainingTvShows></remaining-requests>
<!-- Movie content --> <!-- Movie content -->
@ -161,6 +173,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<issue-report [movie]="false" [visible]="issuesBarVisible" (visibleChange)="issuesBarVisible = $event;" [title]="issueRequestTitle" <issue-report [movie]="false" [visible]="issuesBarVisible" (visibleChange)="issuesBarVisible = $event;" [title]="issueRequestTitle"

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

@ -389,6 +389,27 @@ $border-radius: 10px;
padding-right: 105px; 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 { .input-group-addon .btn-group {
position: absolute; position: absolute;
right: 45px; right: 45px;