added info button for each fieldset

This commit is contained in:
Karma Riuk
2025-05-15 14:10:57 +02:00
parent 3f9154cb95
commit 014c3771fd
3 changed files with 26 additions and 9 deletions

View File

@ -43,10 +43,7 @@ header .info-btn {
} }
fieldset .info-btn { fieldset .info-btn {
aspect-ratio: 1; padding: revert;
padding: .35em .7em;
border-radius: 100%;
border-width: 1px;
} }
header #page-title { header #page-title {

View File

@ -26,7 +26,7 @@
<fieldset> <fieldset>
<legend> <legend>
<strong>Download a Dataset</strong> <strong>Download a Dataset</strong>
<button id="info-download-btn" class='info-btn'><i class="fa fa-question" ></i></button> <button id="info-download-btn" class='info-btn'><i class="fa fa-info" ></i></button>
</legend> </legend>
<label for="dataset-select">Dataset:</label> <label for="dataset-select">Dataset:</label>
@ -43,7 +43,10 @@
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend><strong>Upload Your Answers</strong></legend> <legend>
<strong>Upload Your Answers</strong>
<button id="info-upload-btn" class='info-btn'><i class="fa fa-info" ></i></button>
</legend>
<label for="answer-cype">Type:</label> <label for="answer-cype">Type:</label>
<select id="answer-cype"> <select id="answer-cype">
<option value="comment">Comment Generation</option> <option value="comment">Comment Generation</option>
@ -57,7 +60,10 @@
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend><strong>Get status of ongoing process</strong></legend> <legend>
<strong>Get status of ongoing process</strong>
<button id="info-results-btn" class='info-btn'><i class="fa fa-info" ></i></button>
</legend>
<label for="url">URL:</label> <label for="url">URL:</label>
<input type="url" id="url" placeholder="https://gym.si.usi.ch:45003/results/XXXX" size=50 required /> <input type="url" id="url" placeholder="https://gym.si.usi.ch:45003/results/XXXX" size=50 required />
<br /><br /> <br /><br />
@ -137,6 +143,18 @@
yes yes
</div> </div>
</template> </template>
<template id="info-upload">
<h2>Uploading results</h2>
<div>
yes
</div>
</template>
<template id="info-results">
<h2>Getting information of ongoing process</h2>
<div>
yes
</div>
</template>
</main> </main>
</body> </body>

View File

@ -171,8 +171,10 @@ modalOverlay.addEventListener("keydown", (e) => {
} }
}); });
window["info-download-btn"].addEventListener("click", (e) => { ["download", "upload", "results"].forEach((section) => {
show_modal_with(window["info-download"].content.cloneNode(true)); window[`info-${section}-btn`].addEventListener("click", () => {
show_modal_with(window[`info-${section}`].content.cloneNode(true));
});
}); });
document.getElementById("request-status").onclick = () => { document.getElementById("request-status").onclick = () => {