made aspect ratio consistent for avatar images, fixed bug in scrolling the background instead of the modal on iOS

2025-12-26 15:57:50 +01:00 · 2019-09-15 04:38:10 -04:00
parent 5f4b700f88
commit 3061c46397
14 changed files with 32 additions and 18 deletions
--- a/assets/images/roles-small/Hunter.png
+++ b/assets/images/roles-small/Hunter.png
--- a/assets/images/roles-small/Mason.png
+++ b/assets/images/roles-small/Mason.png
--- a/assets/images/roles-small/Minion.png
+++ b/assets/images/roles-small/Minion.png
--- a/assets/images/roles-small/Seer.png
+++ b/assets/images/roles-small/Seer.png
--- a/assets/images/roles-small/Shadow.png
+++ b/assets/images/roles-small/Shadow.png
--- a/assets/images/roles-small/Sorcerer.png
+++ b/assets/images/roles-small/Sorcerer.png
--- a/assets/images/roles-small/Villager.png
+++ b/assets/images/roles-small/Villager.png
--- a/assets/images/roles-small/Werewolf.png
+++ b/assets/images/roles-small/Werewolf.png
--- a/static/setup.js
+++ b/static/setup.js
@@ -51,9 +51,13 @@ window.onload = function() {
            "<img alt='No art' src='/assets/images/roles-small/" + cards[i].role + ".png' />"
            : "<span>Art soon.</span>";
        modalRole.innerHTML =
-            "<h2 class='" + roleClass + "'>" + cards[i].role + "</h2>" +
-            roleImage +
-            "<p>" + cards[i].team + "</p>" +
+            "<div>" +
+                roleImage +
+                "<div>" +
+                    "<h2 class='" + roleClass + "'>" + cards[i].role + "</h2>" +
+                    "<p>" + cards[i].team + "</p>" +
+                "</div>" +
+            "</div>" +
            "<p>" + cards[i].description + "</p>";

        document.getElementById("roles").appendChild(modalRole);
@@ -126,10 +130,12 @@ function resetCardQuantities() {

 function displayRoleModal() {
    document.getElementById("role-modal").classList.remove("hidden");
+    document.getElementById("app-content").classList.add("hidden");
 }

 function closeModal() {
    document.getElementById("role-modal").classList.add("hidden");
+    document.getElementById("app-content").classList.remove("hidden");
 }

 function buildDeckFromQuantities() {
--- a/static/styles.css
+++ b/static/styles.css
@@ -13,7 +13,7 @@
        font-size: 20px;
    }

-    .app-content {
+    #app-content {
        width: 92%;
    }

@@ -76,7 +76,7 @@
        font-size: 30px;
    }

-    .app-content {
+    #app-content {
        width: 80%;
    }

@@ -161,7 +161,7 @@ html, body {
    }
 }

-.app-content {
+#app-content {
    text-align: center;
    margin: 0 auto;
 }
@@ -853,21 +853,29 @@ label {
 .modal-role {
    width: 22em;
    position: relative;
+    border-bottom: 1px solid lightgray;
+    padding-bottom: 0.5em;
+}
+
+.modal-role div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-role div div {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
 }

 .modal-role p:first-of-type {
-    margin-top: 0;
+    margin: 0;
    color: gray;
 }

 .modal-role h2 {
-    margin-bottom: 0;
-}
-
-.modal-role img {
-    position: absolute;
-    top: -10px;
-    left: 110px;
+    margin: 0;
 }

 .modal {
--- a/views/create_game.html
+++ b/views/create_game.html
@@ -19,7 +19,7 @@
            </div>
        </div>
    </div>
-        <div class="app-content">
+        <div id="app-content">
            <div id="create-game-container">
                <h2 class="app-header-secondary">Create A Game</h2>
                <label>
--- a/views/game.html
+++ b/views/game.html
@@ -8,7 +8,7 @@
    <script src="../node_modules/socket.io-client/dist/socket.io.js"></script>
 </head>
 <body>
-<div class="app-content">
+<div id="app-content">
    <div id="message-box"></div>
    <div id="lobby-container"></div>
    <div id="game-container"></div>
--- a/views/index.html
+++ b/views/index.html
@@ -7,7 +7,7 @@
        <script src="../node_modules/socket.io-client/dist/socket.io.js"></script>
    </head>
    <body>
-        <div class="app-content">
+        <div id="app-content">
            <a href="/">
                <div class="app-title">
                    <img src="../assets/images/Wolf_Logo.gif" alt="Where Are the Wolves?" />
--- a/views/join_game.html
+++ b/views/join_game.html
@@ -8,7 +8,7 @@
    <script src="../node_modules/socket.io-client/dist/socket.io.js"></script>
 </head>
 <body>
-    <div class="app-content">
+    <div id="app-content">
        <div id="join-game-container">
            <h2 class="app-header-secondary">Join a Game</h2>
            <form>