From 664d8c2b0ece862702ff928391de45e681a1203c Mon Sep 17 00:00:00 2001
From: Jrester <jrester379@gmail.com>
Date: Mon, 30 Mar 2020 17:41:28 +0200
Subject: [PATCH 1/2] Make client cards more responsive 	modified:  
 ui/src/components/Clients.vue

---
 ui/src/components/Clients.vue | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/ui/src/components/Clients.vue b/ui/src/components/Clients.vue
index e327b4d..988b749 100644
--- a/ui/src/components/Clients.vue
+++ b/ui/src/components/Clients.vue
@@ -19,7 +19,7 @@
                         <v-col
                                 v-for="(client, i) in clients"
                                 :key="i"
-                                cols="6"
+                                sm12 lg6
                         >
                             <v-card
                                     :color="client.enable ? '#1F7087' : 'warning'"
@@ -59,28 +59,28 @@
                                             text
                                             :href="`${apiBaseUrl}/client/${client.id}/config?qrcode=false`"
                                     >
-                                        Download
+                                        <span class="d-none d-lg-flex">Download</span>
                                         <v-icon right dark>mdi-cloud-download-outline</v-icon>
                                     </v-btn>
                                     <v-btn
                                             text
                                             @click.stop="startUpdateClient(client)"
                                     >
-                                        Edit
+                                        <span class="d-none d-lg-flex">Edit</span>
                                         <v-icon right dark>mdi-square-edit-outline</v-icon>
                                     </v-btn>
-                                    <v-btn
-                                            text
-                                            @click="deleteClient(client)"
-                                    >
-                                        Delete
-                                        <v-icon right dark>mdi-trash-can-outline</v-icon>
-                                    </v-btn>
+                                      <v-btn
+                                              text
+                                              @click="deleteClient(client)"
+                                      >
+                                          <span class="d-none d-lg-flex">Delete</span>
+                                          <v-icon right dark>mdi-trash-can-outline</v-icon>
+                                      </v-btn>
                                     <v-btn
                                             text
                                             @click="sendEmailClient(client.id)"
                                     >
-                                        Send email
+                                        <span class="d-none d-lg-flex">Send Email</span>
                                         <v-icon right dark>mdi-email-send-outline</v-icon>
                                     </v-btn>
                                     <v-spacer/>

From 8335dcf6b6444825b260f39647b46beb8093f27e Mon Sep 17 00:00:00 2001
From: Jrester <jrester379@gmail.com>
Date: Mon, 30 Mar 2020 18:12:55 +0200
Subject: [PATCH 2/2] Add tooltips to client card actions 	modified:  
 ui/src/components/Clients.vue

---
 ui/src/components/Clients.vue | 59 +++++++++++++++++++++++++----------
 1 file changed, 43 insertions(+), 16 deletions(-)

diff --git a/ui/src/components/Clients.vue b/ui/src/components/Clients.vue
index 988b749..f383e77 100644
--- a/ui/src/components/Clients.vue
+++ b/ui/src/components/Clients.vue
@@ -55,34 +55,61 @@
                                     </v-chip>
                                 </v-card-text>
                                 <v-card-actions>
-                                    <v-btn
-                                            text
-                                            :href="`${apiBaseUrl}/client/${client.id}/config?qrcode=false`"
-                                    >
-                                        <span class="d-none d-lg-flex">Download</span>
-                                        <v-icon right dark>mdi-cloud-download-outline</v-icon>
-                                    </v-btn>
-                                    <v-btn
+                                  <v-tooltip bottom>
+                                    <template v-slot:activator="{ on }">
+                                      <v-btn
+                                              text
+                                              :href="`${apiBaseUrl}/client/${client.id}/config?qrcode=false`"
+                                              v-on="on"
+                                      >
+                                          <span class="d-none d-lg-flex">Download</span>
+                                          <v-icon right dark>mdi-cloud-download-outline</v-icon>
+                                      </v-btn>
+                                    </template>
+                                    <span>Download</span>
+                                  </v-tooltip>
+
+                                  <v-tooltip bottom>
+                                    <template v-slot:activator="{ on }">
+                                      <v-btn
                                             text
                                             @click.stop="startUpdateClient(client)"
-                                    >
+                                            v-on="on"
+                                      >
                                         <span class="d-none d-lg-flex">Edit</span>
                                         <v-icon right dark>mdi-square-edit-outline</v-icon>
                                     </v-btn>
+                                    </template>
+                                    <span>Edit</span>
+                                  </v-tooltip>
+
+                                  <v-tooltip bottom>
+                                    <template v-slot:activator="{ on }">
                                       <v-btn
                                               text
                                               @click="deleteClient(client)"
+                                              v-on="on"
                                       >
                                           <span class="d-none d-lg-flex">Delete</span>
                                           <v-icon right dark>mdi-trash-can-outline</v-icon>
                                       </v-btn>
-                                    <v-btn
-                                            text
-                                            @click="sendEmailClient(client.id)"
-                                    >
-                                        <span class="d-none d-lg-flex">Send Email</span>
-                                        <v-icon right dark>mdi-email-send-outline</v-icon>
-                                    </v-btn>
+                                    </template>
+                                    <span>Delete</span>
+                                  </v-tooltip>
+
+                                  <v-tooltip bottom>
+                                    <template v-slot:activator="{ on }">
+                                      <v-btn
+                                              text
+                                              @click="sendEmailClient(client.id)"
+                                              v-on="on"
+                                      >
+                                          <span class="d-none d-lg-flex">Send Email</span>
+                                          <v-icon right dark>mdi-email-send-outline</v-icon>
+                                      </v-btn>
+                                    </template>
+                                    <span>Send Email</span>
+                                  </v-tooltip>
                                     <v-spacer/>
                                     <v-tooltip right>
                                         <template v-slot:activator="{ on }">