summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDaniel Friesel <derf@finalrewind.org>2016-09-18 22:23:36 +0200
committerDaniel Friesel <derf@finalrewind.org>2016-09-18 22:23:36 +0200
commita1db5b626ff8a23c6c0e1c47b793774f6fb499bc (patch)
treea193a74dafe441a0c27aaf79b38b5a32f1fd2b99
parent38e787fc72f21a572f3019f9bd3a86cc497f641d (diff)
hide non-primary options behind js menu
-rw-r--r--public/static/collapse.js17
-rw-r--r--public/static/default.css38
-rw-r--r--templates/layouts/default.html.ep138
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