Sven/GoWiki
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Flexibles Resizing + Speichern und Laden der Sidebar

Browse Source
This commit is contained in:
Sven Schmalle 2019-12-19 13:21:56 +01:00
parent 5412c07c57
commit bd2e82b649
1 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/index.html
View File

@ -53,6 +53,7 @@
background-color: #f5f5f5; background-color: #f5f5f5;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
resize: horizontal;
} }
} }
@ -69,6 +70,7 @@
margin-right: -21px; /* 20px padding + 1px border */ margin-right: -21px; /* 20px padding + 1px border */
margin-bottom: 20px; margin-bottom: 20px;
margin-left: -20px; margin-left: -20px;
} }
.nav-sidebar > li > a { .nav-sidebar > li > a {
padding-right: 20px; padding-right: 20px;
@ -130,11 +132,12 @@
</nav> </nav>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="d-flex flex-row">
<div class="col-sm-2 col-md-1 sidebar"> <div id="sidebar" class="p-2 sidebar">
<div id="outputsidebar" style="display: none;">{{.SideBar}}</div> <!-- <div id="outputsidebar" style="display: none;">{{.SideBar}}</div> -->
<div id="outputsidebar">{{.SideBar}}</div>
</div> </div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-1 main"> <div id="main" class="p-2 main">
<div id="markdowndiv" style="display: none;">{{.MDText}}</div> <div id="markdowndiv" style="display: none;">{{.MDText}}</div>
<div id="outputdiv" style="display: none;">{{.MDText}}</div> <div id="outputdiv" style="display: none;">{{.MDText}}</div>
<div id="editdiv" style="display: none;"> <div id="editdiv" style="display: none;">
@ -257,6 +260,24 @@
return false; return false;
} }
}); });
//-----------------------------------------------------------------------------------
// Abschnitt für das dynamische Anpassend er Sidebar via ResizeObserver
$("#sidebar").width(localStorage.getItem("sidebar_width"));
$(main).css('margin-left',localStorage.getItem("sidebar_width")+'px');
var ro = new ResizeObserver( entries => {
for (let entry of entries) {
const cr = entry.contentRect;
localStorage.setItem("sidebar_width",cr.width);
$(main).css('margin-left',localStorage.getItem("sidebar_width")+'px');
}
});
// Observe one or multiple elements
ro.observe(document.querySelector('#outputsidebar'));
//-----------------------------------------------------------------------------------
}); });
function EditPage() { function EditPage() {