From 57252386234e802b3a3707d32a8b74130de4a56e Mon Sep 17 00:00:00 2001
From: David Gay <david@davidgay.org>
Date: Sat, 5 Jun 2021 19:31:44 -0400
Subject: Improve UI responsiveness and scaling

---
 CHANGELOG.md                           |  5 +++++
 app/javascript/stylesheets/core.css    |  9 ++++-----
 app/views/layouts/application.html.erb | 21 ++++++++++-----------
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a01bbbd..da38aa4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -36,6 +36,11 @@ All notable changes to this project will be documented in this file.
   - Any item equipped during combat is at risk, even if it provides no combat benefit. This may be changed in the
     future.
   - Currently, non-combat activities do not put your items at risk. This will change in the future.
+  
+## UI
+- Game now scales to screen size, and a bit more relative space is given to the main box. This may have introduced
+  undesirable consequences, especially on mobile. Please report these consequences with screenshots, and let's work
+  together to get the game looking decent everywhere. 👍
 
 ### Engine
 - Refactored some activity and combat code.
diff --git a/app/javascript/stylesheets/core.css b/app/javascript/stylesheets/core.css
index 9bfb19b..f002580 100644
--- a/app/javascript/stylesheets/core.css
+++ b/app/javascript/stylesheets/core.css
@@ -14,11 +14,10 @@
   @apply p-2 border-2 border-gray-800 rounded;
 }
 
-.header-title {
-  font-family: "Montaga", "Open Sans", sans-serif;
+.game-container-column {
+  max-height: calc(100vh - 9rem);
 }
 
-#look_output {
-  @apply min-w-full my-2 overflow-auto border-2 border-gray-800 rounded;
-  height: 75px;
+.header-title {
+  font-family: "Montaga", "Open Sans", sans-serif;
 }
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 513fcdd..577debc 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -15,35 +15,34 @@
     <%= render "header" %>
 
     <div class="flex-1 bg-gray-900 rounded flex-grow">
-      <div class="mx-auto p-2 grid gap-2 grid-cols-12 px-2"
-           style="max-width: 1800px;">
+      <div class="mx-auto p-2 grid gap-2 grid-cols-12 px-2">
         <% if user_signed_in? %>
           <%= render "navbar" %>
         <% end %>
-        <div class="flex flex-col col-span-12 sm:col-span-8">
-          <div class="game-container-box mb-2 overflow-y-auto" style="height: 20rem;">
+        <div class="flex flex-col game-container-column col-span-12 sm:col-span-8 xl:col-span-9">
+          <div class="game-container-box mb-2 overflow-y-auto flex-grow">
             <%= render "flash_messages" %>
             <%= yield %>
           </div>
           <% if user_signed_in? %>
-            <div class="game-container-box overflow-auto text-sm p-2" style="height: 15rem;" id="result_output"
-                 data-turbolinks-permanent>
+            <div class="game-container-box overflow-auto text-sm p-2" id="result_output"
+                 style="min-height: 30%; max-height: 50%" data-turbolinks-permanent>
             </div>
           <% end %>
         </div>
         <% if user_signed_in? %>
-          <div class="flex flex-col col-span-12 sm:col-span-4">
-            <div class="game-container-box mb-2 overflow-y-auto" style="height: 15rem;" id="activity_controls"
-                 data-turbolinks-permanent>
+          <div class="flex flex-col game-container-column col-span-12 sm:col-span-4 xl:col-span-3">
+            <div class="game-container-box mb-2 overflow-y-auto" id="activity_controls"
+                 style="min-height: 50%" data-turbolinks-permanent>
               <%= render "timer" %>
             </div>
-            <div id="chat" class="game-container-box col-span-12 sm:col-span-4" style="height: 20rem;"
+            <div id="chat" class="game-container-box overflow-y-auto"
                  data-turbolinks-permanent>
               <%= render "chat" %>
             </div>
           </div>
         <% else %>
-          <div id="game_info" class="game-container-box col-span-12 sm:col-span-4"
+          <div id="game_info" class="game-container-box game-container-column col-span-12 sm:col-span-4 xl:col-span-3"
                data-turbolinks-permanent>
             <%= render "game_info" %>
           </div>
-- 
cgit v1.2.3