From 3126de390d69c00166a82fd3cfdd63d56964d439 Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Fri, 29 Jan 2021 22:33:38 +0000
Subject: [PATCH 01/14] maximize reference modal

& darken background, slightly compactify

-> fits into half of a 1920x1080 screen
---
 src/components/modals/Modal.vue          | 11 ++++++++---
 src/components/modals/ReferenceModal.vue |  2 +-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue
index f5f686f..d8164c6 100644
--- a/src/components/modals/Modal.vue
+++ b/src/components/modals/Modal.vue
@@ -48,13 +48,18 @@ export default {
   flex-direction: column;
   max-width: 60%;
 
-  .characters &,
-  .vote-history &,
-  .night-reference & {
+  .night-reference &,
+  .vote-history & {
     max-height: 80%;
     max-width: 80%;
     overflow-y: auto;
   }
+  .characters & {
+    background: rgba(0, 0, 0, 0.95);
+    max-height: 100%;
+    max-width: 100%;
+    overflow-y: auto;
+  }
 
   ul {
     list-style-type: none;
diff --git a/src/components/modals/ReferenceModal.vue b/src/components/modals/ReferenceModal.vue
index 29163a6..d4a6230 100644
--- a/src/components/modals/ReferenceModal.vue
+++ b/src/components/modals/ReferenceModal.vue
@@ -118,7 +118,7 @@ h4 {
   text-transform: capitalize;
   display: flex;
   align-items: center;
-  height: 20px;
+  height: 12px;
   &:before,
   &:after {
     content: " ";

From 3020b2248cba0a126ef01aad4f6655b6a638be97 Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Wed, 3 Feb 2021 23:50:19 +0000
Subject: [PATCH 02/14] z-index: modals in front of menu

+fix padding
---
 src/components/Menu.vue         | 2 +-
 src/components/modals/Modal.vue | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 79715a5..39daeb4 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -328,7 +328,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));
diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue
index d8164c6..3cb1647 100644
--- a/src/components/modals/Modal.vue
+++ b/src/components/modals/Modal.vue
@@ -56,8 +56,11 @@ export default {
   }
   .characters & {
     background: rgba(0, 0, 0, 0.95);
-    max-height: 100%;
+    padding: 0;
+    height: 100%;
+    width: 100%;
     max-width: 100%;
+    max-height: 100%;
     overflow-y: auto;
   }
 

From 1abbea3cff6915241d18d4beea374a351e7ff13e Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Wed, 10 Feb 2021 02:04:02 +0000
Subject: [PATCH 03/14] add maximize button to modals

status is remembered, per modal
---
 src/components/modals/Modal.vue            | 58 +++++++++++++++-------
 src/components/modals/NightOrderModal.vue  |  8 +--
 src/components/modals/ReferenceModal.vue   |  8 +--
 src/components/modals/VoteHistoryModal.vue |  3 +-
 src/main.js                                |  3 +-
 5 files changed, 52 insertions(+), 28 deletions(-)

diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue
index 3cb1647..b880393 100644
--- a/src/components/modals/Modal.vue
+++ b/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;
-  }
+  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>
diff --git a/src/components/modals/NightOrderModal.vue b/src/components/modals/NightOrderModal.vue
index a572cfa..a53bded 100644
--- a/src/components/modals/NightOrderModal.vue
+++ b/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;
   }
diff --git a/src/components/modals/ReferenceModal.vue b/src/components/modals/ReferenceModal.vue
index d2d5afc..18ee654 100644
--- a/src/components/modals/ReferenceModal.vue
+++ b/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;
   }
diff --git a/src/components/modals/VoteHistoryModal.vue b/src/components/modals/VoteHistoryModal.vue
index 93afa6a..033d543 100644
--- a/src/components/modals/VoteHistoryModal.vue
+++ b/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 {
diff --git a/src/main.js b/src/main.js
index d755fc4..c8f1e6d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -45,7 +45,8 @@ const faIcons = [
   "Users",
   "VolumeUp",
   "VolumeMute",
-  "VoteYea"
+  "VoteYea",
+  "WindowMaximize"
 ];
 const fabIcons = ["Github", "Discord"];
 library.add(

From 9a6d257679add5b22a4917f3f1f419761d06007f Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Wed, 10 Feb 2021 02:07:03 +0000
Subject: [PATCH 04/14] remove debug print

---
 src/components/modals/Modal.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue
index b880393..e14ea9c 100644
--- a/src/components/modals/Modal.vue
+++ b/src/components/modals/Modal.vue
@@ -20,7 +20,6 @@
 <script>
 export default {
   data: function () {
-    console.log("new modal");
     return {
 	  isMaximized: false
 	};

From a7cdbf34e391abfc0a816d1567781500ccfb5d57 Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Wed, 10 Feb 2021 07:41:57 +0000
Subject: [PATCH 05/14] whitespace: run lint -- --fix

---
 src/components/modals/Modal.vue | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue
index e14ea9c..fe0fe1f 100644
--- a/src/components/modals/Modal.vue
+++ b/src/components/modals/Modal.vue
@@ -9,7 +9,11 @@
         aria-describedby="modalDescription"
         @click.stop=""
       >
-        <font-awesome-icon @click="toggleMaximized" class="maximize-toggle" icon="window-maximize" />
+        <font-awesome-icon
+          @click="toggleMaximized"
+          class="maximize-toggle"
+          icon="window-maximize"
+        />
         <font-awesome-icon @click="close" class="close" icon="times-circle" />
         <slot></slot>
       </div>
@@ -19,10 +23,10 @@
 
 <script>
 export default {
-  data: function () {
+  data: function() {
     return {
-	  isMaximized: false
-	};
+      isMaximized: false
+    };
   },
   methods: {
     close() {
@@ -87,7 +91,7 @@ export default {
     &:hover {
       color: red;
     }
-  }  
+  }
 }
 
 .maximized {
@@ -99,7 +103,7 @@ export default {
   max-height: 100%;
 }
 .not-maximized {
-  background: rgba(0, 0, 0, 0.8);;
+  background: rgba(0, 0, 0, 0.8);
   padding: 10px 20px;
   height: revert;
   width: revert;
@@ -116,5 +120,4 @@ export default {
 .modal-fade-leave-active {
   transition: opacity 0.2s ease;
 }
-
 </style>

From 97ac46c1fbb2704d4d827d8d5f5d9635c9ba7574 Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Wed, 10 Feb 2021 19:55:45 +0000
Subject: [PATCH 06/14] reference modal defaults to maximized

others don't
---
 src/components/modals/Modal.vue          | 2 +-
 src/components/modals/ReferenceModal.vue | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue
index fe0fe1f..815f66c 100644
--- a/src/components/modals/Modal.vue
+++ b/src/components/modals/Modal.vue
@@ -85,7 +85,7 @@ export default {
   }
   .maximize-toggle {
     position: absolute;
-    right: 50px;
+    right: 55px;
     top: 20px;
     cursor: pointer;
     &:hover {
diff --git a/src/components/modals/ReferenceModal.vue b/src/components/modals/ReferenceModal.vue
index 18ee654..8519e46 100644
--- a/src/components/modals/ReferenceModal.vue
+++ b/src/components/modals/ReferenceModal.vue
@@ -56,6 +56,9 @@ export default {
   components: {
     Modal
   },
+  mounted: function() {
+    this.$children[0].isMaximized = true;
+  },
   computed: {
     rolesGrouped: function() {
       const rolesGrouped = {};

From 6d649a963a1c6e14df7fa9430dbad0157012555f Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Wed, 10 Feb 2021 22:49:10 +0000
Subject: [PATCH 07/14] minor requested changes

---
 src/components/modals/Modal.vue           | 7 ++-----
 src/components/modals/NightOrderModal.vue | 4 ++--
 src/components/modals/ReferenceModal.vue  | 9 +++------
 3 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue
index 815f66c..936717f 100644
--- a/src/components/modals/Modal.vue
+++ b/src/components/modals/Modal.vue
@@ -10,7 +10,7 @@
         @click.stop=""
       >
         <font-awesome-icon
-          @click="toggleMaximized"
+          @click="isMaximized = !isMaximized"
           class="maximize-toggle"
           icon="window-maximize"
         />
@@ -31,9 +31,6 @@ export default {
   methods: {
     close() {
       this.$emit("close");
-    },
-    toggleMaximized() {
-      this.isMaximized = !this.isMaximized;
     }
   }
 };
@@ -73,7 +70,7 @@ export default {
     justify-content: center;
     line-height: 100%;
   }
-  .close {
+  > .close {
     position: absolute;
     right: 20px;
     top: 20px;
diff --git a/src/components/modals/NightOrderModal.vue b/src/components/modals/NightOrderModal.vue
index a53bded..284b9b2 100644
--- a/src/components/modals/NightOrderModal.vue
+++ b/src/components/modals/NightOrderModal.vue
@@ -7,7 +7,7 @@
     <font-awesome-icon
       @click="toggleModal('reference')"
       icon="address-card"
-      class="toggle-reference"
+      class="toggle"
       title="Show Character Reference"
     />
     <h3>
@@ -154,7 +154,7 @@ export default {
 <style lang="scss" scoped>
 @import "../../vars.scss";
 
-.toggle-reference {
+.toggle {
   position: absolute;
   left: 20px;
   top: 20px;
diff --git a/src/components/modals/ReferenceModal.vue b/src/components/modals/ReferenceModal.vue
index 8519e46..a86de7e 100644
--- a/src/components/modals/ReferenceModal.vue
+++ b/src/components/modals/ReferenceModal.vue
@@ -7,7 +7,7 @@
     <font-awesome-icon
       @click="toggleModal('nightOrder')"
       icon="cloud-moon"
-      class="nightorder-toggle"
+      class="toggle"
       title="Show Night Order"
     />
     <h3>
@@ -56,9 +56,6 @@ export default {
   components: {
     Modal
   },
-  mounted: function() {
-    this.$children[0].isMaximized = true;
-  },
   computed: {
     rolesGrouped: function() {
       const rolesGrouped = {};
@@ -95,7 +92,7 @@ export default {
 <style lang="scss" scoped>
 @import "../../vars.scss";
 
-.nightorder-toggle {
+.toggle {
   position: absolute;
   left: 20px;
   top: 20px;
@@ -116,7 +113,7 @@ h4 {
   text-transform: capitalize;
   display: flex;
   align-items: center;
-  height: 12px;
+  height: 20px;
   &:before,
   &:after {
     content: " ";

From 61be9aa8d08cc11532c259cfee1974af7d657f38 Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Fri, 12 Feb 2021 18:00:59 +0000
Subject: [PATCH 08/14] more requested changes

---
 src/components/modals/Modal.vue            | 36 +++++++++++++++-------
 src/components/modals/NightOrderModal.vue  |  2 +-
 src/components/modals/ReferenceModal.vue   |  2 +-
 src/components/modals/VoteHistoryModal.vue |  3 +-
 src/main.js                                |  3 +-
 5 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue
index 936717f..e92d8ac 100644
--- a/src/components/modals/Modal.vue
+++ b/src/components/modals/Modal.vue
@@ -12,6 +12,13 @@
         <font-awesome-icon
           @click="isMaximized = !isMaximized"
           class="maximize-toggle"
+          v-if="isMaximized"
+          icon="window-minimize"
+        />
+        <font-awesome-icon
+          @click="isMaximized = !isMaximized"
+          class="maximize-toggle"
+          v-if="!isMaximized"
           icon="window-maximize"
         />
         <font-awesome-icon @click="close" class="close" icon="times-circle" />
@@ -57,7 +64,13 @@ export default {
   box-shadow: 2px 2px 20px 1px #000;
   display: flex;
   flex-direction: column;
-  overflow-y: auto;
+  max-width: 60%;
+
+  .vote-history &,
+  .night-reference &,
+  .characters & {
+    overflow-y: auto;
+  }
 
   ul {
     list-style-type: none;
@@ -80,9 +93,10 @@ export default {
       color: red;
     }
   }
-  .maximize-toggle {
+  > .maximize-toggle {
+    z-index: 100;
     position: absolute;
-    right: 55px;
+    right: 52px;
     top: 20px;
     cursor: pointer;
     &:hover {
@@ -91,6 +105,11 @@ export default {
   }
 }
 
+.not-maximized {
+  max-height: 80%;
+  max-width: 80%;
+}
+
 .maximized {
   background: rgba(0, 0, 0, 0.95);
   padding: 0;
@@ -98,14 +117,9 @@ export default {
   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%;
+  display: flex;
+  align-content: center;
+  //justify-content: center;
 }
 
 .modal-fade-enter,
diff --git a/src/components/modals/NightOrderModal.vue b/src/components/modals/NightOrderModal.vue
index 284b9b2..56ca3e2 100644
--- a/src/components/modals/NightOrderModal.vue
+++ b/src/components/modals/NightOrderModal.vue
@@ -165,7 +165,7 @@ export default {
 }
 
 h3 {
-  margin: 0 90px;
+  margin: 0 40px;
   svg {
     vertical-align: middle;
   }
diff --git a/src/components/modals/ReferenceModal.vue b/src/components/modals/ReferenceModal.vue
index a86de7e..d16de9d 100644
--- a/src/components/modals/ReferenceModal.vue
+++ b/src/components/modals/ReferenceModal.vue
@@ -103,7 +103,7 @@ export default {
 }
 
 h3 {
-  margin: 0 90px;
+  margin: 0 40px;
   svg {
     vertical-align: middle;
   }
diff --git a/src/components/modals/VoteHistoryModal.vue b/src/components/modals/VoteHistoryModal.vue
index 033d543..29866ff 100644
--- a/src/components/modals/VoteHistoryModal.vue
+++ b/src/components/modals/VoteHistoryModal.vue
@@ -99,7 +99,7 @@ export default {
 }
 
 h3 {
-  margin: 0 90px;
+  margin: 0 90px 0 10px;
   svg {
     vertical-align: middle;
   }
@@ -107,7 +107,6 @@ h3 {
 
 table {
   border-spacing: 10px 0;
-  padding: 10px 0px 0px 0px;
 }
 
 thead td {
diff --git a/src/main.js b/src/main.js
index c8f1e6d..06cf614 100644
--- a/src/main.js
+++ b/src/main.js
@@ -46,7 +46,8 @@ const faIcons = [
   "VolumeUp",
   "VolumeMute",
   "VoteYea",
-  "WindowMaximize"
+  "WindowMaximize",
+  "WindowMinimize"
 ];
 const fabIcons = ["Github", "Discord"];
 library.add(

From 00680533a505509e65f9706b7f33236c42b52fb5 Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Fri, 12 Feb 2021 18:07:00 +0000
Subject: [PATCH 09/14] fit to screen nicely

---
 src/components/modals/Modal.vue          | 1 -
 src/components/modals/ReferenceModal.vue | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue
index e92d8ac..5145640 100644
--- a/src/components/modals/Modal.vue
+++ b/src/components/modals/Modal.vue
@@ -119,7 +119,6 @@ export default {
   max-height: 100%;
   display: flex;
   align-content: center;
-  //justify-content: center;
 }
 
 .modal-fade-enter,
diff --git a/src/components/modals/ReferenceModal.vue b/src/components/modals/ReferenceModal.vue
index d16de9d..9999a30 100644
--- a/src/components/modals/ReferenceModal.vue
+++ b/src/components/modals/ReferenceModal.vue
@@ -190,7 +190,7 @@ ul {
       &:after {
         content: " ";
         display: block;
-        padding-top: 66%;
+        padding-top: 65%;
       }
     }
     .name {

From f463d5195bb45c4d15246347efa73e82ca860e4a Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Fri, 12 Feb 2021 18:19:34 +0000
Subject: [PATCH 10/14] minor add.

---
 src/components/modals/VoteHistoryModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/modals/VoteHistoryModal.vue b/src/components/modals/VoteHistoryModal.vue
index 29866ff..6037977 100644
--- a/src/components/modals/VoteHistoryModal.vue
+++ b/src/components/modals/VoteHistoryModal.vue
@@ -99,7 +99,7 @@ export default {
 }
 
 h3 {
-  margin: 0 90px 0 10px;
+  margin: 0 40px 0 10px;
   svg {
     vertical-align: middle;
   }

From 2db244b14b4408349c84014cac93d45bc9bc32f6 Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Fri, 12 Feb 2021 22:53:49 +0000
Subject: [PATCH 11/14] fix votehistory alignment

when maximized
---
 src/components/modals/VoteHistoryModal.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/modals/VoteHistoryModal.vue b/src/components/modals/VoteHistoryModal.vue
index 6037977..d797ddc 100644
--- a/src/components/modals/VoteHistoryModal.vue
+++ b/src/components/modals/VoteHistoryModal.vue
@@ -107,6 +107,8 @@ h3 {
 
 table {
   border-spacing: 10px 0;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 thead td {

From 081bfbc6957fe7e488c06f676cd3e8334775dbc8 Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Sun, 14 Feb 2021 16:14:59 +0000
Subject: [PATCH 12/14] align h/v center when maximized

---
 src/components/modals/Modal.vue          | 2 ++
 src/components/modals/ReferenceModal.vue | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue
index 5145640..fde2c3f 100644
--- a/src/components/modals/Modal.vue
+++ b/src/components/modals/Modal.vue
@@ -119,6 +119,8 @@ export default {
   max-height: 100%;
   display: flex;
   align-content: center;
+  align-items: center;
+  justify-content: safe center;
 }
 
 .modal-fade-enter,
diff --git a/src/components/modals/ReferenceModal.vue b/src/components/modals/ReferenceModal.vue
index 9999a30..25a9c3a 100644
--- a/src/components/modals/ReferenceModal.vue
+++ b/src/components/modals/ReferenceModal.vue
@@ -214,6 +214,7 @@ ul {
     }
   }
   &.legend {
+    width: 100%;
     font-weight: bold;
     height: 20px;
     margin-top: 10px;

From 60dcd956e2ee1df6a69643987adfc2e898be30c8 Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Thu, 4 Mar 2021 10:15:18 +0000
Subject: [PATCH 13/14] requested changes

---
 src/components/modals/Modal.vue            | 59 +++++++++-------------
 src/components/modals/NightOrderModal.vue  |  2 +-
 src/components/modals/ReferenceModal.vue   |  2 +-
 src/components/modals/VoteHistoryModal.vue |  2 +-
 4 files changed, 26 insertions(+), 39 deletions(-)

diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue
index fde2c3f..fb4f635 100644
--- a/src/components/modals/Modal.vue
+++ b/src/components/modals/Modal.vue
@@ -3,25 +3,24 @@
     <div class="modal-backdrop" @click="close">
       <div
         class="modal"
-        v-bind:class="[isMaximized ? 'maximized' : 'not-maximized']"
+        :class="{ maximized: isMaximized }"
         role="dialog"
         aria-labelledby="modalTitle"
         aria-describedby="modalDescription"
         @click.stop=""
       >
-        <font-awesome-icon
-          @click="isMaximized = !isMaximized"
-          class="maximize-toggle"
-          v-if="isMaximized"
-          icon="window-minimize"
-        />
-        <font-awesome-icon
-          @click="isMaximized = !isMaximized"
-          class="maximize-toggle"
-          v-if="!isMaximized"
-          icon="window-maximize"
-        />
-        <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>
         <slot></slot>
       </div>
     </div>
@@ -64,7 +63,8 @@ export default {
   box-shadow: 2px 2px 20px 1px #000;
   display: flex;
   flex-direction: column;
-  max-width: 60%;
+  max-height: 80%;
+  max-width: 80%;
 
   .vote-history &,
   .night-reference &,
@@ -83,33 +83,21 @@ export default {
     justify-content: center;
     line-height: 100%;
   }
-  > .close {
+  > .top-right-buttons {
     position: absolute;
-    right: 20px;
-    top: 20px;
-    cursor: pointer;
-    z-index: 5;
-    &:hover {
-      color: red;
-    }
-  }
-  > .maximize-toggle {
     z-index: 100;
-    position: absolute;
-    right: 52px;
     top: 20px;
-    cursor: pointer;
-    &:hover {
-      color: red;
+    right: 20px;
+    > .top-right-button {
+      cursor: pointer;
+      width: 28px;
+      &:hover {
+        color: red;
+      }
     }
   }
 }
 
-.not-maximized {
-  max-height: 80%;
-  max-width: 80%;
-}
-
 .maximized {
   background: rgba(0, 0, 0, 0.95);
   padding: 0;
@@ -119,7 +107,6 @@ export default {
   max-height: 100%;
   display: flex;
   align-content: center;
-  align-items: center;
   justify-content: safe center;
 }
 
diff --git a/src/components/modals/NightOrderModal.vue b/src/components/modals/NightOrderModal.vue
index 56ca3e2..a572cfa 100644
--- a/src/components/modals/NightOrderModal.vue
+++ b/src/components/modals/NightOrderModal.vue
@@ -2,7 +2,7 @@
   <Modal
     class="night-reference"
     @close="toggleModal('nightOrder')"
-    v-show="modals.nightOrder && roles.size"
+    v-if="modals.nightOrder && roles.size"
   >
     <font-awesome-icon
       @click="toggleModal('reference')"
diff --git a/src/components/modals/ReferenceModal.vue b/src/components/modals/ReferenceModal.vue
index 25a9c3a..393dd42 100644
--- a/src/components/modals/ReferenceModal.vue
+++ b/src/components/modals/ReferenceModal.vue
@@ -2,7 +2,7 @@
   <Modal
     class="characters"
     @close="toggleModal('reference')"
-    v-show="modals.reference && roles.size"
+    v-if="modals.reference && roles.size"
   >
     <font-awesome-icon
       @click="toggleModal('nightOrder')"
diff --git a/src/components/modals/VoteHistoryModal.vue b/src/components/modals/VoteHistoryModal.vue
index d797ddc..bf6331a 100644
--- a/src/components/modals/VoteHistoryModal.vue
+++ b/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

From 7fade338ea0d74a8b385db2005946e04cbaddca7 Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Sun, 7 Mar 2021 21:55:14 +0000
Subject: [PATCH 14/14] fix scrolling to top when tall modal is maximized

---
 src/components/modals/Modal.vue            | 14 +++++++++++---
 src/components/modals/NightOrderModal.vue  |  2 +-
 src/components/modals/ReferenceModal.vue   |  2 +-
 src/components/modals/VoteHistoryModal.vue |  2 +-
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue
index fb4f635..3a6d932 100644
--- a/src/components/modals/Modal.vue
+++ b/src/components/modals/Modal.vue
@@ -21,7 +21,9 @@
             icon="times-circle"
           />
         </div>
-        <slot></slot>
+        <div class="slot">
+          <slot></slot>
+        </div>
       </div>
     </div>
   </transition>
@@ -83,10 +85,11 @@ export default {
     justify-content: center;
     line-height: 100%;
   }
+
   > .top-right-buttons {
     position: absolute;
     z-index: 100;
-    top: 20px;
+    top: 15px;
     right: 20px;
     > .top-right-button {
       cursor: pointer;
@@ -96,6 +99,11 @@ export default {
       }
     }
   }
+
+  > .slot {
+    max-height: 100%;
+    position: initial;
+  }
 }
 
 .maximized {
@@ -107,7 +115,7 @@ export default {
   max-height: 100%;
   display: flex;
   align-content: center;
-  justify-content: safe center;
+  justify-content: center;
 }
 
 .modal-fade-enter,
diff --git a/src/components/modals/NightOrderModal.vue b/src/components/modals/NightOrderModal.vue
index a572cfa..de7a879 100644
--- a/src/components/modals/NightOrderModal.vue
+++ b/src/components/modals/NightOrderModal.vue
@@ -157,7 +157,7 @@ export default {
 .toggle {
   position: absolute;
   left: 20px;
-  top: 20px;
+  top: 15px;
   cursor: pointer;
   &:hover {
     color: red;
diff --git a/src/components/modals/ReferenceModal.vue b/src/components/modals/ReferenceModal.vue
index 393dd42..9ddbc7b 100644
--- a/src/components/modals/ReferenceModal.vue
+++ b/src/components/modals/ReferenceModal.vue
@@ -95,7 +95,7 @@ export default {
 .toggle {
   position: absolute;
   left: 20px;
-  top: 20px;
+  top: 15px;
   cursor: pointer;
   &:hover {
     color: red;
diff --git a/src/components/modals/VoteHistoryModal.vue b/src/components/modals/VoteHistoryModal.vue
index bf6331a..95eeaa8 100644
--- a/src/components/modals/VoteHistoryModal.vue
+++ b/src/components/modals/VoteHistoryModal.vue
@@ -91,7 +91,7 @@ export default {
 .clear {
   position: absolute;
   left: 20px;
-  top: 20px;
+  top: 15px;
   cursor: pointer;
   &:hover {
     color: red;