Placeholder Text for Search Boxes (#2939)

src/Ombi/ClientApp/app/search/moviesearch.component.html

@@ -2,7 +2,7 @@
 <div role="tabpanel" class="tab-pane active" id="MoviesTab">
 
     <div class="input-group search-bar-background">
-        <input id="search" type="text" class="form-control form-control-custom form-control-search form-control-withbuttons"
+        <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">
@@ -181,4 +181,4 @@
 
 
 <issue-report [movie]="true" [visible]="issuesBarVisible" (visibleChange)="issuesBarVisible = $event;" [title]="issueRequestTitle"
-    [issueCategory]="issueCategorySelected" [id]="issueRequestId" [providerId]="issueProviderId"></issue-report>
+    [issueCategory]="issueCategorySelected" [id]="issueRequestId" [providerId]="issueProviderId"></issue-report>

src/Ombi/ClientApp/app/search/music/musicsearch.component.html

@@ -1,7 +1,7 @@
 <!-- Movie tab -->
 <div role="tabpanel" class="tab-pane active" id="MoviesTab">
     <div class="input-group">
-        <input id="search" type="text" 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">
             <i class="fa fa-search"></i>
         </div>
@@ -49,4 +49,4 @@
 
 
 <issue-report [movie]="true" [visible]="issuesBarVisible" (visibleChange)="issuesBarVisible = $event;" [title]="issueRequestTitle"
-    [issueCategory]="issueCategorySelected" [id]="issueRequestId" [providerId]="issueProviderId"></issue-report>
+    [issueCategory]="issueCategorySelected" [id]="issueRequestId" [providerId]="issueProviderId"></issue-report>

src/Ombi/ClientApp/app/search/search.component.html

@@ -4,7 +4,7 @@
 <!-- Nav tabs -->
 
 
-<ul id="nav-tabs" class="nav nav-tabs" role="tablist">
+<ul id="nav-tabs" class="nav nav-tabs nav-justified" role="tablist">
 
     <li role="presentation" class="active">
         <a id="movieTabButton" href="#MoviesTab" aria-controls="home" role="tab" data-toggle="tab" (click)="selectMovieTab()"><i class="fa fa-film"></i>  {{ 'Search.MoviesTab' | translate }}</a>

src/Ombi/ClientApp/app/search/search.component.scss

@@ -16,6 +16,10 @@
     }
 }
 
+.tab-content {
+    margin-top: 1.5em;
+}
+
 .search-bar-background {
     background-color: #333333;
 }

src/Ombi/ClientApp/app/search/tvsearch.component.html

@@ -1,7 +1,7 @@
 <!-- Movie tab -->
 <div role="tabpanel" class="tab-pane" id="TvShowTab">
     <div class="input-group">
-        <input id="search" type="text" 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">
@@ -164,4 +164,4 @@
 
 
 <issue-report [movie]="false" [visible]="issuesBarVisible" (visibleChange)="issuesBarVisible = $event;" [title]="issueRequestTitle"
-    [issueCategory]="issueCategorySelected" [id]="issueRequestId" [providerId]="issueProviderId"></issue-report>
+    [issueCategory]="issueCategorySelected" [id]="issueRequestId" [providerId]="issueProviderId"></issue-report>

src/Ombi/wwwroot/translations/en.json

@@ -79,6 +79,7 @@
     "RequestAdded": "Request for {{title}} has been added successfully",
     "Similar":"Similar",
     "Refine":"Refine",
+    "SearchBarPlaceholder":"Type Here to Search",
     "Movies": {
       "PopularMovies": "Popular Movies",
       "UpcomingMovies": "Upcoming Movies",