6543/wg-gen-web
0
0
Fork 0
mirror of https://github.com/vx3r/wg-gen-web.git synced 2024-11-04 17:31:17 +00:00
Code Issues Releases Wiki Activity

Merge pull request #28 from jrester/responsive

Browse Source 
Make client cards more responsive
This commit is contained in:
vx3r 2020-03-31 01:41:12 +09:00 committed by GitHub
commit 205e3ef21a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 52 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
ui/src/components/Clients.vue
View File

@ -19,7 +19,7 @@
<v-col <v-col
v-for="(client, i) in clients" v-for="(client, i) in clients"
:key="i" :key="i"
cols="6" sm12 lg6
> >
<v-card <v-card
:color="client.enable ? '#1F7087' : 'warning'" :color="client.enable ? '#1F7087' : 'warning'"
@ -55,34 +55,61 @@
</v-chip> </v-chip>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-btn <v-tooltip bottom>
text <template v-slot:activator="{ on }">
:href="`${apiBaseUrl}/client/${client.id}/config?qrcode=false`" <v-btn
> text
Download :href="`${apiBaseUrl}/client/${client.id}/config?qrcode=false`"
<v-icon right dark>mdi-cloud-download-outline</v-icon> v-on="on"
</v-btn> >
<v-btn <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 text
@click.stop="startUpdateClient(client)" @click.stop="startUpdateClient(client)"
> v-on="on"
Edit >
<span class="d-none d-lg-flex">Edit</span>
<v-icon right dark>mdi-square-edit-outline</v-icon> <v-icon right dark>mdi-square-edit-outline</v-icon>
</v-btn> </v-btn>
<v-btn </template>
text <span>Edit</span>
@click="deleteClient(client)" </v-tooltip>
>
Delete <v-tooltip bottom>
<v-icon right dark>mdi-trash-can-outline</v-icon> <template v-slot:activator="{ on }">
</v-btn> <v-btn
<v-btn text
text @click="deleteClient(client)"
@click="sendEmailClient(client.id)" v-on="on"
> >
Send email <span class="d-none d-lg-flex">Delete</span>
<v-icon right dark>mdi-email-send-outline</v-icon> <v-icon right dark>mdi-trash-can-outline</v-icon>
</v-btn> </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-spacer/>
<v-tooltip right> <v-tooltip right>
<template v-slot:activator="{ on }"> <template v-slot:activator="{ on }">