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{