Updated localsearch UI.

NzbDrone.Web/Content/NzbDrone.css

@@ -1,4 +1,3 @@
-
 *
 {
     font-family: "Segoe UI" , "Segoe UI Light" , Tahoma, Geneva, sans-serif;
@@ -14,11 +13,11 @@ body
 
 #centered
 {
-   margin-right: auto;
+    margin-right: auto;
-   width: 85%;
+    width: 85%;
-   margin-left: auto;
+    margin-left: auto;
-   min-width: 800px;
+    min-width: 800px;
-   max-width: 1400px;
+    max-width: 1400px;
 }
 
 h1, h2, h3, h4, h5, h6
@@ -256,3 +255,16 @@ select, button, input[type="button"], input[type="submit"], input[type="reset"]
     top: 30px;
     right: 15px;
 }
+
+
+#localSeriesLookup
+{
+    width: 220px;
+    float: right;
+    margin-top: 7px;
+    margin-bottom: 0px;
+    border: 0px;
+    background: rgb(68, 67, 67);
+    color: rgb(169, 169, 169);
+    padding: 4px;
+}

NzbDrone.Web/Content/Slider.css

@@ -1,62 +0,0 @@
-.top-slider {
-    position: absolute;
-    opacity: 0.85;
-    width: 300px;
-}
-
-.sliderButton {
-    border: 0;
-}
-
-.sliderContent {
-    background-color:#333333;
-    text-align:center;
-    width: 100%;
-    color:#FFFFFF;
-    font-weight:bold;
-    margin: 0px;
-    display: none;
-
-    border:1px solid #444444;
-    -moz-border-radius-bottomright: 8px;
-    -webkit-border-bottom-right-radius: 8px;
-    -moz-border-radius-bottomleft: 8px;
-    -webkit-border-bottom-left-radius: 8px;
-}
-
-.sliderButton {
-    width: 70px;
-    margin-left:auto;
-    margin-right:auto;
-    background-color:#333333;
-    cursor:pointer;
-    font-size:12px;
-    font-weight:bold;
-    text-align: center;
-    color:#FFFFFF;
-    
-
-    border: 1px solid #444444;
-    border-top: 0px;
-    -moz-border-radius-bottomright: 10px;
-    -webkit-border-bottom-right-radius: 10px;
-    -moz-border-radius-bottomleft: 10px;
-    -webkit-border-bottom-left-radius: 10px;
-}
-
-.sliderImage {
-    width: 16px;
-    height: 16px;
-    display: inline-block;
-    margin-bottom: -3px;
-    margin-right: -5px;
-    margin-left: 2px;
-}
-
-.sliderClosed {
-    background:url('../Content/Images/ui-icons_2e83ff_256x240.png') -64px -16px no-repeat;
-}
-
-.sliderOpened {
-    background:url('../Content/Images/ui-icons_2e83ff_256x240.png') 0px -16px no-repeat;
-}

NzbDrone.Web/NzbDrone.Web.csproj

@@ -148,7 +148,6 @@
     <Content Include="Content\Images\yellow.png" />
     <Content Include="Content\IndexerSettings.css" />
     <Content Include="Content\Messages.css" />
-    <Content Include="Content\Slider.css" />
     <Content Include="Content\Grid.css" />
     <Content Include="Content\Images\close.png" />
     <Content Include="Content\Images\Downloading.png" />
@@ -402,7 +401,6 @@
     <Content Include="Scripts\NzbDrone\Notification.js" />
     <Content Include="Scripts\NzbDrone\seriesDetails.js" />
     <Content Include="Scripts\NzbDrone\settingsForm.js" />
-    <Content Include="Scripts\NzbDrone\slider.js" />
     <Content Include="Scripts\jquery-ui-1.8.16.js" />
     <Content Include="Scripts\jquery-ui-1.8.16.min.js" />
     <Content Include="Scripts\jquery.gritter.js" />
@@ -495,9 +493,6 @@
   <ItemGroup>
     <Content Include="Views\Shared\QuickAdd.cshtml" />
   </ItemGroup>
-  <ItemGroup>
-    <Content Include="Views\Shared\LocalSearch.cshtml" />
-  </ItemGroup>
   <ItemGroup>
     <Content Include="Views\Settings\Xbmc.cshtml" />
   </ItemGroup>

NzbDrone.Web/Scripts/NzbDrone/AutoComplete.js

@@ -4,6 +4,13 @@
     });
 
     bindAutoCompletes();
+
+    $(document).bind('keydown', 'ctrl+shift+f', function () {
+        $('#localSeriesLookup').focus();
+    });
+    $(document).bind('keyup', 's', function () {
+        $('#localSeriesLookup').focus();
+    });
 });
 
 //
@@ -14,11 +21,10 @@ $('.folderLookup:not(.ui-autocomplete-input), .seriesLookup:not(.ui-autocomplete
 function bindAutoCompletes() {
     bindFolderAutoComplete(".folderLookup");
     bindSeriesAutoComplete(".seriesLookup");
-    bindLocalSeriesAutoComplete(".localSeriesLookup");
+    bindLocalSeriesAutoComplete("#localSeriesLookup");
 }
 
 function bindFolderAutoComplete(selector) {
-    
     $(selector).each(function (index, element) {
         $(element).autocomplete({
             //source: "/Directory/GetDirectories",
@@ -66,10 +72,12 @@ function bindSeriesAutoComplete(selector) {
 function bindLocalSeriesAutoComplete(selector) {
 
     $(selector).each(function (index, element) {
+        $(element).watermark('Search...');
         $(element).autocomplete({
             source: "/Series/LocalSearch",
-            minLength: 3,
+            minLength: 1,
-            delay: 500,
+            delay: 100,
+            autoFocus:true,
             select: function (event, ui) {
                 window.location = "../Series/Details?seriesId=" + ui.item.Id;
             }

NzbDrone.Web/Scripts/NzbDrone/slider.js

@@ -1,46 +0,0 @@
-$(document).ready(function () {
-    $(".sliderButton").live('click', function () {
-        sliderToggle(this);
-    });
-});
-
-function sliderToggle(sliderButton) {
-    //Get sliderContent
-    var sliderContent = $(sliderButton).siblings('.sliderContent');
-    
-    //Open the slider
-    sliderContent.slideToggle('slow');
-    
-    //Change the slider Image
-    $(sliderButton).children('.sliderImage').toggleClass('sliderOpened sliderClosed');
-
-    //Clear the search box
-    $(sliderContent).children('.localSeriesLookup').val('');
-    
-    //Focus in the search box
-    $(sliderContent).children('.localSeriesLookup').focus();
-
-    //Hide the sliders
-    hideSliders(sliderContent);
-
-    //Prevent the Address Bar from changing
-    return false;
-}
-
-function hideSliders(newlyOpenedSlider) {
-    $('.sliderContent').each(function (index, value) {
-        var newlyOpenedSliderId = $(newlyOpenedSlider).parent('.top-slider').attr('id');
-        var id = $(this).parent('.top-slider').attr('id');
-
-        //If the ID's of the top-sliders don't match then hide it
-        if (id != newlyOpenedSliderId)
-            $(this).slideUp();
-    });
-}
-
-//Hide slider when text box loses focus
-$('.localSeriesLookup').live('blur', function () {
-    $('.sliderContent').each(function (index, value) {
-         $(this).slideUp();
-    });
-});

NzbDrone.Web/Views/Shared/LocalSearch.cshtml

@@ -1,41 +0,0 @@
-@{
-    Layout = null;
-}
-<style>
-    #localSeriesSlider
-    {
-        right: 150px;
-        top: 0px;
-    }
-    
-    .sliderContent .localSeriesLookup
-    {
-        width: 94%;
-    }
-    
-    .sliderContent
-    {
-        height: 53px;
-    }
-</style>
-<div id="localSeriesSlider" class="top-slider">
-    <div class="sliderContent">
-        Local Series Search
-        <input class="localSeriesLookup" type="text" />
-    </div>
-    <div class="sliderButton">
-        Search<div class="sliderImage sliderClosed">
-        </div>
-    </div>
-</div>
-<script type="text/javascript">
-    //Ctrl+Shift+F to open the slider
-    $(document).bind('keydown', 'ctrl+shift+f', function () {
-        $('#localSeriesSlider').children('.sliderButton').click();
-    });
-
-    //Use ESC to close the slider
-    $('.localSeriesLookup').bind('keydown', 'esc', function () {
-        $(this).parent('.sliderContent').slideUp();
-    });
-</script>

NzbDrone.Web/Views/Shared/_Layout.cshtml

@@ -15,13 +15,11 @@
     <link type="text/css" rel="stylesheet" href="../../Content/ActionButton.css" />
     <link type="text/css" rel="stylesheet" href="../../Content/overrides.css" />
     <link type="text/css" rel="stylesheet" href="../../Content/Menu.css" />
-    <link type="text/css" rel="stylesheet" href="../../Content/Slider.css" />
     <link type="text/css" rel="stylesheet" href="../../Content/Messages.css" />
     @MvcMiniProfiler.MiniProfiler.RenderIncludes()
     @RenderSection("HeaderContent", required: false)
 </head>
 <body>
-    @{Html.RenderAction("LocalSearch", "Shared");}
     <div id="centered">
         <div id="menu">
             <ul>
@@ -32,6 +30,7 @@
                 @MvcHtmlString.Create(Html.CurrentActionLink("Settings", "Index", "Settings"))
                 @MvcHtmlString.Create(Html.CurrentActionLink("Logs", "Index", "Log"))
             </ul>
+            <input id="localSeriesLookup" type="text"/>
         </div>
         <div id="logo">
             @RenderSection("TitleContent", required: false)
@@ -62,7 +61,6 @@
     <script type="text/javascript" src="../../Scripts/NzbDrone/episodeSearch.js"></script>
     <script type="text/javascript" src="../../Scripts/NzbDrone/AutoComplete.js"></script>
     <script type="text/javascript" src="../../Scripts/NzbDrone/addSeries.js"></script>
-    <script type="text/javascript" src="../../Scripts/NzbDrone/slider.js"></script>
     <script type="text/javascript" src="../../Scripts/NzbDrone/Notification.js"></script>
     @RenderSection("Scripts", required: false)
     @if (EnviromentProvider.IsProduction)