Merge branch 'develop' into report-profile-modal

This commit is contained in:
CuriousMagpie
2023-08-11 12:40:07 -04:00
274 changed files with 6703 additions and 4579 deletions
+41 -37
View File
@@ -1,26 +1,35 @@
<template>
<div class="row">
<div class="col-12 text-center">
<div class="col-6 text-center mx-auto mb-5">
<!-- @TODO i18n. How to setup the strings with the router-link inside?-->
<img
class="not-found-img"
:class="retiredChatPage ? 'mt-5' : 'image-404'"
src="~@/assets/images/404.png"
>
<h1 class="not-found">
Sometimes even the bravest adventurer gets lost.
</h1>
<h2 class="not-found">
Looks like this link is broken or the page may have moved, sorry!
</h2>
<h2 class="not-found">
Head back to the
<router-link to="/">
Homepage
</router-link>or
<router-link :to="contactUsLink">
Contact Us
</router-link>about the issue.
</h2>
<div v-if="retiredChatPage">
<h1>
{{ $t('tavernDiscontinued') }}
</h1>
<p>{{ $t('tavernDiscontinuedDetail') }}</p>
<p v-html="$t('tavernDiscontinuedLinks')"></p>
</div>
<div v-else>
<h1>
Sometimes even the bravest adventurer gets lost.
</h1>
<p class="mb-0">
Looks like this link is broken or the page may have moved, sorry!
</p>
<p>
Head back to the
<router-link to="/">
Homepage
</router-link>or
<router-link :to="contactUsLink">
Contact Us
</router-link>about the issue.
</p>
</div>
</div>
</div>
</template>
@@ -37,6 +46,9 @@ export default {
}
return { name: 'contact' };
},
retiredChatPage () {
return this.$route.fullPath.indexOf('/groups') !== -1;
},
},
};
</script>
@@ -44,28 +56,20 @@ export default {
<style lang="scss" scoped>
@import '~@/assets/scss/colors.scss';
.col-12 {
margin-bottom: 120px;
}
.not-found-img {
margin-top: 152px;
margin-bottom: 42px;
}
h1.not-found {
line-height: 1.33;
h1, .static-wrapper h1 {
color: $purple-200;
margin-bottom: 8px;
font-weight: normal;
margin-top: 0px;
line-height: 1.33;
margin-top: 3rem;
margin-bottom: 1rem;
}
h2.not-found {
line-height: 1.4;
font-weight: normal;
color: $gray-200;
margin-bottom: 0px;
margin-top: 0px;
p {
font-size: 16px;
line-height: 1.75;
}
.image-404 {
margin-top: 104px;
}
</style>
@@ -1,60 +0,0 @@
<template>
<b-modal
id="testing"
:title="$t('guildReminderTitle')"
size="lg"
:hide-footer="true"
>
<div class="modal-body text-center">
<br>
<div class="scene_guilds"></div>
<br>
<h4>{{ $t('guildReminderText1') }}</h4>
</div>
<div class="modal-footer">
<div class="container-fluid">
<div class="row">
<div class="col-6 text-center">
<button
class="btn btn-secondary"
@click="close()"
>
{{ $t('guildReminderDismiss') }}
</button>
</div>
<div
class="col-6 text-center"
@click="close()"
>
<div
class="btn btn-primary"
@click="takeMethere()"
>
{{ $t('guildReminderCTA') }}
</div>
</div>
</div>
</div>
</div>
</b-modal>
</template>
<style scoped>
.scene_guilds {
margin: 0 auto;
}
</style>
<script>
export default {
methods: {
close () {
this.$root.$emit('bv::hide::modal', 'testing');
},
takeMethere () {
this.$router.push('/groups/discovery');
this.close();
},
},
};
</script>
@@ -1,58 +0,0 @@
<template>
<b-modal
id="testingletiant"
:title="$t('guildReminderTitle')"
size="lg"
:hide-footer="true"
>
<div class="modal-content"></div>
<div class="modal-body text-center">
<br>
<div class="scene_guilds"></div>
<br>
<h4>{{ $t('guildReminderText2') }}</h4>
</div>
<div class="modal-footer">
<div class="container-fluid">
<div class="row">
<div class="col-6 text-center">
<button
class="btn btn-secondary"
@click="close()"
>
{{ $t('guildReminderDismiss') }}
</button>
</div>
<div class="col-6 text-center">
<div
class="btn btn-primary"
@click="takeMethere()"
>
{{ $t('guildReminderCTA') }}
</div>
</div>
</div>
</div>
</div>
</b-modal>
</template>
<style scoped>
.scene_guilds {
margin: 0 auto;
}
</style>
<script>
export default {
methods: {
close () {
this.$root.$emit('bv::hide::modal', 'testingletiant');
},
takeMethere () {
this.$router.push('/groups/discovery');
this.close();
},
},
};
</script>
@@ -8,23 +8,15 @@
slot="modal-header"
class="bug-report-modal-header"
>
<h2 v-once>
{{ $t('reportBug') }}
<h2>
{{ question ? $t('askQuestion') : $t('reportBug') }}
</h2>
<div
v-once
class="report-bug-header-describe"
>
{{ $t('reportBugHeaderDescribe') }}
</div>
<div class="dialog-close">
<close-icon
:purple="true"
@click="close()"
/>
<div class="report-bug-header-describe">
{{ question ? $t('askQuestionHeaderDescribe') : $t('reportBugHeaderDescribe') }}
</div>
<close-x
@close="close()"
/>
</div>
<div>
<form
@@ -40,11 +32,8 @@
>
{{ $t('email') }}
</label>
<div
v-once
class="mb-2 description-label"
>
{{ $t('reportEmailText') }}
<div class="mb-2 description-label">
{{ question ? $t('questionEmailText') : $t('reportEmailText') }}
</div>
<input
id="emailInput"
@@ -64,21 +53,18 @@
</div>
</div>
<label v-once>
{{ $t('reportDescription') }}
<label>
{{ question ? $t('question') : $t('reportDescription') }}
</label>
<div
v-once
class="mb-2 description-label"
>
{{ $t('reportDescriptionText') }}
<div class="mb-2 description-label">
{{ question ? $t('questionDescriptionText') : $t('reportDescriptionText') }}
</div>
<textarea
v-model="message"
class="form-control"
rows="5"
:required="true"
:placeholder="$t('reportDescriptionPlaceholder')"
:placeholder="question ? $t('questionPlaceholder') : $t('reportDescriptionPlaceholder')"
:class="{'input-invalid': messageInvalid && this.message.length === 0}"
>
@@ -89,7 +75,7 @@
type="submit"
:disabled="!message || !emailValid"
>
{{ $t('submitBugReport') }}
{{ question ? $t('submitQuestion') : $t('submitBugReport') }}
</button>
</form>
</div>
@@ -141,7 +127,7 @@ h2 {
.bug-report-modal-header {
color: $white;
width: 100%;
padding: 2rem 3rem 1.5rem 1.5rem;
padding: 1.5rem 3rem 1.5rem 1.5rem;
background-image: linear-gradient(288deg, #{$purple-200}, #{$purple-300});
}
@@ -182,13 +168,13 @@ label {
<script>
import axios from 'axios';
import isEmail from 'validator/lib/isEmail';
import closeIcon from '@/components/shared/closeIcon';
import closeX from '@/components/ui/closeX';
import { mapState } from '@/libs/store';
import { MODALS } from '@/libs/consts';
export default {
components: {
closeIcon,
closeX,
},
data () {
return {
@@ -211,6 +197,7 @@ export default {
await axios.post('/api/v4/bug-report', {
message: this.message,
email: this.email,
question: this.question,
});
this.message = '';
@@ -233,6 +220,9 @@ export default {
if (this.email.length <= 3) return false;
return !this.emailValid;
},
question () {
return this.$store.state.bugReportOptions.question;
},
},
mounted () {
const { user } = this;
@@ -50,7 +50,6 @@ import notificationsMixin from '@/mixins/notifications';
import Task from '@/components/tasks/task';
import taskDefaults from '@/../../common/script/libs/taskDefaults';
import { TAVERN_ID } from '@/../../common/script/constants';
const baseUrl = 'https://habitica.com';
@@ -89,9 +88,7 @@ export default {
createTask: 'tasks:create',
}),
groupPath () {
if (this.groupId === TAVERN_ID) {
return `${baseUrl}/groups/tavern`;
} if (this.groupType === 'party') {
if (this.groupType === 'party') {
return `${baseUrl}/party`;
}
return `${baseUrl}/groups/guild/${this.groupId}`;
@@ -6,13 +6,10 @@
:style="{height}"
>
<slot name="content"></slot>
<div
<close-x
v-if="canClose"
class="close-icon svg-icon icon-12"
@click="close()"
v-html="icons.close"
></div>
@close="close()"
/>
</div>
</template>
@@ -30,32 +27,24 @@ body.modal-open .habitica-top-banner {
padding-left: 1.5rem;
padding-right: 1.625rem;
z-index: 1300;
}
.close-icon.svg-icon {
position: relative;
top: 0;
right: 0;
opacity: 0.48;
& ::v-deep svg path {
stroke: $white !important;
}
&:hover {
opacity: 0.75;
.modal-close {
position: unset;
}
}
</style>
<script>
import closeIcon from '@/assets/svg/close.svg';
import closeX from '@/components/ui/closeX';
import {
clearBannerSetting, hideBanner, isBannerHidden, updateBannerHeight,
} from '@/libs/banner.func';
import { EVENTS } from '@/libs/events';
export default {
components: {
closeX,
},
props: {
bannerId: {
type: String,
@@ -82,9 +71,6 @@ export default {
},
data () {
return {
icons: Object.freeze({
close: closeIcon,
}),
hidden: false,
};
},
@@ -119,8 +105,6 @@ export default {
close () {
hideBanner(this.bannerId);
this.hidden = true;
this.$root.$emit(EVENTS.BANNER_HIDDEN, this.bannerId);
},
},
};
@@ -0,0 +1,64 @@
<template>
<base-banner
banner-id="chat-warning"
banner-class="chat-banner"
class="chat-banner"
height="3rem"
v-if="showChatWarning"
:class="{faq: faqPage}"
>
<div
slot="content"
class="w-100 text-center"
v-html="$t('chatSunsetWarning')"
>
</div>
</base-banner>
</template>
<style lang="scss">
@import '~@/assets/scss/colors.scss';
.chat-banner {
width: 100%;
min-height: 48px;
padding: 8px;
color: $orange-1;
background-color: $orange-100;
line-height: 1.71;
a {
color: $orange-1;
text-decoration: underline;
&:hover {
color: $orange-1;
}
}
&.faq {
position: fixed;
top: 3.5rem;
}
}
</style>
<script>
import BaseBanner from './base';
export default {
components: {
BaseBanner,
},
computed: {
faqPage () {
return (this.$route.fullPath.indexOf('/faq')) !== -1;
},
showChatWarning () {
return false;
},
},
};
</script>
+10 -53
View File
@@ -194,48 +194,6 @@
>
{{ $t('party') }}
</b-nav-item>
<li
class="topbar-item droppable"
:class="{
'active': $route.path.startsWith('/groups')}"
>
<div
class="chevron rotate"
@click="dropdownMobile($event)"
>
<div
v-once
class="chevron-icon-down"
v-html="icons.chevronDown"
></div>
</div>
<router-link
class="nav-link"
:to="{name: 'tavern'}"
>
{{ $t('guilds') }}
</router-link>
<div class="topbar-dropdown">
<router-link
class="topbar-dropdown-item dropdown-item"
:to="{name: 'tavern'}"
>
{{ $t('tavern') }}
</router-link>
<router-link
class="topbar-dropdown-item dropdown-item"
:to="{name: 'myGuilds'}"
>
{{ $t('myGuilds') }}
</router-link>
<router-link
class="topbar-dropdown-item dropdown-item"
:to="{name: 'guildsDiscovery'}"
>
{{ $t('guildsDiscovery') }}
</router-link>
</div>
</li>
<li
class="topbar-item droppable"
:class="{
@@ -354,22 +312,18 @@
>
{{ $t('reportBug') }}
</a>
<router-link
<a
class="topbar-dropdown-item dropdown-item"
to="/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a"
target="_blank"
@click.prevent="openBugReportModal(true)"
>
{{ $t('askQuestion') }}
</router-link>
</a>
<a
class="topbar-dropdown-item dropdown-item"
href="https://docs.google.com/forms/d/e/1FAIpQLScPhrwq_7P1C6PTrI3lbvTsvqGyTNnGzp1ugi1Ml0PFee_p5g/viewform?usp=sf_link"
target="_blank"
>{{ $t('requestFeature') }}</a>
<a
class="topbar-dropdown-item dropdown-item"
href="https://habitica.fandom.com/wiki/Contributing_to_Habitica"
target="_blank"
>{{ $t('contributing') }}</a>
<a
class="topbar-dropdown-item dropdown-item"
href="https://habitica.fandom.com/wiki/Habitica_Wiki"
@@ -661,6 +615,7 @@ body.modal-open #habitica-menu {
&:hover {
background: $purple-300;
text-decoration: none;
&:last-child {
border-bottom-right-radius: 5px;
@@ -830,9 +785,11 @@ export default {
async mounted () {
await this.getUserGroupPlans();
await this.getUserParty();
Array.from(document.getElementById('menu_collapse').getElementsByTagName('a')).forEach(link => {
link.addEventListener('click', this.closeMenu);
});
if (document.getElementById('menu_collapse')) {
Array.from(document.getElementById('menu_collapse').getElementsByTagName('a')).forEach(link => {
link.addEventListener('click', this.closeMenu);
});
}
Array.from(document.getElementsByClassName('topbar-item')).forEach(link => {
link.addEventListener('mouseenter', this.dropdownDesktop);
link.addEventListener('mouseleave', this.dropdownDesktop);
@@ -44,13 +44,13 @@ export default {
if (!this.notification || !this.notification.data) {
return;
}
if (this.notification.data.destination === 'backgrounds') {
if (this.notification.data.destination.indexOf('backgrounds') !== -1) {
this.$store.state.avatarEditorOptions.editingUser = true;
this.$store.state.avatarEditorOptions.startingPage = 'backgrounds';
this.$store.state.avatarEditorOptions.subpage = '2023';
this.$root.$emit('bv::show::modal', 'avatar-modal');
} else {
this.$router.push({ name: this.notification.data.destination || 'items' });
this.$router.push(this.notification.data.destination || '/inventory/items');
}
},
},
@@ -11,8 +11,6 @@
<low-health />
<level-up />
<choose-class />
<testing />
<testingletiant />
<rebirth-enabled />
<contributor />
<won-challenge />
@@ -127,8 +125,6 @@ import chooseClass from './achievements/chooseClass';
import armoireEmpty from './achievements/armoireEmpty';
import questCompleted from './achievements/questCompleted';
import questInvitation from './achievements/questInvitation';
import testing from './achievements/testing';
import testingletiant from './achievements/testingletiant';
import rebirthEnabled from './achievements/rebirthEnabled';
import contributor from './achievements/contributor';
import invitedFriend from './achievements/invitedFriend';
@@ -269,8 +265,6 @@ export default {
armoireEmpty,
questCompleted,
questInvitation,
testing,
testingletiant,
rebirthEnabled,
contributor,
loginIncentives,
@@ -300,7 +294,6 @@ export default {
// general notifications
'CRON',
'FIRST_DROPS',
'GUILD_PROMPT',
'LOGIN_INCENTIVE',
'NEW_CONTRIBUTOR_LEVEL',
'ONBOARDING_COMPLETE',
@@ -705,14 +698,6 @@ export default {
this.$root.$emit('bv::show::modal', 'first-drops');
}
break;
case 'GUILD_PROMPT':
// @TODO: I'm pretty sure we can find better names for these
if (notification.data.textletiant === -1) {
this.$root.$emit('bv::show::modal', 'testing');
} else {
this.$root.$emit('bv::show::modal', 'testingletiant');
}
break;
case 'REBIRTH_ENABLED':
this.$root.$emit('bv::show::modal', 'rebirth-enabled');
break;
@@ -106,6 +106,7 @@ export default {
preventMultipleWatchExecution: false,
eventPromoBannerHeight: null,
sleepingBannerHeight: null,
warningBannerHeight: null,
};
},
computed: {
@@ -135,6 +136,10 @@ export default {
notificationBannerHeight () {
let scrollPosToCheck = 56;
if (this.warningBannerHeight) {
scrollPosToCheck += this.warningBannerHeight;
}
if (this.sleepingBannerHeight) {
scrollPosToCheck += this.sleepingBannerHeight;
}
@@ -361,6 +366,7 @@ export default {
updateBannerHeightAndScrollY () {
this.updateEventBannerHeight();
this.warningBannerHeight = getBannerHeight('chat-warning');
this.sleepingBannerHeight = getBannerHeight('damage-paused');
this.updateScrollY();
},
@@ -0,0 +1,615 @@
<template>
<div class="top-container mx-auto">
<div class="main-text mr-4">
<!-- title goes here -->
<div class="title-details">
<h1 v-once>
{{ $t('sunsetFaqTitle') }}
</h1>
</div>
<div class="body-text">
<p v-html="$t('sunsetFaqPara1')"></p> <!-- there's html in here -->
<p>{{ $t('sunsetFaqPara2') }}</p>
<p>{{ $t('sunsetFaqPara3') }}</p>
<p>{{ $t('sunsetFaqPara4') }}</p>
<p>{{ $t('sunsetFaqPara5') }}</p>
</div>
<!-- Which services are ending -->
<div>
<h3 class="headings">
{{ $t('sunsetFaqHeader1') }}
</h3>
</div>
<div class="body-text">
<p v-html="$t('sunsetFaqPara6')"></p>
</div>
<!-- Why are tavern and guild ending? -->
<div>
<h3 class="headings">
{{ $t('sunsetFaqHeader2') }}
</h3>
</div>
<div class="body-text">
<ul>
<li>{{ $t('sunsetFaqList1') }}</li>
<li>{{ $t('sunsetFaqList2') }}</li>
<li>{{ $t('sunsetFaqList3') }}</li>
</ul>
</div>
<!-- Can I still talk to my party/group members? -->
<div>
<h3 class="headings">
{{ $t('sunsetFaqHeader3') }}
</h3>
</div>
<div class="body-text">
<p>{{ $t('sunsetFaqPara7') }}</p>
</div>
<!-- Pausing dailies -->
<div>
<h3 class="headings">
{{ $t('sunsetFaqHeader4') }}
</h3>
</div>
<div class="body-text">
<p>{{ $t('sunsetFaqPara8') }}</p>
</div>
<!-- Accessing group plans -->
<div>
<h3 class="headings">
{{ $t('sunsetFaqHeader5') }}
</h3>
</div>
<div class="body-text">
<p v-html="$t('sunsetFaqPara9')"></p> <!-- there's html in here -->
</div>
<!-- Can I access guild chats? Or banked Gems? -->
<div>
<h3 class="headings">
{{ $t('sunsetFaqHeader12') }}
</h3>
</div>
<div class="body-text">
<p v-html="$t('sunsetFaqPara21')"></p>
</div>
<div>
<h3 class="headings">
{{ $t('sunsetFaqHeader6') }}
</h3>
</div>
<div class="body-text">
<p>{{ $t('sunsetFaqPara10') }}</p>
</div>
<!-- How can players find groups? -->
<div>
<h3 class="headings">
{{ $t('sunsetFaqHeader7') }}
</h3>
</div>
<div class="body-text">
<p>{{ $t('sunsetFaqPara11') }}</p>
</div>
<!-- What about contributors? -->
<div>
<h3 class="headings">
{{ $t('sunsetFaqHeader8') }}
</h3>
</div>
<div class="body-text">
<p v-html="$t('sunsetFaqPara12')"></p> <!-- there's html in here -->
<p v-html="$t('sunsetFaqPara13')"></p> <!-- there's html in here -->
<p v-html="$t('sunsetFaqPara14')"></p> <!-- there's html in here -->
<p v-html="$t('sunsetFaqPara15')"></p> <!-- there's html in here -->
<p v-html="$t('sunsetFaqPara16')"></p> <!-- there's html in here -->
<p v-html="$t('sunsetFaqPara17')"></p> <!-- there's html in here -->
<p v-html="$t('sunsetFaqPara18')"></p> <!-- there's html in here -->
<p v-html="$t('sunsetFaqPara19')"></p> <!-- there's html in here -->
</div>
<!-- Challenges -->
<div>
<h3 class="headings">
{{ $t('sunsetFaqHeader9') }}
</h3>
</div>
<div class="body-text">
<ul>
<li>{{ $t('sunsetFaqList4') }}</li>
<li>{{ $t('sunsetFaqList5') }}</li>
<li>{{ $t('sunsetFaqList6') }}</li>
<li>{{ $t('sunsetFaqList7') }}</li>
</ul>
</div>
<!-- Questions about how to use Habitica -->
<div>
<h3 class="headings">
{{ $t('sunsetFaqHeader10') }}
</h3>
</div>
<div class="body-text">
<ul>
<li v-html="$t('sunsetFaqList8')"></li> <!-- there's html in here -->
<li v-html="$t('sunsetFaqList9')"></li> <!-- there's html in here -->
<li v-html="$t('sunsetFaqList10')"></li> <!-- there's html in here -->
</ul>
</div>
<!-- Community Guidelines and TOS -->
<div>
<h3 class="headings">
{{ $t('sunsetFaqHeader11') }}
</h3>
</div>
<div class="body-text">
<p v-html="$t('sunsetFaqPara20')"></p>
</div>
</div>
<!-- sidebar -->
<div class="sidebar py-4 d-flex flex-column">
<!-- staff -->
<div class="ml-4">
<h2>
{{ $t('staff') }}
</h2>
<div class="d-flex flex-wrap">
<div
v-for="user in staff"
:key="user.uuid"
class="staff col-6 p-0"
>
<div class="d-flex">
<router-link
class="title"
:to="{'name': 'userProfile', 'params': {'userId': user.uuid}}"
>
{{ user.name }}
</router-link>
<div
v-if="user.type === 'Staff'"
class="svg-icon staff-icon ml-1"
v-html="icons.tierStaff"
></div>
</div>
</div>
</div>
</div>
<!-- player tiers -->
<div class="ml-4">
<h2 class="mt-4 mb-1">
{{ $t('playerTiers') }}
</h2>
<ul class="tier-list">
<li
v-once
class="tier1 d-flex justify-content-center"
>
{{ $t('tier1') }}
<div
class="svg-icon ml-1"
v-html="icons.tier1"
></div>
</li>
<li
v-once
class="tier2 d-flex justify-content-center"
>
{{ $t('tier2') }}
<div
class="svg-icon ml-1"
v-html="icons.tier2"
></div>
</li>
<li
v-once
class="tier3 d-flex justify-content-center"
>
{{ $t('tier3') }}
<div
class="svg-icon ml-1"
v-html="icons.tier3"
></div>
</li>
<li
v-once
class="tier4 d-flex justify-content-center"
>
{{ $t('tier4') }}
<div
class="svg-icon ml-1"
v-html="icons.tier4"
></div>
</li>
<li
v-once
class="tier5 d-flex justify-content-center"
>
{{ $t('tier5') }}
<div
class="svg-icon ml-1"
v-html="icons.tier5"
></div>
</li>
<li
v-once
class="tier6 d-flex justify-content-center"
>
{{ $t('tier6') }}
<div
class="svg-icon ml-1"
v-html="icons.tier6"
></div>
</li>
<li
v-once
class="tier7 d-flex justify-content-center"
>
{{ $t('tier7') }}
<div
class="svg-icon ml-1"
v-html="icons.tier7"
></div>
</li>
<li
v-once
class="moderator d-flex justify-content-center"
>
{{ $t('tierModerator') }}
<div
class="svg-icon ml-1"
v-html="icons.tierMod"
></div>
</li>
<li
v-once
class="staff d-flex justify-content-center"
>
{{ $t('tierStaff') }}
<div
class="svg-icon ml-1"
v-html="icons.tierStaff"
></div>
</li>
<li
v-once
class="npc d-flex justify-content-center"
>
{{ $t('tierNPC') }}
</li>
</ul>
</div>
<!-- Daniel in sweet, sweet retirement with Jorts -->
<div>
<div class="gradient">
</div>
<div
class="grassy-meadow-backdrop"
:style="{'background-image': imageURLs.background}"
>
<div
class="daniel_front"
:style="{'background-image': imageURLs.npc}"
></div>
<div
class="pixel-border"
:style="{'background-image': imageURLs.pixel_border}"
></div>
</div>
</div>
<!-- email admin -->
<div class="d-flex flex-column justify-content-center">
<div class="question mx-auto">
{{ $t('anotherQuestion') }}
</div>
<div
class="contact mx-auto"
>
<p v-html="$t('contactAdmin')"></p> <!-- there's html in here -->
</div>
</div>
</div>
<!-- final div! -->
</div>
</template>
<style lang="scss" scoped>
@import '~@/assets/scss/colors.scss';
h1 {
margin-top: 0px;
line-height: 1.33;
}
li {
padding-bottom: 16px;
&::marker {
size: 0.5em;
}
}
p {
margin-bottom: 21px;
}
ul {
padding-left: 20px;
}
.top-container {
width: 66.67%;
margin-top: 80px;
display: flex;
@media (max-width: 1024px) {
flex-wrap: wrap;
}
}
.main-text {
.body-text {
font-size: 1em;
color: $gray-10;
line-height: 1.71;
}
.headings {
font-size: 1.15em;
font-weight: 400;
line-height: 1.75;
color: $purple-200;
}
}
.sidebar {
height: fit-content;
width: 330px;
background-color: $gray-700;
border-radius: 16px;
h2 {
color: $gray-10;
font-family: Roboto;
font-size: 14px;
font-weight: bold;
line-height: 1.71;
}
.staff {
.staff-icon {
width: 10px;
margin-top: 5px;
}
.title {
height: 24px;
color: $purple-300;
font-weight: bold;
display: inline-block;
margin-bottom: 4px;
}
}
.tier-list {
list-style-type: none;
padding: 0;
width: 282px;
font-size: 1em !important;
li {
height: 40px;
border-radius: 4px;
border: solid 1px $gray-500;
text-align: center;
padding: 8px 0;
margin-bottom: 8px;
margin-right: 4px;
font-weight: bold;
line-height: 1.71;
}
.tier1 {
color: #c42870;
.svg-icon {
width: 11px;
margin-top: 5px;
}
}
.tier2 {
color: #b01515;
.svg-icon {
width: 11px;
margin-top: 5px;
}
}
.tier3 {
color: #d70e14;
.svg-icon {
width: 13px;
margin-top: 4px;
}
}
.tier4 {
color: #c24d00;
.svg-icon {
width: 13px;
margin-top: 4px;
}
}
.tier5 {
color: #9e650f;
.svg-icon {
width: 8px;
margin-top: 7px;
}
}
.tier6 {
color: #2b8363;
.svg-icon {
width: 8px;
margin-top: 7px;
}
}
.tier7 {
color: #167e87;
.svg-icon {
width: 12px;
margin-top: 4px;
}
}
.moderator {
color: #277eab;
.svg-icon {
width: 13px;
margin-top: 3px;
}
}
.staff {
color: #6133b4;
.svg-icon {
width: 10px;
margin-top: 7px;
}
}
.npc {
color: $black;
}
}
.gradient {
position: absolute;
width: 330px;
height: 100px;
margin: -1px 0 116px;
background-image: linear-gradient(to bottom, $gray-700 0%, rgba(249, 249, 249, 0) 100%);
}
.grassy-meadow-backdrop {
background-repeat: repeat-x;
width: 330px;
height: 246px;
}
.daniel_front {
height: 246px;
width: 330px;
background-repeat: no-repeat;
margin: 0 auto;
}
.pixel-border {
width: 330px;
height: 30px;
background-repeat: no-repeat;
position: absolute;
margin-top: -30px;
}
.question {
font-size: 1em;
font-weight: bold;
line-height: 1.71;
color: $gray-10;
margin-top: 24px;
}
.contact p {
font-size: 1em;
margin-bottom: 0px;
}
}
</style>
<script>
import find from 'lodash/find';
import { mapState } from '@/libs/store';
import tier1 from '@/assets/svg/tier-1.svg';
import tier2 from '@/assets/svg/tier-2.svg';
import tier3 from '@/assets/svg/tier-3.svg';
import tier4 from '@/assets/svg/tier-4.svg';
import tier5 from '@/assets/svg/tier-5.svg';
import tier6 from '@/assets/svg/tier-6.svg';
import tier7 from '@/assets/svg/tier-7.svg';
import tierMod from '@/assets/svg/tier-mod.svg';
import tierNPC from '@/assets/svg/tier-npc.svg';
import tierStaff from '@/assets/svg/tier-staff.svg';
import staffList from '../../libs/staffList';
export default {
data () {
return {
icons: Object.freeze({
tier1,
tier2,
tier3,
tier4,
tier5,
tier6,
tier7,
tierMod,
tierNPC,
tierStaff,
}),
group: {
chat: [],
},
sections: {
worldBoss: true,
},
staff: staffList,
};
},
computed: {
...mapState({
currentEventList: 'worldState.data.currentEventList',
}),
imageURLs () {
const currentEvent = find(this.currentEventList, event => Boolean(event.season));
if (!currentEvent) {
return {
background: 'url(/static/npc/normal/tavern_background.png)',
npc: 'url(/static/npc/normal/tavern_npc.png)',
pixel_border: 'url(/static/npc/normal/pixel_border.png)',
};
}
return {
background: `url(/static/npc/${currentEvent.season}/tavern_background.png)`,
npc: `url(/static/npc/${currentEvent.season}/tavern_npc.png)`,
pixel_border: 'url(/static/npc/normal/pixel_border.png)',
};
},
},
async mounted () {
this.$store.dispatch('common:setTitle', {
subSection: this.$t('faq/taverns-and-guilds'),
});
document.body.style.background = '#ffffff';
},
};
</script>
@@ -1,99 +1,61 @@
<template>
<div class="container-fluid">
<div class="container-fluid w-75 mx-auto">
<h1>{{ $t('communityGuidelines') }}</h1>
<hr>
<p>{{ $t('lastUpdated') }} February 8, 2023</p>
<p>{{ $t('lastUpdated') }} June 8, 2023</p>
<h2 id="welcome">
{{ $t('commGuideHeadingWelcome') }}
</h2>
<div class="media align-items-center">
<img src="~@/assets/images/community-guidelines/intro.png">
<div class="media-body">
<p v-html="$t('commGuidePara001')"></p>
<p v-html="$t('commGuidePara002')"></p>
</div>
</div>
<img
src="~@/assets/images/community-guidelines/intro.png"
class="mb-3"
>
<p v-html="$t('commGuidePara001')"></p>
<p v-html="$t('commGuidePara002')"></p>
<p v-html="$t('commGuidePara003')"></p>
<h2 id="interactions">
{{ $t('commGuideHeadingInteractions') }}
</h2>
<p v-html="$t('commGuidePara015')"></p>
<p v-html="$t('commGuidePara016')"></p>
<p v-html="$t('commGuidePara017')"></p>
<ul>
<li v-html="$t('commGuideList01F')"></li>
<li v-html="$t('commGuideList01A')"></li>
<li v-html="$t('commGuideList01B')"></li>
<li v-html="$t('commGuideList01C')"></li>
<li v-html="$t('commGuideList01D')"></li>
<li v-html="$t('commGuideList01E')"></li>
<li v-html="$t('commGuideList01F')"></li>
</ul>
<div class="media align-items-center">
<img src="~@/assets/images/community-guidelines/publicSpaces.png">
</div>
<ul>
<li v-html="$t('commGuideList02N')"></li>
<li v-html="$t('commGuideList02A')"></li>
<li v-html="$t('commGuideList02B')"></li>
<li v-html="$t('commGuideList02G')"></li>
<li><strong>{{ $t('commGuideList01A') }}</strong></li>
<li v-html="$t('commGuideList02C')"></li>
<li v-html="$t('commGuideList02N')"></li>
<li v-html="$t('commGuideList02H')"></li>
<li v-html="$t('commGuideList02A')"></li>
<li v-html="$t('commGuideList02I')"></li>
<li v-html="$t('commGuideList02G')"></li>
<li v-html="$t('commGuideList02D')"></li>
<li v-html="$t('commGuideList02E')"></li>
<li v-html="$t('commGuideList02F')"></li>
<li v-html="$t('commGuideList02O')"></li>
<li v-html="$t('commGuidePara037')"></li>
<li v-html="$t('commGuideList02P')"></li>
<li v-html="$t('commGuideList02Q')"></li>
<li v-html="$t('commGuideList02M')"></li>
<li v-html="$t('commGuideList02L')"></li>
<li v-html="$t('commGuideList02J')"></li>
<li v-html="$t('commGuideList02K')"></li>
<li v-html="$t('commGuideList02L')"></li>
</ul>
<p v-html="$t('commGuidePara019')"></p>
<p v-html="$t('commGuidePara020')"></p>
<p v-html="$t('commGuidePara020A')"></p>
<p v-html="$t('commGuidePara021')"></p>
<h3 id="tavern">
{{ $t('commGuideHeadingTavern') }}
</h3>
<div class="media align-items-center">
<img src="~@/assets/images/community-guidelines/tavern.png">
<div class="media-body">
<p v-html="$t('commGuidePara022')"></p>
<p v-html="$t('commGuidePara023')"></p>
<p v-html="$t('commGuidePara024')"></p>
</div>
</div>
<h3 id="guilds">
{{ $t('commGuideHeadingPublicGuilds') }}
</h3>
<div class="media align-items-center">
<div class="media-body">
<p v-html="$t('commGuidePara029')"></p>
<p v-html="$t('commGuidePara031')"></p>
</div>
<img src="~@/assets/images/community-guidelines/publicGuilds.png">
</div>
<p v-html="$t('commGuidePara033')"></p>
<p v-html="$t('commGuidePara035')"></p>
<p v-html="$t('commGuidePara036')"></p>
<p v-html="$t('commGuidePara037')"></p>
<p v-html="$t('commGuidePara038')"></p>
<h2 id="infractions-consequences-restoration">
{{ $t('commGuideHeadingInfractionsEtc') }}
</h2>
<h3 id="infractions">
{{ $t('commGuideHeadingInfractions') }}
</h3>
<div class="media align-items-center">
<img src="~@/assets/images/community-guidelines/infractions.png">
<div class="media-body">
<p v-html="$t('commGuidePara050')"></p>
<p v-html="$t('commGuidePara051')"></p>
</div>
</div>
<img
src="~@/assets/images/community-guidelines/infractions.png"
class="mb-3"
>
<p v-html="$t('commGuidePara050')"></p>
<p v-html="$t('commGuidePara051')"></p>
<h4>{{ $t('commGuideHeadingSevereInfractions') }}</h4>
<p v-html="$t('commGuidePara052')"></p>
<p v-html="$t('commGuidePara053')"></p>
<ul>
<li v-html="$t('commGuideList05A')"></li>
<li v-html="$t('commGuideList05B')"></li>
<li v-html="$t('commGuideList05C')"></li>
<li v-html="$t('commGuideList05D')"></li>
@@ -101,59 +63,34 @@
<li v-html="$t('commGuideList05F')"></li>
<li v-html="$t('commGuideList05G')"></li>
<li v-html="$t('commGuideList05H')"></li>
<li v-html="$t('commGuideList05A')"></li>
</ul>
<h4>{{ $t('commGuideHeadingModerateInfractions') }}</h4>
<p v-html="$t('commGuidePara054')"></p>
<p v-html="$t('commGuidePara055')"></p>
<ul>
<li v-html="$t('commGuideList06A')"></li>
<li v-html="$t('commGuideList06B')"></li>
<li v-html="$t('commGuideList06C')"></li>
<li v-html="$t('commGuideList06D')"></li>
<li v-html="$t('commGuideList06E')"></li>
</ul>
<h4>{{ $t('commGuideHeadingMinorInfractions') }}</h4>
<p v-html="$t('commGuidePara056')"></p>
<p v-html="$t('commGuidePara057')"></p>
<ul>
<li v-html="$t('commGuideList07A')"></li>
<li v-html="$t('commGuideList07B')"></li>
</ul>
<p v-html="$t('commGuidePara057A')"></p>
<h3 id="consequences">
{{ $t('commGuideHeadingConsequences') }}
</h3>
<div class="media align-items-center">
<div class="media-body">
<p v-html="$t('commGuidePara058')"></p>
<p v-html="$t('commGuidePara059')"></p>
</div>
<img src="~@/assets/images/community-guidelines/consequences.png">
</div>
<p v-html="$t('commGuidePara060')"></p>
<ul>
<li v-html="$t('commGuideList08A')"></li>
<li v-html="$t('commGuideList08B')"></li>
<li v-html="$t('commGuideList08C')"></li>
</ul>
<p v-html="$t('commGuidePara060A')"></p>
<p v-html="$t('commGuidePara060B')"></p>
<p v-html="$t('commGuidePara059')"></p>
<img src="~@/assets/images/community-guidelines/consequences.png">
<h4>{{ $t('commGuideHeadingSevereConsequences') }}</h4>
<ul>
<li v-html="$t('commGuideList09A')"></li>
<li v-html="$t('commGuideList09C')"></li>
<li v-html="$t('commGuideList09D')"></li>
<li v-html="$t('commGuideList09E')"></li>
</ul>
<h4>{{ $t('commGuideHeadingModerateConsequences') }}</h4>
<ul>
<li>
{{ $t('commGuideList10A') }}
<ul>
<li v-html="$t('commGuideList10A1')"></li>
</ul>
</li>
<li v-html="$t('commGuideList10D')"></li>
<li v-html="$t('commGuideList10F')"></li>
<li v-html="$t('commGuideList10G')"></li>
</ul>
<h4>{{ $t('commGuideHeadingMinorConsequences') }}</h4>
<ul>
@@ -166,56 +103,53 @@
<h3 id="restoration">
{{ $t('commGuideHeadingRestoration') }}
</h3>
<div class="media align-items-center">
<img src="~@/assets/images/community-guidelines/restoration.png">
<div class="media-body">
<p v-html="$t('commGuidePara061')"></p>
<p v-html="$t('commGuidePara062')"></p>
</div>
</div>
<img
src="~@/assets/images/community-guidelines/restoration.png"
class="mb-3"
>
<p v-html="$t('commGuidePara061')"></p>
<p v-html="$t('commGuidePara063')"></p>
<h2 id="meet-the-mods">
{{ $t('commGuideHeadingMeet') }}
</h2>
<p v-html="$t('commGuidePara007')"></p>
<p v-html="$t('commGuidePara009')"></p>
<div class="media align-items-center">
<img src="~@/assets/images/community-guidelines/staff.png">
<div class="media-body">
<ul>
<li>
{{ $t('commGuideAKA', {habitName: 'heyeilatan', realName: 'Natalie'}) }}
({{ $t('commGuideOnGitHub', {gitHubName: 'CuriousMagpie'}) }})
- Web Developer
</li>
<li>
{{ $t('commGuideAKA', {habitName: 'Viirus', realName: 'Phillip'}) }}
- Mobile Developer
</li>
<li>
{{ $t('commGuideAKA', {habitName: 'redphoenix', realName: 'Vicky'}) }}
({{ $t('commGuideOnGitHub', {gitHubName: 'veeeeeee'}) }})
- Co-Founder
</li>
<li>
{{ $t('commGuideAKA', {habitName: 'Beffymaroo', realName: 'Beth'}) }}
- Art, Community Management, Many Hats
</li>
<li>
{{ $t('commGuideAKA', {habitName: 'SabreCat', realName: 'Sabe'}) }}
- Web Developer
</li>
<li>
{{ $t('commGuideAKA', {habitName: 'Apollo', realName: 'Tressley'}) }}
- Designer
</li>
<li>
{{ $t('commGuideAKA', {habitName: 'Piyo', realName: 'Sara'}) }}
- Mobile Designer
</li>
</ul>
</div>
</div>
<img
src="~@/assets/images/community-guidelines/staff.png"
class="mb-3"
>
<ul>
<li>
{{ $t('commGuideAKA', {habitName: 'heyeilatan', realName: 'Natalie'}) }}
({{ $t('commGuideOnGitHub', {gitHubName: 'CuriousMagpie'}) }})
- Web Developer
</li>
<li>
{{ $t('commGuideAKA', {habitName: 'redphoenix', realName: 'Vicky'}) }}
({{ $t('commGuideOnGitHub', {gitHubName: 'veeeeeee'}) }})
- Co-Founder
</li>
<li>
{{ $t('commGuideAKA', {habitName: 'Beffymaroo', realName: 'Beth'}) }}
- Art, Community Management, Many Hats
</li>
<li>
{{ $t('commGuideAKA', {habitName: 'SabreCat', realName: 'Sabe'}) }}
- Web Developer
</li>
<li>
{{ $t('commGuideAKA', {habitName: 'Apollo', realName: 'Tressley'}) }}
- Designer
</li>
<li>
{{ $t('commGuideAKA', {habitName: 'Piyo', realName: 'Sara'}) }}
- Mobile Designer
</li>
<li>
{{ $t('commGuideAKA', {habitName: 'Viirus', realName: 'Phillip'}) }}
- Mobile Developer
</li>
</ul>
<p v-html="$t('commGuidePara013')"></p>
<p>
{{ $t('commGuidePara014') }}<br>
@@ -223,7 +157,6 @@
Lemoness, lefnire, Slappybag, litenull, Shaner, Bobbyroberts99, wc8,
Breadstrings, Megan, Blade, Daniel the Bard, deilann, shanaqui, Nakonana,
Dewines, Alys, Fox_town, MaybeSteveRogers, and Cantras.
</em>
</p>
<h2 id="final">
@@ -235,16 +168,12 @@
{{ $t('commGuideHeadingLinks') }}
</h2>
<ul>
<li v-html="$t('commGuideLink01')"></li>
<li v-html="$t('commGuideLink02')"></li>
<li><a href="/static/faq">{{ $t('faq') }}</a></li>
<li v-html="$t('commGuideLink03')"></li>
<li v-html="$t('commGuideLink04')"></li>
<li v-html="$t('commGuideLink06')"></li>
<li v-html="$t('commGuideLink07')"></li>
</ul>
<p v-html="$t('commGuidePara069')"></p>
<ul class="list-2col list-unstyled">
<li>Beffymaroo</li>
<ul>
<li>Breadstrings</li>
<li>Draayder</li>
<li>Kiwibot</li>
@@ -258,12 +187,3 @@
</ul>
</div>
</template>
<style lang='scss' scoped>
.list-2col {
width: 50%;
columns: 2;
-moz-columns: 2;
-webkit-columns: 2;
}
</style>
@@ -35,8 +35,8 @@
&colon;&nbsp;
<a
target="_blank"
href="/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a"
>Habitica Help guild</a>
@click.prevent="openBugReportModal(true)"
> {{ $t('askQuestion') }}</a>
<br>
{{ $t('businessInquiries') }}
&colon;&nbsp;
@@ -94,6 +94,11 @@
}
}
.container-fluid {
position: relative;
top: 2rem;
}
@media only screen and (max-width: 768px) {
.container-fluid {
margin: auto;
@@ -31,7 +31,6 @@
</div>
<div class="row">
<div class="col-md-6">
<img src="~@/assets/images/marketing/guild.png">
<h2>{{ $t('marketing2Lead1Title') }}</h2>
<p>{{ $t('marketing2Lead1') }}</p>
<img src="~@/assets/images/marketing/vice3.png">
@@ -12,12 +12,15 @@
<p v-markdown="$t(`webStep${step}Text`, stepVars[step])"></p>
<hr>
</div>
<p
v-markdown="$t('overviewQuestions', {
faqUrl: '/static/faq/',
helpGuildUrl: '/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a'
})"
></p>
<p>
<span v-html="$t('overviewQuestionsRevised')"></span>
<a
target="_blank"
@click.prevent="openBugReportModal(true)"
>
{{ $t('askQuestion') }}
</a>
</p>
</div>
</div>
</div>
@@ -35,11 +38,13 @@
<script>
import markdownDirective from '@/directives/markdown';
import reportBug from '@/mixins/reportBug.js';
export default {
directives: {
markdown: markdownDirective,
},
mixins: [reportBug],
data () {
return {
stepsNum: ['1', '2', '3'],
@@ -1,11 +1,12 @@
<template>
<div>
<chat-banner />
<static-header
v-if="showContentWrap"
:class="{
'home-header': ['home', 'front'].indexOf($route.name) !== -1,
'white-header': this.$route.name === 'plans'
}"
v-if="showContentWrap"
:class="{
'home-header': ['home', 'front'].indexOf($route.name) !== -1,
'white-header': this.$route.name === 'plans'
}"
/>
<div class="static-wrapper">
<router-view />
@@ -243,11 +244,13 @@
<script>
import AppFooter from '@/components/appFooter';
import ChatBanner from '@/components/header/banners/chatBanner';
import StaticHeader from './header.vue';
export default {
components: {
AppFooter,
ChatBanner,
StaticHeader,
},
computed: {
+5 -2
View File
@@ -12,7 +12,10 @@
</template>
<style lang="scss" scoped>
@import '~@/assets/scss/colors.scss';
.modal-close {
color: $black;
position: absolute;
right: 16px;
top: 16px;
@@ -22,10 +25,10 @@
width: 18px;
height: 18px;
vertical-align: middle;
opacity: 0.75;
opacity: 0.5;
&:hover {
opacity: 1;
opacity: 0.75;
}
}
}
@@ -190,10 +190,14 @@
class="col-12 col-md-6"
>
<div class="row col-12 stats-column">
<div
:id="`${stat}-information`"
class="col-12 col-md-4 attribute-label"
>
<div class="col-12 col-md-4 attribute-label">
<span
class="hint"
:popover-title="$t(statInfo.title)"
popover-placement="right"
:popover="$t(statInfo.popover)"
popover-trigger="mouseenter"
></span>
<div
class="stat-title"
:class="stat"
@@ -202,13 +206,6 @@
</div>
<strong class="number">{{ totalStatPoints(stat) | floorWholeNumber }}</strong>
</div>
<b-popover
:target="`${stat}-information`"
triggers="hover focus"
placement="right"
:prevent-overflow="false"
:content="$t(statInfo.popover)"
/>
<div class="col-12 col-md-6">
<ul class="bonus-stats">
<li>
@@ -358,7 +355,7 @@ export default {
},
allocateStatsList: {
str: { title: 'allocateStr', popover: 'strText', allocatepop: 'allocateStrPop' },
str: { title: 'allocateStr', popover: 'strengthText', allocatepop: 'allocateStrPop' },
int: { title: 'allocateInt', popover: 'intText', allocatepop: 'allocateIntPop' },
con: { title: 'allocateCon', popover: 'conText', allocatepop: 'allocateConPop' },
per: { title: 'allocatePer', popover: 'perText', allocatepop: 'allocatePerPop' },
@@ -367,7 +364,7 @@ export default {
stats: {
str: {
title: 'strength',
popover: 'strText',
popover: 'strengthText',
},
int: {
title: 'intelligence',