simplify footer on lower res screens

Author: mrfrase3

src/App.vue

@@ -88,19 +88,58 @@
             v{{version}}
           </small>
         </div>
-        <div class="ml-2">
-          <v-btn href="https://github.com/duinoapp/duinoapp-client/issues" target="_blank" rel="noopener noreferrer" text small>
-            <v-icon small left>mdi-bug-outline</v-icon>
-            Issues
-          </v-btn>
-          <v-btn href="https://github.com/duinoapp/duinoapp-client/wiki/Privacy-Policy" target="_blank" rel="noopener noreferrer" text small>
-            <v-icon small left>mdi-incognito</v-icon>
-            Privacy
-          </v-btn>
-          <v-btn href="https://github.com/duinoapp/duinoapp-client/wiki/Terms-of-Service" target="_blank" rel="noopener noreferrer" text small>
-            <v-icon small left>mdi-scale-balance</v-icon>
-            Terms
-          </v-btn>
+        <div :class="{ 'ml-2': true, 'mr-auto': $vuetify.breakpoint.mdAndDown }">
+          <v-tooltip top>
+            <template #activator="{ on }">
+              <v-btn
+                href="https://github.com/duinoapp/duinoapp-client/issues"
+                target="_blank"
+                rel="noopener noreferrer"
+                :text="!$vuetify.breakpoint.mdAndDown"
+                :icon="$vuetify.breakpoint.mdAndDown"
+                small
+                v-on="on"
+              >
+                <v-icon small left>mdi-bug-outline</v-icon>
+                {{ !$vuetify.breakpoint.mdAndDown ? 'Issues' : '' }}
+              </v-btn>
+            </template>
+            <span>Report an Issue/Bug</span>
+          </v-tooltip>
+          <v-tooltip top>
+            <template #activator="{ on }">
+              <v-btn
+                href="https://github.com/duinoapp/duinoapp-client/wiki/Privacy-Policy"
+                target="_blank"
+                rel="noopener noreferrer"
+                :text="!$vuetify.breakpoint.mdAndDown"
+                :icon="$vuetify.breakpoint.mdAndDown"
+                small
+                v-on="on"
+              >
+                <v-icon small left>mdi-incognito</v-icon>
+                {{ !$vuetify.breakpoint.mdAndDown ? 'Privacy' : '' }}
+              </v-btn>
+            </template>
+            <span>Privacy Policy</span>
+          </v-tooltip>
+          <v-tooltip top>
+            <template #activator="{ on }">
+              <v-btn
+                href="https://github.com/duinoapp/duinoapp-client/wiki/Terms-of-Service"
+                target="_blank"
+                rel="noopener noreferrer"
+                :text="!$vuetify.breakpoint.mdAndDown"
+                :icon="$vuetify.breakpoint.mdAndDown"
+                small
+                v-on="on"
+              >
+                <v-icon small left>mdi-scale-balance</v-icon>
+                {{ !$vuetify.breakpoint.mdAndDown ? 'Terms' : '' }}
+              </v-btn>
+            </template>
+            <span>Terms of Service</span>
+          </v-tooltip>
         </div>
         <v-spacer/>
         <serial-footer v-if="serialReady" />

src/components/boards/footer-btn.vue

@@ -3,7 +3,9 @@
     <v-tooltip top v-if="currentBoard">
       <template v-slot:activator="{ on }">
         <v-btn text dense small v-on="on" to="/tools/boards">
-          Board: {{currentBoard.fqbn.split(':').shift()}} {{currentBoard.fqbn.split(':').pop()}}
+          <v-icon v-show="$vuetify.breakpoint.mdAndDown" small left>mdi-chip</v-icon>
+          <span v-show="!$vuetify.breakpoint.mdAndDown">Board:</span>
+          {{currentBoard.fqbn.split(':').shift()}} {{currentBoard.fqbn.split(':').pop()}}
         </v-btn>
       </template>
       <span>{{currentBoard.name}}</span>

src/components/serial/footer-btn.vue

@@ -3,9 +3,11 @@
     <!-- eslint-disable-next-line vue/no-unused-vars -->
     <template #activator="{ on }">
       <v-btn text dense small @click="activate(on)" v-if="currentDevice">
-        Serial: {{deviceName}}
+        <v-icon v-show="$vuetify.breakpoint.mdAndDown" small left>mdi-usb-port</v-icon>
+        <span v-show="!$vuetify.breakpoint.mdAndDown">Serial:</span>
+        {{deviceName}}
       </v-btn>
-      <v-btn text dense small @click="activate" v-else>Select Device Port</v-btn>
+      <v-btn text dense small @click="activate" v-else>Select Device</v-btn>
     </template>
     <v-list dense :style="{ padding: '0' }">
       <v-list-item

src/components/servers/footer-btn.vue

@@ -3,18 +3,18 @@
     <v-tooltip top v-if="currentServer">
       <template v-slot:activator="{ on }">
         <v-btn text dense small to="/tools/servers" v-on="on">
-          Server:
+        <v-icon v-show="$vuetify.breakpoint.mdAndDown" small left>mdi-server</v-icon>
+        <span v-show="!$vuetify.breakpoint.mdAndDown">Server:</span>
           <v-chip
             :color="currentServer.valid ? 'success' : 'error'"
             class="mx-1"
             x-small
           >
             {{currentServer.valid ? 'Online' : 'Offline'}}
           </v-chip>
-          {{flag}}
         </v-btn>
       </template>
-      <span>{{currentServer.name}} ({{currentServer.country}})</span>
+      <span>{{flag}} {{currentServer.name}}</span>
     </v-tooltip>
     <v-btn v-else text dense small to="/tools/servers">Select Server</v-btn>
   </div>