tons of responsive changes

src/App.vue

@@ -125,6 +125,65 @@ body {
   overflow: hidden;
 }
 
+// Large devices (desktops, less than 1200px)
+@media screen and (max-width: 1199.98px) {
+  html,
+  body {
+    font-size: 1.1em;
+  }
+  .player .night em {
+    width: 30px;
+    height: 30px;
+  }
+}
+
+// Medium devices (tablets, less than 992px)
+@media screen and (max-width: 991.98px) {
+  html,
+  body {
+    font-size: 1em;
+  }
+  #controls svg {
+    font-size: 20px;
+  }
+  .player .night em {
+    width: 20px;
+    height: 20px;
+  }
+  #townsquare {
+    padding: 10px;
+  }
+}
+
+// Small devices (landscape phones, less than 768px)
+@media screen and (max-width: 767.98px) {
+  html,
+  body {
+    font-size: 0.9em;
+  }
+  .player > .name {
+    top: 0;
+  }
+}
+
+// Old phones
+@media screen and (max-width: 575.98px) {
+  html,
+  body {
+    font-size: 0.8em;
+  }
+}
+
+// odd aspect ratio
+@media (max-aspect-ratio: 11/7) {
+  .bluffs h3 {
+    max-width: 14vh;
+  }
+  .bluffs ul {
+    flex-direction: column;
+  }
+}
+
 * {
   box-sizing: border-box;
   position: relative;
@@ -211,7 +270,7 @@ ul {
   color: white;
   font-weight: bold;
   text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
-  line-height: 40px;
+  line-height: 170%;
   margin: 5px auto;
   cursor: pointer;
   transition: all 200ms;

src/components/Intro.vue

@@ -37,8 +37,10 @@ export default {
     position: absolute;
     bottom: 100%;
     left: 50%;
-    margin-left: -96px;
+    width: 25vh;
-    margin-bottom: 20px;
+    margin-left: -12.5vh;
+    margin-bottom: 2vh;
+    max-width: 192px;
     border-radius: 50%;
     box-shadow: 0 0 10px black;
     border: 3px solid black;

src/components/Menu.vue

@@ -40,11 +40,12 @@
           <!-- Grimoire -->
           <li class="headline">Grimoire</li>
           <li @click="toggleGrimoire" v-if="players.length">
-            <em>[G]</em>
             <template v-if="!grimoire.isPublic">Hide</template>
             <template v-if="grimoire.isPublic">Show</template>
+            <em>[G]</em>
           </li>
           <li @click="toggleNightOrder" v-if="players.length">
+            Night order
             <em
               ><font-awesome-icon
                 :icon="[
@@ -52,9 +53,9 @@
                   grimoire.isNightOrder ? 'check-square' : 'square'
                 ]"
             /></em>
-            Night order
           </li>
           <li v-if="players.length">
+            Zoom
             <em>
               <font-awesome-icon
                 @click="setZoom(grimoire.zoom - 1)"
@@ -66,11 +67,10 @@
                 icon="search-plus"
               />
             </em>
-            Zoom
           </li>
           <li @click="setBackground">
-            <em><font-awesome-icon icon="image"/></em>
             Background image
+            <em><font-awesome-icon icon="image"/></em>
           </li>
         </template>
 
@@ -82,34 +82,32 @@
             Live Session
           </li>
           <li @click="hostSession" v-if="!session.sessionId">
-            <em>[H]</em> Host (Storyteller)
+            Host (Storyteller)<em>[H]</em>
           </li>
           <li @click="joinSession" v-if="!session.sessionId">
-            <em>[J]</em> Join (Player)
+            Join (Player)<em>[J]</em>
           </li>
           <li v-if="session.sessionId" @click="copySessionUrl">
-            <em><font-awesome-icon icon="copy"/></em>
             Copy player link
+            <em><font-awesome-icon icon="copy"/></em>
           </li>
           <li @click="leaveSession" v-if="session.sessionId">
-            <em>{{ session.sessionId }}</em>
             Leave Session
+            <em>{{ session.sessionId }}</em>
           </li>
         </template>
 
         <template v-if="tab === 'players' && !session.isSpectator">
           <!-- Users -->
           <li class="headline">Players</li>
-          <li @click="addPlayer" v-if="players.length < 20">
+          <li @click="addPlayer" v-if="players.length < 20">Add<em>[A]</em></li>
-            <em>[A]</em> Add
-          </li>
           <li @click="randomizeSeatings" v-if="players.length > 2">
-            <em><font-awesome-icon icon="dice"/></em>
             Randomize
+            <em><font-awesome-icon icon="dice"/></em>
           </li>
           <li @click="clearPlayers" v-if="players.length">
-            <em><font-awesome-icon icon="trash-alt"/></em>
             Remove all
+            <em><font-awesome-icon icon="trash-alt"/></em>
           </li>
         </template>
 
@@ -117,19 +115,19 @@
           <!-- Characters -->
           <li class="headline">Characters</li>
           <li v-if="!session.isSpectator" @click="toggleModal('edition')">
-            <em>[E]</em>
             Select Edition
+            <em>[E]</em>
           </li>
           <li
             @click="toggleModal('roles')"
             v-if="!session.isSpectator && players.length > 4"
           >
-            <em>[C]</em>
             Choose & Assign
+            <em>[C]</em>
           </li>
           <li @click="clearRoles" v-if="players.length">
-            <em><font-awesome-icon icon="trash-alt"/></em>
             Remove all
+            <em><font-awesome-icon icon="trash-alt"/></em>
           </li>
         </template>
 
@@ -137,20 +135,20 @@
           <!-- Help -->
           <li class="headline">Help</li>
           <li @click="toggleModal('reference')">
-            <em>[R]</em>
             Reference Sheet
+            <em>[R]</em>
           </li>
           <li>
             <a href="https://discord.gg/tkWDny6" target="_blank">
-              <em><font-awesome-icon :icon="['fab', 'discord']"/></em>
               Join Discord
             </a>
+            <em><font-awesome-icon :icon="['fab', 'discord']"/></em>
           </li>
           <li>
             <a href="https://github.com/bra1n/townsquare" target="_blank">
-              <em><font-awesome-icon :icon="['fab', 'github']"/></em>
               Source code
             </a>
+            <em><font-awesome-icon :icon="['fab', 'github']"/></em>
           </li>
         </template>
       </ul>
@@ -232,6 +230,7 @@ export default {
     },
     addPlayer() {
       if (this.session.isSpectator) return;
+      if (this.players.length >= 20) return;
       const name = prompt("Player name");
       if (name) {
         this.$store.commit("players/add", name);
@@ -288,6 +287,7 @@ export default {
   top: 3px;
   text-align: right;
   padding-right: 50px;
+  z-index: 200;
 
   #app.screenshot & {
     display: none;
@@ -366,6 +366,10 @@ export default {
       color: white;
       text-align: left;
       background: rgba(0, 0, 0, 0.7);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      min-height: 30px;
 
       &.tabs {
         display: flex;
@@ -399,21 +403,16 @@ export default {
         }
       }
 
-      &:last-child {
-        margin-bottom: 0;
-      }
-
       &:not(.headline):not(.tabs):hover {
         cursor: pointer;
         color: red;
       }
 
       em {
-        float: right;
+        flex-grow: 0;
         font-style: normal;
         margin-left: 10px;
         font-size: 80%;
-        line-height: 31px;
       }
     }
 
@@ -422,6 +421,7 @@ export default {
       letter-spacing: 1px;
       padding: 0 10px;
       text-align: center;
+      justify-content: center;
       background: linear-gradient(
         to right,
         $townsfolk 0%,

src/components/Player.vue

@@ -127,7 +127,7 @@
               <font-awesome-icon icon="camera" />
               Screenshot
             </li>
-            <li @click="$emit('trigger', ['removePlayer'])">
+            <li @click="removePlayer">
               <font-awesome-icon icon="times-circle" />
               Remove
             </li>
@@ -198,14 +198,15 @@ export default {
       return indexAdjusted < session.lockedVote - 1;
     },
     zoom: function() {
+      const unit = window.innerWidth > window.innerHeight ? "vh" : "vw";
       if (this.players.length < 7) {
-        return { width: 9 + this.grimoire.zoom + "vw" };
+        return { width: 18 + this.grimoire.zoom + unit };
       } else if (this.players.length <= 10) {
-        return { width: 8 + this.grimoire.zoom + "vw" };
+        return { width: 16 + this.grimoire.zoom + unit };
       } else if (this.players.length <= 15) {
-        return { width: 7 + this.grimoire.zoom + "vw" };
+        return { width: 14 + this.grimoire.zoom + unit };
       } else {
-        return { width: 6 + this.grimoire.zoom + "vw" };
+        return { width: 12 + this.grimoire.zoom + unit };
       }
     }
   },
@@ -261,6 +262,10 @@ export default {
         value
       });
     },
+    removePlayer() {
+      this.isMenuOpen = false;
+      this.$emit("trigger", ["removePlayer"]);
+    },
     swapPlayer(player) {
       this.isMenuOpen = false;
       this.$emit("trigger", ["swapPlayer", player]);
@@ -305,7 +310,6 @@ export default {
 /***** Player token *****/
 .circle .player {
   margin-bottom: 10px;
-  padding-bottom: 5px;
 
   &:before {
     content: " ";
@@ -525,10 +529,11 @@ li.move:not(.from) .player .overlay svg.move {
 .player .has-vote {
   position: absolute;
   right: 2px;
-  bottom: 45px;
+  margin-top: -15%;
   color: #fff;
   filter: drop-shadow(0 0 3px black);
   transition: opacity 250ms;
+  z-index: 2;
 
   #townsquare.public & {
     opacity: 0;
@@ -570,10 +575,11 @@ li.move:not(.from) .player .overlay svg.move {
 .player .seat {
   position: absolute;
   left: 2px;
-  bottom: 45px;
+  margin-top: -15%;
   color: #fff;
   filter: drop-shadow(0 0 3px black);
   cursor: default;
+  z-index: 2;
 }
 
 .player.you .seat {
@@ -654,17 +660,22 @@ li.move:not(.from) .player .overlay svg.move {
 /**** Night reminders ****/
 .player .night {
   position: absolute;
-  height: 100%;
   width: 100%;
   z-index: 2;
   cursor: pointer;
   opacity: 1;
   transition: opacity 200ms;
   display: flex;
-  top: -20px;
+  top: 0;
   align-items: center;
   pointer-events: none;
 
+  &:after {
+    content: " ";
+    display: block;
+    padding-top: 100%;
+  }
+
   #townsquare.public & {
     opacity: 0;
     pointer-events: none;
@@ -746,8 +757,6 @@ li.move:not(.from) .player .overlay svg.move {
     position: absolute;
     width: 40px;
     height: 40px;
-    text-align: center;
-    line-height: 37px;
     border-radius: 50%;
     border: 3px solid black;
     filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
@@ -755,15 +764,18 @@ li.move:not(.from) .player .overlay svg.move {
     opacity: 1;
     pointer-events: all;
     transition: opacity 200ms;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   &.first em {
-    left: -15px;
+    left: -10%;
     background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, $townsfolk 100%);
   }
 
   &.other em {
-    right: -15px;
+    right: -10%;
     background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, $demon 100%);
   }
 

src/components/Token.vue

@@ -132,6 +132,7 @@ export default {
   .name {
     width: 100%;
     height: 100%;
+    font-size: 24px; // svg fonts are relative to document font size
     .label {
       fill: black;
       stroke: white;

src/components/TownInfo.vue

@@ -104,7 +104,6 @@ export default {
 
   li {
     display: block;
-    white-space: nowrap;
     font-weight: bold;
     text-align: center;
     padding: 0 5px;
@@ -144,11 +143,13 @@ export default {
   li.edition {
     width: 220px;
     height: 200px;
+    max-width: 100%;
+    max-height: 100%;
     background-position: 0 center;
     background-repeat: no-repeat;
     background-size: 100% auto;
     position: absolute;
-    top: -50px;
+    top: -25%;
   }
 }
 </style>

src/components/TownSquare.vue

@@ -157,6 +157,16 @@ export default {
 </script>
 
 <style lang="scss">
+#townsquare {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+}
+
 .circle {
   padding: 0;
   width: 100%;
@@ -228,11 +238,11 @@ export default {
       $x: $i - 1;
       @if $x < $q or ($x >= $item-count / 2 and $x < $q * 3) {
         .player {
-          margin-bottom: -15% + 20% * (1 - ($x % $q / $q));
+          margin-bottom: -10% + 20% * (1 - ($x % $q / $q));
         }
       } @else {
         .player {
-          margin-bottom: -15% + 20% * ($x % $q / $q);
+          margin-bottom: -10% + 20% * ($x % $q / $q);
         }
       }
     }
@@ -246,17 +256,6 @@ export default {
   }
 }
 
-#townsquare {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  padding: 20px;
-  display: flex;
-  align-items: center;
-  align-content: center;
-  justify-content: center;
-}
-
 /***** Demon bluffs *******/
 .bluffs {
   position: absolute;
@@ -290,11 +289,15 @@ export default {
   h3 {
     margin-top: 5px;
   }
-  li {
+  ul {
-    width: 6vw;
+    display: flex;
-    height: 6vw;
+    align-items: center;
-    margin: 0 5px;
+    li {
-    display: inline-block;
+      width: 14vh;
+      height: 14vh;
+      margin: 0 0.5%;
+      display: inline-block;
+    }
   }
 }
 </style>

src/components/modals/EditionModal.vue

@@ -162,7 +162,7 @@ ul.editions .edition {
   font-family: PiratesBay, sans-serif;
   letter-spacing: 1px;
   text-align: center;
-  padding-top: 100px;
+  padding-top: 15%;
   background-position: center center;
   background-size: 100% auto;
   background-repeat: no-repeat;

src/components/modals/Modal.vue

@@ -50,6 +50,7 @@ export default {
 
   .characters & {
     max-height: 80%;
+    max-width: 80%;
     overflow-y: auto;
   }
 
@@ -62,7 +63,6 @@ export default {
     align-content: center;
     align-items: center;
     justify-content: center;
-    font-size: 75%;
     line-height: 100%;
   }
   > .close {

src/components/modals/ReferenceModal.vue

@@ -167,8 +167,7 @@ ul {
     /*background: linear-gradient(0deg, #ffffff0f, transparent);*/
     border-radius: 10px;
     .icon {
-      width: 60px;
+      width: 6vh;
-      height: 40px;
       background-size: cover;
       background-position: 0 -5px;
       flex-grow: 0;
@@ -177,11 +176,16 @@ ul {
       text-align: center;
       border-left: 1px solid #ffffff1f;
       border-right: 1px solid #ffffff1f;
+      &:after {
+        content: " ";
+        display: block;
+        padding-top: 66%;
+      }
     }
     .name {
       flex-grow: 0;
       flex-shrink: 0;
-      width: 150px;
+      width: 15%;
       font-weight: bold;
       text-align: right;
       font-family: "Papyrus", sans-serif;
@@ -207,6 +211,9 @@ ul {
       font-family: inherit;
       font-size: inherit;
     }
+    .icon:after {
+      padding-top: 0;
+    }
   }
 }
 </style>

src/components/modals/ReminderModal.vue

@@ -81,12 +81,14 @@ export default {
 ul.reminders .reminder {
   background: url("../../assets/reminder.png") center center;
   background-size: 100%;
-  width: 100px;
+  width: 14vh;
-  height: 100px;
+  height: 14vh;
+  max-width: 100px;
+  max-height: 100px;
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: 5px;
+  margin: 1%;
 
   border-radius: 50%;
   border: 3px solid black;

src/components/modals/RoleModal.vue

@@ -83,7 +83,7 @@ export default {
 ul.tokens li {
   border-radius: 50%;
   width: 6vw;
-  margin: 5px;
+  margin: 1%;
   transition: transform 500ms ease;
 
   &.townsfolk {

src/components/modals/RolesModal.vue

@@ -146,11 +146,11 @@ export default {
 @import "../../vars.scss";
 
 ul.tokens {
-  padding-left: 55px;
+  padding-left: 5%;
   li {
     border-radius: 50%;
     width: 6vw;
-    margin: 5px;
+    margin: 1%;
     opacity: 0.5;
     transition: all 250ms;
     &.selected {
@@ -181,11 +181,16 @@ ul.tokens {
     position: absolute;
     left: 0;
     font-weight: bold;
-    line-height: 50px;
+    font-size: 75%;
-    text-align: center;
+    width: 5%;
-    font-size: 100%;
+    display: flex;
-    width: 50px;
+    align-items: center;
-    height: 50px;
+    justify-content: center;
+    &:after {
+      content: " ";
+      display: block;
+      padding-top: 100%;
+    }
     &.townsfolk {
       color: $townsfolk;
     }