diff options
| -rw-r--r-- | CHANGELOG.md | 5 | ||||
| -rw-r--r-- | app/javascript/stylesheets/core.css | 9 | ||||
| -rw-r--r-- | 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> |