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

Removed JS, using transition instead of animation for sidebar menu sliding

Browse Source
This commit is contained in:
reverend 2020-08-16 17:22:08 +02:00
parent 15b4bc7880
commit 427ce11adb
2 changed files with 2 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/_preview.hbs
View File

@ -4,18 +4,6 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="{{ path '/main.css' }}"> <link rel="stylesheet" href="{{ path '/main.css' }}">
<title>Preview</title> <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> </head>
<body> <body>
{{{ yield }}} {{{ yield }}}

16
components/main.scss
View File

@ -100,16 +100,6 @@ body{
} }
@media(max-width: $-viewport-toggle-sidebar){ @media(max-width: $-viewport-toggle-sidebar){
@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{ .LP-Wrapper__Site{
grid-template-columns: 0 1fr; grid-template-columns: 0 1fr;
} }
@ -123,6 +113,7 @@ body{
height: 100vh; height: 100vh;
top: 60px; top: 60px;
border-right: 1px solid $-light-brown; border-right: 1px solid $-light-brown;
transition: left 0.3s;
&--hidden{ &--hidden{
visibility: hidden; visibility: hidden;
@ -130,14 +121,11 @@ body{
} }
#toggle_sidebar:checked ~ .LP-Main__Sidebar{ #toggle_sidebar:checked ~ .LP-Main__Sidebar{
animation-name: slide_out_siedebar;
animation-duration: .3s;
left: 0 ; left: 0 ;
} }
#toggle_sidebar ~ .LP-Main__Sidebar{ #toggle_sidebar ~ .LP-Main__Sidebar{
animation-name: slide_in_siedebar; left: -1 * $-sidebar-width;
animation-duration: .3s;
} }
.LP-Menu__TriggerLabel{ .LP-Menu__TriggerLabel{