Fix issues with help box being unclosable when stuff moves around by giving it its own close button

pull/239/head
ElementalAlchemist 3 years ago committed by Mike Lang
parent f0713d581c
commit 058d7b9355

@ -51,6 +51,7 @@
<div id="editor-help">
<a href="#" id="editor-help-link">Help</a>
<div id="editor-help-box" class="hidden">
<a id="editor-help-box-close">[X]</a>
<h2>Keyboard Shortcuts</h2>
<ul>
<li>Number keys (0-9): Jump to that 10% interval of the video (0% - 90%)</li>

@ -64,6 +64,7 @@
<div id="editor-help">
<a href="#" id="editor-help-link">Help</a>
<div id="editor-help-box" class="hidden">
<a id="editor-help-box-close">[X]</a>
<h2>Keyboard Shortcuts</h2>
<ul>
<li>Number keys (0-9): Jump to that 10% interval of the video (0% - 90%)</li>

@ -13,6 +13,12 @@ const PLAYBACK_RATES = [0.5, 1, 1.25, 1.5, 2];
function commonPageSetup() {
const helpLink = document.getElementById("editor-help-link");
helpLink.addEventListener("click", toggleHelpDisplay);
const closeHelp = document.getElementById("editor-help-box-close");
closeHelp.addEventListener("click", (_event) => {
const helpBox = document.getElementById("editor-help-box");
helpBox.classList.add("hidden");
});
}
function toggleHelpDisplay() {

@ -150,13 +150,8 @@ a,
top: 0;
}
#editor-help {
z-index: 1;
}
#editor-help-link {
float: right;
z-index: 5;
}
#editor-help-box {
@ -171,6 +166,10 @@ a,
margin: 3px 0;
}
#editor-help-box-close {
float: right;
}
#range-definitions {
display: flex;
flex-direction: column;

Loading…
Cancel
Save