From 979f33ade5cf12d257840f145797b1e6d5004256 Mon Sep 17 00:00:00 2001
From: Stephen Birarda <commit@birarda.com>
Date: Mon, 11 May 2015 11:26:45 -0700
Subject: [PATCH] show an advanced toggle button in when xs

---
 domain-server/resources/web/css/style.css     |   8 ++
 domain-server/resources/web/js/settings.js    |   2 +-
 .../resources/web/settings/index.shtml        | 120 ++++++++++--------
 3 files changed, 73 insertions(+), 57 deletions(-)

diff --git a/domain-server/resources/web/css/style.css b/domain-server/resources/web/css/style.css
index de3383b876..e38ff8eda0 100644
--- a/domain-server/resources/web/css/style.css
+++ b/domain-server/resources/web/css/style.css
@@ -91,3 +91,11 @@ table {
   table-layout: fixed;
   word-wrap: break-word;
 }
+
+#xs-advanced-container {
+  margin-bottom: 20px;
+}
+
+#advanced-toggle-button-xs {
+  width: 100%;
+}
diff --git a/domain-server/resources/web/js/settings.js b/domain-server/resources/web/js/settings.js
index 4fac753959..6762814d8b 100644
--- a/domain-server/resources/web/js/settings.js
+++ b/domain-server/resources/web/js/settings.js
@@ -155,7 +155,7 @@ $(document).ready(function(){
     badgeSidebarForDifferences($(this))
   })
   
-  $('#advanced-toggle-button').click(function(){
+  $('.advanced-toggle').click(function(){
     Settings.showAdvanced = !Settings.showAdvanced
     var advancedSelector = $('.' + Settings.ADVANCED_CLASS)
     
diff --git a/domain-server/resources/web/settings/index.shtml b/domain-server/resources/web/settings/index.shtml
index 598f137285..b9b1a04c71 100644
--- a/domain-server/resources/web/settings/index.shtml
+++ b/domain-server/resources/web/settings/index.shtml
@@ -1,68 +1,76 @@
 <!--#include virtual="header.html"-->
 
-
 <div class="col-md-10 col-md-offset-1">
-  <div class="col-md-12">
-    <div class="alert" style="display:none;"></div>
-  </div>
-  
-  <div class="col-md-3 col-sm-3" id="setup-sidebar-col">
-    <div id="setup-sidebar" data-clampedwidth="#setup-sidebar-col" class="hidden-xs" data-spy="affix" data-offset-top="55">
-      <script id="list-group-template" type="text/template">
-        <% _.each(descriptions, function(group){ %>
-          <li>
-            <a href="#<%-group.name %>" class="list-group-item">
-              <span class="badge"></span>
-              <%- group.label %>
-            </a>
-          </li>
-        <% }); %>
-      </script>
-      
-      <ul class="nav nav-pills nav-stacked">
-      </ul>
-      
-      <button id="advanced-toggle-button" hidden=true class="btn btn-info">Show advanced</button>
-      <button class="btn btn-success save-button">Save and restart</button>
+  <div class="row">
+    <div class="col-md-12">
+      <div class="alert" style="display:none;"></div>
     </div>
   </div>
-  
-  <div class="col-md-9 col-sm-9 col-xs-12">
-    <form id="settings-form" role="form">
-  
-      <script id="panels-template" type="text/template">
-        <% _.each(descriptions, function(group){ %>
-          <% split_settings = _.partition(group.settings, function(value, index) { return !value.advanced }) %>
-          <% isAdvanced = _.isEmpty(split_settings[0]) %>
-          <% if (isAdvanced) { %>
-            <% $("a[href=#" + group.name + "]").addClass('advanced-setting').hide() %>
-          <% } %>
-          <div class="panel panel-default <%- (isAdvanced) ? 'advanced-setting' : '' %>" id="<%- group.name %>">
-            <div class="panel-heading">
-              <h3 class="panel-title"><%- group.label %></h3>
-            </div>
-            <div class="panel-body">
-              <% _.each(split_settings[0], function(setting) { %>
-                <%= getFormGroup(group.name, setting, values, false, 
-                  (_.has(locked, group.name) && _.has(locked[group.name], setting.name))) %>
-              <% }); %>
-              <% if (!_.isEmpty(split_settings[1])) { %>
-                <% $("#advanced-toggle-button").show() %>
-                <% _.each(split_settings[1], function(setting) { %>
-                  <%= getFormGroup(group.name, setting, values, true, 
+
+  <div class="row">
+    <div class="col-md-3 col-sm-3" id="setup-sidebar-col">
+      <div id="setup-sidebar" class="hidden-xs">
+        <script id="list-group-template" type="text/template">
+          <% _.each(descriptions, function(group){ %>
+            <li>
+              <a href="#<%-group.name %>" class="list-group-item">
+                <span class="badge"></span>
+                <%- group.label %>
+              </a>
+            </li>
+          <% }); %>
+        </script>
+        
+        <ul class="nav nav-pills nav-stacked">
+        </ul>
+        
+        <button id="advanced-toggle-button" hidden=true class="btn btn-info advanced-toggle">Show advanced</button>
+        <button class="btn btn-success save-button">Save and restart</button>
+      </div>
+    </div>
+
+    <div class="col-md-9 col-sm-9 col-xs-12">
+      <div id="xs-advanced-container" class="col-xs-12 hidden-sm hidden-md hidden-lg">
+        <button id="advanced-toggle-button-xs" class="btn btn-info advanced-toggle">Show advanced</button>
+      </div>
+
+      <div class="col-xs-12">
+        <form id="settings-form" role="form">
+    
+        <script id="panels-template" type="text/template">
+          <% _.each(descriptions, function(group){ %>
+            <% split_settings = _.partition(group.settings, function(value, index) { return !value.advanced }) %>
+            <% isAdvanced = _.isEmpty(split_settings[0]) %>
+            <% if (isAdvanced) { %>
+              <% $("a[href=#" + group.name + "]").addClass('advanced-setting').hide() %>
+            <% } %>
+            <div class="panel panel-default <%- (isAdvanced) ? 'advanced-setting' : '' %>" id="<%- group.name %>">
+              <div class="panel-heading">
+                <h3 class="panel-title"><%- group.label %></h3>
+              </div>
+              <div class="panel-body">
+                <% _.each(split_settings[0], function(setting) { %>
+                  <%= getFormGroup(group.name, setting, values, false, 
                     (_.has(locked, group.name) && _.has(locked[group.name], setting.name))) %>
                 <% }); %>
-              <% }%>
+                <% if (!_.isEmpty(split_settings[1])) { %>
+                  <% $("#advanced-toggle-button").show() %>
+                  <% _.each(split_settings[1], function(setting) { %>
+                    <%= getFormGroup(group.name, setting, values, true, 
+                      (_.has(locked, group.name) && _.has(locked[group.name], setting.name))) %>
+                  <% }); %>
+                <% }%>
+              </div>
             </div>
-          </div>
-        <% }); %>
-      </script>
+          <% }); %>
+        </script>
       
-      <div id="panels"></div>
-      
-     </form>
+        <div id="panels"></div>
+        </form>
+      </div>
+    </div>
   </div>
-  
+    
   <div class="col-xs-12 hidden-sm hidden-md hidden-lg">
     <button class="btn btn-success save-button" id="small-save-button">Save and restart</button>
   </div>
@@ -87,4 +95,4 @@
 <script src='/js/sweet-alert.min.js'></script>
 <script src='/js/settings.js'></script>
 <script src='/js/form2js.min.js'></script>
-<!--#include virtual="page-end.html"-->
\ No newline at end of file
+<!--#include virtual="page-end.html"-->