Merge branch 'master' of https://github.com/massif-press/compcon

Tidomann · Jun 28, 2022 · a148092 · a148092
2 parents 73395f3 + 8189484
commit a148092
Show file tree

Hide file tree

Showing 24 changed files with 192 additions and 116 deletions.
diff --git a/src/features/compendium/components/CompendiumPageButton.vue b/src/features/compendium/components/CompendiumPageButton.vue
@@ -1,6 +1,6 @@
 <template>
   <v-col :cols="cols" :lg="lg" :md="md" :sm="sm">
-    <div class="mx-2" @click="$emit('clicked')">
+    <div class="mx-2" @click="$emit('clicked')" @keydown.enter="$emit('clicked')" tabindex="0">
       <v-alert outlined :color="color" prominent dense border="left">
         <v-icon slot="prepend" class="icn" x-large :color="`${color} lighten-1`" left>
           {{ icon }}
@@ -14,8 +14,8 @@
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator'
 
-@Component({ name: 'cc-major-btn' })
-export default class CCMajorButton extends Vue {
+@Component({ name: 'cc-compendium-page-btn' })
+export default class CompendiumPageButton extends Vue {
   @Prop({ type: String, required: true })
   readonly name!: string
 

diff --git a/src/features/compendium/components/views/components/CompendiumCard.vue b/src/features/compendium/components/views/components/CompendiumCard.vue
@@ -6,6 +6,7 @@
         :color="hover ? 'panel lighten-1' : 'panel'"
         tile
         @click="$refs.dialog.show()"
+        @keydown.enter="$refs.dialog.show()"
       >
         <frame-card-content
           v-if="item.ItemType === 'Frame'"

diff --git a/src/features/encounters/components/HomeCard.vue b/src/features/encounters/components/HomeCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card ripple :to="to" outlined tile class="text-center">
+  <v-card ripple :to="to" outlined tile class="card text-center">
     <div class="primary fade pt-10 pb-10">
       <v-icon dark size="180">
         {{ icon }}
@@ -32,7 +32,8 @@ export default {
   transition: all ease-in-out 0.2s;
 }
 
-.fade:hover {
+.fade:hover,
+.card:focus .fade {
   background-color: var(--v-active-base) !important;
 }
 </style>
diff --git a/src/features/encounters/mission/runner/Debriefing.vue b/src/features/encounters/mission/runner/Debriefing.vue
@@ -30,10 +30,12 @@
       <br />
       // FEATURE IN DEVELOPMENT //
     </p>
-    <v-btn text color="primary" to="/gm/mission/selector">
-      <v-icon left>mdi-chevron-triple-left</v-icon>
-      Return to Mission Menu
-    </v-btn>
+    <router-link to="/gm/mission/selector">
+      <v-btn text color="primary">
+        <v-icon left>mdi-chevron-triple-left</v-icon>
+        Return to Mission Menu
+      </v-btn>
+    </router-link>
   </v-container>
 </template>
 

diff --git a/src/features/encounters/mission/runner/index.vue b/src/features/encounters/mission/runner/index.vue
@@ -52,10 +52,12 @@
                 </v-card-text>
               </v-card>
             </v-menu>
-            <v-btn small tile color="primary" class="white--text" :to="`runner/${item.ID}`">
-              CONTINUE MISSION
-              <v-icon right>mdi-chevron-double-right</v-icon>
-            </v-btn>
+            <router-link :to="`runner/${item.ID}`">
+              <v-btn small tile color="primary" class="white--text">
+                CONTINUE MISSION
+                <v-icon right>mdi-chevron-double-right</v-icon>
+              </v-btn>
+            </router-link>
           </template>
         </v-data-table>
       </v-col>

diff --git a/src/features/encounters/npc/new/index.vue b/src/features/encounters/npc/new/index.vue
@@ -86,10 +86,12 @@
             <span v-if="selectedClass">Add New {{ selectedClass.Name }}</span>
             <span v-else>Select NPC Class</span>
           </v-btn>
-          <v-btn outlined block small class="mt-1" to="/gm/npc-roster">
-            <v-icon left>mdi-chevron-left</v-icon>
-            Return to NPC Roster
-          </v-btn>
+          <router-link to="/gm/npc-roster">
+            <v-btn outlined block small class="mt-1">
+              <v-icon left>mdi-chevron-left</v-icon>
+              Return to NPC Roster
+            </v-btn>
+          </router-link>
         </v-col>
       </v-row>
     </template>

diff --git a/src/features/main_menu/_components/MainBtn.vue b/src/features/main_menu/_components/MainBtn.vue
@@ -6,7 +6,11 @@
         @mouseenter="$emit('hover')"
         @mouseover="mouseOver = true"
         @mouseleave="mouseOver = false"
-        @click="to ? $router.push(to) : $emit('clicked')"
+        @focusin="mouseOver = true"
+        @focusout="mouseOver = false"
+        @click="doAction"
+        @keydown.enter="doAction"
+        tabindex="0"
       >
         <div class="unskew heading pb-1">
           <v-icon dark size="50" class="ml-n4 mt-n3">{{ icon }}</v-icon>
@@ -49,6 +53,15 @@ export default Vue.extend({
   data: () => ({
     mouseOver: false,
   }),
+  methods: {
+    doAction() {
+      if(this.to) {
+        this.$router.push(this.to)
+      } else {
+        this.$emit('clicked')
+      }
+    },
+  },
 })
 </script>
 
@@ -90,8 +103,10 @@ export default Vue.extend({
   background: var(--v-primary-base);
   z-index: 5;
   transition: all ease-in-out 0.45s;
+  outline: none;
 }
-.btn-main:not(.disabled):hover {
+.btn-main:not(.disabled):hover,
+.btn-main:not(.disabled):focus {
   background-color: var(--v-active-base);
   transition: all ease-in-out 0.45s;
 }
@@ -105,7 +120,8 @@ export default Vue.extend({
   transition: all ease-in-out 0.45s;
   z-index: 4;
 }
-.btn-main:not(.disabled):hover::after {
+.btn-main:not(.disabled):hover::after,
+.btn-main:not(.disabled):focus::after {
   left: 625px;
   background: var(--v-active-base);
   transition: all ease-in-out 0.45s;
@@ -120,7 +136,8 @@ export default Vue.extend({
   transition: all ease-in-out 0.45s;
   z-index: 4;
 }
-.btn-main:not(.disabled):hover::before {
+.btn-main:not(.disabled):hover::before,
+.btn-main:not(.disabled):focus::before {
   left: 650px;
   background: var(--v-active-base);
   transition: all ease-in-out 0.45s;

diff --git a/src/features/main_menu/_components/MainTitle.vue b/src/features/main_menu/_components/MainTitle.vue
@@ -24,6 +24,7 @@
           style="z-index: 999 !important"
           class="mt-2 mr-2"
           @mouseenter="$emit('logupdate')"
+          tabindex="0"
         >
           View Changelog
         </v-btn>

diff --git a/src/features/main_menu/desktop.vue b/src/features/main_menu/desktop.vue
@@ -157,6 +157,7 @@
                 dark
                 text
                 href="https://www.patreon.com/compcon"
+                tabindex="0"
               >
                 Support This Project
               </v-btn>

diff --git a/src/features/nav/index.vue b/src/features/nav/index.vue
@@ -39,9 +39,12 @@
 
     <v-tooltip bottom open-delay="500ms">
       <template v-slot:activator="{ on }">
-        <v-btn text icon to="/compendium" v-on="on">
-          <v-icon color="white">mdi-book</v-icon>
-        </v-btn>
+        <!-- Using <a> around the button lets it link properly without breaking the button styling like `to` does.-->
+        <router-link to="/compendium">
+          <v-btn text icon v-on="on">
+            <v-icon dark>mdi-book</v-icon>
+          </v-btn>
+        </router-link>
       </template>
       <span>Compendium</span>
     </v-tooltip>

diff --git a/src/features/nav/modes/compendium.vue b/src/features/nav/modes/compendium.vue
@@ -1,8 +1,12 @@
 <template>
   <div>
-    <v-btn text color="white" tile to="/gm">Encounter Toolkit</v-btn>
+    <router-link to="/gm">
+      <v-btn text color="white" tile>Encounter Toolkit</v-btn>
+    </router-link>
     <v-divider vertical dark class="ml-2 mr-2" />
-    <v-btn text color="white" tile to="/pilot_management">Pilot Roster</v-btn>
+    <router-link to="/pilot_management">
+      <v-btn text color="white" tile>Pilot Roster</v-btn>
+    </router-link>
     <v-divider vertical dark class="ml-2 mr-2" />
   </div>
 </template>

diff --git a/src/features/nav/modes/encounter.vue b/src/features/nav/modes/encounter.vue
@@ -1,18 +1,28 @@
 <template>
   <div>
-    <v-btn text color="white" tile to="/gm/npc-roster">NPC Roster</v-btn>
+    <router-link to="/gm/npc-roster">
+      <v-btn text color="white" tile>NPC Roster</v-btn>
+    </router-link>
     <v-divider vertical dark class="ml-2 mr-2" />
-    <v-btn text color="white" tile to="/gm/encounter-builder">Encounters</v-btn>
+    <router-link to="/gm/encounter-builder">
+      <v-btn text color="white" tile>Encounters</v-btn>
+    </router-link>
     <v-divider vertical dark class="ml-2 mr-2" />
-    <v-btn v-if="$vuetify.breakpoint.lgAndUp" text color="white" tile to="/gm/mission/builder">
-      Mission Builder
-    </v-btn>
-    <v-btn v-if="$vuetify.breakpoint.lgAndUp" text color="white" tile to="/gm/mission/selector">
-      Mission Runner
-    </v-btn>
-    <v-btn v-if="!$vuetify.breakpoint.lgAndUp" text color="white" tile to="/gm/mission">
-      Missions
-    </v-btn>
+    <router-link to="/gm/mission/builder">
+      <v-btn v-if="$vuetify.breakpoint.lgAndUp" text color="white" tile>
+        Mission Builder
+      </v-btn>
+    </router-link>
+    <router-link to="/gm/mission/selector">
+      <v-btn v-if="$vuetify.breakpoint.lgAndUp" text color="white" tile>
+        Mission Runner
+      </v-btn>
+    </router-link>
+    <router-link to="/gm/mission">
+      <v-btn v-if="!$vuetify.breakpoint.lgAndUp" text color="white" tile>
+        Missions
+      </v-btn>
+    </router-link>
     <v-divider vertical dark class="ml-2 mr-2" />
   </div>
 </template>

diff --git a/src/features/nav/modes/pilot.vue b/src/features/nav/modes/pilot.vue
@@ -1,6 +1,8 @@
 <template>
   <div>
-    <v-btn text color="white" tile to="/pilot_management">Pilot Roster</v-btn>
+    <router-link to="/pilot_management">
+      <v-btn text color="white" tile>Pilot Roster</v-btn>
+    </router-link>
     <v-divider v-if="pilot" vertical dark class="ml-2 mr-2" />
     <v-menu v-if="pilot" nudge-bottom="35px" open-on-hover>
       <template v-slot:activator="{ on }">

diff --git a/src/features/nav/pages/Help.vue b/src/features/nav/pages/Help.vue
@@ -9,6 +9,7 @@
           block
           color="secondary"
           class="white--text"
+          tabindex="0"
         >
           Frequently Asked Questions
         </v-btn>
@@ -21,6 +22,7 @@
           block
           color="secondary"
           class="white--text"
+          tabindex="0"
         >
           Troubleshooting FAQ
         </v-btn>
@@ -35,6 +37,7 @@
           block
           color="error"
           class="white--text"
+          tabindex="0"
         >
           Report a Bug / Suggest a Feature
         </v-btn>
@@ -101,13 +104,15 @@
         target="_blank"
         href="https://github.com/massif-press/compcon/wiki/Frequently-Asked-Questions"
         v-html="`COMP/CON FAQ`"
+        tabindex="0"
       />
       may have an answer to your question! If you still can't find what you're looking for, please
       stop by
       <a
         target="_blank"
         href="https://discord.gg/rwcpzsU"
         v-html="`the unofficial LANCER discord`"
+        tabindex="0"
       />
       (and specifically the #comp-con channel) with your questions or comments for the developers.
     </p>

diff --git a/src/features/nav/pages/Options/Settings.vue b/src/features/nav/pages/Options/Settings.vue
@@ -170,7 +170,9 @@
     </p>
 
     <div class="text-right">
-      <v-btn small text to="./ui-test">UI Test</v-btn>
+      <router-link to="./ui-test">
+        <v-btn small text>UI Test</v-btn>
+      </router-link>
     </div>
   </div>
 </template>