Merge pull request #111 from nicfreeman1209/main

maximize button for modals

src/components/Menu.vue

@@ -348,7 +348,7 @@ export default {
   top: 3px;
   text-align: right;
   padding-right: 50px;
-  z-index: 200;
+  z-index: 75;
 
   svg {
     filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1));

src/components/modals/Modal.vue

@@ -3,20 +3,39 @@
     <div class="modal-backdrop" @click="close">
       <div
         class="modal"
+        :class="{ maximized: isMaximized }"
         role="dialog"
         aria-labelledby="modalTitle"
         aria-describedby="modalDescription"
         @click.stop=""
       >
-        <font-awesome-icon @click="close" class="close" icon="times-circle" />
+        <div class="top-right-buttons">
+          <font-awesome-icon
+            @click="isMaximized = !isMaximized"
+            class="top-right-button"
+            :icon="['fas', isMaximized ? 'window-minimize' : 'window-maximize']"
+          />
+          <font-awesome-icon
+            @click="close"
+            class="top-right-button"
+            icon="times-circle"
+          />
+        </div>
+        <div class="slot">
           <slot></slot>
         </div>
       </div>
+    </div>
   </transition>
 </template>
 
 <script>
 export default {
+  data: function() {
+    return {
+      isMaximized: false
+    };
+  },
   methods: {
     close() {
       this.$emit("close");
@@ -46,13 +65,12 @@ export default {
   box-shadow: 2px 2px 20px 1px #000;
   display: flex;
   flex-direction: column;
-  max-width: 60%;
-
-  .characters &,
-  .vote-history &,
-  .night-reference & {
   max-height: 80%;
   max-width: 80%;
+
+  .vote-history &,
+  .night-reference &,
+  .characters & {
     overflow-y: auto;
   }
 
@@ -67,16 +85,37 @@ export default {
     justify-content: center;
     line-height: 100%;
   }
-  > .close {
+
+  > .top-right-buttons {
     position: absolute;
+    z-index: 100;
+    top: 15px;
     right: 20px;
-    top: 20px;
+    > .top-right-button {
       cursor: pointer;
-    z-index: 5;
+      width: 28px;
       &:hover {
         color: red;
       }
     }
+  }
+
+  > .slot {
+    max-height: 100%;
+    position: initial;
+  }
+}
+
+.maximized {
+  background: rgba(0, 0, 0, 0.95);
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  display: flex;
+  align-content: center;
+  justify-content: center;
 }
 
 .modal-fade-enter,

src/components/modals/NightOrderModal.vue

@@ -180,7 +180,7 @@ export default {
 .toggle {
   position: absolute;
   left: 20px;
-  top: 20px;
+  top: 15px;
   cursor: pointer;
   &:hover {
     color: red;

src/components/modals/ReferenceModal.vue

@@ -100,7 +100,7 @@ export default {
 .toggle {
   position: absolute;
   left: 20px;
-  top: 20px;
+  top: 15px;
   cursor: pointer;
   &:hover {
     color: red;
@@ -195,7 +195,7 @@ ul {
       &:after {
         content: " ";
         display: block;
-        padding-top: 66%;
+        padding-top: 65%;
       }
     }
     .name {
@@ -219,6 +219,7 @@ ul {
     }
   }
   &.legend {
+    width: 100%;
     font-weight: bold;
     height: 20px;
     margin-top: 10px;

src/components/modals/VoteHistoryModal.vue

@@ -1,7 +1,7 @@
 <template>
   <Modal
     class="vote-history"
-    v-show="modals.voteHistory && session.voteHistory"
+    v-if="modals.voteHistory && session.voteHistory"
     @close="toggleModal('voteHistory')"
   >
     <font-awesome-icon
@@ -91,7 +91,7 @@ export default {
 .clear {
   position: absolute;
   left: 20px;
-  top: 20px;
+  top: 15px;
   cursor: pointer;
   &:hover {
     color: red;
@@ -99,7 +99,7 @@ export default {
 }
 
 h3 {
-  margin: 0 40px;
+  margin: 0 40px 0 10px;
   svg {
     vertical-align: middle;
   }
@@ -107,6 +107,8 @@ h3 {
 
 table {
   border-spacing: 10px 0;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 thead td {

src/main.js

@@ -46,7 +46,9 @@ const faIcons = [
   "Users",
   "VolumeUp",
   "VolumeMute",
-  "VoteYea"
+  "VoteYea",
+  "WindowMaximize",
+  "WindowMinimize"
 ];
 const fabIcons = ["Github", "Discord"];
 library.add(