refactor: remove style block, change to .svg and sync js functions

questionpy_sdk/webserver/static/script.js

@@ -288,7 +288,7 @@ async function add_repetition_element(event) {
 /**
  * When a Delete Button is clicked, removes the corresponding repetition.
  */
-async function delete_repetition_element(event) {
+function delete_repetition_element(event) {
     // prevent reload on click
     event.preventDefault();
     // count current repetitions - 1 for the add-repetition button
@@ -304,7 +304,7 @@ async function delete_repetition_element(event) {
  * @param event
  * @return {Promise<void>}
  */
-async function hide_help_dialogs(event) {
+function hide_help_dialogs(event) {
     const help_dialogs = document.getElementsByClassName("help_dialog");
 
     if (event.target !== help_icon) {
@@ -318,8 +318,8 @@ async function hide_help_dialogs(event) {
  * @param event click
  * @return {Promise<void>}
  */
-async function show_help_dialog(event) {
-    await hide_help_dialogs(event);
+function show_help_dialog(event) {
+    hide_help_dialogs(event);
 
     const icon = event.target;
     help_icon = icon;

questionpy_sdk/webserver/static/styles.css

@@ -91,8 +91,8 @@ html, body {
     float: left;
     width: 12em;
     overflow: hidden;
+    /* "Display: table" allows a label and an icon to be side by side. */
     display: table;
-    justify-content: space-between;
 }
 
 p.info {
@@ -149,33 +149,24 @@ fieldset {
 }
 
 .help_icon {
-    background: url('help_icon.png');
+    background: url('help_icon.svg');
     background-size: contain;
     cursor: pointer;
 }
 
-.help_icon::before {
-    content: attr(title);
-    position: absolute;
-    top: -30px;
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: #333;
-    color: #fff;
-    padding: 5px 10px;
-    border-radius: 5px;
-    font-size: 12px;
-    opacity: 0.9;
-}
-
 .help_dialog {
     position: absolute;
+    /* Translate up (-Y)
+       50% of help_dialog div height
+       + 8px (50% of icon size) to center the element with the icon */
     transform: translateY(calc(-50% - 8px));
     background-color: #fff;
     border: 1px solid #ccc;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     display: none;
     z-index: 1;
     padding: 5px 10px;
+    /* Margin-right 20% to scale with container size
+       Margin-left 24px (16px for icon + 8px margin) */
     margin: auto 20% auto 24px;
 }