Commander1024/lostplaces-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Sidebar animation is not triggered when loading page

Browse Source
This commit is contained in:
reverend
2020-08-16 11:40:40 +02:00
parent 57afcbdffb
commit 5f4b72f9be
3 changed files with 25 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/_preview.hbs
View File

@@ -4,6 +4,18 @@
<meta charset="UTF-8">
<link rel="stylesheet" href="{{ path '/main.css' }}">
<title>Preview</title>
<script>
document.addEventListener("DOMContentLoaded", function(){
Array.from(document.getElementsByClassName('LP-Main__Sidebar')).forEach(function(element){
element.classList.add('LP-Main__Sidebar--hidden')
})
setTimeout(function(){
Array.from(document.getElementsByClassName('LP-Main__Sidebar')).forEach(function(element){
element.classList.remove('LP-Main__Sidebar--hidden')
})
}, 500)
})
</script>
</head>
<body>
{{{ yield }}}

14
components/main.scss
View File

@@ -95,20 +95,20 @@ body{
}
@media(max-width: $-viewport-toggle-sidebar){
.LP-Wrapper__Site{
grid-template-columns: 0 1fr;
}
@keyframes slide_out_siedebar{
from{left: -1 * $-sidebar-width;}
to{left: 0;}
}
@keyframes slide_in_siedebar{
from{left: 0;}
to{left: -1 * $-sidebar-width;}
}
.LP-Wrapper__Site{
grid-template-columns: 0 1fr;
}
.LP-Main__Sidebar{
grid-area:unset;
width: $-sidebar-width;
@@ -118,6 +118,10 @@ body{
height: 100vh;
top: 60px;
border-right: 1px solid $-light-brown;
&--hidden{
visibility: hidden;
}
}
#toggle_sidebar:checked ~ .LP-Main__Sidebar{