hide non-primary options behind js menu

3 files changed, 124 insertions, 69 deletions

diff --git a/public/static/collapse.js b/public/static/collapse.js
index d38b30a..b6537be 100644
--- a/public/static/collapse.js
+++ b/public/static/collapse.js
@@ -19,4 +19,21 @@ $(document).ready(function() {
 			});
 		});
 	});
+	$('.moresettings-header').each(function() {
+		$(this).click(function() {
+			var moresettings = $('.moresettings');
+			if ($(this).hasClass('moresettings-header-collapsed')) {
+				$(this).removeClass('moresettings-header-collapsed');
+				$(this).addClass('moresettings-header-expanded');
+				moresettings.removeClass('moresettings-collapsed');
+				moresettings.addClass('moresettings-expanded');
+			}
+			else {
+				$(this).removeClass('moresettings-header-expanded');
+				$(this).addClass('moresettings-header-collapsed');
+				moresettings.removeClass('moresettings-expanded');
+				moresettings.addClass('moresettings-collapsed');
+			}
+		});
+	});
 });
diff --git a/public/static/default.css b/public/static/default.css
index e11e315..4d8cd91 100644
--- a/public/static/default.css
+++ b/public/static/default.css
@@ -483,6 +483,26 @@ span.notes {
 	color: #666666;
 }
 
+.moresettings-header {
+	cursor: pointer;
+}
+
+.moresettings-header-collapsed:before {
+	content: "▹ "
+}
+
+.moresettings-header-expanded:before {
+	content: "▿ "
+}
+
+.moresettings-collapsed {
+	display: none;
+}
+
+.moresettings-expanded {
+	display: block;
+}
+
 div.break {
 	height: 1em;
 }
@@ -550,10 +570,26 @@ input[type="submit"]:hover,
 	border-color: #204d74;
 }
 
-input[type="submit"]:active {
+input[type="submit"]:active,
+.button.active {
 	box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
 }
 
+.button-light {
+	color: #333;
+	background-color: #fff;
+	border-color: #ccc;
+}
+
+.button-light:active,
+.button-light:focus,
+.button-light:hover
+{
+	color: #333;
+	background-color: #e6e6e6;
+	border-color: #adadad;
+}
+
 div.notes {
 	margin-top: 2em;
 }
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index a7e6a02..92ee22a 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -70,84 +70,86 @@ Bitte eine Station aus der Liste auswählen</div>
     %= submit_button 'Abfartsmonitor'
   </div>
   <div class="break"></div>
-  <span class="optional">Optionale Einstellungen:</span>
-  <div class="field">
-    <div class="desc">
-      Frontend
-    </div>
-    <div>
-      %= select_field mode => [ ['App / Infoscreen' => 'clean'], ['Bahnhofstafel' => 'multi'], ['Gleis' => 'single'] ]
+  <div class="moresettings-header moresettings-header-collapsed button button-light">Weitere Einstellungen</div>
+  <div class="moresettings moresettings-collapsed">
+    <div class="field">
+      <div class="desc">
+        Frontend
+      </div>
+      <div>
+        %= select_field mode => [ ['App / Infoscreen' => 'clean'], ['Bahnhofstafel' => 'multi'], ['Gleis' => 'single'] ]
+      </div>
     </div>
-  </div>
-  <div class="field">
-    <div class="desc">
-      Backend
+    <div class="field">
+      <div class="desc">
+        Backend
+      </div>
+      <div>
+        %= select_field backend => [ ['IRIS' => 'iris'], ['HAFAS' => 'ris'] ]
+      </div>
     </div>
-    <div>
-      %= select_field backend => [ ['IRIS' => 'iris'], ['HAFAS' => 'ris'] ]
+    <div class="field">
+      <div class="desc">
+        Nur Züge über
+      </div>
+      <div>
+        %= text_field 'via', placeholder => 'Bahnhof 1, Bhf2, ... (oder regulärer Ausdruck)', class => 'station'
+      </div>
     </div>
-  </div>
-  <div class="field">
-    <div class="desc">
-      Nur Züge über
-    </div>
-    <div>
-      %= text_field 'via', placeholder => 'Bahnhof 1, Bhf2, ... (oder regulärer Ausdruck)', class => 'station'
-    </div>
-  </div>
-  <div class="field">
-    <div class="desc">
-      Gleise
-    </div>
-    <div>
-      %= text_field 'platforms', placeholder => '1, 2, 5, ...'
+    <div class="field">
+      <div class="desc">
+        Gleise
+      </div>
+      <div>
+        %= text_field 'platforms', placeholder => '1, 2, 5, ...'
+      </div>
     </div>
-  </div>
-  <div class="field">
-    <div class="desc">
-      %= check_box 'hidelowdelay' => 1, id => 'id_hidelowdelay'
-      <label for="id_hidelowdelay">
-        Nur Verspätungen &gt;5 Min. anzeigen
-      </label>
+    <div class="field">
+      <div class="desc">
+        %= check_box 'hidelowdelay' => 1, id => 'id_hidelowdelay'
+        <label for="id_hidelowdelay">
+          Nur Verspätungen &gt;5 Min. anzeigen
+        </label>
+      </div>
     </div>
-  </div>
-  <div class="field">
-    <div class="desc">
-      %= check_box 'hide_opts' => 1, id => 'id_hide_opts'
-      <label for="id_hide_opts">
-        Formular verstecken (für Infoscreens)
-      </label>
+    <div class="field">
+      <div class="desc">
+        %= check_box 'hide_opts' => 1, id => 'id_hide_opts'
+        <label for="id_hide_opts">
+          Formular verstecken (für Infoscreens)
+        </label>
+      </div>
     </div>
-  </div>
-  <div class="break"></div>
-  <span class="optional">Nur für IRIS-Backend:</span>
-  <div class="field">
-    <div class="desc">
-      Ankunfts- oder Abfahrtszeit anzeigen?
+    <div class="break"></div>
+    <span class="optional">Nur für IRIS-Backend:</span>
+    <div class="field">
+      <div class="desc">
+        Ankunfts- oder Abfahrtszeit anzeigen?
+      </div>
+      <div>
+        %= select_field admode => [['Abfahrt bevorzugen' => 'deparr'], ['Nur Abfahrt' => 'dep'], ['Nur Ankunft' => 'arr']]
+      </div>
     </div>
-    <div>
-      %= select_field admode => [['Abfahrt bevorzugen' => 'deparr'], ['Nur Abfahrt' => 'dep'], ['Nur Ankunft' => 'arr']]
+    <div class="field">
+      <div class="desc">
+        %= check_box 'show_realtime' => 1, id => 'id_show_realtime'
+        <label for="id_show_realtime">
+          Erwartete Zeiten statt Fahrplandaten
+        </label>
+      </div>
     </div>
-  </div>
-  <div class="field">
-    <div class="desc">
-      %= check_box 'show_realtime' => 1, id => 'id_show_realtime'
-      <label for="id_show_realtime">
-        Erwartete Zeiten statt Fahrplandaten
-      </label>
+    <div class="field">
+      <div class="desc">
+        %= check_box 'recursive' => 1, id => 'id_recursive'
+        <label for="id_recursive">
+        Betriebliche Bahnhofstrennungen ignorieren (z.B. "Hbf (Fern+Regio)" vs. "Hbf (S)")
+        </label>
+      </div>
     </div>
-  </div>
-  <div class="field">
-    <div class="desc">
-      %= check_box 'recursive' => 1, id => 'id_recursive'
-      <label for="id_recursive">
-      Betriebliche Bahnhofstrennungen ignorieren (z.B. "Hbf (Fern+Regio)" vs. "Hbf (S)")
-      </label>
+    <div class="field">
+      %= submit_button 'Anzeigen'
     </div>
-  </div>
-  <div class="field">
-    %= submit_button 'Anzeigen'
-  </div>
+  </div> <!-- moresettings -->
 </div>
 % end