From b392ffa7fd1577ec5697509b9f73128769b86b52 Mon Sep 17 00:00:00 2001
From: gpkvt <git@21x9.org>
Date: Mon, 5 Jun 2023 10:52:12 +0200
Subject: [PATCH] Improved help

---
 config.ini           |  3 ++-
 game.py              |  3 ++-
 static/css/base.css  | 11 ++++++++---
 templates/index.html |  5 +----
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/config.ini b/config.ini
index 1e183db..b18b0b0 100644
--- a/config.ini
+++ b/config.ini
@@ -15,7 +15,8 @@ mailtext = Einreichen!
 help_title = Hilfe
 help_1 = Wähle die Antworten durch Klicken oder mit der Tastatur (a/b) aus. Sobald alle Antworten ausgewählt wurden, werden nach einer kurzen Wartezeit automatisch neue Fragen geladen.
 help_2 = Möchtest du nicht alle Fragen beantworten, klicke einfach auf die Schaltfläche "Weiter" unten rechts.
-help_3 = Diese Webseite zeichnet keine Daten auf und verwendet keine Cookies.
+help_3 = Klicke/tippe außerhalb dieses Fensters oder bewege die Maus, um fortzufahren.
+help_4 = Diese Webseite zeichnet keine Daten auf und verwendet keine Cookies.
 separator = oder
 questions_prefix = Es gibt derzeit
 questions_suffix = Fragen.
diff --git a/game.py b/game.py
index 00e13c9..7e2413d 100755
--- a/game.py
+++ b/game.py
@@ -95,6 +95,7 @@ def hello():
     help1 = config.get('i18n', 'help_1')
     help2 = config.get('i18n', 'help_2')
     help3 = config.get('i18n', 'help_3')
+    help4 = config.get('i18n', 'help_4')
     url = config.get('main', 'base_url')
     theme = config.get('main', 'theme')
     ablines = []
@@ -118,7 +119,7 @@ def hello():
     with open("ab.txt", "r") as f:
         num_lines = sum(1 for _ in f)
 
-    return render_template('index.html', title=title, separator=separator, content=ablines, num_lines=num_lines, epoch=epoch, mailto=mail, more=more, questions_prefix=questions_prefix, questions_suffix=questions_suffix, send_questions=send_questions, lang=lang, url=url, desc=desc, theme=theme, mailtext=mailtext, help=help, help_1=help1, help_2=help2, help_3=help3)
+    return render_template('index.html', title=title, separator=separator, content=ablines, num_lines=num_lines, epoch=epoch, mailto=mail, more=more, questions_prefix=questions_prefix, questions_suffix=questions_suffix, send_questions=send_questions, lang=lang, url=url, desc=desc, theme=theme, mailtext=mailtext, help=help, help_1=help1, help_2=help2, help_3=help3, help_4=help4)
 
 def getContent():
     lines = [a.strip() for a in open("ab.txt", "r").readlines()]
diff --git a/static/css/base.css b/static/css/base.css
index fd38aec..67f8d00 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -30,9 +30,10 @@ a #help {
 
 a:hover #help {
     position: absolute;
+    top: 65px;
+    left: 50%;
     height: auto;
-    width: 420px;
-    top: 75px;
+    width: 50%;
     margin: auto;
     padding: 20px;
     overflow: visible;
@@ -43,6 +44,7 @@ a:hover #help {
     border-radius: 25px;
     display: inline-block;
     text-align: center;
+    transform: translate(-50%);
 }
 
 #header {
@@ -236,7 +238,6 @@ input[type="radio"] {
 
     .toggle_label {
         min-width: 100%;
-        ;
     }
 }
 
@@ -289,6 +290,10 @@ input[type="radio"] {
     a {
         color: var(--fg-lnk) !important;
     }
+
+    a:hover #help {
+        width: 80%;
+    }
 }
 
 #toggle_checkbox {
diff --git a/templates/index.html b/templates/index.html
index c8b467d..c4f6fcb 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -18,7 +18,7 @@
                 {{ questions_prefix }} {{ num_lines }} {{ questions_suffix }}
                 <br>
                 <a href="mailto:{{ mailto }}">{{ mailtext }}</a> - 
-                <a href="">Hilfe?
+                <a href="#">Hilfe?
                     <div id="help">
                         <strong>{{ help }}</strong>
                         <p>{{ help_1 }}</p>
@@ -31,9 +31,6 @@
                         {%- if help_4 %}
                         <p>{{ help_4 }}</p>
                         {%- endif %}
-                        {%- if help_5 %}
-                        <p>{{ help_5 }}</p>
-                        {%- endif %}
                     </div>
                 </a>
             </div>