From 1a62772825a6db7ef4c8684ff5a226e858a428bd Mon Sep 17 00:00:00 2001
From: Chris Wilson <chris@legendserver.info>
Date: Sat, 5 Dec 2020 15:37:31 -0500
Subject: [PATCH] Slew of minor style adjustments

- Added padding to bottom of /setup-guide to accomodate iPhone users with curved screen bottoms
- Added screen orientation detection to /player-settings to force select inputs into a single column on mobile devices
- Added an X to the cookie notice to indicate it can be closed
- Changed "Generate Game" to "Start Game" so it matches the header
---
 WebHostLib/static/assets/cookieNotice.js      | 4 ++++
 WebHostLib/static/styles/cookieNotice.css     | 5 +++++
 WebHostLib/static/styles/playerSettings.css   | 3 ++-
 WebHostLib/static/styles/tutorial.css         | 5 +++--
 WebHostLib/static/styles/weightedSettings.css | 1 +
 WebHostLib/templates/playerSettings.html      | 2 +-
 6 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/WebHostLib/static/assets/cookieNotice.js b/WebHostLib/static/assets/cookieNotice.js
index f9cbb200..4149d076 100644
--- a/WebHostLib/static/assets/cookieNotice.js
+++ b/WebHostLib/static/assets/cookieNotice.js
@@ -5,6 +5,10 @@ window.addEventListener('load', () => {
     const cookieNotice = document.createElement('div');
     cookieNotice.innerText = "This website uses cookies to store information about the games you play.";
     cookieNotice.setAttribute('id', 'cookie-notice');
+    const closeButton = document.createElement('span');
+    closeButton.setAttribute('id', 'close-button');
+    closeButton.innerText = 'X';
+    cookieNotice.appendChild(closeButton);
     document.body.appendChild(cookieNotice);
     cookieNotice.addEventListener('click', () => {
         localStorage.setItem('cookieNotice', "1");
diff --git a/WebHostLib/static/styles/cookieNotice.css b/WebHostLib/static/styles/cookieNotice.css
index 25ed2abe..cb6b1109 100644
--- a/WebHostLib/static/styles/cookieNotice.css
+++ b/WebHostLib/static/styles/cookieNotice.css
@@ -9,3 +9,8 @@
     text-align: center;
     cursor: pointer;
 }
+
+#cookie-notice #close-button{
+    float: right;
+    padding-right: 10px;
+}
diff --git a/WebHostLib/static/styles/playerSettings.css b/WebHostLib/static/styles/playerSettings.css
index b0fc2262..33a76d3d 100644
--- a/WebHostLib/static/styles/playerSettings.css
+++ b/WebHostLib/static/styles/playerSettings.css
@@ -75,6 +75,7 @@ html{
     padding: 3px;
     border-radius: 3px;
     min-width: 150px;
+    background-color: #ffffff;
 }
 
 #player-settings #game-options, #player-settings #rom-options{
@@ -97,7 +98,7 @@ html{
     cursor: default;
 }
 
-@media all and (max-width: 1000px){
+@media all and (max-width: 1000px), all and (orientation: portrait){
     #player-settings #game-options, #player-settings #rom-options{
         justify-content: flex-start;
         flex-wrap: wrap;
diff --git a/WebHostLib/static/styles/tutorial.css b/WebHostLib/static/styles/tutorial.css
index 5499f92e..888c4ad6 100644
--- a/WebHostLib/static/styles/tutorial.css
+++ b/WebHostLib/static/styles/tutorial.css
@@ -5,12 +5,13 @@ html{
 }
 
 #tutorial-wrapper{
-    width: 70rem;
+    display: flex;
+    flex-direction: column;
     margin-left: auto;
     margin-right: auto;
     background-color: rgba(0, 0, 0, 0.15);
     border-radius: 8px;
-    padding: 1rem;
+    padding: 1rem 1rem 3rem;
     color: #eeffeb;
 }
 
diff --git a/WebHostLib/static/styles/weightedSettings.css b/WebHostLib/static/styles/weightedSettings.css
index 303095cb..4f788931 100644
--- a/WebHostLib/static/styles/weightedSettings.css
+++ b/WebHostLib/static/styles/weightedSettings.css
@@ -148,5 +148,6 @@ html{
     padding: 3px;
     border-radius: 3px;
     min-width: 150px;
+    background-color: #ffffff;
 }
 
diff --git a/WebHostLib/templates/playerSettings.html b/WebHostLib/templates/playerSettings.html
index 78416ee7..6eb4c8d1 100644
--- a/WebHostLib/templates/playerSettings.html
+++ b/WebHostLib/templates/playerSettings.html
@@ -11,7 +11,7 @@
 {% block body %}
     {% include 'header/grassHeader.html' %}
     <div id="player-settings">
-        <h1>Generate Game</h1>
+        <h1>Start Game</h1>
         <p>Choose the options you would like to play with! You may generate a single-player game from this page,
             or download a settings file you can use to participate in a MultiWorld. If you would like to make
             your settings extra random, check out the <a href="/weighted-settings">weighted settings</a>