redesign #1

Merged
fred.boniface merged 115 commits from redesign into main 2022-10-29 20:12:58 +01:00
3 changed files with 28 additions and 14 deletions
Showing only changes of commit 1a9d95b701 - Show all commits

View File

@ -6,13 +6,16 @@ function collapseSidebar() {
document.getElementById("sidebar").style.width = "0px";
}
function sidebarToggle() {
var bar = document.getElementById("sidebar");
if (bar.style.height === "0px") {
bar.style.height = "100%";
bar.style.display = "block";
} else {
bar.style.height = "0px";
bar.style.display = "none";
}
function openSidebar() {
document.getElementById("sidebar").style.height = "100%";
document.getElementById("sidebar").style.display = "block";
document.getElementById("sidebar_open_short").style.display = "none";
document.getElementById("sidebar_close_short").style.display = "block";
}
function closeSidebar() {
document.getElementById("sidebar").style.height = "0%";
document.getElementById("sidebar").style.display = "none";
document.getElementById("sidebar_open_short").style.display = "block";
document.getElementById("sidebar_close_short").style.display = "none";
}

View File

@ -25,8 +25,10 @@
</picture>
</div>
<div class="menubar_hamburger">
<button class="sidebar_open_short" onclick="sidebarToggle()">&#9776;</button>
<button class="sidebar_open_long" onclick="sidebarToggle()">Menu &#9776;</button>
<button id="sidebar_open_short" class="sidebar_open_short" onclick="sidebarOpen()">&#9776;</button>
<button class="sidebar_open_long" onclick="sidebarOpen()">Menu &#9776;</button>
<button id="sidebar_close_short" class="sidebar_close_short" onclick="sidebarClose()">&times;</button>
<button class="sidebar_close_long" onclick="sidebarClose()">Close &times;</button>
</div>
</div>
<div id="sidebar" class="sidebar">

View File

@ -20,11 +20,20 @@
padding: 5px;
}
.sidebar_open_long {
display: none;
}
.sidebar_open_long {display: none;}
.sidebar_close_long {display: none;}
.sidebar_open_short {
display: block;
font-size: larger;
background-color: slategrey;
color: azure;
border: none;
border-radius: 2px;
}
.sidebar_short_close {
display: none;
font-size: larger;
background-color: slategrey;
color: azure;