krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-19 15:48:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(faq): update sunset faq

Browse Source
This commit is contained in:
SabreCat
2023-07-06 15:23:42 -05:00
parent 7a430889a8
commit 8c00b91cc6
1 changed files with 475 additions and 455 deletions
Download Patch File Download Diff File Expand all files Collapse all files

930
website/client/src/components/static/chatSunsetFaq.vue
View File

@@ -1,324 +1,313 @@
<template> <template>
<div class="col-12 col-sm-8 container-fluid d-flex mx-auto main-bg"> <div class="top-container mx-auto">
<div class="col-12 col-sm-8"> <div class="main-text mr-4">
<div class="row"> <!-- title goes here -->
<!-- title goes here --> <div class="title-details">
<div class="title-details"> <h1 v-once>
<h1 v-once> {{ $t('sunsetFaqTitle') }}
{{ $t('sunsetFaqTitle') }} </h1>
</h1> </div>
</div> <div class="body-text">
<div class="section"> <p v-html="$t('sunsetFaqPara1')"></p> <!-- there's html in here -->
<div class="body-text"> <p>{{ $t('sunsetFaqPara2') }}</p>
<p v-html="$t('sunsetFaqPara1')"></p> <!-- there's html in here --> <p>{{ $t('sunsetFaqPara3') }}</p>
<p>{{ $t('sunsetFaqPara2') }}</p> <p>{{ $t('sunsetFaqPara4') }}</p>
<p>{{ $t('sunsetFaqPara3') }}</p> <p>{{ $t('sunsetFaqPara5') }}</p>
<p>{{ $t('sunsetFaqPara4') }}</p> </div>
<p>{{ $t('sunsetFaqPara5') }}</p>
</div>
<!-- Which services are ending --> <!-- Which services are ending -->
<div> <div>
<h3 class="headings"> <h3 class="headings">
{{ $t('sunsetFaqHeader1') }} {{ $t('sunsetFaqHeader1') }}
</h3> </h3>
</div> </div>
<div class="body-text"> <div class="body-text">
<p v-html="$t('sunsetFaqPara6')"></p> <p v-html="$t('sunsetFaqPara6')"></p>
</div> </div>
<!-- Why are tavern and guild ending? --> <!-- Why are tavern and guild ending? -->
<div> <div>
<h3 class="headings"> <h3 class="headings">
{{ $t('sunsetFaqHeader2') }} {{ $t('sunsetFaqHeader2') }}
</h3> </h3>
</div> </div>
<div class="body-text"> <div class="body-text">
<ul> <ul>
<li>{{ $t('sunsetFaqList1') }}</li> <li>{{ $t('sunsetFaqList1') }}</li>
<li>{{ $t('sunsetFaqList2') }}</li> <li>{{ $t('sunsetFaqList2') }}</li>
<li>{{ $t('sunsetFaqList3') }}</li> <li>{{ $t('sunsetFaqList3') }}</li>
</ul> </ul>
</div> </div>
<!-- Can I still talk to my party/group members? --> <!-- Can I still talk to my party/group members? -->
<div> <div>
<h3 class="headings"> <h3 class="headings">
{{ $t('sunsetFaqHeader3') }} {{ $t('sunsetFaqHeader3') }}
</h3> </h3>
</div> </div>
<div class="body-text"> <div class="body-text">
<p>{{ $t('sunsetFaqPara7') }}</p> <p>{{ $t('sunsetFaqPara7') }}</p>
</div> </div>
<!-- Pausing dailies --> <!-- Pausing dailies -->
<div> <div>
<h3 class="headings"> <h3 class="headings">
{{ $t('sunsetFaqHeader4') }} {{ $t('sunsetFaqHeader4') }}
</h3> </h3>
</div> </div>
<div class="body-text"> <div class="body-text">
<p>{{ $t('sunsetFaqPara8') }}</p> <p>{{ $t('sunsetFaqPara8') }}</p>
</div> </div>
<!-- Accessing group plans --> <!-- Accessing group plans -->
<div> <div>
<h3 class="headings"> <h3 class="headings">
{{ $t('sunsetFaqHeader5') }} {{ $t('sunsetFaqHeader5') }}
</h3> </h3>
</div> </div>
<div class="body-text"> <div class="body-text">
<p v-html="$t('sunsetFaqPara9')"></p> <!-- there's html in here --> <p v-html="$t('sunsetFaqPara9')"></p> <!-- there's html in here -->
</div> </div>
<!-- Can I access guild chats? --> <!-- Can I access guild chats? -->
<div> <div>
<h3 class="headings"> <h3 class="headings">
{{ $t('sunsetFaqHeader6') }} {{ $t('sunsetFaqHeader6') }}
</h3> </h3>
</div> </div>
<div class="body-text"> <div class="body-text">
<p>{{ $t('sunsetFaqPara10') }}</p> <p>{{ $t('sunsetFaqPara10') }}</p>
</div> </div>
<!-- How can players find groups? --> <!-- How can players find groups? -->
<div> <div>
<h3 class="headings"> <h3 class="headings">
{{ $t('sunsetFaqHeader7') }} {{ $t('sunsetFaqHeader7') }}
</h3> </h3>
</div> </div>
<div class="body-text"> <div class="body-text">
<p>{{ $t('sunsetFaqPara11') }}</p> <p>{{ $t('sunsetFaqPara11') }}</p>
</div> </div>
<!-- What about contributors? --> <!-- What about contributors? -->
<div> <div>
<h3 class="headings"> <h3 class="headings">
{{ $t('sunsetFaqHeader8') }} {{ $t('sunsetFaqHeader8') }}
</h3> </h3>
</div> </div>
<div class="body-text"> <div class="body-text">
<p v-html="$t('sunsetFaqPara12')"></p> <!-- there's html in here --> <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('sunsetFaqPara13')"></p> <!-- there's html in here -->
<p v-html="$t('sunsetFaqPara14')"></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('sunsetFaqPara15')"></p> <!-- there's html in here -->
<p v-html="$t('sunsetFaqPara16')"></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('sunsetFaqPara17')"></p> <!-- there's html in here -->
<p v-html="$t('sunsetFaqPara18')"></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 --> <p v-html="$t('sunsetFaqPara19')"></p> <!-- there's html in here -->
</div> </div>
<!-- Challenges --> <!-- Challenges -->
<div> <div>
<h3 class="headings"> <h3 class="headings">
{{ $t('sunsetFaqHeader9') }} {{ $t('sunsetFaqHeader9') }}
</h3> </h3>
</div> </div>
<div class="body-text"> <div class="body-text">
<ul> <ul>
<li>{{ $t('sunsetFaqList4') }}</li> <li>{{ $t('sunsetFaqList4') }}</li>
<li>{{ $t('sunsetFaqList5') }}</li> <li>{{ $t('sunsetFaqList5') }}</li>
<li>{{ $t('sunsetFaqList6') }}</li> <li>{{ $t('sunsetFaqList6') }}</li>
<li>{{ $t('sunsetFaqList7') }}</li> <li>{{ $t('sunsetFaqList7') }}</li>
</ul> </ul>
</div> </div>
<!-- Questions about how to use Habitica --> <!-- Questions about how to use Habitica -->
<div> <div>
<h3 class="headings"> <h3 class="headings">
{{ $t('sunsetFaqHeader10') }} {{ $t('sunsetFaqHeader10') }}
</h3> </h3>
</div> </div>
<div class="body-text"> <div class="body-text">
<ul> <ul>
<li v-html="$t('sunsetFaqList8')"></li> <!-- there's html in here --> <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('sunsetFaqList9')"></li> <!-- there's html in here -->
<li v-html="$t('sunsetFaqList10')"></li> <!-- there's html in here --> <li v-html="$t('sunsetFaqList10')"></li> <!-- there's html in here -->
</ul> </ul>
</div> </div>
<!-- Community Guidelines and TOS --> <!-- Community Guidelines and TOS -->
<div> <div>
<h3 class="headings"> <h3 class="headings">
{{ $t('sunsetFaqHeader11') }} {{ $t('sunsetFaqHeader11') }}
</h3> </h3>
</div> </div>
<div class="body-text"> <div class="body-text">
<p v-html="$t('sunsetFaqPara20')"></p> <p v-html="$t('sunsetFaqPara20')"></p>
</div>
</div>
</div> </div>
</div> </div>
<!-- sidebar --> <!-- sidebar -->
<!-- staff --> <div class="sidebar py-4 d-flex flex-column">
<div class="col-12 col-sm-4 sidebar"> <!-- staff -->
<div class="section"> <div class="ml-4">
<div class="px-4"> <h2>
<div class="staff-header"> {{ $t('staff') }}
{{ $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 class="row"> </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 <div
v-for="user in staff" class="svg-icon ml-1"
:key="user.uuid" v-html="icons.tier1"
class="col-6 staff" ></div>
:class="{ </li>
staff: user.type === 'Staff',}" <li
> v-once
<div> class="tier2 d-flex justify-content-center"
<router-link >
class="title" {{ $t('tier2') }}
:to="{'name': 'userProfile', 'params': {'userId': user.uuid}}" <div
> class="svg-icon ml-1"
{{ user.name }} v-html="icons.tier2"
</router-link> ></div>
<div </li>
v-if="user.type === 'Staff'" <li
class="svg-icon staff-icon" v-once
v-html="icons.tierStaff" class="tier3 d-flex justify-content-center"
></div> >
</div> {{ $t('tier3') }}
</div> <div
</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>
<!-- player tiers --> <!-- email admin -->
<div class="row"> <div class="d-flex flex-column justify-content-center">
<div class="col-12"> <div class="question mx-auto">
<div class="player-header"> {{ $t('anotherQuestion') }}
{{ $t('playerTiers') }} </div>
</div> <div
<ul class="tier-list"> class="contact mx-auto"
<li >
v-once <p v-html="$t('contactAdmin')"></p> <!-- there's html in here -->
class="tier1"
>
{{ $t('tier1') }}
<div
class="svg-icon tier1-icon"
v-html="icons.tier1"
></div>
</li>
<li
v-once
class="tier2"
>
{{ $t('tier2') }}
<div
class="svg-icon tier2-icon"
v-html="icons.tier2"
></div>
</li>
<li
v-once
class="tier3"
>
{{ $t('tier3') }}
<div
class="svg-icon tier3-icon"
v-html="icons.tier3"
></div>
</li>
<li
v-once
class="tier4"
>
{{ $t('tier4') }}
<div
class="svg-icon tier4-icon"
v-html="icons.tier4"
></div>
</li>
<li
v-once
class="tier5"
>
{{ $t('tier5') }}
<div
class="svg-icon tier5-icon"
v-html="icons.tier5"
></div>
</li>
<li
v-once
class="tier6"
>
{{ $t('tier6') }}
<div
class="svg-icon tier6-icon"
v-html="icons.tier6"
></div>
</li>
<li
v-once
class="tier7"
>
{{ $t('tier7') }}
<div
class="svg-icon tier7-icon"
v-html="icons.tier7"
></div>
</li>
<li
v-once
class="moderator"
>
{{ $t('tierModerator') }}
<div
class="svg-icon mod-icon"
v-html="icons.tierMod"
></div>
</li>
<li
v-once
class="staff"
>
{{ $t('tierStaff') }}
<div
class="svg-icon staff-icon"
v-html="icons.tierStaff"
></div>
</li>
<li
v-once
class="npc"
>
{{ $t('tierNPC') }}
</li>
</ul>
</div>
<!-- Daniel in sweet, sweet retirement with Jorts -->
<div class="row">
<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="row d-flex mx-auto">
<div class="question d-flex mx-auto">
{{ $t('anotherQuestion') }}
</div>
<div
class="contact d-flex mx-auto"
>
<p v-html="$t('contactAdmin')"></p> <!-- there's html in here -->
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -330,186 +319,217 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import '~@/assets/scss/colors.scss'; @import '~@/assets/scss/colors.scss';
.main-bg { h1 {
font-size: 16px !important; margin-top: 0px;
line-height: 1.33;
} }
.headings { li {
font-size: 1em; // for some reason, em doesn't give the desired result padding-bottom: 16px;
font-weight: 400;
line-height: 1.75;
color: $purple-200;
}
.body-text { &::marker {
font-size: 0.875em; size: 0.5em;
color: $gray-10; }
line-height: 1.71;
} }
p { p {
margin-bottom: 1.5em; margin-bottom: 21px;
} }
ul { ul {
padding-left: 20px; padding-left: 20px;
} }
li::marker { .top-container {
size: 0.5em; 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 { .sidebar {
height: fit-content;
width: 330px;
background-color: $gray-700; background-color: $gray-700;
padding: 24px 0;
margin: 0 0 22px 24px;
border-radius: 16px; border-radius: 16px;
}
.svg-icon {
width: 10px;
display: inline-block;
margin-left: .5em;
}
.tier1-icon, .tier2-icon { h2 {
width: 11px; color: $gray-10;
} font-family: Roboto;
font-size: 14px;
.tier5-icon, .tier6-icon {
width: 8px;
}
.tier7-icon {
width: 12px;
}
.mod-icon {
width: 13px;
}
.npc-icon {
width: 8px;
}
.staff-header {
font-size: 0.875em;
font-weight: bold;
line-height: 1.71;
}
.staff {
font-size: 0.875em;
.staff-icon {
width: 10px;
margin-left: 4px;
}
.title {
color: $purple-300;
font-weight: bold; font-weight: bold;
line-height: 1.71; line-height: 1.71;
display: inline-block;
margin-top: 8px;
} }
}
.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 { .tier-list {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
width: 98%; width: 282px;
font-size: 1em !important;
li { li {
border-radius: 2px; height: 40px;
background-color: #edecee; border-radius: 4px;
border: solid 1px #c3c0c7; border: solid 1px $gray-500;
text-align: center; text-align: center;
padding: 1em; padding: 8px 0;
margin-bottom: 1em; 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; font-weight: bold;
line-height: 1.71;
color: $gray-10;
margin-top: 24px;
} }
.tier1 { .contact p {
color: #c42870; font-size: 1em;
margin-bottom: 0px;
} }
.tier2 {
color: #b01515;
}
.tier3 {
color: #d70e14;
}
.tier4 {
color: #c24d00;
}
.tier5 {
color: #9e650f;
}
.tier6 {
color: #2b8363;
}
.tier7 {
color: #167e87;
}
.tier8, .moderator {
color: #277eab;
}
.tier9, .staff {
color: #6133b4;
}
.npc {
color: $black;
}
}
.gradient {
position: absolute;
width: 330px;
height: 100px;
margin: 0 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;
z-index: 0;
margin-top: -30px;
}
.question {
font-size: 0.875em;
font-weight: bold;
line-height: 1.71;
color: $gray-10;
margin-top: 24px;
}
.contact p {
font-size: 0.875em;
margin-bottom: 0px;
} }
</style> </style>