Einführung Navsidebar
parent
c875636f50
commit
7edec0bb1b
|
|
@ -55,7 +55,7 @@ html(lang='de')
|
|||
| Zum Speichern und Abfragen der Einstellung zum Präsentationsmodus wird der Session-Store genutzt.
|
||||
|
||||
.from-group
|
||||
.col-sm-1
|
||||
.col-sm-2
|
||||
button.btn.btn-success.btn-sm
|
||||
//- (onclick="run_login();")
|
||||
span Weiter ...
|
||||
|
|
|
|||
|
|
@ -1,16 +1,68 @@
|
|||
mixin headline_presentation_hamburger
|
||||
.dropdown
|
||||
.dropdown-toggle(data-toggle="dropdown", style="display: block; background: #555; width: 32px; height: 28px; position: relative; margin-left: auto; margin-right: 0px; border-radius: 4px; ")
|
||||
//- margin-right: auto; (normalerweise)
|
||||
button.btn.btn-primary.btn-sm(onclick="show_navsidebar();", style="line-height: 1.25;")
|
||||
span(style="font-size: 150%;") ⇤
|
||||
|
||||
|
||||
div#navsidebarslider(style="position:fixed; right:0px; background:#007bff; top:45%; z-index: 1; border-top-left-radius: .3rem; border-bottom-left-radius: .3rem;")
|
||||
//- width: 12px; font-weight: bold; color: white; text-align: center; font-size: 80%; padding-left: 2px;
|
||||
button.btn.btn-primary.btn-sm(style="line-height: 1.25; padding: .25rem .25rem;")
|
||||
span(style="font-size: 150%;") ⇤
|
||||
//- | 〈
|
||||
//- 〉
|
||||
|
||||
//-
|
||||
div(style="display: block; background: #555; width: 32px; height: 28px; position: relative; margin-left: auto; margin-right: 0px; border-radius: 4px;", onclick="show_navsidebar();")
|
||||
span(style="top: 4px; position: absolute; left:4px; height: 4px; width: 24px; background: #fff; border-radius: 2px; display: block; ")
|
||||
span(style="top: 12px; position: absolute; left:4px; height: 4px; width: 24px; background: #fff; border-radius: 2px; display: block; ")
|
||||
span(style="top: 20px; position: absolute; left:4px; height: 4px; width: 24px; background: #fff; border-radius: 2px; display: block; ")
|
||||
.dropdown-menu
|
||||
.dropdown-item
|
||||
input.form-check-input#check_as_presentation(type="checkbox")
|
||||
label.form-check-label(for="check_as_presentation") Als Präsentation
|
||||
//- , onclick="event.stopPropagation();"
|
||||
|
||||
//-
|
||||
.dropdown
|
||||
.dropdown-toggle(data-toggle="dropdown", style="display: block; background: #555; width: 32px; height: 28px; position: relative; margin-left: auto; margin-right: 0px; border-radius: 4px; ")
|
||||
//- margin-right: auto; (normalerweise)
|
||||
span(style="top: 4px; position: absolute; left:4px; height: 4px; width: 24px; background: #fff; border-radius: 2px; display: block; ")
|
||||
span(style="top: 12px; position: absolute; left:4px; height: 4px; width: 24px; background: #fff; border-radius: 2px; display: block; ")
|
||||
span(style="top: 20px; position: absolute; left:4px; height: 4px; width: 24px; background: #fff; border-radius: 2px; display: block; ")
|
||||
.dropdown-menu
|
||||
.dropdown-item
|
||||
input.form-check-input#check_as_presentation(type="checkbox")
|
||||
label.form-check-label(for="check_as_presentation") Als Präsentation
|
||||
//- , onclick="event.stopPropagation();"
|
||||
|
||||
mixin navsidebar(gliederung, current)
|
||||
div#navsidebar(style="position: fixed; z-index: 5; height: 100%; min-width: 25%; max-width: 35%; top: 0px; right: 0px; bottom: 0px; background-color: white; padding: 15px; border-left: 1px solid #0e4f88; overflow: scroll;")
|
||||
table(style="width: 100%;")
|
||||
tr
|
||||
td
|
||||
button.btn.btn-primary.btn-sm(onclick="hide_navsidebar();", style="line-height: 1.25;")
|
||||
span(style="font-size: 150%;") ⇥
|
||||
td(style="text-align: right; vertical-align: bottom; font-size: 100%;")
|
||||
input#check_as_presentation(type="checkbox",style="margin-right: 5px;")
|
||||
//- .form-check-input
|
||||
label(for="check_as_presentation") Als Präsentation
|
||||
//- .form-check-label
|
||||
hr(style="border-top: 2px solid #0e4f88; margin-top: 10px; margin-bottom: 10px;")
|
||||
a(href=pathoffset+"/")
|
||||
b Start
|
||||
each item in gliederung
|
||||
- var item_path = pathoffset + "/" + item.id;
|
||||
.div(style="margin-top: 10px;")
|
||||
if(current.length > 0 && current[0].id === item.id)
|
||||
b !{item.name}
|
||||
else
|
||||
a(href=item_path)
|
||||
b !{item.name}
|
||||
|
||||
if(item.subs.length > 0)
|
||||
ul.liarrow
|
||||
each subitem in item.subs
|
||||
- var subitem_path = item_path + "/" + subitem.id;
|
||||
li
|
||||
if(current.length > 1 && current[1].id === subitem.id)
|
||||
| !{subitem.name}
|
||||
else
|
||||
a(href=subitem_path) !{subitem.name}
|
||||
|
||||
|
||||
mixin headline_presentation_script
|
||||
script.
|
||||
var check_as_presentation = sessionStorage.getItem('show_as_presentation');
|
||||
|
|
@ -33,6 +85,42 @@ mixin headline_presentation_script
|
|||
sessionStorage.setItem('show_as_presentation', $('#check_as_presentation').prop('checked'));
|
||||
location.reload();
|
||||
});
|
||||
|
||||
$(document).ready(function(){
|
||||
$("#navsidebar").css("margin-right", $("#navsidebar").outerWidth()*-1);
|
||||
$("#navsidebar").scrollTop(0);
|
||||
$("#navsidebarslider").click(show_navsidebar);
|
||||
|
||||
$(window).resize(function(){
|
||||
if($("#navsidebar").hasClass("navsidebarvisible")) {
|
||||
$("#navsidebarslider").css("margin-right",$("#navsidebar").outerWidth());
|
||||
}
|
||||
else {
|
||||
$("#navsidebar").css("margin-right", $("#navsidebar").outerWidth()*-1);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function show_navsidebar() {
|
||||
console.log("show navsidebar", $("#navsidebar").outerWidth());
|
||||
$("#navsidebar").animate({"margin-right": "+="+$("#navsidebar").outerWidth()});
|
||||
$("#navsidebar").focus();
|
||||
$("#navsidebar").addClass("navsidebarvisible")
|
||||
$("#navsidebarslider").animate({"margin-right": "+="+$("#navsidebar").outerWidth()});
|
||||
$("#navsidebarslider button span").text("⇥");
|
||||
$("#navsidebarslider").off("click");
|
||||
$("#navsidebarslider").click(hide_navsidebar);
|
||||
}
|
||||
|
||||
function hide_navsidebar() {
|
||||
console.log("hide navsidebar", $("#navsidebar").outerWidth());
|
||||
$("#navsidebar").animate({"margin-right": "-="+$("#navsidebar").outerWidth()});
|
||||
$("#navsidebar").removeClass("navsidebarvisible")
|
||||
$("#navsidebarslider").animate({"margin-right": "-="+$("#navsidebar").outerWidth()});
|
||||
$("#navsidebarslider button span").text("⇤");
|
||||
$("#navsidebarslider").off("click");
|
||||
$("#navsidebarslider").click(show_navsidebar);
|
||||
}
|
||||
|
||||
mixin body_presentation_script
|
||||
script.
|
||||
|
|
|
|||
|
|
@ -15,9 +15,10 @@ html(lang='de')
|
|||
script(src='/javascripts/slide-utils.js')
|
||||
script(src='/javascripts/popper.min.js')
|
||||
|
||||
+cookies_css
|
||||
//- +cookies_css
|
||||
|
||||
body
|
||||
+navsidebar(gliederung, current)
|
||||
+headline
|
||||
block headline
|
||||
+navigation_auto(gliederung, current)
|
||||
|
|
@ -41,6 +42,6 @@ html(lang='de')
|
|||
|
||||
|
||||
+body_presentation_script
|
||||
|
||||
+cookies_html
|
||||
+cookies_script
|
||||
//-
|
||||
+cookies_html
|
||||
+cookies_script
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ html(lang='de')
|
|||
|
||||
//- +cookies_css
|
||||
body
|
||||
+navsidebar(gliederung, current)
|
||||
+headline
|
||||
block headline
|
||||
+navigation_auto(gliederung, current)
|
||||
|
|
|
|||
Loading…
Reference in New Issue