krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-17 14:47:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

New client party tutorial (#8968)

Browse Source 
* Adjusted intro tutorial

* Added images to create party modal

* Fixed shared button styles

* Added method to start a party

* various style fixes
This commit is contained in:
Keith Holliday
2017-08-21 09:36:31 -06:00
committed by GitHub
parent 2a2192e196
commit 203d6d3ac2
14 changed files with 85 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
website/client/components/groups/createPartyModal.vue
View File

@@ -1,27 +1,27 @@
<template lang="pug">
b-modal#create-party-modal(title="Empty", size='lg', hide-footer=true)
.header-wrap(slot="modal-header")
h2 Image Here
.row
.quest_screen
.row.heading
.col-12.text-center
h2(v-once) {{$t('playInPartyTitle')}}
p(v-once) {{$t('playInPartyDescription')}}
.row.grey-row
.col-6.text-center
img
.start-party
h3(v-once) {{$t('startYourOwnPartyTitle')}}
p(v-once) {{$t('startYourOwnPartyDescription')}}
button.btn.btn-primary(v-once, @click='createParty()') {{$t('createParty')}}
.col-6
div.text-center
img
.join-party
h3(v-once) {{$t('wantToJoinPartyTitle')}}
p(v-once) {{$t('wantToJoinPartyDescription')}}
button.btn.btn-primary(v-once, @click='shareUserIdShown = !shareUserIdShown') {{$t('shartUserId')}}
.share-userid-options(v-if="shareUserIdShown")
.option-item(v-once)
.svg-icon(v-html="icons.copy")
| {{$t('copy')}}
| Copy User ID
.option-item(v-once)
.svg-icon(v-html="icons.greyBadge")
| {{$t('lookingForGroup')}}
@@ -30,23 +30,66 @@ b-modal#create-party-modal(title="Empty", size='lg', hide-footer=true)
| {{$t('qrCode')}}
.option-item(v-once)
.svg-icon.facebook(v-html="icons.facebook")
| {{$t('facebook')}}
| Facebook
.option-item(v-once)
.svg-icon(v-html="icons.twitter")
| {{$t('twitter')}}
| Twitter
</template>
<style lang='scss'>
<style>
#create-party-modal .modal-dialog {
width: 684px;
}
#create-party-modal .modal-header {
padding: 0;
}
</style>
<style lang="scss">
@import '~client/assets/scss/colors.scss';
.heading {
margin-top: 1em;
margin-bottom: 1em;
}
.header-wrap {
padding: 0;
color: #4e4a57;
.quest_screen {
background-image: url('~client/assets/images/quest_screen.png');
background-size: cover;
width: 100%;
height: 246px;
margin-bottom: .5em;
border-radius: 2px 2px 0 0;
}
h2 {
color: #4f2a93;
}
}
.start-party {
background-image: url('~client/assets/images/basilist@3x.png');
background-size: cover;
width: 122px;
height: 69px;
margin: 0 auto;
margin-bottom: 1em;
}
.join-party {
background-image: url('~client/assets/images/party@3x.png');
background-size: cover;
width: 203px;
height: 66px;
margin: 0 auto;
margin-bottom: 1em;
}
.modal-body {
padding-bottom: 0;
padding-top: 0;
@@ -62,7 +105,7 @@ b-modal#create-party-modal(title="Empty", size='lg', hide-footer=true)
.share-userid-options {
background-color: $white;
border-radius: 2px;
width: 180px;
width: 220px;
position: absolute;
top: -8em;
left: 4.8em;
@@ -73,6 +116,9 @@ b-modal#create-party-modal(title="Empty", size='lg', hide-footer=true)
.svg-icon {
margin-right: .5em;
width: 20px;
display: inline-block;
vertical-align: bottom;
}
.facebook svg {