WebHost: Remove styleController.js and replace functionality with HTML/CSS. (#4852)

* ensure footer stays at bottom of page without JS

* Remove some other usages.

WebHostLib/static/assets/gameInfo.js

@@ -23,7 +23,6 @@ window.addEventListener('load', () => {
         showdown.setOption('strikethrough', true);
         showdown.setOption('literalMidWordUnderscores', true);
         gameInfo.innerHTML += (new showdown.Converter()).makeHtml(results);
-        adjustHeaderWidth();
 
         // Reset the id of all header divs to something nicer
         for (const header of document.querySelectorAll('h1, h2, h3, h4, h5, h6')) {

WebHostLib/static/assets/hostGame.js

@@ -6,6 +6,4 @@ window.addEventListener('load', () => {
     document.getElementById('file-input').addEventListener('change', () => {
         document.getElementById('host-game-form').submit();
     });
-
-    adjustFooterHeight();
 });

WebHostLib/static/assets/styleController.js

@@ -1,47 +0,0 @@
-const adjustFooterHeight = () => {
-  // If there is no footer on this page, do nothing
-  const footer = document.getElementById('island-footer');
-  if (!footer) { return; }
-
-  // If the body is taller than the window, also do nothing
-  if (document.body.offsetHeight > window.innerHeight) {
-    footer.style.marginTop = '0';
-    return;
-  }
-
-  // Add a margin-top to the footer to position it at the bottom of the screen
-  const sibling = footer.previousElementSibling;
-  const margin = (window.innerHeight - sibling.offsetTop - sibling.offsetHeight - footer.offsetHeight);
-  if (margin < 1) {
-    footer.style.marginTop = '0';
-    return;
-  }
-  footer.style.marginTop = `${margin}px`;
-};
-
-const adjustHeaderWidth = () => {
-  // If there is no header, do nothing
-  const header = document.getElementById('base-header');
-  if (!header) { return; }
-
-  const tempDiv = document.createElement('div');
-  tempDiv.style.width = '100px';
-  tempDiv.style.height = '100px';
-  tempDiv.style.overflow = 'scroll';
-  tempDiv.style.position = 'absolute';
-  tempDiv.style.top = '-500px';
-  document.body.appendChild(tempDiv);
-  const scrollbarWidth = tempDiv.offsetWidth - tempDiv.clientWidth;
-  document.body.removeChild(tempDiv);
-
-  const documentRoot = document.compatMode === 'BackCompat' ? document.body : document.documentElement;
-  const margin = (documentRoot.scrollHeight > documentRoot.clientHeight) ? 0-scrollbarWidth : 0;
-  document.getElementById('base-header-right').style.marginRight = `${margin}px`;
-};
-
-window.addEventListener('load', () => {
-  window.addEventListener('resize', adjustFooterHeight);
-  window.addEventListener('resize', adjustHeaderWidth);
-  adjustFooterHeight();
-  adjustHeaderWidth();
-});

WebHostLib/static/assets/tutorial.js

@@ -25,7 +25,6 @@ window.addEventListener('load', () => {
         showdown.setOption('literalMidWordUnderscores', true);
         showdown.setOption('disableForced4SpacesIndentedSublists', true);
         tutorialWrapper.innerHTML += (new showdown.Converter()).makeHtml(results);
-        adjustHeaderWidth();
 
         const title = document.querySelector('h1')
         if (title) {

WebHostLib/static/styles/globalStyles.css

@@ -36,6 +36,13 @@ html{
 
 body{
     margin: 0;
+    display: flex;
+    flex-direction: column;
+    min-height: calc(100vh - 110px);
+}
+
+main {
+    flex-grow: 1;
 }
 
 a{

WebHostLib/templates/404.html

@@ -1,5 +1,6 @@
 {% extends 'pageWrapper.html' %}
 {% import "macros.html" as macros %}
+{% set show_footer = True %}
 
 {% block head %}
     <title>Page Not Found (404)</title>
@@ -13,5 +14,4 @@
         The page you're looking for doesn&apos;t exist.<br />
         <a href="/">Click here to return to safety.</a>
     </div>
-    {% include 'islandFooter.html' %}
 {% endblock %}

WebHostLib/templates/hostGame.html

@@ -1,4 +1,5 @@
 {% extends 'pageWrapper.html' %}
+{% set show_footer = True %}
 
 {% block head %}
     <title>Upload Multidata</title>
@@ -27,6 +28,4 @@
             </div>
         </div>
     </div>
-
-    {% include 'islandFooter.html' %}
 {% endblock %}

WebHostLib/templates/landing.html

@@ -1,4 +1,5 @@
 {% extends 'pageWrapper.html' %}
+{% set show_footer = True %}
 
 {% block head %}
     <title>Archipelago</title>
@@ -57,5 +58,4 @@
             </div>
         </div>
     </div>
-    {% include 'islandFooter.html' %}
 {% endblock %}

WebHostLib/templates/pageWrapper.html

@@ -5,26 +5,29 @@
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/tooltip.css") }}" />
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/cookieNotice.css") }}" />
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/globalStyles.css") }}" />
-    <script type="application/ecmascript" src="{{ url_for('static', filename="assets/styleController.js") }}"></script>
     <script type="application/ecmascript" src="{{ url_for('static', filename="assets/cookieNotice.js") }}"></script>
     {% block head %}
         <title>Archipelago</title>
     {% endblock %}
 </head>
 <body>
+    <main>
+        {% with messages = get_flashed_messages() %}
+            {% if messages %}
+                <div>
+                    {% for message in messages | unique %}
+                        <div class="user-message">{{ message }}</div>
+                    {% endfor %}
+                </div>
+            {% endif %}
+        {% endwith %}
 
-{% with messages = get_flashed_messages() %}
-    {% if messages %}
-        <div>
-            {% for message in messages | unique %}
-                <div class="user-message">{{ message }}</div>
-            {% endfor %}
-        </div>
+        {% block body %}
+        {% endblock %}
+    </main>
+
+    {% if show_footer %}
+        {% include "islandFooter.html" %}
     {% endif %}
-{% endwith %}
-
-{% block body %}
-{% endblock %}
-
 </body>
 </html>

WebHostLib/templates/seedError.html

@@ -1,5 +1,6 @@
 {% extends 'pageWrapper.html' %}
 {% import "macros.html" as macros %}
+{% set show_footer = True %}
 
 {% block head %}
     <title>Generation failed, please retry.</title>
@@ -15,5 +16,4 @@
             {{ seed_error }}
         </div>
     </div>
-    {% include 'islandFooter.html' %}
 {% endblock %}

WebHostLib/templates/startPlaying.html

@@ -1,4 +1,5 @@
 {% extends 'pageWrapper.html' %}
+{% set show_footer = True %}
 
 {% block head %}
     <title>Start Playing</title>
@@ -26,6 +27,4 @@
             </p>
         </div>
     </div>
-
-    {% include 'islandFooter.html' %}
 {% endblock %}

WebHostLib/templates/viewSeed.html

@@ -1,5 +1,6 @@
 {% extends 'pageWrapper.html' %}
 {% import "macros.html" as macros %}
+{% set show_footer = True %}
 
 {% block head %}
     <title>View Seed {{ seed.id|suuid }}</title>
@@ -50,5 +51,4 @@
             </table>
         </div>
     </div>
-    {% include 'islandFooter.html' %}
 {% endblock %}

WebHostLib/templates/waitSeed.html

@@ -1,5 +1,6 @@
 {% extends 'pageWrapper.html' %}
 {% import "macros.html" as macros %}
+{% set show_footer = True %}
 
 {% block head %}
     <title>Generation in Progress</title>
@@ -15,5 +16,4 @@
             Waiting for game to generate, this page auto-refreshes to check.
         </div>
     </div>
-    {% include 'islandFooter.html' %}
 {% endblock %}