mirror/galene
1
Fork 0
mirror of https://github.com/jech/galene.git synced 2024-11-09 18:25:58 +01:00
Code Activity

Change behavior for settings panel, it slides instead of grows. That fix the weird render during transition.

Browse source
This commit is contained in:
Mathieu Carrandié 2021-09-19 14:31:58 +02:00
parent dba8a66575
commit 9aff601907
3 changed files with 10 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
static/galene.css
View file

@ -926,7 +926,8 @@ h1 {
position: fixed; position: fixed;
-webkit-transition: all .2s ease-out; -webkit-transition: all .2s ease-out;
transition: all .2s ease-out; transition: all .2s ease-out;
width: 0px; width: 250px;
transform: translateX(100%);
/* on top of everything */ /* on top of everything */
z-index: 2999; z-index: 2999;
top: 0; top: 0;
@ -936,6 +937,10 @@ h1 {
overflow-y: hidden; overflow-y: hidden;
} }
.sidenav.opened {
transform: translateX(0);
}
.sidenav a { .sidenav a {
padding: 10px 20px; padding: 10px 20px;
text-decoration: none; text-decoration: none;

2
static/galene.html
View file

@ -142,7 +142,7 @@
<div id="sidebarnav" class="sidenav"> <div id="sidebarnav" class="sidenav">
<div class="sidenav-header"> <div class="sidenav-header">
<h2>Settings</h2> <h2>Settings</h2>
<a class="closebtn" id="clodeside"><i class="fas fa-times" aria-hidden="true"></i></a> <a class="closebtn" id="closeside"><i class="fas fa-times" aria-hidden="true"></i></a>
</div> </div>
<div class="sidenav-content" id="optionsdiv"> <div class="sidenav-content" id="optionsdiv">
<div id="profile" class="profile invisible"> <div id="profile" class="profile invisible">

18
static/galene.js
View file

@ -3009,12 +3009,8 @@ document.getElementById('disconnectbutton').onclick = function(e) {
closeNav(); closeNav();
}; };
function openNav() {
document.getElementById("sidebarnav").style.width = "250px";
}
function closeNav() { function closeNav() {
document.getElementById("sidebarnav").style.width = "0"; document.getElementById("sidebarnav").classList.remove("opened");
} }
document.getElementById('sidebarCollapse').onclick = function(e) { document.getElementById('sidebarCollapse').onclick = function(e) {
@ -3023,18 +3019,10 @@ document.getElementById('sidebarCollapse').onclick = function(e) {
}; };
document.getElementById('openside').onclick = function(e) { document.getElementById('openside').onclick = function(e) {
e.preventDefault(); document.getElementById("sidebarnav").classList.add("opened");
let sidewidth = document.getElementById("sidebarnav").style.width;
if (sidewidth !== "0px" && sidewidth !== "") {
closeNav();
return;
} else {
openNav();
}
}; };
document.getElementById('closeside').onclick = function(e) {
document.getElementById('clodeside').onclick = function(e) {
e.preventDefault(); e.preventDefault();
closeNav(); closeNav();
}; };