mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-19 15:48:04 +01:00
New client more misc (#8902)
* View party now opens member modal * Clicking member in header opens member detail modal * Began sticky header * Added sleep * Removed extra inbox and added name styles * Lint fixes * Added member filter * Added task counts * Updated quest start modal * Updated members modal style * Fixed editing party * Updated tavern * Updated my guilds * More guild styles * Many challenge styles and fixes * Fixed notification menu display * Added initial styles to groupplans * Added syncing with inbox * Fixed lint * Added new edit profile layout * Added initial achievement layout * Began adding new stats layout * Removed duplicate: * fix(CI): attempt to address Travis Mongo connection issue * fix(CI): don't strand us in Mongo shell * Travis updates * Try percise
This commit is contained in:
Keith Holliday
GitHub
@@ -1,134 +1,166 @@
|
||||
<template lang="pug">
|
||||
.standard-page
|
||||
div(v-if='activePage === PAGES.CREATE_GROUP')
|
||||
h2.text-center {{ $t('createAGroup') }}
|
||||
|
||||
.col-xs-12
|
||||
.col-md-12.form-horizontal
|
||||
.form-group
|
||||
label.control-label(for='new-group-name') {{ $t('newGroupName', {groupType: 'text'}) }}
|
||||
input.form-control#new-group-name.input-medium.option-content(required, type='text', :placeholder="$t('newGroupName', {groupType: 'text'})", v-model='newGroup.name')
|
||||
.form-group
|
||||
label(for='new-group-description') {{ $t('description') }}
|
||||
textarea.form-control#new-group-description.option-content(cols='3', :placeholder="$t('description')", v-model='newGroup.description')
|
||||
.form-group(v-if='type === "guild"')
|
||||
.radio
|
||||
label
|
||||
input(type='radio', name='new-group-privacy', value='public', v-model='newGroup.privacy')
|
||||
| {{ $t('public') }}
|
||||
.radio
|
||||
label
|
||||
input(type='radio', name='new-group-privacy', value='private', v-model='newGroup.privacy')
|
||||
| {{ $t('inviteOnly') }}
|
||||
br
|
||||
input.btn.btn-default(type='submit', :disabled='!newGroup.privacy && !newGroup.name', :value="$t('create')")
|
||||
span.gem-cost {{ '4 ' + $t('gems') }}
|
||||
p
|
||||
small {{ $t('gemCost') }}
|
||||
.form-group
|
||||
.checkbox
|
||||
label
|
||||
input(type='checkbox', v-model='newGroup.leaderOnly.challenges')
|
||||
| {{ $t('leaderOnlyChallenges') }}
|
||||
.form-group(v-if='type === "party"')
|
||||
input.btn.btn-default.form-control(type='submit', :value="$t('create')")
|
||||
br
|
||||
br
|
||||
.row
|
||||
.col-sm-6.col-sm-offset-3
|
||||
a.btn.btn-primary.btn-lg.btn-block(@click="createGroup()", :disabled="!newGroupIsReady") {{ $t('create') }}
|
||||
|
||||
div(v-if='activePage === PAGES.UPGRADE_GROUP')
|
||||
h2.text-center {{ $t('upgradeTitle') }}
|
||||
|
||||
.row.text-center
|
||||
.col-6.col-offset-3
|
||||
a.purchase.btn.btn-primary(@click='upgradeGroup(PAYMENTS.STRIPE)') {{ $t('card') }}
|
||||
a.purchase(@click='upgradeGroup(PAYMENTS.AMAZON)')
|
||||
img(src='https://payments.amazon.com/gp/cba/button', :alt="$t('amazonPayments')")
|
||||
// @TODO: Add paypal
|
||||
.row
|
||||
.col-md-6.col-md-offset-3
|
||||
br
|
||||
.text-center {{ $t('groupSubscriptionPrice') }}
|
||||
|
||||
div
|
||||
div(v-if='activePage === PAGES.BENEFITS')
|
||||
h2.text-center {{ $t('groupBenefitsTitle') }}
|
||||
.row(style="font-size: 2rem;")
|
||||
.col-md-6.col-md-offset-3.text-center {{ $t('groupBenefitsDescription') }}
|
||||
.row.row-margin
|
||||
.col-md-4
|
||||
h2 {{ $t('teamBasedTasks') }}
|
||||
div
|
||||
// shared tasks
|
||||
h3
|
||||
span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
|
||||
| {{ $t('groupBenefitOneTitle') }}
|
||||
span {{ $t('groupBenefitOneDescription') }}
|
||||
div
|
||||
// assign tasks
|
||||
h3
|
||||
span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
|
||||
| {{ $t('groupBenefitTwoTitle') }}
|
||||
span {{ $t('groupBenefitTwoDescription') }}
|
||||
div
|
||||
// claim tasks
|
||||
h3
|
||||
span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
|
||||
| {{ $t('groupBenefitThreeTitle') }}
|
||||
span {{ $t('groupBenefitThreeDescription') }}
|
||||
div
|
||||
// mark tasks
|
||||
h3
|
||||
span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
|
||||
| {{ $t('groupBenefitFourTitle') }}
|
||||
span {{ $t('groupBenefitFourDescription') }}
|
||||
div
|
||||
// group managers
|
||||
h3
|
||||
span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
|
||||
| {{ $t('groupBenefitEightTitle') }}
|
||||
span {{ $t('groupBenefitEightDescription') }}
|
||||
.header
|
||||
h1.text-center Need more for your Group?
|
||||
.row
|
||||
.col-6.offset-3.text-center {{ $t('groupBenefitsDescription') }}
|
||||
.container.benefits
|
||||
.row
|
||||
.col-4
|
||||
.box
|
||||
h2 {{ $t('teamBasedTasks') }}
|
||||
p Set up an easily-viewed shared task list for the group. Assign tasks to your fellow group members, or let them claim their own tasks to make it clear what everyone is working on!
|
||||
|
||||
.col-md-4
|
||||
h2 {{ $t('specializedCommunication') }}
|
||||
div
|
||||
// chat privately
|
||||
h3
|
||||
span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
|
||||
| {{ $t('groupBenefitFiveTitle') }}
|
||||
span {{ $t('groupBenefitFiveDescription') }}
|
||||
div
|
||||
h3
|
||||
span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
|
||||
| {{ $t('groupBenefitMessageLimitTitle') }}
|
||||
span {{ $t('groupBenefitMessageLimitDescription') }}
|
||||
.col-md-4
|
||||
h2 {{ $t('funExtras') }}
|
||||
div
|
||||
// free subscription
|
||||
h3
|
||||
span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
|
||||
| {{ $t('groupBenefitSixTitle') }}
|
||||
span {{ $t('groupBenefitSixDescription') }}
|
||||
div
|
||||
// exclusive mount
|
||||
h3
|
||||
span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
|
||||
| {{ $t('groupBenefitSevenTitle') }}
|
||||
.col-4
|
||||
.box
|
||||
h2 Group Management Controls
|
||||
p Use task approvals to verify that a task that was really completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.
|
||||
|
||||
br
|
||||
br
|
||||
.row
|
||||
.col-sm-6.col-sm-offset-3
|
||||
a.btn.btn-primary.btn-lg.btn-block(ui-sref="options.social.newGroup") {{ $t('createAGroup') }}
|
||||
.col-4
|
||||
.box
|
||||
h2 In-Game Benefits
|
||||
p Group members get an exclusive Jackalope Mount, as well as full subscription benefits, including special monthly equipment sets and the ability to buy gems with gold.
|
||||
|
||||
.row
|
||||
.col-md-6.col-md-offset-3
|
||||
br
|
||||
.text-center {{ $t('groupSubscriptionPrice') }}
|
||||
.container.payment-options
|
||||
h1.text-center.purple-header Are you ready to upgrade?
|
||||
.row
|
||||
.col-6.offset-3.text-center
|
||||
.purple-box
|
||||
.dollar $
|
||||
.number 9
|
||||
.name Group Owner Subscription
|
||||
.plus +
|
||||
.dollar $
|
||||
.number 3
|
||||
.name Each Individual Group Member
|
||||
|
||||
.box
|
||||
h3 Choose your payment method
|
||||
.box.payment-button(@click='createGroup(PAYMENTS.STRIPE)')
|
||||
p Credit Card
|
||||
p Powered by Stripe
|
||||
.box.payment-button(@click='createGroup(PAYMENTS.AMAZON)')
|
||||
| Amazon Pay
|
||||
|
||||
.standard-page(v-if='activePage === PAGES.CREATE_GROUP')
|
||||
h1.text-center {{ $t('createAGroup') }}
|
||||
.col-6.offset-3
|
||||
.form-group
|
||||
label.control-label(for='new-group-name') Name
|
||||
input.form-control#new-group-name.input-medium.option-content(required, type='text', placeholder="Name", v-model='newGroup.name')
|
||||
.form-group
|
||||
label(for='new-group-description') {{ $t('description') }}
|
||||
textarea.form-control#new-group-description.option-content(cols='3', :placeholder="$t('description')", v-model='newGroup.description')
|
||||
.form-group(v-if='type === "guild"')
|
||||
.radio
|
||||
label
|
||||
input(type='radio', name='new-group-privacy', value='public', v-model='newGroup.privacy')
|
||||
| {{ $t('public') }}
|
||||
.radio
|
||||
label
|
||||
input(type='radio', name='new-group-privacy', value='private', v-model='newGroup.privacy')
|
||||
| {{ $t('inviteOnly') }}
|
||||
|
||||
// @TODO Does it cost gems for a group plan?
|
||||
.form-group
|
||||
input.btn.btn-default(type='submit', :disabled='!newGroup.privacy && !newGroup.name', :value="$t('create')")
|
||||
span.gem-cost {{ '4 ' + $t('gems') }}
|
||||
p
|
||||
small {{ $t('gemCost') }}
|
||||
|
||||
.form-group
|
||||
.checkbox
|
||||
label
|
||||
input(type='checkbox', v-model='newGroup.leaderOnly.challenges')
|
||||
| {{ $t('leaderOnlyChallenges') }}
|
||||
.form-group(v-if='type === "party"')
|
||||
input.btn.btn-default.form-control(type='submit', :value="$t('create')")
|
||||
.form-group
|
||||
button.btn.btn-primary.btn-lg.btn-block(@click="upgrade()", :disabled="!newGroupIsReady") {{ $t('create') }}
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
margin-bottom: 3em;
|
||||
background-color: #4f2a93;
|
||||
color: #fff;
|
||||
padding: 2em;
|
||||
height: 356px;
|
||||
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.benefits {
|
||||
margin-top: -12em;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-radius: 2px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
|
||||
padding: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.purple-header {
|
||||
color: #6133b4;
|
||||
font-size: 48px;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.payment-options {
|
||||
margin-bottom: 4em;
|
||||
|
||||
.purple-box {
|
||||
background-color: #4f2a93;
|
||||
color: #fff;
|
||||
padding: .5em;
|
||||
border-radius: 8px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
|
||||
.dollar {
|
||||
margin-left: 1.2em;
|
||||
}
|
||||
|
||||
.number {
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 120px;
|
||||
margin-left: .3em;
|
||||
}
|
||||
|
||||
.plus {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.box, .purple-box {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.payment-button {
|
||||
width: 200px;
|
||||
height: 80px;
|
||||
margin-bottom: .5em;
|
||||
padding: .5em;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
@@ -142,6 +174,7 @@ export default {
|
||||
AMAZON: 'amazon',
|
||||
STRIPE: 'stripe',
|
||||
},
|
||||
paymentMethod: '',
|
||||
newGroup: {
|
||||
type: 'guild',
|
||||
privacy: 'private',
|
||||
@@ -155,7 +188,7 @@ export default {
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
this.activePage = this.PAGES.CREATE_GROUP;
|
||||
this.activePage = this.PAGES.BENEFITS;
|
||||
},
|
||||
computed: {
|
||||
newGroupIsReady () {
|
||||
@@ -167,18 +200,19 @@ export default {
|
||||
this.activePage = page;
|
||||
window.scrollTo(0, 0);
|
||||
},
|
||||
createGroup () {
|
||||
this.changePage(this.PAGES.UPGRADE_GROUP);
|
||||
createGroup (paymentType) {
|
||||
this.paymentMethod = paymentType;
|
||||
this.changePage(this.PAGES.CREATE_GROUP);
|
||||
},
|
||||
upgradeGroup (paymentType) {
|
||||
upgrade () {
|
||||
// let subscriptionKey = 'group_monthly'; // @TODO: Get from content API?
|
||||
if (paymentType === this.PAYMENTS.STRIPE) {
|
||||
if (this.paymentMethod === this.PAYMENTS.STRIPE) {
|
||||
// Payments.showStripe({
|
||||
// subscription: subscriptionKey,
|
||||
// coupon: null,
|
||||
// groupToCreate: this.newGroup
|
||||
// });
|
||||
} else if (paymentType === this.PAYMENTS.AMAZON) {
|
||||
} else if (this.paymentMethod === this.PAYMENTS.AMAZON) {
|
||||
// Payments.amazonPayments.init({
|
||||
// type: 'subscription',
|
||||
// subscription: subscriptionKey,
|
||||
|
||||
Reference in New Issue
Block a user