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

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

@@ -1,14 +1,12 @@
<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="section">
<div class="body-text"> <div class="body-text">
<p v-html="$t('sunsetFaqPara1')"></p> <!-- there's html in here --> <p v-html="$t('sunsetFaqPara1')"></p> <!-- there's html in here -->
<p>{{ $t('sunsetFaqPara2') }}</p> <p>{{ $t('sunsetFaqPara2') }}</p>
@@ -147,26 +145,21 @@
<p v-html="$t('sunsetFaqPara20')"></p> <p v-html="$t('sunsetFaqPara20')"></p>
</div> </div>
</div> </div>
</div>
</div>
<!-- sidebar --> <!-- sidebar -->
<div class="sidebar py-4 d-flex flex-column">
<!-- staff --> <!-- staff -->
<div class="col-12 col-sm-4 sidebar"> <div class="ml-4">
<div class="section"> <h2>
<div class="px-4">
<div class="staff-header">
{{ $t('staff') }} {{ $t('staff') }}
</div> </h2>
<div class="row"> <div class="d-flex flex-wrap">
<div <div
v-for="user in staff" v-for="user in staff"
:key="user.uuid" :key="user.uuid"
class="col-6 staff" class="staff col-6 p-0"
:class="{
staff: user.type === 'Staff',}"
> >
<div> <div class="d-flex">
<router-link <router-link
class="title" class="title"
:to="{'name': 'userProfile', 'params': {'userId': user.uuid}}" :to="{'name': 'userProfile', 'params': {'userId': user.uuid}}"
@@ -175,121 +168,120 @@
</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 ml-1"
v-html="icons.tierStaff" v-html="icons.tierStaff"
></div> ></div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- player tiers --> <!-- player tiers -->
<div class="row"> <div class="ml-4">
<div class="col-12"> <h2 class="mt-4 mb-1">
<div class="player-header">
{{ $t('playerTiers') }} {{ $t('playerTiers') }}
</div> </h2>
<ul class="tier-list"> <ul class="tier-list">
<li <li
v-once v-once
class="tier1" class="tier1 d-flex justify-content-center"
> >
{{ $t('tier1') }} {{ $t('tier1') }}
<div <div
class="svg-icon tier1-icon" class="svg-icon ml-1"
v-html="icons.tier1" v-html="icons.tier1"
></div> ></div>
</li> </li>
<li <li
v-once v-once
class="tier2" class="tier2 d-flex justify-content-center"
> >
{{ $t('tier2') }} {{ $t('tier2') }}
<div <div
class="svg-icon tier2-icon" class="svg-icon ml-1"
v-html="icons.tier2" v-html="icons.tier2"
></div> ></div>
</li> </li>
<li <li
v-once v-once
class="tier3" class="tier3 d-flex justify-content-center"
> >
{{ $t('tier3') }} {{ $t('tier3') }}
<div <div
class="svg-icon tier3-icon" class="svg-icon ml-1"
v-html="icons.tier3" v-html="icons.tier3"
></div> ></div>
</li> </li>
<li <li
v-once v-once
class="tier4" class="tier4 d-flex justify-content-center"
> >
{{ $t('tier4') }} {{ $t('tier4') }}
<div <div
class="svg-icon tier4-icon" class="svg-icon ml-1"
v-html="icons.tier4" v-html="icons.tier4"
></div> ></div>
</li> </li>
<li <li
v-once v-once
class="tier5" class="tier5 d-flex justify-content-center"
> >
{{ $t('tier5') }} {{ $t('tier5') }}
<div <div
class="svg-icon tier5-icon" class="svg-icon ml-1"
v-html="icons.tier5" v-html="icons.tier5"
></div> ></div>
</li> </li>
<li <li
v-once v-once
class="tier6" class="tier6 d-flex justify-content-center"
> >
{{ $t('tier6') }} {{ $t('tier6') }}
<div <div
class="svg-icon tier6-icon" class="svg-icon ml-1"
v-html="icons.tier6" v-html="icons.tier6"
></div> ></div>
</li> </li>
<li <li
v-once v-once
class="tier7" class="tier7 d-flex justify-content-center"
> >
{{ $t('tier7') }} {{ $t('tier7') }}
<div <div
class="svg-icon tier7-icon" class="svg-icon ml-1"
v-html="icons.tier7" v-html="icons.tier7"
></div> ></div>
</li> </li>
<li <li
v-once v-once
class="moderator" class="moderator d-flex justify-content-center"
> >
{{ $t('tierModerator') }} {{ $t('tierModerator') }}
<div <div
class="svg-icon mod-icon" class="svg-icon ml-1"
v-html="icons.tierMod" v-html="icons.tierMod"
></div> ></div>
</li> </li>
<li <li
v-once v-once
class="staff" class="staff d-flex justify-content-center"
> >
{{ $t('tierStaff') }} {{ $t('tierStaff') }}
<div <div
class="svg-icon staff-icon" class="svg-icon ml-1"
v-html="icons.tierStaff" v-html="icons.tierStaff"
></div> ></div>
</li> </li>
<li <li
v-once v-once
class="npc" class="npc d-flex justify-content-center"
> >
{{ $t('tierNPC') }} {{ $t('tierNPC') }}
</li> </li>
</ul> </ul>
</div> </div>
<!-- Daniel in sweet, sweet retirement with Jorts --> <!-- Daniel in sweet, sweet retirement with Jorts -->
<div class="row"> <div>
<div class="gradient"> <div class="gradient">
</div> </div>
<div <div
@@ -308,20 +300,17 @@
</div> </div>
<!-- email admin --> <!-- email admin -->
<div class="row d-flex mx-auto"> <div class="d-flex flex-column justify-content-center">
<div class="question d-flex mx-auto"> <div class="question mx-auto">
{{ $t('anotherQuestion') }} {{ $t('anotherQuestion') }}
</div> </div>
<div <div
class="contact d-flex mx-auto" class="contact mx-auto"
> >
<p v-html="$t('contactAdmin')"></p> <!-- there's html in here --> <p v-html="$t('contactAdmin')"></p> <!-- there's html in here -->
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div>
<!-- final div! --> <!-- final div! -->
</div> </div>
@@ -330,138 +319,169 @@
<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; font-weight: bold;
line-height: 1.71; line-height: 1.71;
} }
.staff { .staff {
font-size: 0.875em;
.staff-icon { .staff-icon {
width: 10px; width: 10px;
margin-left: 4px; margin-top: 5px;
} }
.title { .title {
height: 24px;
color: $purple-300; color: $purple-300;
font-weight: bold; font-weight: bold;
line-height: 1.71;
display: inline-block; display: inline-block;
margin-top: 8px; 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; font-weight: bold;
line-height: 1.71;
} }
.tier1 { .tier1 {
color: #c42870; color: #c42870;
.svg-icon {
width: 11px;
margin-top: 5px;
}
} }
.tier2 { .tier2 {
color: #b01515; color: #b01515;
.svg-icon {
width: 11px;
margin-top: 5px;
}
} }
.tier3 { .tier3 {
color: #d70e14; color: #d70e14;
.svg-icon {
width: 13px;
margin-top: 4px;
}
} }
.tier4 { .tier4 {
color: #c24d00; color: #c24d00;
.svg-icon {
width: 13px;
margin-top: 4px;
}
} }
.tier5 { .tier5 {
color: #9e650f; color: #9e650f;
.svg-icon {
width: 8px;
margin-top: 7px;
}
} }
.tier6 { .tier6 {
color: #2b8363; color: #2b8363;
.svg-icon {
width: 8px;
margin-top: 7px;
}
} }
.tier7 { .tier7 {
color: #167e87; color: #167e87;
.svg-icon {
width: 12px;
margin-top: 4px;
}
} }
.tier8, .moderator { .moderator {
color: #277eab; color: #277eab;
.svg-icon {
width: 13px;
margin-top: 3px;
}
} }
.tier9, .staff { .staff {
color: #6133b4; color: #6133b4;
.svg-icon {
width: 10px;
margin-top: 7px;
}
} }
.npc { .npc {
@@ -473,7 +493,7 @@
position: absolute; position: absolute;
width: 330px; width: 330px;
height: 100px; height: 100px;
margin: 0 0 116px; margin: -1px 0 116px;
background-image: linear-gradient(to bottom, $gray-700 0%, rgba(249, 249, 249, 0) 100%); background-image: linear-gradient(to bottom, $gray-700 0%, rgba(249, 249, 249, 0) 100%);
} }
@@ -495,12 +515,11 @@
height: 30px; height: 30px;
background-repeat: no-repeat; background-repeat: no-repeat;
position: absolute; position: absolute;
z-index: 0;
margin-top: -30px; margin-top: -30px;
} }
.question { .question {
font-size: 0.875em; font-size: 1em;
font-weight: bold; font-weight: bold;
line-height: 1.71; line-height: 1.71;
color: $gray-10; color: $gray-10;
@@ -508,9 +527,10 @@
} }
.contact p { .contact p {
font-size: 0.875em; font-size: 1em;
margin-bottom: 0px; margin-bottom: 0px;
} }
}
</style> </style>
<script> <script>