Flexibles Resizing + Speichern und Laden der Sidebar
This commit is contained in:
parent
5412c07c57
commit
bd2e82b649
@ -53,6 +53,7 @@
|
||||
background-color: #f5f5f5;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-right: 1px solid #ccc;
|
||||
resize: horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
@ -69,6 +70,7 @@
|
||||
margin-right: -21px; /* 20px padding + 1px border */
|
||||
margin-bottom: 20px;
|
||||
margin-left: -20px;
|
||||
|
||||
}
|
||||
.nav-sidebar > li > a {
|
||||
padding-right: 20px;
|
||||
@ -130,11 +132,12 @@
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-2 col-md-1 sidebar">
|
||||
<div id="outputsidebar" style="display: none;">{{.SideBar}}</div>
|
||||
<div class="d-flex flex-row">
|
||||
<div id="sidebar" class="p-2 sidebar">
|
||||
<!-- <div id="outputsidebar" style="display: none;">{{.SideBar}}</div> -->
|
||||
<div id="outputsidebar">{{.SideBar}}</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="outputdiv" style="display: none;">{{.MDText}}</div>
|
||||
<div id="editdiv" style="display: none;">
|
||||
@ -257,6 +260,24 @@
|
||||
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() {
|
||||
|
Loading…
Reference in New Issue
Block a user