update Voting App.vue, CodeModal, ballot-modal.scss, fix some voting screen issues with the modal

Author: jeffreywhitaker

src/styles/ballot-modal.scss

@@ -1,17 +1,16 @@
 .v-dialog {
   width: fit-content;
-  max-width: 90%;
 }
 
 .v-card.ballot-modal {
   padding: 0;
   height: 600px;
+  min-width: 1200px;
   width: fit-content;
-  min-width: 1000px;
+  display: flex;
 
   pre,
   code {
-    width: 100% !important;
     height: 100%;
     background-color: $cwhqBlue;
     color: $cwhqYellow;
@@ -25,17 +24,23 @@
     padding: 20px;
   }
 
-  .main-row {
+
+  > * {
     height: 600px;
+  }
 
-    > * {
-      height: 600px;
-    }
+  .right {
+    width: 380px;
+  }
+
+  .v-form label {
+    font-size: 15px !important;
   }
 
   .left {
     padding: 20px;
     text-align: center;
+    max-width: fit-content;
 
     * {
       box-shadow: none !important;

src/views/Voting/App.vue

@@ -2,7 +2,7 @@
   <v-app class="cwhq-app voting">
     <CWHQ-bar />
     <!-- <app-bar /> -->
-    <v-main>
+    <v-main class="voting-main">
       <router-view />
     </v-main>
     <mobile-warning />
@@ -23,3 +23,9 @@ export default {
   }
 };
 </script>
+
+<style lang="scss" scoped>
+.voting-main {
+  background: white;
+}
+</style>

src/views/Voting/CodeModal.vue

@@ -8,79 +8,65 @@
         light
         v-if="isOpen"
       >
-        <v-row class="main-row" no-gutters>
-          <v-col cols="3" sm="12" md="3" class="left">
-            <div class="circle">
-              {{ initials }}
-            </div>
-            <div class="username mb-2">
-              {{ username }}
-            </div>
-            <hr />
-            <v-form lazy-validation @submit.prevent="submit">
-              <v-text-field
-                single-line
-                outlined
-                solo
-                v-bind="fields.email"
-                v-model="fields.email.value"
-                :disabled="isSubmitting"
-              />
+        <!-- <v-row class="main-row" no-gutters> -->
+        <v-col cols="3" sm="12" md="3" class="left">
+          <div class="circle">
+            {{ initials }}
+          </div>
+          <div class="username mb-2">
+            {{ username }}
+          </div>
+          <hr />
+          <v-form lazy-validation @submit.prevent="submit">
+            <v-text-field
+              single-line
+              outlined
+              solo
+              v-bind="fields.email"
+              v-model="fields.email.value"
+              :disabled="isSubmitting"
+            />
+            <v-btn
+              block
+              tile
+              color="cwhqBlue"
+              type="submit"
+              :disabled="isSubmitting"
+              >Confirm Vote</v-btn
+            >
+
+            <v-row no-gutters class="icons" justify="center">
               <v-btn
-                block
-                tile
+                fab
                 color="cwhqBlue"
-                type="submit"
-                :disabled="isSubmitting"
-                >Confirm Vote</v-btn
+                icon
+                target="_blank"
+                :href="facebookUrl"
               >
-
-              <v-row no-gutters class="icons" justify="center">
-                <v-btn
-                  fab
-                  color="cwhqBlue"
-                  icon
-                  target="_blank"
-                  :href="facebookUrl"
-                >
-                  <v-icon>mdi-facebook</v-icon>
-                </v-btn>
-                <v-btn
-                  fab
-                  color="cwhqBlue"
-                  icon
-                  target="_blank"
-                  :href="twitterUrl"
-                >
-                  <v-icon>mdi-twitter</v-icon>
-                </v-btn>
-                <v-btn
-                  fab
-                  color="cwhqBlue"
-                  icon
-                  target="_blank"
-                  :href="mailUrl"
-                >
-                  <v-icon>mdi-email</v-icon>
-                </v-btn>
-                <v-btn
-                  fab
-                  color="cwhqBlue"
-                  icon
-                  target="_blank"
-                  :href="linkUrl"
-                >
-                  <v-icon>mdi-link</v-icon>
-                </v-btn>
-              </v-row>
-            </v-form>
-          </v-col>
-          <v-col class="right">
-            <pre
-              v-highlightjs="sourceCode"
-            ><code :class="codeType"></code></pre>
-          </v-col>
-        </v-row>
+                <v-icon>mdi-facebook</v-icon>
+              </v-btn>
+              <v-btn
+                fab
+                color="cwhqBlue"
+                icon
+                target="_blank"
+                :href="twitterUrl"
+              >
+                <v-icon>mdi-twitter</v-icon>
+              </v-btn>
+              <v-btn fab color="cwhqBlue" icon target="_blank" :href="mailUrl">
+                <v-icon>mdi-email</v-icon>
+              </v-btn>
+              <v-btn fab color="cwhqBlue" icon target="_blank" :href="linkUrl">
+                <v-icon>mdi-link</v-icon>
+              </v-btn>
+            </v-row>
+          </v-form>
+        </v-col>
+        <v-col class="right">
+          <pre v-highlightjs="sourceCode"><code :class="codeType"></code></pre>
+        </v-col>
+        <!-- </v-row> -->
       </v-card>
     </v-dialog>