add maximize button to modals

status is remembered, per modal

src/components/modals/Modal.vue

@@ -3,11 +3,13 @@
     <div class="modal-backdrop" @click="close">
       <div
         class="modal"
+        v-bind:class="[isMaximized ? 'maximized' : 'not-maximized']"
         role="dialog"
         aria-labelledby="modalTitle"
         aria-describedby="modalDescription"
         @click.stop=""
       >
+        <font-awesome-icon @click="toggleMaximized" class="maximize-toggle" icon="window-maximize" />
         <font-awesome-icon @click="close" class="close" icon="times-circle" />
         <slot></slot>
       </div>
@@ -17,9 +19,18 @@
 
 <script>
 export default {
+  data: function () {
+    console.log("new modal");
+    return {
+	  isMaximized: false
+	};
+  },
   methods: {
     close() {
       this.$emit("close");
+    },
+    toggleMaximized() {
+      this.isMaximized = !this.isMaximized;
     }
   }
 };
@@ -46,23 +57,7 @@ export default {
   box-shadow: 2px 2px 20px 1px #000;
   display: flex;
   flex-direction: column;
-  max-width: 60%;
-
-  .night-reference &,
-  .vote-history & {
-    max-height: 80%;
-    max-width: 80%;
   overflow-y: auto;
-  }
-  .characters & {
-    background: rgba(0, 0, 0, 0.95);
-    padding: 0;
-    height: 100%;
-    width: 100%;
-    max-width: 100%;
-    max-height: 100%;
-    overflow-y: auto;
-  }
 
   ul {
     list-style-type: none;
@@ -75,7 +70,7 @@ export default {
     justify-content: center;
     line-height: 100%;
   }
-  > .close {
+  .close {
     position: absolute;
     right: 20px;
     top: 20px;
@@ -85,6 +80,32 @@ export default {
       color: red;
     }
   }
+  .maximize-toggle {
+    position: absolute;
+    right: 50px;
+    top: 20px;
+    cursor: pointer;
+    &:hover {
+      color: red;
+    }
+  }  
+}
+
+.maximized {
+  background: rgba(0, 0, 0, 0.95);
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+.not-maximized {
+  background: rgba(0, 0, 0, 0.8);;
+  padding: 10px 20px;
+  height: revert;
+  width: revert;
+  max-width: 80%;
+  max-height: 80%;
 }
 
 .modal-fade-enter,
@@ -96,4 +117,5 @@ export default {
 .modal-fade-leave-active {
   transition: opacity 0.2s ease;
 }
+
 </style>

src/components/modals/NightOrderModal.vue

@@ -2,12 +2,12 @@
   <Modal
     class="night-reference"
     @close="toggleModal('nightOrder')"
-    v-if="modals.nightOrder && roles.size"
+    v-show="modals.nightOrder && roles.size"
   >
     <font-awesome-icon
       @click="toggleModal('reference')"
       icon="address-card"
-      class="toggle"
+      class="toggle-reference"
       title="Show Character Reference"
     />
     <h3>
@@ -154,7 +154,7 @@ export default {
 <style lang="scss" scoped>
 @import "../../vars.scss";
 
-.toggle {
+.toggle-reference {
   position: absolute;
   left: 20px;
   top: 20px;
@@ -165,7 +165,7 @@ export default {
 }
 
 h3 {
-  margin: 0 40px;
+  margin: 0 90px;
   svg {
     vertical-align: middle;
   }

src/components/modals/ReferenceModal.vue

@@ -2,12 +2,12 @@
   <Modal
     class="characters"
     @close="toggleModal('reference')"
-    v-if="modals.reference && roles.size"
+    v-show="modals.reference && roles.size"
   >
     <font-awesome-icon
       @click="toggleModal('nightOrder')"
       icon="cloud-moon"
-      class="toggle"
+      class="nightorder-toggle"
       title="Show Night Order"
     />
     <h3>
@@ -92,7 +92,7 @@ export default {
 <style lang="scss" scoped>
 @import "../../vars.scss";
 
-.toggle {
+.nightorder-toggle {
   position: absolute;
   left: 20px;
   top: 20px;
@@ -103,7 +103,7 @@ export default {
 }
 
 h3 {
-  margin: 0 40px;
+  margin: 0 90px;
   svg {
     vertical-align: middle;
   }

src/components/modals/VoteHistoryModal.vue

@@ -99,7 +99,7 @@ export default {
 }
 
 h3 {
-  margin: 0 40px;
+  margin: 0 90px;
   svg {
     vertical-align: middle;
   }
@@ -107,6 +107,7 @@ h3 {
 
 table {
   border-spacing: 10px 0;
+  padding: 10px 0px 0px 0px;
 }
 
 thead td {

src/main.js

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