caribaud/melpomene
1
0
Fork 0
Code Issues 9 Pull requests 1 Releases 3 Wiki Activity

Making controls slide out

Browse source
This commit is contained in:
Christian Aribaud 2023-04-17 20:32:13 +02:00
parent def62b96bb
commit 28bd495867
3 changed files with 4 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

3
comic_reader.css
View file

@ -104,7 +104,6 @@
} }
#help-menu > #help-controls { #help-menu > #help-controls {
display: grid;
padding: 0 1em 1em 0; padding: 0 1em 1em 0;
background-color: rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.5);
z-index: 1; z-index: 1;
@ -113,11 +112,13 @@
border: white solid; border: white solid;
border-width: 1px 0 0 1px; border-width: 1px 0 0 1px;
border-radius: 0.3em 0 0 0; border-radius: 0.3em 0 0 0;
transform: translate(0, calc(100% - 2em));
} }
#help-menu > #help-controls:hover { #help-menu > #help-controls:hover {
opacity: 1; opacity: 1;
transition: all 0.3s linear; transition: all 0.3s linear;
transform: translate(0, 0);
} }
#help-menu > #help-controls > div { #help-menu > #help-controls > div {

1
comic_reader.js
View file

@ -169,6 +169,7 @@ function initReader(){
setTimeout(() => { setTimeout(() => {
HELP_CONTROLS.style.opacity = null; HELP_CONTROLS.style.opacity = null;
HELP_CONTROLS.style.transform = null;
}, DELAY_BEFORE_HIDDING_CONTROLS) }, DELAY_BEFORE_HIDDING_CONTROLS)
} }

2
comic_reader_test_high_res.html
View file

@ -42,7 +42,7 @@
</div> </div>
<div id="help-menu"> <div id="help-menu">
<div id="help-controls" style="opacity:1"> <div id="help-controls" style="opacity:1; transform: translate(0,0);">
<div><div class="key">F</div>: Toggle fullscreen</div> <div><div class="key">F</div>: Toggle fullscreen</div>
<div><div class="key">&larr;</div>/ scroll up / clic left : previous panel</div> <div><div class="key">&larr;</div>/ scroll up / clic left : previous panel</div>
<div><div class="key">&rarr;</div>/ scroll down / clic center or right : next panel</div> <div><div class="key">&rarr;</div>/ scroll down / clic center or right : next panel</div>