From 8aed3a99da62b357a425a1480408b80accf72883 Mon Sep 17 00:00:00 2001
From: AudricV <74829229+AudricV@users.noreply.github.com>
Date: Mon, 27 Mar 2023 21:54:55 +0200
Subject: [PATCH] [Client] Improve unsupported browser and footer code and
 design

---
 truthinquiry/static/css/game_ui.css | 18 ++++++++++++----
 truthinquiry/templates/game.html    | 22 ++++++++++----------
 truthinquiry/templates/index.html   | 24 +++++++++++-----------
 truthinquiry/templates/lobby.html   | 32 ++++++++++++++---------------
 4 files changed, 53 insertions(+), 43 deletions(-)

diff --git a/truthinquiry/static/css/game_ui.css b/truthinquiry/static/css/game_ui.css
index fd41bad..bbf5f8e 100644
--- a/truthinquiry/static/css/game_ui.css
+++ b/truthinquiry/static/css/game_ui.css
@@ -31,7 +31,6 @@
     /* Colors */
     color-scheme: dark;
     --alert-dialog-background-color: #000000DF;
-    --button-links-gray-color: #939393;
     --dark-theme-background-color: #213C40;
     --game-black: #000000;
     --game-blue: #0096FF;
@@ -54,6 +53,10 @@ body {
     margin: var(--body-margin);
 }
 
+noscript .alert_dialog_background, noscript .alert_dialog_msg, noscript .alert_dialog_title {
+    display: block;
+}
+
 .action_button {
     background-color: var(--game-red);
     border-color: var(--game-black);
@@ -100,21 +103,23 @@ body {
 /* Footer */
 .footer_link {
     color: var(--game-white);
-    font-family: sans-serif;
+    font-family: "Roboto Mono", sans-serif;
     font-size: 1em;
     font-weight: bold;
     margin: 0.5em;
+    text-align: center;
     transition: color 0.25s;
 }
 
 .footer_link:hover {
-    color: var(--button-links-gray-color);
+    color: var(--game-black);
 }
 
 .footer_links {
+    align-items: center;
+    align-self: flex-end;
     display: flex;
     flex-direction: row;
-    flex-wrap: wrap;
     height: var(--footer-links-height);
     justify-content: flex-end;
 }
@@ -130,6 +135,8 @@ body {
 
 /* Alert dialogs */
 .alert_dialog {
+    background-color: var(--game-grey);
+    border-color: var(--game-white);
     border-radius: var(--button-and-dialog-border-radius);
     display: none;
     font-family: "Spicy Rice", serif;
@@ -137,6 +144,7 @@ body {
     flex-wrap: nowrap;
     justify-content: center;
     left: 50%;
+    overflow: auto;
     padding: 2em;
     position: absolute;
     top: 50%;
@@ -149,6 +157,8 @@ body {
 }
 
 .alert_dialog_title {
+    margin-bottom: 0.5em;
+    margin-top: 0.5em;
     font-size: 2em;
     font-weight: normal;
     text-align: center;
diff --git a/truthinquiry/templates/game.html b/truthinquiry/templates/game.html
index 16e3da7..c25ecfe 100644
--- a/truthinquiry/templates/game.html
+++ b/truthinquiry/templates/game.html
@@ -89,8 +89,8 @@
             </div>
         </section>
         <div class="alert_dialog_background"></div>
-        <div class="unsupported_browser">
-            <div id="unsupported_browser_dialog" class="alert_dialog">
+        <section class="unsupported_browser">
+            <dialog id="unsupported_browser_dialog" class="alert_dialog">
                 <h3 class="alert_dialog_title">Navigateur non supporté</h3>
                 <p class="alert_dialog_msg unsupported_browser_msg"></p>
                 <div class="footer_links">
@@ -98,21 +98,21 @@
                     <a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
                     <a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
                 </div>
-            </div>
-        </div>
+            </dialog>
+        </section>
         <noscript>
-            <div class="alert_dialog_background" style="display: block;"></div>
-            <div class="js_requirement">
-                <div id="js_requirement_dialog" class="alert_dialog" style="display: block;">
-                    <h3 class="alert_dialog_title" style="display: block;">JavaScript nécessaire</h3>
-                    <p class="alert_dialog_msg unsupported_browser_msg" style="display: block;">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
+            <div class="alert_dialog_background"></div>
+            <section class="js_requirement">
+                <dialog id="js_requirement_dialog" class="alert_dialog alert_dialog_show">
+                    <h3 class="alert_dialog_title">JavaScript nécessaire</h3>
+                    <p class="alert_dialog_msg unsupported_browser_msg">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
                     <div class="footer_links">
                         <a href="/privacy" class="footer_link link" target="_blank" title="Consulter la politique de confidentialité de Truth Inquiry (ouverture dans un nouvel onglet)">Politique de confidentialité</a>
                         <a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
                         <a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
                     </div>
-                </div>
-            </div>
+                </dialog>
+            </section>
         </noscript>
         <script src="/static/js/socket.io_v4.4.1/socket.io.min.js"></script>
         <script src="/static/js/api.js"></script>
diff --git a/truthinquiry/templates/index.html b/truthinquiry/templates/index.html
index 824a2af..82243e4 100644
--- a/truthinquiry/templates/index.html
+++ b/truthinquiry/templates/index.html
@@ -16,7 +16,6 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
     </head>
     <body class="game_app">
-        <div class="alert_dialog_background"></div>
         <section class="game_start">
             <menu class="header_actions">
                 <li class="header_action">
@@ -59,8 +58,9 @@
                 </div>
             </div>
         </section>
-        <div class="unsupported_browser">
-            <div id="unsupported_browser_dialog" class="alert_dialog">
+        <div class="alert_dialog_background"></div>
+        <section class="unsupported_browser">
+            <dialog id="unsupported_browser_dialog" class="alert_dialog">
                 <h3 class="alert_dialog_title">Navigateur non supporté</h3>
                 <p class="alert_dialog_msg unsupported_browser_msg"></p>
                 <div class="footer_links">
@@ -68,21 +68,21 @@
                     <a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
                     <a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
                 </div>
-            </div>
-        </div>
+            </dialog>
+        </section>
         <noscript>
-            <div class="alert_dialog_background" style="display: block;"></div>
-            <div class="js_requirement">
-                <div id="js_requirement_dialog" class="alert_dialog" style="display: block;">
-                    <h3 class="alert_dialog_title" style="display: block;">JavaScript nécessaire</h3>
-                    <p class="alert_dialog_msg unsupported_browser_msg" style="display: block;">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
+            <div class="alert_dialog_background"></div>
+            <section class="js_requirement">
+                <dialog id="js_requirement_dialog" class="alert_dialog alert_dialog_show">
+                    <h3 class="alert_dialog_title">JavaScript nécessaire</h3>
+                    <p class="alert_dialog_msg unsupported_browser_msg">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
                     <div class="footer_links">
                         <a href="/privacy" class="footer_link link" target="_blank" title="Consulter la politique de confidentialité de Truth Inquiry (ouverture dans un nouvel onglet)">Politique de confidentialité</a>
                         <a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
                         <a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
                     </div>
-                </div>
-            </div>
+                </dialog>
+            </section>
         </noscript>
         <footer>
             <div class="footer_links">
diff --git a/truthinquiry/templates/lobby.html b/truthinquiry/templates/lobby.html
index 61ec226..5d85f81 100644
--- a/truthinquiry/templates/lobby.html
+++ b/truthinquiry/templates/lobby.html
@@ -59,8 +59,8 @@
             </div>
         </section>
         <div class="alert_dialog_background"></div>
-        <div class="unsupported_browser">
-            <div id="unsupported_browser_dialog" class="alert_dialog">
+        <section class="unsupported_browser">
+            <dialog id="unsupported_browser_dialog" class="alert_dialog">
                 <h3 class="alert_dialog_title">Navigateur non supporté</h3>
                 <p class="alert_dialog_msg unsupported_browser_msg"></p>
                 <div class="footer_links">
@@ -68,21 +68,21 @@
                     <a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
                     <a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
                 </div>
-            </div>
-        </div>
+            </dialog>
+        </section>
         <noscript>
-            <div class="alert_dialog_background" style="display: block;"></div>
-            <div class="js_requirement">
-                <div id="js_requirement_dialog" class="alert_dialog" style="display: block;">
-                    <h3 class="alert_dialog_title" style="display: block;">JavaScript nécessaire</h3>
-                    <p class="alert_dialog_msg unsupported_browser_msg" style="display: block;">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
-                </div>
-                <div class="footer_links">
-                    <a href="/privacy" class="footer_link link" target="_blank" title="Consulter la politique de confidentialité de Truth Inquiry (ouverture dans un nouvel onglet)">Politique de confidentialité</a>
-                    <a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
-                    <a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
-                </div>
-            </div>
+            <div class="alert_dialog_background"></div>
+            <section class="js_requirement">
+                <dialog id="js_requirement_dialog" class="alert_dialog alert_dialog_show">
+                    <h3 class="alert_dialog_title">JavaScript nécessaire</h3>
+                    <p class="alert_dialog_msg unsupported_browser_msg">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
+                    <div class="footer_links">
+                        <a href="/privacy" class="footer_link link" target="_blank" title="Consulter la politique de confidentialité de Truth Inquiry (ouverture dans un nouvel onglet)">Politique de confidentialité</a>
+                        <a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
+                        <a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
+                    </div>
+                </dialog>
+            </section>
         </noscript>
         <script src="/static/js/socket.io_v4.4.1/socket.io.min.js"></script>
         <script src="/static/js/api.js"></script>