Join.vue rework

This commit is contained in:
Sam Calder-Mason 2018-07-17 15:32:46 +10:00
parent f839cf8154
commit 429cc22bf1
1 changed files with 27 additions and 17 deletions

View File

@ -1,22 +1,32 @@
<template>
<v-layout wrap row class="text-xs-center">
<v-flex v-if="!loading" xs12 md8 offset-md2>
<v-card style="background: rgba(0,0,0,0.3)">
<h1 class="white--text pa-1"> Welcome to SyncLounge!</h1>
<div>
<h2>
<span style="font-weight:900">{{ owner }}</span> has invited you to join the room
<span style="font-weight:900">{{ room }}</span>
</h2>
</div>
<v-layout wrap row class="pa-4">
<v-flex xs12 md8 offset-md2 class="center-text">
<v-btn class="center" style="background-color: #E5A00D" @click.native="letsGo()">Accept Invite</v-btn>
<v-layout wrap row class="text-xs-center" justify-center align-center>
<v-flex v-if="!loading" xs12 md5>
<v-card style="background: rgba(0,0,0,0.3)" class="pa-1">
<v-container fill-height>
<v-layout row wrap>
<v-flex xs12 md3 class="text-xs-center">
<img :src="logos.light.small" style="width: 90%"/>
</v-flex>
</v-layout>
<p style="opacity:0.7" class="center-text">
SyncLounge is a tool to sync Plex content with your family and friends. For more info click <a target="_blank" href="https://github.com/samcm/synclounge"> here </a>
</p>
<v-flex md9>
<h1 class="white--text pa-1"> Welcome to SyncLounge!</h1>
<div class="pt-2">
<div>
<span style="font-weight:900">{{ owner }}</span> has invited you to join the room
<span style="font-weight:900">{{ room }}</span>
</div>
</div>
<v-layout wrap row class="pa-4 pt-2" justify-center align-center>
<v-flex xs12 md8 class="text-xs-center">
<v-btn class="center" style="background-color: #E5A00D" @click.native="letsGo()">Accept Invite</v-btn>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-container>
<v-divider></v-divider>
<p style="opacity:0.7" class="text-xs-center pt-3">
SyncLounge is a tool to sync Plex content with your family and friends. For more info click <a target="_blank" href="https://github.com/samcm/synclounge"> here</a>.
</p>
</v-card>
</v-flex>
<v-flex v-else>