mirror of
https://github.com/jech/galene.git
synced 2024-11-10 02:35:58 +01:00
Change behavior for settings panel, it slides instead of grows. That fix the weird render during transition.
This commit is contained in:
parent
dba8a66575
commit
9aff601907
3 changed files with 10 additions and 17 deletions
|
@ -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;
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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();
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue