Moved from Tabs to Accordion for Notifiers

Indexers is the first item in Settings SubMenu (its the default).

NzbDrone.Web/Content/Settings.css

@@ -9,17 +9,10 @@ p, h1, form, button{border:0; margin:0; padding:0;}
 
 .settingsForm
 {
-    /*margin:0 auto;*/
+    width: 620px;
-    width: 600px;
     padding: 14px;
 }
 
-#stylized
-{
-    /*border:solid 2px #b7ddf2;
-    background:#ebf4fb;*/
-}
-
 #stylized h1
 {
     font-size:20px;

NzbDrone.Web/Views/Settings/Indexers.cshtml

@@ -7,26 +7,6 @@
         .indexerPanel
         {
             overflow: auto;
-            padding-top: 20px;
-        }
-        
-        .additionalInfo
-        {
-            float: right;
-            margin-top: 20px;
-            margin-right: 40px;
-            font-size: 120%;
-            font-weight: bold;
-        }
-        
-        #stylized .indexerPanel .labelClass
-        {
-            width: 320px;
-        }
-        
-        #stylized .indexerPanel .small
-        {
-            width: 320px;
         }
     </style>
 }

NzbDrone.Web/Views/Settings/Notifications.cshtml

@@ -7,9 +7,6 @@
     <style>
         .notifier
         {
-            width: 560px;
-            padding: 5px;
-            margin-left: -8px;
             overflow: auto;
         }
         
@@ -21,19 +18,17 @@
             padding-top: 3px;
         }
         
-        .notifierLine
-        {
-            font-size:11px;
-            color:#666666;
-            margin-bottom:20px;
-            border-bottom:solid 1px #CCCCCD;
-            padding-bottom:10px;
-        }
-        
         #save_button
         {
             margin-top: 10px;
         }
+
+        #smtpTest
+        {
+            margin-top: 10px;
+            margin-bottom: 10px;
+            margin-left: 220px;
+        }
     </style>
 }
 
@@ -48,30 +43,22 @@
 @section MainContent{
     <div id="stylized">
         @using (Html.BeginForm("SaveNotifications", "Settings", FormMethod.Post, new { id = "form", name = "form", @class = "settingsForm" }))
-        {           
+        {
-            <div id="tabs">
+            <div id="accordion">
-	            <ul>
+                <h3><a href="#">XBMC</a></h3>
-		            <li><a href="#tabs-xbmc">XBMC</a></li>
+                @{Html.RenderPartial("Xbmc", Model);}
-		            <li><a href="#tabs-smtp">SMTP</a></li>
+
-                    <li><a href="#tabs-twitter">Twitter</a></li>
+                <h3><a href="#">SMTP</a></h3>
-                    <li><a href="#tabs-growl">Growl</a></li>
+                @{Html.RenderPartial("Smtp", Model);}
-                    <li><a href="#tabs-prowl">Prowl</a></li>
+
-	            </ul>
+                <h3><a href="#">Twitter</a></h3>
-	            <div id="tabs-xbmc">
+                @{Html.RenderPartial("Twitter", Model);}
-                    @{Html.RenderPartial("Xbmc", Model);}
+
-	            </div>
+                <h3><a href="#">Growl</a></h3>
-	            <div id="tabs-smtp">
+                @{Html.RenderPartial("Growl", Model);}
-		            @{Html.RenderPartial("Smtp", Model);}
+
-	            </div>
+                <h3><a href="#">Prowl</a></h3>
-                <div id="tabs-twitter">
+                @{Html.RenderPartial("Prowl", Model);}
-                    @{Html.RenderPartial("Twitter", Model);}
-	            </div>
-                <div id="tabs-growl">
-                    @{Html.RenderPartial("Growl", Model);}
-	            </div>
-                <div id="tabs-prowl">
-                    @{Html.RenderPartial("Prowl", Model);}
-	            </div>
             </div>
             
             <button type="submit" id="save_button" disabled="disabled">Save</button>
@@ -84,7 +71,76 @@
 
     <script type="text/javascript">
         $(function () {
-            $("#tabs").tabs();
+            $("#accordion").accordion({
+                autoHeight: false
+            });
         });
-	</script>
+        
+        //Twitter
+        getAuthorizationUrl = '../Command/GetTwitterAuthorization';
+        verifyAuthorizationUrl = '../Command/VerifyTwitterAuthorization';
+
+        function requestTwitterAuthorization() {
+            $.ajax({
+                    type: "GET",
+                    url: getAuthorizationUrl,
+                    error: function(req, status, error) {
+                        alert("Sorry! We could get Twitter Authorization at this time. " + error);
+                    },
+                    success: function(data, textStatus, jqXHR) {
+                        if (data.IsMessage)
+                            return false;
+
+                        $('#authorizationRequestToken').val(data.Token);
+                        window.open(data.Url);
+                    }
+                });
+        }
+
+        function verifyTwitterAuthorization() {
+            var token = $('#authorizationRequestToken').val();
+            var verifier = $('#twitterVerification').val();
+
+            $.ajax({
+                    type: "GET",
+                    url: verifyAuthorizationUrl,
+                    data: jQuery.param({ token: token, verifier: verifier }),
+                    error: function(req, status, error) {
+                        alert("Sorry! We could verify Twitter Authorization at this time. " + error);
+                    }
+                });
+            }
+
+            //SMTP
+            function testSmtpSettings() {
+                //Get the variables
+                var server = $('#SmtpServer').val();
+                var port = $('#SmtpPort').val();
+                var ssl = $('#SmtpUseSsl').val();
+                var username = $('#SmtpUsername').val();
+                var password = $('#SmtpPassword').val();
+                var fromAddress = $('#SmtpFromAddress').val();
+                var toAddresses = $('#SmtpToAddresses').val();
+
+                //Send the data!
+                $.ajax({
+                    type: "POST",
+                    url: '../Command/SendTestEmail',
+                    data: jQuery.param({
+                        server: server,
+                        port: port,
+                        ssl: ssl,
+                        username: username,
+                        password: password,
+                        fromAddress: fromAddress,
+                        toAddresses: toAddresses
+                    }),
+                    error: function (req, status, error) {
+                        alert("Sorry! We could send a test email at this time. " + error);
+                    }
+                });
+
+                return false;
+            }
+</script>
 }

NzbDrone.Web/Views/Settings/Smtp.cshtml

@@ -55,49 +55,6 @@
     <span class="small">@Html.DescriptionFor(m => m.SmtpToAddresses)</span>
     </label>
     @Html.TextBoxFor(m => m.SmtpToAddresses, new { @class = "inputClass" })
-</div>
 
-<input type="button" onclick="testSmtpSettings();" value="Test SMTP" id="smtpTest"/>
+    <input type="button" onclick="testSmtpSettings();" value="Test SMTP" id="smtpTest"/>
-
+</div>
-@*Move this somewhere better*@
-<style>
-    #smtpTest
-    {
-        margin-top: 10px;
-        margin-bottom: 10px;
-        margin-left: 220px;
-    }
-</style>
-
-<script type="text/javascript">
-    function testSmtpSettings() {
-        //Get the variables
-        var server = $('#SmtpServer').val();
-        var port = $('#SmtpPort').val();
-        var ssl = $('#SmtpUseSsl').val();
-        var username = $('#SmtpUsername').val();
-        var password = $('#SmtpPassword').val();
-        var fromAddress = $('#SmtpFromAddress').val();
-        var toAddresses = $('#SmtpToAddresses').val();
-
-        //Send the data!
-        $.ajax({
-            type: "POST",
-            url: '../Command/SendTestEmail',
-            data: jQuery.param({
-                server: server,
-                port: port,
-                ssl: ssl,
-                username: username,
-                password: password,
-                fromAddress: fromAddress,
-                toAddresses: toAddresses
-            }),
-            error: function (req, status, error) {
-                alert("Sorry! We could send a test email at this time. " + error);
-            }
-        });
-
-        return false;
-    }
-</script>

NzbDrone.Web/Views/Settings/SubMenu.cshtml

@@ -1,8 +1,8 @@
 <ul class="sub-menu">
+    <li>@Html.ActionLink("Indexers", "Indexers", "Settings")</li>
     <li>@Html.ActionLink("Quality", "Quality", "Settings")</li>
     <li>@Html.ActionLink("Naming", "Naming", "Settings")</li>
     <li>@Html.ActionLink("Notifications", "Notifications", "Settings")</li>
-    <li>@Html.ActionLink("Indexers", "Indexers", "Settings")</li>
     <li>@Html.ActionLink("SABnzbd", "Sabnzbd", "Settings")</li>
     <li>@Html.ActionLink("System", "System", "Settings")</li>
 </ul>

NzbDrone.Web/Views/Settings/Twitter.cshtml

@@ -37,40 +37,4 @@
     <input type="button" onclick="verifyTwitterAuthorization();" value="Test Authorization" class="inputClass"/>
 
     @Html.Hidden("authorizationRequestToken")
-</div>
+</div>
-
-<script type="text/javascript">
-    getAuthorizationUrl = '../Command/GetTwitterAuthorization';
-    verifyAuthorizationUrl = '../Command/VerifyTwitterAuthorization';
-
-    function requestTwitterAuthorization() {
-        $.ajax({
-                type: "GET",
-                url: getAuthorizationUrl,
-                error: function(req, status, error) {
-                    alert("Sorry! We could get Twitter Authorization at this time. " + error);
-                },
-                success: function(data, textStatus, jqXHR) {
-                    if (data.IsMessage)
-                        return false;
-
-                    $('#authorizationRequestToken').val(data.Token);
-                    window.open(data.Url);
-                }
-            });
-    }
-
-    function verifyTwitterAuthorization() {
-        var token = $('#authorizationRequestToken').val();
-        var verifier = $('#twitterVerification').val();
-
-        $.ajax({
-                type: "GET",
-                url: verifyAuthorizationUrl,
-                data: jQuery.param({ token: token, verifier: verifier }),
-                error: function(req, status, error) {
-                    alert("Sorry! We could verify Twitter Authorization at this time. " + error);
-                }
-            });
-    }
-</script>