pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix scrolling issues

Browse Source
This commit is contained in:
Wim Brand
2019-09-19 09:35:09 +02:00
parent 59ef838581
commit c8b9e3bb75
2 changed files with 47 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
res/static/style/layout.css
View File

@@ -51,9 +51,7 @@
} }
/* Page rendering configuration */ /* Page rendering configuration */
html, body {
overflow: hidden;
}
body{ body{
background-color: #0d0d0d; /* Fallback */ background-color: #0d0d0d; /* Fallback */
background-color: var(--body_color); background-color: var(--body_color);
@@ -76,7 +74,8 @@ body{
} }
.button_toggle_navigation { .button_toggle_navigation {
position: absolute; position: fixed;
backface-visibility: hidden;
z-index: 300; z-index: 300;
top: 0; top: 0;
left: 0; left: 0;
@@ -89,7 +88,8 @@ body{
box-shadow: 2px 2px 8px -3px var(--shadow_color); box-shadow: 2px 2px 8px -3px var(--shadow_color);
} }
.page_navigation { .page_navigation {
position: absolute; position: fixed;
backface-visibility: hidden;
z-index: 100; z-index: 100;
width: 250px; width: 250px;
height: 100%; height: 100%;
@@ -107,9 +107,8 @@ body{
.page_body { .page_body {
position: absolute; position: absolute;
z-index: 200; z-index: 200;
top: 0;
right: 0; right: 0;
bottom: 0; height: auto;
left: 250px; left: 250px;
min-width: 300px; min-width: 300px;
display: inline-block; display: inline-block;

82
res/template/fragments/page_wrap.html
View File

@@ -1,52 +1,52 @@
{{define "page_top"}} {{define "page_top"}}
<div id="page_wrapper"> <!-- <div id="page_wrapper"> -->
<button id="button_toggle_navigation" class="button_toggle_navigation" onclick="toggleMenu();">☰</button> <button id="button_toggle_navigation" class="button_toggle_navigation" onclick="toggleMenu();">☰</button>
<div id="page_navigation" class="page_navigation"> <div id="page_navigation" class="page_navigation">
<a href="/">Home</a> <a href="/">Home</a>
<hr/> <hr />
{{if .Authenticated}}<a href="/user">{{.Username}}</a> {{if .Authenticated}}<a href="/user">{{.Username}}</a>
<a href="/user/files">My Files</a> <a href="/user/files">My Files</a>
<a href="/user/lists">My Lists</a> <a href="/user/lists">My Lists</a>
<a href="/logout">Log out</a> <a href="/logout">Log out</a>
{{else}} {{else}}
<a href="/login">Login</a> <a href="/login">Login</a>
<a href="/register">Register</a> <a href="/register">Register</a>
<a href="/history">Upload History</a> <a href="/history">Upload History</a>
{{end}} {{end}}
<hr/> <hr />
<a href="/about">About</a> <a href="/about">About</a>
<!--<a href="/technology">Technology</a>--> <!--<a href="/technology">Technology</a>-->
<a href="/api">API</a> <a href="/api">API</a>
<a href="/appearance">Appearance</a> <a href="/appearance">Appearance</a>
</div> </div>
<div id="page_body" class="page_body"> <div id="page_body" class="page_body">
{{end}} {{end}}
{{define "page_bottom"}} {{define "page_bottom"}}
<div class="highlight_dark"> <div class="highlight_dark">
Pixeldrain is a product by <a href="//fornaxian.com" target="_blank">Fornaxian Technologies</a> | Pixeldrain is a product by <a href="//fornaxian.com" target="_blank">Fornaxian Technologies</a> |
Twitter:&nbsp;<a href="https://twitter.com/Fornax96" target="_blank">@Fornax96</a> Twitter:&nbsp;<a href="https://twitter.com/Fornax96" target="_blank">@Fornax96</a>
Reddit:&nbsp;<a href="https://reddit.com/r/pixeldrain" target="_blank">/r/pixeldrain</a> Reddit:&nbsp;<a href="https://reddit.com/r/pixeldrain" target="_blank">/r/pixeldrain</a>
Medium:&nbsp;<a href="https://medium.com/pixeldrain" target="_blank">Pixeldrain</a> Medium:&nbsp;<a href="https://medium.com/pixeldrain" target="_blank">Pixeldrain</a>
</div> </div>
</div><!-- end page_body --> </div><!-- end page_body -->
</div><!-- end page_wrapper --> <!-- </div>end page_wrapper -->
<script> <script>
var nav = document.getElementById("page_navigation"); var nav = document.getElementById("page_navigation");
var body = document.getElementById("page_body"); var body = document.getElementById("page_body");
function toggleMenu() { function toggleMenu() {
if (nav.offsetLeft === 0) { if (nav.offsetLeft === 0) {
// Menu is visible // Menu is visible
nav.style.left = -nav.offsetWidth + "px"; nav.style.left = -nav.offsetWidth + "px";
body.style.left = "0"; body.style.left = "0";
} else { } else {
// Menu is hidden // Menu is hidden
nav.style.left = "0"; nav.style.left = "0";
body.style.left = nav.offsetWidth + "px"; body.style.left = nav.offsetWidth + "px";
}
} }
}
</script> </script>
{{end}} {{end}}