add some "no results" feedback to the searching + minor UI improvements

PlexRequests.UI/Content/custom.css

@@ -22,7 +22,9 @@
 
 .form-control-custom {
   background-color: #4e5d6c !important;
-  color: white !important; }
+  color: white !important;
+  border-radius: 0;
+  box-shadow: 0 0 0 !important; }
 
 h1 {
   font-size: 3.5rem !important;
@@ -138,3 +140,14 @@ label {
 #tvList .mix {
   display: none; }
 
+.no-search-results {
+  text-align: center; }
+
+.no-search-results .no-search-results-icon {
+  font-size: 10em;
+  color: #4e5d6c; }
+
+.no-search-results .no-search-results-text {
+  margin: 20px 0;
+  color: #ccc; }
+

PlexRequests.UI/Content/custom.min.css

@@ -1 +1 @@
-@media(min-width:768px){.row{position:relative;}.bottom-align-text{position:absolute;bottom:0;right:0;}}@media(max-width:48em){.home{padding-top:1rem;}}@media(min-width:48em){.home{padding-top:4rem;}}.btn{border-radius:.25rem !important;}.multiSelect{background-color:#4e5d6c;}.form-control-custom{background-color:#4e5d6c !important;color:#fff !important;}h1{font-size:3.5rem !important;font-weight:600 !important;}.request-title{margin-top:0 !important;font-size:1.9rem !important;}p{font-size:1.1rem !important;}label{display:inline-block !important;margin-bottom:.5rem !important;font-size:16px !important;}.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{background:#4e5d6c;}.navbar .nav a .fa{font-size:130%;top:1px;position:relative;display:inline-block;margin-right:5px;}.btn-danger-outline{color:#d9534f !important;background-color:transparent;background-image:none;border-color:#d9534f !important;}.btn-danger-outline:focus,.btn-danger-outline.focus,.btn-danger-outline:active,.btn-danger-outline.active,.btn-danger-outline:hover,.open>.btn-danger-outline.dropdown-toggle{color:#fff !important;background-color:#d9534f !important;border-color:#d9534f !important;}.btn-primary-outline{color:#ff761b !important;background-color:transparent;background-image:none;border-color:#ff761b !important;}.btn-primary-outline:focus,.btn-primary-outline.focus,.btn-primary-outline:active,.btn-primary-outline.active,.btn-primary-outline:hover,.open>.btn-primary-outline.dropdown-toggle{color:#fff !important;background-color:#df691a !important;border-color:#df691a !important;}.btn-info-outline{color:#5bc0de !important;background-color:transparent;background-image:none;border-color:#5bc0de !important;}.btn-info-outline:focus,.btn-info-outline.focus,.btn-info-outline:active,.btn-info-outline.active,.btn-info-outline:hover,.open>.btn-info-outline.dropdown-toggle{color:#fff !important;background-color:#5bc0de !important;border-color:#5bc0de !important;}.btn-warning-outline{color:#f0ad4e !important;background-color:transparent;background-image:none;border-color:#f0ad4e !important;}.btn-warning-outline:focus,.btn-warning-outline.focus,.btn-warning-outline:active,.btn-warning-outline.active,.btn-warning-outline:hover,.open>.btn-warning-outline.dropdown-toggle{color:#fff !important;background-color:#f0ad4e !important;border-color:#f0ad4e !important;}.btn-success-outline{color:#5cb85c !important;background-color:transparent;background-image:none;border-color:#5cb85c !important;}.btn-success-outline:focus,.btn-success-outline.focus,.btn-success-outline:active,.btn-success-outline.active,.btn-success-outline:hover,.open>.btn-success-outline.dropdown-toggle{color:#fff !important;background-color:#5cb85c !important;border-color:#5cb85c !important;}#movieList .mix{display:none;}#tvList .mix{display:none;}
+@media(min-width:768px){.row{position:relative;}.bottom-align-text{position:absolute;bottom:0;right:0;}}@media(max-width:48em){.home{padding-top:1rem;}}@media(min-width:48em){.home{padding-top:4rem;}}.btn{border-radius:.25rem !important;}.multiSelect{background-color:#4e5d6c;}.form-control-custom{background-color:#4e5d6c !important;color:#fff !important;border-radius:0;box-shadow:0 0 0 !important;}h1{font-size:3.5rem !important;font-weight:600 !important;}.request-title{margin-top:0 !important;font-size:1.9rem !important;}p{font-size:1.1rem !important;}label{display:inline-block !important;margin-bottom:.5rem !important;font-size:16px !important;}.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{background:#4e5d6c;}.navbar .nav a .fa{font-size:130%;top:1px;position:relative;display:inline-block;margin-right:5px;}.btn-danger-outline{color:#d9534f !important;background-color:transparent;background-image:none;border-color:#d9534f !important;}.btn-danger-outline:focus,.btn-danger-outline.focus,.btn-danger-outline:active,.btn-danger-outline.active,.btn-danger-outline:hover,.open>.btn-danger-outline.dropdown-toggle{color:#fff !important;background-color:#d9534f !important;border-color:#d9534f !important;}.btn-primary-outline{color:#ff761b !important;background-color:transparent;background-image:none;border-color:#ff761b !important;}.btn-primary-outline:focus,.btn-primary-outline.focus,.btn-primary-outline:active,.btn-primary-outline.active,.btn-primary-outline:hover,.open>.btn-primary-outline.dropdown-toggle{color:#fff !important;background-color:#df691a !important;border-color:#df691a !important;}.btn-info-outline{color:#5bc0de !important;background-color:transparent;background-image:none;border-color:#5bc0de !important;}.btn-info-outline:focus,.btn-info-outline.focus,.btn-info-outline:active,.btn-info-outline.active,.btn-info-outline:hover,.open>.btn-info-outline.dropdown-toggle{color:#fff !important;background-color:#5bc0de !important;border-color:#5bc0de !important;}.btn-warning-outline{color:#f0ad4e !important;background-color:transparent;background-image:none;border-color:#f0ad4e !important;}.btn-warning-outline:focus,.btn-warning-outline.focus,.btn-warning-outline:active,.btn-warning-outline.active,.btn-warning-outline:hover,.open>.btn-warning-outline.dropdown-toggle{color:#fff !important;background-color:#f0ad4e !important;border-color:#f0ad4e !important;}.btn-success-outline{color:#5cb85c !important;background-color:transparent;background-image:none;border-color:#5cb85c !important;}.btn-success-outline:focus,.btn-success-outline.focus,.btn-success-outline:active,.btn-success-outline.active,.btn-success-outline:hover,.open>.btn-success-outline.dropdown-toggle{color:#fff !important;background-color:#5cb85c !important;border-color:#5cb85c !important;}#movieList .mix{display:none;}#tvList .mix{display:none;}.no-search-results{text-align:center;}.no-search-results .no-search-results-icon{font-size:10em;color:#4e5d6c;}.no-search-results .no-search-results-text{margin:20px 0;color:#ccc;}

PlexRequests.UI/Content/custom.scss

@@ -5,7 +5,9 @@ $info-colour: #5bc0de;
 $warning-colour: #f0ad4e;
 $danger-colour: #d9534f;
 $success-colour: #5cb85c;
-$i:!important;
+$i:
+!important
+;
 
 @media (min-width: 768px ) {
     .row {
@@ -42,6 +44,8 @@ $i:!important;
 .form-control-custom {
     background-color: $form-color $i;
     color: white $i;
+    border-radius: 0;
+    box-shadow: 0 0 0 !important;
 }
 
 
@@ -65,8 +69,8 @@ label {
     font-size: 16px $i;
 }
 
-.nav-tabs > li.active > a, 
-.nav-tabs > li.active > a:hover, 
+.nav-tabs > li.active > a,
+.nav-tabs > li.active > a:hover,
 .nav-tabs > li.active > a:focus {
     background: #4e5d6c;
 }
@@ -170,9 +174,24 @@ label {
     border-color: $success-colour $i;
 }
 
-#movieList .mix{
-	display: none;
+#movieList .mix {
+    display: none;
+}
+
+#tvList .mix {
+    display: none;
+}
+
+.no-search-results {
+    text-align: center;
+}
+
+.no-search-results .no-search-results-icon {
+    font-size: 10em;
+    color: $form-color;
+}
+
+.no-search-results .no-search-results-text {
+    margin: 20px 0;
+    color: #ccc;
 }
-#tvList .mix{
-	display: none;
-}

PlexRequests.UI/Content/search.js

@@ -7,6 +7,8 @@
 
 var searchSource = $("#search-template").html();
 var searchTemplate = Handlebars.compile(searchSource);
+var noResultsHtml = "<div class='no-search-results'>" +
+    "<i class='fa fa-film no-search-results-icon'></i><div class='no-search-results-text'>Sorry, we didn't find any results!</div></div>";
 var movieTimer = 0;
 var tvimer = 0;
 
@@ -124,6 +126,9 @@ function movieSearch() {
                 $("#movieList").append(html);
             });
         }
+        else {
+            $("#movieList").html(noResultsHtml);
+        }
         $('#movieSearchButton').attr("class","fa fa-search");
     });
 };
@@ -140,6 +145,9 @@ function tvSearch() {
                 $("#tvList").append(html);
             });
         }
+        else {
+            $("#tvList").html(noResultsHtml);
+        }
         $('#tvSearchButton').attr("class", "fa fa-search");
     });
 };

PlexRequests.UI/Views/Search/Index.cshtml

@@ -1,6 +1,7 @@
 <div>
     <h1>Search</h1>
     <h4>Want to watch something that is not currently on Plex?! No problem! Just search for it below and request it!</h4>
+    <br />
     <!-- Nav tabs -->
     <ul id="nav-tabs" class="nav nav-tabs" role="tablist">
         @if (Model.SearchForMovies)
@@ -57,7 +58,6 @@
 
 </div>
 
-
 <script id="search-template" type="text/x-handlebars-template">
     <div class="row">
         <div class="col-sm-2">