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

Adding helper infobox

This commit is contained in:
Christian Aribaud 2023-04-16 22:24:59 +02:00
parent 64dbb0a1e7
commit 3ea84a1bf5
3 changed files with 58 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
comic_reader.css
View File

@ -43,7 +43,7 @@
} }
#nav-controls { #nav-controls {
grid-template-columns: 1fr 15em 1fr; grid-template-columns: 33% 0 1fr;
grid-template-rows: auto; grid-template-rows: auto;
} }
@ -78,3 +78,46 @@
#focus-overlay > .center { #focus-overlay > .center {
box-shadow: inset 0px 0px 5px 5px rgba(0, 0, 0, 0.85); box-shadow: inset 0px 0px 5px 5px rgba(0, 0, 0, 0.85);
} }
#help-menu{
font-size: 120%;
display: flex;
flex-direction: column;
color: white;
background-color: rgba(0,0,0,0.8)
border: 0.1em solid black;
height: 100%;
justify-content: end;
box-sizing: border-box;
align-items: end;
}
#help-menu > #help-controls {
display: grid;
padding: 0 1em 1em 0;
background-color: rgba(0,0,0,0.5);
z-index: 1;
opacity: 0;
transition: all 1.5s linear;
border: white solid;
border-width: 1px 0 0 1px;
border-radius: 0.3em 0 0 0;
}
#help-menu > #help-controls:hover {
opacity: 1;
transition: all 0.3s linear;
}
#help-menu > #help-controls > div {
margin-top: 1em;
text-align: end;
}
.key {
display: inline;
margin: 0 0.5em;
border: 1px white solid;
padding: 0 0.1em;
border-radius: 0.2em;
}

7
comic_reader.js
View File

@ -13,7 +13,7 @@ TOGGLE_FULLSCREEN = "F"
PAGE_TRANSITION_SPEED = "1.5s" PAGE_TRANSITION_SPEED = "1.5s"
MOUSEWHELL_MIN_DELAY = 50 MOUSEWHELL_MIN_DELAY = 50
DELAY_BEFORE_HIDDING_CONTROLS = 3000;
//==================== //====================
// STATES CONSTANTS // STATES CONSTANTS
@ -22,6 +22,7 @@ MOUSEWHELL_MIN_DELAY = 50
READER_FRAME = document.getElementById("reader-frame") READER_FRAME = document.getElementById("reader-frame")
READER_PAGES = document.getElementById("reader-pages") READER_PAGES = document.getElementById("reader-pages")
FOCUS_OVERLAY = document.getElementById("focus-overlay") FOCUS_OVERLAY = document.getElementById("focus-overlay")
HELP_CONTROLS = document.getElementById("help-controls")
CURRENT_ZOOM = 0 CURRENT_ZOOM = 0
CURRENT_PAGE = 1 CURRENT_PAGE = 1
@ -138,7 +139,9 @@ function initReader(){
READER_PAGES.hidden = false READER_PAGES.hidden = false
}, "300") }, "300")
setTimeout(() => {
HELP_CONTROLS.style.opacity = null;
}, DELAY_BEFORE_HIDDING_CONTROLS)
} }

9
comic_reader_test_high_res.html
View File

@ -38,6 +38,15 @@
<div class="left" id="nav-left" onclick="moveReader(false,false)"></div> <div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
<div class="right" id="nav-right" onclick="moveReader(true,false)"></div> <div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
</div> </div>
<div id="help-menu">
<div id="help-controls" style="opacity:1">
<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">&rarr;</div>/ scroll down / clic center or right : next panel</div>
<div><div class="key">CRTL</div> + <div class="key">&larr;</div>/<div class="key">&rarr;</div>: previous / next page</div>
</div>
</div>
</div> </div>
</body> </body>