Loading overlay added to series grid.

NzbDrone.Web/Content/style.css

@@ -309,3 +309,29 @@ button, input[type="button"], input[type="submit"], input[type="reset"]
     display: block;
     height: 25px;
 }
+
+/* Loading Bar */
+.grid-container  
+    {  
+        position:relative;  
+        margin:auto;  
+        overflow:hidden;  
+    }  
+
+    .grid-loader  
+    {  
+        position: absolute;  
+        width: 100%;
+        height: 100%;
+        top: 400px;  
+        left: 0px;  
+        letter-spacing: -1px;  
+        color: white; font: 48px Berlin Sans FB, Sans-Serif;  
+        background: #4A4D4A;  
+        padding: 20px;  
+        filter:alpha(opacity=80);  
+        -moz-opacity:0.8;  
+        -khtml-opacity: 0.8;  
+        opacity: 0.8;  
+        line-height: 90%  
+    } 

NzbDrone.Web/Views/Series/Index.cshtml

@@ -11,6 +11,7 @@
 }
 
 @section MainContent{
+    <div class="grid-container">
         @{Html.Telerik().Grid<SeriesModel>().Name("Grid")
                 .TableHtmlAttributes(new { @class = "Grid" })
                 .DataKeys(keys => keys.Add(p => p.SeriesId))
@@ -18,7 +19,6 @@
                     .Select("_AjaxSeriesGrid", "Series")
                     .Update("_SaveAjaxSeriesEditing", "Series")
                     .Delete("_DeleteAjaxSeriesEditing", "Series"))
-                
                 .Columns(columns =>
                              {
                                  columns.Bound(o => o.Title)
@@ -41,8 +41,13 @@
                 .Editable(editor => editor.Mode(GridEditMode.PopUp))
                 .Sortable(sort => sort.OrderBy(order => order.Add(o => o.Title).Ascending()).Enabled(true))
                 .DetailView(detailView => detailView.ClientTemplate("<div style=\"width:95%\"><#= Overview #></div>"))
-            .ClientEvents(clientEvents => clientEvents.OnEdit("grid_edit"))
+                .ClientEvents(clientEvents => { clientEvents.OnEdit("grid_edit");
+                                                clientEvents.OnDataBinding("grid_bind");
+                                                clientEvents.OnDataBound("grid_bound");
+                                              })
                 .Render();}
+        <span class="grid-loader"><img src="@Url.Content( "~/Content/Images/Loading.gif" )" alt="Loading"/> Loading...</span>
+    </div>
 }
 
 <script type="text/javascript">
@@ -55,6 +60,14 @@
                 .center();
         }
 
+    function grid_bind(args) {
+        $('.grid-container').children('.grid-loader').stop().css("top", "0px").fadeIn('slow');
+    }
+
+    function grid_bound(args) {
+        $('.grid-container').children('.grid-loader').stop().fadeOut('slow');
+    }
+
     function openSeasonEditor(seriesId, seriesName) {
         windowElement = null;
         windowElement = $.telerik.window.create({

NzbDrone.Web/Views/Settings/Test.cshtml

@@ -1,106 +1,58 @@
-    <style type="text/css">
+<style>
 
-        #feedback-open-button
+#container {  
-        {
+    width: 850px;   
-            height: 32px;
+    margin: auto;  
-            margin: 2em 0 4em;
 }  
 
-        #feedback-form
+.back  
 {  
-            padding: 0 1em 1em;
+    position:absolute;  
+    top:0;left:0;  
 }  
-        
+.wrap  
-        #feedback-form label
 {  
-            display: block;
+    width:550px;  
-            line-height: 25px;
+    height:390px;  
-            margin-top: 1em;
+    position:relative;  
-        }
+    margin:auto;  
-        
-        #feedback-form input
-        {
-            width: 370px;
-        }
-        
-        .form-actions
-        {
-            padding-top: 1em;
     overflow:hidden;  
 }  
 
-        .form-actions button
+.comment  
 {  
-            float: right;
+    position: absolute;  
-        }
+    width: 550px;
-        
+    height: auto;
-        .example .t-group
+    top: 400px;  
-        {
+    left: 0px;  
-            border-width: 1px;
+    letter-spacing: -1px;  
-            border-style: solid;
+    color: white; font: 24px/45px Berlin Sans FB, Sans-Serif;  
-            padding: 0 1em 1em;
+    background: #4A4D4A;  
+    padding: 10px;  
+    filter:alpha(opacity=60);  
+    -moz-opacity:0.6;  
+    -khtml-opacity: 0.6;  
+    opacity: 0.6;  
+    line-height: 90%  
 } 
 
 </style>
 
-@{  Html.Telerik().Window()
+<button onclick="overlay()">Click Me!</button>
-        .Name("Window")
-        .Title("Submit feedback")
-        .LoadContentFrom("TestPartial", "Settings")
-        .Width(400)
-        .Draggable(true)
-        .Modal(true)
-        .Visible(false)
-        .Render();
-} 
 
-<button id="feedback-open-button" class="t-button t-state-default">Submit feedback...</button>
+<div class="wrap">
-@if (ViewData["name"] != null || ViewData["email"] != null || ViewData["comment"] != null) { 
+    <img class="backer" src="../../Content/leopard.jpg" alt="image"/>
-    <div class="t-group">
-        <h3>Feedback:</h3>
         
-        <p>
+    <span class="comment">
-            Name: @ViewData["name"] <br />
+        Loading...
-            E-mail: @ViewData["email"] <br />
+    </span>
-            Comment: @ViewData["comment"] 
-        </p>
 </div>
-}
 
-@{ Html.Telerik().ScriptRegistrar()
-        .OnDocumentReady(@<text>
-            // open the initially hidden window when the button is clicked
-            
-        </text>); }
 
 
 <script type="text/javascript">
-
+    function overlay() {
-    var windowElement;
+        $('.wrap').children('.comment').stop().css("top", "0px");
-
-    $('#feedback-open-button')
-                .click(function (e) {
-                    e.preventDefault();
-
-                    windowElement = $.telerik.window.create({
-                        title: "Season Edition: ",
-                        contentUrl: '@Url.Action("SeasonEditor", "Series")' + '/?seriesId=10',
-                        width: 400,
-                        height: 500,
-                        modal: true,
-                        resizable: false,
-                        draggable: true,
-                        scrollable: false
-                    });
-
-                    windowElement.data('tWindow').center();
-                });
-    // add button hovers
-    $('.t-button').live('mouseenter', $.telerik.buttonHover)
-                            .live('mouseleave', $.telerik.buttonLeave);
-
-    function closeWindow() {
-        var window = windowElement.data("tWindow");
-        window.close();
     }
 </script>