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

feat(content): add staff and tiers

Browse Source
This commit is contained in:
CuriousMagpie
2023-05-30 12:01:21 -04:00
parent 9ef13dad68
commit 55d6ee3f7e
1 changed files with 399 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,175 +1,288 @@
<template> <template>
<div class="container-fluid"> <div class="col-12 col-sm-8 clearfix standard-page mx-auto">
<div class="row"> <div class="col-12 col-sm-8 clearfix standard-page">
<div> <div>
<h1>{{ $t('sunsetFaqTitle') }}</h1> <h1 v-once>
</div> {{ $t('sunsetFaqTitle') }}
<div> </h1>
<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> </div>
<div class="section">
<div class>
<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 --> <!-- Which services are ending -->
<div> <div>
<h3 class="headings"> <h3 class="headings">
{{ $t('sunsetFaqHeader1') }} {{ $t('sunsetFaqHeader1') }}
</h3> </h3>
</div> </div>
<div> <div>
<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> <div>
<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> <div>
<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> <div>
<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> <div>
<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> <div>
<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> <div>
<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> <div>
<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> <div>
<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> <div>
<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 -->
</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> <div>
<p v-html="$t('sunsetFaqPara20')"></p> <p v-html="$t('sunsetFaqPara20')"></p>
</div>
</div> </div>
</div> </div>
<!-- sidebar --> <!-- sidebar -->
<!-- staff --> <!-- staff -->
<div class="col-12 col-sm-4 sidebar"> <div class="col-12 col-sm-4 sidebar float-right">
<div class="section"> <div class="section">
<div class="px-4"> <div class="px-4">
<sidebar-section :title="$t('staff')" /> <sidebar-section :title="$t('staff')">
<div class="row"> <div class="row">
<div <div
v-for="user in staff" v-for="user in staff"
:key="user.uuid" :key="user.uuid"
class="col-6 staff" class="col-6 staff"
:class="{ :class="{
staff: user.type === 'Staff',}" staff: user.type === 'Staff',}"
> >
<div> <div>
<router-link <router-link
class="title" class="title"
:to="{'name': 'userProfile', 'params': {'userId': user.uuid}}" :to="{'name': 'userProfile', 'params': {'userId': user.uuid}}"
> >
{{ user.name }} {{ user.name }}
</router-link> </router-link>
<div <div
v-if="user.type === 'Staff'" v-if="user.type === 'Staff'"
class="svg-icon staff-icon" class="svg-icon staff-icon"
v-html="icons.tierStaff" v-html="icons.tierStaff"
></div> ></div>
</div>
</div> </div>
</div> </div>
</div> </sidebar-section>
<sidebar-section :title="$t('playerTiers')">
<div class="row">
<div class="col-12">
<ul class="tier-list">
<li
v-once
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') }}
<div
class="svg-icon npc-icon"
v-html="icons.tierNPC"
></div>
</li>
</ul>
</div>
</div>
</sidebar-section>
</div> </div>
</div> </div>
</div> </div>
@@ -192,19 +305,155 @@
.sidebar { .sidebar {
background-color: $gray-600; background-color: $gray-600;
padding: 0 0 0 0; padding: 0 0 0 0
}
.svg-icon {
width: 10px;
display: inline-block;
margin-left: .5em;
} }
.tier1-icon, .tier2-icon {
width: 11px;
}
.tier5-icon, .tier6-icon {
width: 8px;
}
.tier7-icon {
width: 12px;
}
.mod-icon {
width: 13px;
}
.npc-icon {
width: 8px;
}
.staff {
margin-bottom: 1em;
.staff-icon {
width: 11px;
}
.title {
color: #6133b4;
font-weight: bold;
display: inline-block;
}
}
.tier-list {
list-style-type: none;
padding: 0;
width: 98%;
li {
border-radius: 2px;
background-color: #edecee;
border: solid 1px #c3c0c7;
text-align: center;
padding: 1em;
margin-bottom: 1em;
font-weight: bold;
}
.tier1 {
color: #c42870;
}
.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;
}
}
.staff .title {
color: #6133b4;
}
.moderator .title {
color: #277eab;
}
</style> </style>
<script> <script>
import sidebarSection from '../sidebarSection'; import sidebarSection from '../sidebarSection';
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 { export default {
componenets: { componenets: {
sidebarSection, sidebarSection,
}, },
data () {
return {
icons: Object.freeze({
tier1,
tier2,
tier3,
tier4,
tier5,
tier6,
tier7,
tierMod,
tierNPC,
tierStaff,
}),
group: {
chat: [],
},
sections: {
worldBoss: true,
},
staff: staffList,
};
},
async mounted () { async mounted () {
this.$store.dispatch('common:setTitle', { this.$store.dispatch('common:setTitle', {
subSection: this.$t('chat-sunset-faq'), subSection: this.$t('chat-sunset-faq'),