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
@@ -6,10 +6,11 @@
|
||||
strong(v-once) {{$t('name')}}*
|
||||
b-form-input(type="text", :placeholder="$t('newGuildPlaceHolder')", v-model="newGuild.name")
|
||||
|
||||
.form-group(v-if='newGuild.id')
|
||||
.form-group(v-if='newGuild.id && members.length > 0')
|
||||
label
|
||||
strong(v-once) {{$t('guildLeader')}}*
|
||||
b-form-select(v-model="newGuild.newLeader" :options="members")
|
||||
select.form-control(v-model="newGuild.newLeader")
|
||||
option(v-for='member in members', :value="member._id") {{ member.profile.name }}
|
||||
|
||||
.form-group
|
||||
label
|
||||
@@ -229,7 +230,7 @@ export default {
|
||||
},
|
||||
],
|
||||
showCategorySelect: false,
|
||||
members: ['one', 'two'],
|
||||
members: [],
|
||||
creatingParty: true,
|
||||
inviteMembers: false,
|
||||
newMemberToInvite: {
|
||||
@@ -261,6 +262,8 @@ export default {
|
||||
this.newGuild.privacy = editingGroup.privacy;
|
||||
if (editingGroup.description) this.newGuild.description = editingGroup.description;
|
||||
this.newGuild.id = editingGroup._id;
|
||||
this.newGuild.newLeader = editingGroup.leader._id;
|
||||
this.getMembers();
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
@@ -274,6 +277,14 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async getMembers () {
|
||||
if (!this.newGuild.id) return;
|
||||
let members = await this.$store.dispatch('members:getGroupMembers', {
|
||||
groupId: this.newGuild.id,
|
||||
includeAllPublicFields: true,
|
||||
});
|
||||
this.members = members;
|
||||
},
|
||||
addMemberToInvite () {
|
||||
// @TODO: determine type
|
||||
this.membersToInvite.push(this.newMemberToInvite);
|
||||
@@ -323,6 +334,8 @@ export default {
|
||||
|
||||
if (this.newGuild.id) {
|
||||
await this.$store.dispatch('guilds:update', {group: this.newGuild});
|
||||
// @TODO: this doesn't work because of the async resource
|
||||
// if (updatedGroup.type === 'party') this.$store.state.party = {data: updatedGroup};
|
||||
} else {
|
||||
await this.$store.dispatch('guilds:create', {group: this.newGuild});
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
.row(v-if="group")
|
||||
group-form-modal
|
||||
invite-modal
|
||||
.clearfix.col-8
|
||||
start-quest-modal(:group='this.group')
|
||||
.col-8.standard-page
|
||||
.row
|
||||
.col-6.title-details
|
||||
h1 {{group.name}}
|
||||
@@ -10,9 +11,12 @@
|
||||
span.float-left(v-once, v-if='group.leader.profile') : {{group.leader.profile.name}}
|
||||
.col-6
|
||||
.row.icon-row
|
||||
.col-4(v-bind:class="{ 'offset-8': isParty }")
|
||||
members-modal(:group='group', v-if='isMember')
|
||||
.col-6(v-if='!isParty')
|
||||
.col-4.offset-4(v-bind:class="{ 'offset-8': isParty }")
|
||||
.item-with-icon(@click="showMemberModal()")
|
||||
.svg-icon.shield(v-html="icons.goldGuildBadgeIcon")
|
||||
span.number {{group.memberCount}}
|
||||
div(v-once) {{ $t('members') }}
|
||||
.col-4(v-if='!isParty')
|
||||
.item-with-icon
|
||||
.svg-icon.gem(v-html="icons.gem")
|
||||
span.number {{group.memberCount}}
|
||||
@@ -24,8 +28,6 @@
|
||||
textarea(:placeholder="$t('chatPlaceHolder')", v-model='newMessage')
|
||||
button.btn.btn-secondary.send-chat.float-right(v-once, @click='sendMessage()') {{ $t('send') }}
|
||||
|
||||
.hr
|
||||
.hr-middle(v-once) {{ $t('today') }}
|
||||
|
||||
chat-message(:chat.sync='group.chat', :group-id='group._id', group-name='group.name')
|
||||
|
||||
@@ -43,11 +45,11 @@
|
||||
.button-container
|
||||
button.btn.btn-primary(v-once, @click='showInviteModal()') {{$t('invite')}}
|
||||
.button-container
|
||||
button.btn.btn-primary(v-once, v-if='!isLeader') {{$t('messageGuildLeader')}}
|
||||
// @TODO: V2 button.btn.btn-primary(v-once, v-if='!isLeader') {{$t('messageGuildLeader')}}
|
||||
.button-container
|
||||
button.btn.btn-primary(v-once, v-if='isMember && !isParty') {{$t('donateGems')}}
|
||||
// @TODO: V2 button.btn.btn-primary(v-once, v-if='isMember && !isParty') {{$t('donateGems')}}
|
||||
|
||||
.section-header
|
||||
.section-header(v-if='isParty')
|
||||
.row
|
||||
.col-10
|
||||
h3(v-once) {{ $t('questDetailsTitle') }}
|
||||
@@ -63,7 +65,6 @@
|
||||
h4(v-once) {{ $t('yourNotOnQuest') }}
|
||||
p(v-once) {{ $t('questDescription') }}
|
||||
button.btn.btn-secondary(v-once, @click="openStartQuestModal()") {{ $t('startAQuest') }}
|
||||
owned-quests-modal(:group='this.group')
|
||||
.row.quest-active-section(v-if='isParty && onPendingQuest && !onActiveQuest')
|
||||
h2 Pending quest
|
||||
button.btn.btn-secondary(v-once, @click="questForceStart()") {{ $t('begin') }}
|
||||
@@ -79,7 +80,8 @@
|
||||
div(:class="'quest_' + questData.key + '_' + key")
|
||||
.col-10
|
||||
strong {{value.text()}}
|
||||
.collect-progress-bar
|
||||
.grey-progress-bar
|
||||
.collect-progress-bar(:style="{width: (group.quest.progress.collect[key] / value.count) * 100 + '%'}")
|
||||
strong {{group.quest.progress.collect[key]}} / {{value.count}}
|
||||
.boss-info(v-if='questData.boss')
|
||||
.row
|
||||
@@ -89,7 +91,8 @@
|
||||
span.float-right(v-once) {{ $t('participants') }}
|
||||
.row
|
||||
.col-12
|
||||
.boss-health-bar
|
||||
.grey-progress-bar
|
||||
.boss-health-bar(:style="{width: (group.quest.progress.hp / questData.boss.hp) * 100 + '%'}")
|
||||
.row.boss-details
|
||||
.col-6
|
||||
span.float-left
|
||||
@@ -137,7 +140,7 @@
|
||||
.toggle-down(@click="sections.challenges = !sections.challenges", v-if="!sections.challenges")
|
||||
.svg-icon(v-html="icons.downIcon")
|
||||
.section(v-if="sections.challenges")
|
||||
group-challenges(:groupId='groupId')
|
||||
group-challenges(:groupId='searchId')
|
||||
div.text-center
|
||||
button.btn.btn-primary(class='btn-danger', v-if='isMember') {{ $t('leave') }}
|
||||
</template>
|
||||
@@ -145,6 +148,10 @@
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
h1 {
|
||||
color: $purple-200;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
margin-bottom: 1em;
|
||||
|
||||
@@ -158,11 +165,27 @@
|
||||
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: 1em;
|
||||
text-align: center;
|
||||
|
||||
.svg-icon.shield, .svg-icon.gem {
|
||||
width: 40px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.number {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.item-with-icon:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: $gray-600;
|
||||
padding-top: 2em;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
.card {
|
||||
@@ -196,11 +219,6 @@
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
.svg-icon.shield, .svg-icon.gem {
|
||||
width: 40px;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.title-details {
|
||||
padding-top: 1em;
|
||||
padding-left: 1em;
|
||||
@@ -226,26 +244,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.hr {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
border-bottom: 1px solid $gray-500;
|
||||
text-align: center;
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
.hr-middle {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
font-family: 'Roboto Condensed';
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
color: $gray-200;
|
||||
background-color: $gray-700;
|
||||
padding: .2em;
|
||||
margin-top: .2em;
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
.toggle-up .svg-icon, .toggle-down .svg-icon {
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
span.action {
|
||||
@@ -275,6 +275,7 @@
|
||||
.svg-icon {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
}
|
||||
@@ -336,18 +337,25 @@
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
.grey-progress-bar {
|
||||
width: 100%;
|
||||
height: 15px;
|
||||
background-color: #e1e0e3;
|
||||
}
|
||||
|
||||
.collect-progress-bar {
|
||||
background-color: #24cc8f;
|
||||
height: 15px;
|
||||
width: 80%;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import groupUtilities from 'client/mixins/groupsUtilities';
|
||||
import styleHelper from 'client/mixins/styleHelper';
|
||||
import { mapState } from 'client/libs/store';
|
||||
import membersModal from './membersModal';
|
||||
import ownedQuestsModal from './ownedQuestsModal';
|
||||
import startQuestModal from './startQuestModal';
|
||||
import quests from 'common/script/content/quests';
|
||||
import percent from 'common/script/libs/percent';
|
||||
import groupFormModal from './groupFormModal';
|
||||
@@ -372,14 +380,15 @@ import informationIcon from 'assets/svg/information.svg';
|
||||
import questBackground from 'assets/svg/quest-background-border.svg';
|
||||
import upIcon from 'assets/svg/up.svg';
|
||||
import downIcon from 'assets/svg/down.svg';
|
||||
import goldGuildBadgeIcon from 'assets/svg/gold-guild-badge.svg';
|
||||
|
||||
export default {
|
||||
mixins: [groupUtilities],
|
||||
mixins: [groupUtilities, styleHelper],
|
||||
props: ['groupId'],
|
||||
components: {
|
||||
membersModal,
|
||||
memberModal,
|
||||
ownedQuestsModal,
|
||||
startQuestModal,
|
||||
bCollapse,
|
||||
bCard,
|
||||
bTooltip,
|
||||
@@ -393,6 +402,7 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
searchId: null,
|
||||
group: null,
|
||||
icons: Object.freeze({
|
||||
like: likeIcon,
|
||||
@@ -406,8 +416,8 @@ export default {
|
||||
questBackground,
|
||||
upIcon,
|
||||
downIcon,
|
||||
goldGuildBadgeIcon,
|
||||
}),
|
||||
questData: {},
|
||||
selectedQuest: {},
|
||||
sections: {
|
||||
quest: true,
|
||||
@@ -475,16 +485,19 @@ export default {
|
||||
bossHpPercent () {
|
||||
return percent(this.group.quest.progress.hp, this.questData.boss.hp);
|
||||
},
|
||||
questData () {
|
||||
if (!this.group.quest) return {};
|
||||
return quests.quests[this.group.quest.key];
|
||||
},
|
||||
},
|
||||
created () {
|
||||
this.searchId = this.groupId;
|
||||
if (this.isParty) {
|
||||
this.groupId = 'party';
|
||||
this.searchId = 'party';
|
||||
// @TODO: Set up from old client. Decide what we need and what we don't
|
||||
// Check Desktop notifs
|
||||
// Mark Chat seen
|
||||
// Load members
|
||||
// Load invites
|
||||
// Load challenges
|
||||
// Load group tasks for group plan
|
||||
// Load approvals for group plan
|
||||
}
|
||||
@@ -495,6 +508,9 @@ export default {
|
||||
$route: 'fetchGuild',
|
||||
},
|
||||
methods: {
|
||||
showMemberModal () {
|
||||
this.$root.$emit('show::modal', 'members-modal');
|
||||
},
|
||||
async sendMessage () {
|
||||
let response = await this.$store.dispatch('chat:postChat', {
|
||||
groupId: this.group._id,
|
||||
@@ -511,12 +527,11 @@ export default {
|
||||
this.$root.$emit('show::modal', 'invite-modal');
|
||||
},
|
||||
async fetchGuild () {
|
||||
let group = await this.$store.dispatch('guilds:getGroup', {groupId: this.groupId});
|
||||
let group = await this.$store.dispatch('guilds:getGroup', {groupId: this.searchId});
|
||||
if (this.isParty) {
|
||||
this.$store.party = group;
|
||||
this.group = this.$store.party;
|
||||
this.checkForAchievements();
|
||||
this.questData = quests.quests[this.group.quest.key];
|
||||
return;
|
||||
}
|
||||
this.group = group;
|
||||
@@ -527,7 +542,7 @@ export default {
|
||||
}
|
||||
},
|
||||
openStartQuestModal () {
|
||||
this.$root.$emit('show::modal', 'owned-quests-modal');
|
||||
this.$root.$emit('show::modal', 'start-quest-modal');
|
||||
},
|
||||
// inviteOrStartParty (group) {
|
||||
// Analytics.track({'hitType':'event','eventCategory':'button','eventAction':'click','eventLabel':'Invite Friends'});
|
||||
@@ -625,7 +640,7 @@ export default {
|
||||
});
|
||||
|
||||
if (hasQuests) {
|
||||
this.$root.$emit('show::modal', 'owned-quests-modal');
|
||||
this.$root.$emit('show::modal', 'start-quest-modal');
|
||||
return;
|
||||
}
|
||||
// $rootScope.$state.go('options.inventory.quests');
|
||||
|
||||
@@ -1,10 +1,5 @@
|
||||
<template lang="pug">
|
||||
div
|
||||
.item-with-icon(@click="$root.$emit('show::modal','members-modal')")
|
||||
.svg-icon.shield(v-html="icons.goldGuildBadgeIcon")
|
||||
span.number {{group.memberCount}}
|
||||
div(v-once) {{ $t('members') }}
|
||||
|
||||
b-modal#members-modal(:title="$t('createGuild')", size='lg')
|
||||
.header-wrap(slot="modal-header")
|
||||
.row
|
||||
@@ -40,7 +35,7 @@ div
|
||||
b-dropdown-item(@click='sort(option.value)')
|
||||
.svg-icon(v-html="icons.removeIcon")
|
||||
| {{$t('removeManager2')}}
|
||||
.row-fluid.gradient
|
||||
.row.gradient(v-if='members.length > 3')
|
||||
|
||||
b-modal#remove-member(:title="$t('confirmRemoveMember')")
|
||||
button(@click='confirmRemoveMember(member)', v-once) {{$t('remove')}}
|
||||
@@ -73,6 +68,7 @@ div
|
||||
|
||||
#members-modal_modal_body {
|
||||
padding: 0;
|
||||
max-height: 450px;
|
||||
|
||||
.col-8 {
|
||||
margin-left: 0;
|
||||
@@ -89,29 +85,19 @@ div
|
||||
|
||||
.gradient {
|
||||
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
|
||||
height: 200px;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-with-icon {
|
||||
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: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.svg-icon.shield, .svg-icon.gem {
|
||||
width: 40px;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.number {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
.dropdown-menu .svg-icon {
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
margin-right: .5em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -127,7 +113,7 @@ import starIcon from 'assets/members/star.svg';
|
||||
import goldGuildBadgeIcon from 'assets/svg/gold-guild-badge.svg';
|
||||
|
||||
export default {
|
||||
props: ['group'],
|
||||
props: ['group', 'hideBadge'],
|
||||
components: {
|
||||
bModal,
|
||||
bDropdown,
|
||||
|
||||
@@ -42,6 +42,11 @@
|
||||
.no-guilds-wrapper {
|
||||
width: 400px;
|
||||
margin: 0 auto;
|
||||
|
||||
.svg-icon {
|
||||
width: 60px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,54 +0,0 @@
|
||||
<template lang="pug">
|
||||
div
|
||||
b-modal#owned-quests-modal(title="Which quest do you want to start?", size='md', hide-footer=true)
|
||||
.row.content
|
||||
.quest(v-for='(value, key, index) in user.items.quests', :class="'inventory_quest_scroll_' + key", @click='selectQuest(key)')
|
||||
button.btn.btn-primary(@click='confirm()') Confirm
|
||||
start-quest-modal(:group='group', :selectedQuest='selectedQuest')
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
.content {
|
||||
padding: 2em;
|
||||
|
||||
.quest {
|
||||
margin-right: 1em;
|
||||
margin-bottom: 1em;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'client/libs/store';
|
||||
import bModal from 'bootstrap-vue/lib/components/modal';
|
||||
|
||||
import startQuestModal from './startQuestModal';
|
||||
|
||||
export default {
|
||||
props: ['group'],
|
||||
components: {
|
||||
bModal,
|
||||
startQuestModal,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selectedQuest: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({user: 'user.data'}),
|
||||
},
|
||||
methods: {
|
||||
selectQuest (quest) {
|
||||
this.selectedQuest = quest;
|
||||
},
|
||||
confirm () {
|
||||
this.$root.$emit('show::modal', 'start-quest-modal');
|
||||
this.$root.$emit('hide::modal', 'owned-quests-modal');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -14,8 +14,8 @@
|
||||
.col-md-2.cta-container
|
||||
button.btn.btn-danger(v-if='isMember && displayLeave' @click='leave()', v-once) {{ $t('leave') }}
|
||||
button.btn.btn-success(v-if='!isMember' @click='join()', v-once) {{ $t('join') }}
|
||||
div.item-with-icon(v-if='displayGemBank')
|
||||
.svg-icon(v-html="icons.gem")
|
||||
div.item-with-icon.gem-bank(v-if='displayGemBank')
|
||||
.svg-icon.gem(v-html="icons.gem")
|
||||
span.count {{ guild.balance }}
|
||||
div.guild-bank(v-if='displayGemBank', v-once) {{$t('guildBank')}}
|
||||
.row
|
||||
@@ -29,7 +29,7 @@
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
.card {
|
||||
height: 260px;
|
||||
height: 160px;
|
||||
border-radius: 4px;
|
||||
background-color: $white;
|
||||
box-shadow: 0 2px 2px 0 rgba($black, 0.15), 0 1px 4px 0 rgba($black, 0.1);
|
||||
@@ -44,14 +44,13 @@
|
||||
|
||||
.cta-container {
|
||||
margin: 0 auto;
|
||||
margin-top: 4em;
|
||||
|
||||
button {
|
||||
margin-top: 2.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.item-with-icon {
|
||||
.svg-icon {
|
||||
height: 37px;
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 20px;
|
||||
height: 37px;
|
||||
@@ -62,6 +61,8 @@
|
||||
|
||||
.shield {
|
||||
width: 70px;
|
||||
margin: 0 auto;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.guild-bank {
|
||||
@@ -73,13 +74,23 @@
|
||||
.member-count {
|
||||
position: relative;
|
||||
top: -3.6em;
|
||||
left: -.1em;
|
||||
font-size: 28px;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
font-family: 'Roboto Condensed';
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
color: #b36213;
|
||||
margin-top: 2.1em;
|
||||
}
|
||||
|
||||
.gem-bank {
|
||||
margin-top: 2em;
|
||||
|
||||
.gem {
|
||||
width: 25px;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
margin-right: .8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')
|
||||
|
||||
form
|
||||
h3(v-once) {{ $t('filter') }}
|
||||
h2(v-once) {{ $t('filter') }}
|
||||
.form-group
|
||||
h5 Category
|
||||
h3 Category
|
||||
.form-check(
|
||||
v-for="group in categoryOptions",
|
||||
:key="group.key",
|
||||
@@ -16,7 +16,7 @@
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ $t(group.label) }}
|
||||
.form-group
|
||||
h5 Role
|
||||
h3 Role
|
||||
.form-check(
|
||||
v-for="group in roleOptions",
|
||||
:key="group.key",
|
||||
@@ -26,7 +26,7 @@
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ $t(group.label) }}
|
||||
.form-group
|
||||
h5 Guild Size
|
||||
h3 Guild Size
|
||||
.form-check(
|
||||
v-for="group in guildSizeOptions",
|
||||
:key="group.key",
|
||||
|
||||
@@ -1,23 +1,33 @@
|
||||
<template lang="pug">
|
||||
b-modal#start-quest-modal(title="Empty", size='md', hide-footer=true, v-if='questData')
|
||||
.quest-image(:class="'quest_' + questData.key")
|
||||
h2 {{questData.text()}}
|
||||
//- span by: Keith Holliday @TODO: Add author
|
||||
p {{questData.notes()}}
|
||||
div.quest-details
|
||||
div(v-if=' questData.collect')
|
||||
Strong {{$t('collect')}}:
|
||||
span(v-for="(value, key, index) in questData.collect")
|
||||
| {{$t('collectionItems', { number: questData.collect[key].count, items: questData.collect[key].text() })}}
|
||||
div
|
||||
Strong {{$t('collect')}}:
|
||||
span
|
||||
.svg-icon(v-html="icons.difficultyStarIcon")
|
||||
div
|
||||
b-modal#start-quest-modal(title="Empty", size='md', :hide-footer="true", :hide-header="true")
|
||||
.left-panel.content
|
||||
h3.text-center Quests
|
||||
.row
|
||||
.col-4.quest-col(v-for='(value, key, index) in user.items.quests', @click='selectQuest(key)', :class="{selected: key === selectedQuest}")
|
||||
.quest-wrapper
|
||||
.quest(:class="'inventory_quest_scroll_' + key")
|
||||
.row
|
||||
.col-10.offset-1.text-center
|
||||
span.description Can’t find a quest to start? Try checking out the Quest Shop in the Market for new releases!
|
||||
div(v-if='questData')
|
||||
.quest-image(:class="'quest_' + questData.key")
|
||||
h2.text-center {{questData.text()}}
|
||||
//- span by: Keith Holliday @TODO: Add author
|
||||
p(v-html="questData.notes()")
|
||||
div.quest-details
|
||||
div(v-if=' questData.collect')
|
||||
Strong {{$t('collect')}}:
|
||||
span(v-for="(value, key, index) in questData.collect")
|
||||
| {{$t('collectionItems', { number: questData.collect[key].count, items: questData.collect[key].text() })}}
|
||||
div
|
||||
Strong {{$t('difficulty')}}:
|
||||
span
|
||||
.svg-icon.difficulty-star(v-html="icons.difficultyStarIcon")
|
||||
div.text-center
|
||||
button.btn.btn-primary(@click='questInit()') {{$t('inviteToPartyOrQuest')}}
|
||||
div
|
||||
div.text-center
|
||||
p {{$t('inviteInformation')}}
|
||||
.side-panel
|
||||
.side-panel(v-if='questData')
|
||||
h4.text-center {{$t('rewards')}}
|
||||
.box
|
||||
.svg-icon.rewards-icon(v-html="icons.starIcon")
|
||||
@@ -47,6 +57,7 @@
|
||||
.quest-image {
|
||||
margin: 0 auto;
|
||||
margin-bottom: 1em;
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
.quest-details {
|
||||
@@ -59,12 +70,49 @@
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
background: #4e4a57;
|
||||
color: $white;
|
||||
position: absolute;
|
||||
height: 460px;
|
||||
width: 320px;
|
||||
top: 2.5em;
|
||||
left: -22em;
|
||||
z-index: -1;
|
||||
padding: 2em;
|
||||
|
||||
h3 {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.selected .quest-wrapper {
|
||||
border: solid 1.5px #9a62ff;
|
||||
}
|
||||
|
||||
.quest-wrapper:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.quest-col .quest-wrapper {
|
||||
background: $white;
|
||||
padding: .7em;
|
||||
margin-bottom: 1em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.description {
|
||||
text-align: center;
|
||||
color: #a5a1ac;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.side-panel {
|
||||
background: #edecee;
|
||||
position: absolute;
|
||||
height: 460px;
|
||||
width: 320px;
|
||||
top: -1.8em;
|
||||
top: 2.5em;
|
||||
left: 35em;
|
||||
z-index: -1;
|
||||
padding-top: 1em;
|
||||
@@ -101,9 +149,16 @@
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.difficulty-star {
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'client/libs/store';
|
||||
import bModal from 'bootstrap-vue/lib/components/modal';
|
||||
|
||||
import quests from 'common/script/content/quests';
|
||||
@@ -118,12 +173,13 @@ import goldIcon from 'assets/svg/gold.svg';
|
||||
import difficultyStarIcon from 'assets/svg/difficulty-star.svg';
|
||||
|
||||
export default {
|
||||
props: ['group', 'selectedQuest'],
|
||||
props: ['group'],
|
||||
components: {
|
||||
bModal,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selectedQuest: {},
|
||||
icons: Object.freeze({
|
||||
copy: copyIcon,
|
||||
greyBadge: greyBadgeIcon,
|
||||
@@ -137,12 +193,20 @@ export default {
|
||||
shareUserIdShown: false,
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
let questKeys = Object.keys(this.user.items.quests);
|
||||
this.selectedQuest = questKeys[0];
|
||||
},
|
||||
computed: {
|
||||
...mapState({user: 'user.data'}),
|
||||
questData () {
|
||||
return quests.quests[this.selectedQuest];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
selectQuest (quest) {
|
||||
this.selectedQuest = quest;
|
||||
},
|
||||
async questInit () {
|
||||
let key = this.selectedQuest;
|
||||
// Analytics.updateUser({'partyID': party._id, 'partySize': party.memberCount});
|
||||
|
||||
@@ -9,26 +9,25 @@
|
||||
.col-12
|
||||
h3(v-once) {{ $t('welcomeToTavern') }}
|
||||
|
||||
textarea(:placeholder="$t('chatPlaceHolder')", v-model='newMessage')
|
||||
autocomplete(:text='newMessage', v-on:select="selectedAutocomplete")
|
||||
button.btn.btn-secondary.send-chat.float-right(v-once, @click='sendMessage()') {{ $t('send') }}
|
||||
.row
|
||||
textarea(:placeholder="$t('chatPlaceHolder')", v-model='newMessage')
|
||||
autocomplete(:text='newMessage', v-on:select="selectedAutocomplete")
|
||||
button.btn.btn-secondary.send-chat.float-right(v-once, @click='sendMessage()') {{ $t('send') }}
|
||||
|
||||
.container.community-guidelines(v-if='communityGuidelinesAccepted')
|
||||
.container.community-guidelines(v-if='!communityGuidelinesAccepted')
|
||||
.row
|
||||
div.col-8(v-once) {{ $t('communityGuidelinesIntro') }}
|
||||
div.col-4
|
||||
button.btn.btn-info(@click='acceptCommunityGuidelines()', v-once) {{ $t('acceptCommunityGuidelines') }}
|
||||
|
||||
.hr
|
||||
.hr-middle(v-once) {{ $t('today') }}
|
||||
|
||||
chat-message(:chat.sync='group.chat', :group-id='group._id', group-name='group.name')
|
||||
.row
|
||||
chat-message(:chat.sync='group.chat', :group-id='group._id', group-name='group.name')
|
||||
|
||||
.col-md-4.sidebar
|
||||
.section
|
||||
.grassy-meadow-backdrop
|
||||
|
||||
.sleep
|
||||
.sleep.below-header-sections
|
||||
strong(v-once) {{ $t('sleepDescription') }}
|
||||
ul
|
||||
li(v-once) {{ $t('sleepBullet1') }}
|
||||
@@ -38,75 +37,76 @@
|
||||
button.btn.btn-secondary.pause-button(v-if='!user.preferences.sleep', @click='toggleSleep()', v-once) {{ $t('pauseDailies') }}
|
||||
button.btn.btn-secondary.pause-button(v-if='user.preferences.sleep', @click='toggleSleep()', v-once) {{ $t('unpauseDailies') }}
|
||||
|
||||
.section-header
|
||||
.row
|
||||
.col-10
|
||||
h3(v-once) {{ $t('staffAndModerators') }}
|
||||
.col-2
|
||||
.toggle-up(@click="sections.staff = !sections.staff", v-if="sections.staff")
|
||||
.svg-icon(v-html="icons.upIcon")
|
||||
.toggle-down(@click="sections.staff = !sections.staff", v-if="!sections.staff")
|
||||
.svg-icon(v-html="icons.downIcon")
|
||||
.section.row(v-if="sections.staff")
|
||||
.col-3.staff(v-for='user in staff', :class='{staff: user.type === "Staff", moderator: user.type === "Moderator", bailey: user.name === "It\'s Bailey"}')
|
||||
.title {{user.name}}
|
||||
.type {{user.type}}
|
||||
.below-header-sections
|
||||
.section-header
|
||||
.row
|
||||
.col-10
|
||||
h3(v-once) {{ $t('staffAndModerators') }}
|
||||
.col-2
|
||||
.toggle-up(@click="sections.staff = !sections.staff", v-if="sections.staff")
|
||||
.svg-icon(v-html="icons.upIcon")
|
||||
.toggle-down(@click="sections.staff = !sections.staff", v-if="!sections.staff")
|
||||
.svg-icon(v-html="icons.downIcon")
|
||||
.section.row(v-if="sections.staff")
|
||||
.col-3.staff(v-for='user in staff', :class='{staff: user.type === "Staff", moderator: user.type === "Moderator", bailey: user.name === "It\'s Bailey"}')
|
||||
.title {{user.name}}
|
||||
.type {{user.type}}
|
||||
|
||||
.section-header
|
||||
.row
|
||||
.col-10
|
||||
h3(v-once) {{ $t('helpfulLinks') }}
|
||||
.col-2
|
||||
.toggle-up(@click="sections.staff = !sections.staff", v-if="sections.staff")
|
||||
.svg-icon(v-html="icons.upIcon")
|
||||
.toggle-down(@click="sections.staff = !sections.staff", v-if="!sections.staff")
|
||||
.svg-icon(v-html="icons.downIcon")
|
||||
.section.row(v-if="sections.staff")
|
||||
ul
|
||||
li
|
||||
a(herf='', v-once) {{ $t('communityGuidelinesLink') }}
|
||||
li
|
||||
a(herf='', v-once) {{ $t('lookingForGroup') }}
|
||||
li
|
||||
a(herf='', v-once) {{ $t('faq') }}
|
||||
li
|
||||
a(herf='', v-html="$t('glossary')")
|
||||
li
|
||||
a(herf='', v-once) {{ $t('wiki') }}
|
||||
li
|
||||
a(herf='', v-once) {{ $t('dataDisplayTool') }}
|
||||
li
|
||||
a(herf='', v-once) {{ $t('reportProblem') }}
|
||||
li
|
||||
a(herf='', v-once) {{ $t('requestFeature') }}
|
||||
li
|
||||
a(herf='', v-html="$t('communityForum')")
|
||||
li
|
||||
a(herf='', v-once) {{ $t('askQuestionGuild') }}
|
||||
.section-header
|
||||
.row
|
||||
.col-10
|
||||
h3(v-once) {{ $t('helpfulLinks') }}
|
||||
.col-2
|
||||
.toggle-up(@click="sections.helpfulLinks = !sections.helpfulLinks", v-if="sections.helpfulLinks")
|
||||
.svg-icon(v-html="icons.upIcon")
|
||||
.toggle-down(@click="sections.helpfulLinks = !sections.helpfulLinks", v-if="!sections.helpfulLinks")
|
||||
.svg-icon(v-html="icons.downIcon")
|
||||
.section.row(v-if="sections.helpfulLinks")
|
||||
ul
|
||||
li
|
||||
a(herf='', v-once) {{ $t('communityGuidelinesLink') }}
|
||||
li
|
||||
a(herf='', v-once) {{ $t('lookingForGroup') }}
|
||||
li
|
||||
a(herf='', v-once) {{ $t('faq') }}
|
||||
li
|
||||
a(herf='', v-html="$t('glossary')")
|
||||
li
|
||||
a(herf='', v-once) {{ $t('wiki') }}
|
||||
li
|
||||
a(herf='', v-once) {{ $t('dataDisplayTool') }}
|
||||
li
|
||||
a(herf='', v-once) {{ $t('reportProblem') }}
|
||||
li
|
||||
a(herf='', v-once) {{ $t('requestFeature') }}
|
||||
li
|
||||
a(herf='', v-html="$t('communityForum')")
|
||||
li
|
||||
a(herf='', v-once) {{ $t('askQuestionGuild') }}
|
||||
|
||||
.section-header
|
||||
.row
|
||||
.col-10
|
||||
h3(v-once) {{ $t('playerTiers') }}
|
||||
.col-2
|
||||
.toggle-up(@click="sections.staff = !sections.staff", v-if="sections.staff")
|
||||
.svg-icon(v-html="icons.upIcon")
|
||||
.toggle-down(@click="sections.staff = !sections.staff", v-if="!sections.staff")
|
||||
.svg-icon(v-html="icons.downIcon")
|
||||
.section.row(v-if="sections.staff")
|
||||
.col-12
|
||||
p(v-once) {{ $t('playerTiersDesc') }}
|
||||
ul.tier-list
|
||||
li.tier1(v-once) {{ $t('tier1') }}
|
||||
li.tier2(v-once) {{ $t('tier2') }}
|
||||
li.tier3(v-once) {{ $t('tier3') }}
|
||||
li.tier4(v-once) {{ $t('tier4') }}
|
||||
li.tier5(v-once) {{ $t('tier5') }}
|
||||
li.tier6(v-once) {{ $t('tier6') }}
|
||||
li.tier7(v-once) {{ $t('tier7') }}
|
||||
li.moderator(v-once) {{ $t('tierModerator') }}
|
||||
li.staff(v-once) {{ $t('tierStaff') }}
|
||||
li.npc(v-once) {{ $t('tierNPC') }}
|
||||
.section-header
|
||||
.row
|
||||
.col-10
|
||||
h3(v-once) {{ $t('playerTiers') }}
|
||||
.col-2
|
||||
.toggle-up(@click="sections.playerTiers = !sections.playerTiers", v-if="sections.playerTiers")
|
||||
.svg-icon(v-html="icons.upIcon")
|
||||
.toggle-down(@click="sections.playerTiers = !sections.playerTiers", v-if="!sections.playerTiers")
|
||||
.svg-icon(v-html="icons.downIcon")
|
||||
.section.row(v-if="sections.playerTiers")
|
||||
.col-12
|
||||
p(v-once) {{ $t('playerTiersDesc') }}
|
||||
ul.tier-list
|
||||
li.tier1(v-once) {{ $t('tier1') }}
|
||||
li.tier2(v-once) {{ $t('tier2') }}
|
||||
li.tier3(v-once) {{ $t('tier3') }}
|
||||
li.tier4(v-once) {{ $t('tier4') }}
|
||||
li.tier5(v-once) {{ $t('tier5') }}
|
||||
li.tier6(v-once) {{ $t('tier6') }}
|
||||
li.tier7(v-once) {{ $t('tier7') }}
|
||||
li.moderator(v-once) {{ $t('tierModerator') }}
|
||||
li.staff(v-once) {{ $t('tierStaff') }}
|
||||
li.npc(v-once) {{ $t('tierNPC') }}
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@@ -169,7 +169,11 @@
|
||||
|
||||
.sidebar {
|
||||
background-color: $gray-600;
|
||||
padding-top: 2em;
|
||||
padding: 0em;
|
||||
|
||||
.below-header-sections {
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-up, .toggle-down {
|
||||
@@ -192,7 +196,7 @@
|
||||
|
||||
.grassy-meadow-backdrop {
|
||||
background-image: url('~assets/images/groups/grassy-meadow-backdrop.png');
|
||||
width: 472px;
|
||||
width: 100%;
|
||||
height: 246px;
|
||||
}
|
||||
|
||||
@@ -314,6 +318,8 @@ export default {
|
||||
},
|
||||
sections: {
|
||||
staff: true,
|
||||
helpfulLinks: true,
|
||||
playerTiers: true,
|
||||
},
|
||||
staff: [
|
||||
{
|
||||
@@ -405,16 +411,11 @@ export default {
|
||||
selectedAutocomplete (newText) {
|
||||
this.newMessage = newText;
|
||||
},
|
||||
aggreeToGuideLines () {
|
||||
// @TODO:
|
||||
},
|
||||
pauseDailies () {
|
||||
// @TODO:
|
||||
},
|
||||
acceptCommunityGuidelines () {
|
||||
this.$store.dispatch('user:set', {'flags.communityGuidelinesAccepted': true});
|
||||
},
|
||||
toggleSleep () {
|
||||
this.user.preferences.sleep = !this.user.preferences.sleep;
|
||||
this.$store.dispatch('user:sleep');
|
||||
},
|
||||
async sendMessage () {
|
||||
|
||||
Reference in New Issue
Block a user