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>
<div class="col-12 col-sm-8 container-fluid d-flex mx-auto main-bg">
<div class="col-12 col-sm-8">
<div class="row">
<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="section">
<div class="body-text">
<p v-html="$t('sunsetFaqPara1')"></p> <!-- there's html in here -->
<p>{{ $t('sunsetFaqPara2') }}</p>
@@ -147,26 +145,21 @@
<p v-html="$t('sunsetFaqPara20')"></p>
</div>
</div>
</div>
</div>
<!-- sidebar -->
<div class="sidebar py-4 d-flex flex-column">
<!-- staff -->
<div class="col-12 col-sm-4 sidebar">
<div class="section">
<div class="px-4">
<div class="staff-header">
<div class="ml-4">
<h2>
{{ $t('staff') }}
</div>
<div class="row">
</h2>
<div class="d-flex flex-wrap">
<div
v-for="user in staff"
:key="user.uuid"
class="col-6 staff"
:class="{
staff: user.type === 'Staff',}"
class="staff col-6 p-0"
>
<div>
<div class="d-flex">
<router-link
class="title"
:to="{'name': 'userProfile', 'params': {'userId': user.uuid}}"
@@ -175,121 +168,120 @@
</router-link>
<div
v-if="user.type === 'Staff'"
class="svg-icon staff-icon"
class="svg-icon staff-icon ml-1"
v-html="icons.tierStaff"
></div>
</div>
</div>
</div>
</div>
<!-- player tiers -->
<div class="row">
<div class="col-12">
<div class="player-header">
<div class="ml-4">
<h2 class="mt-4 mb-1">
{{ $t('playerTiers') }}
</div>
</h2>
<ul class="tier-list">
<li
v-once
class="tier1"
class="tier1 d-flex justify-content-center"
>
{{ $t('tier1') }}
<div
class="svg-icon tier1-icon"
class="svg-icon ml-1"
v-html="icons.tier1"
></div>
</li>
<li
v-once
class="tier2"
class="tier2 d-flex justify-content-center"
>
{{ $t('tier2') }}
<div
class="svg-icon tier2-icon"
class="svg-icon ml-1"
v-html="icons.tier2"
></div>
</li>
<li
v-once
class="tier3"
class="tier3 d-flex justify-content-center"
>
{{ $t('tier3') }}
<div
class="svg-icon tier3-icon"
class="svg-icon ml-1"
v-html="icons.tier3"
></div>
</li>
<li
v-once
class="tier4"
class="tier4 d-flex justify-content-center"
>
{{ $t('tier4') }}
<div
class="svg-icon tier4-icon"
class="svg-icon ml-1"
v-html="icons.tier4"
></div>
</li>
<li
v-once
class="tier5"
class="tier5 d-flex justify-content-center"
>
{{ $t('tier5') }}
<div
class="svg-icon tier5-icon"
class="svg-icon ml-1"
v-html="icons.tier5"
></div>
</li>
<li
v-once
class="tier6"
class="tier6 d-flex justify-content-center"
>
{{ $t('tier6') }}
<div
class="svg-icon tier6-icon"
class="svg-icon ml-1"
v-html="icons.tier6"
></div>
</li>
<li
v-once
class="tier7"
class="tier7 d-flex justify-content-center"
>
{{ $t('tier7') }}
<div
class="svg-icon tier7-icon"
class="svg-icon ml-1"
v-html="icons.tier7"
></div>
</li>
<li
v-once
class="moderator"
class="moderator d-flex justify-content-center"
>
{{ $t('tierModerator') }}
<div
class="svg-icon mod-icon"
class="svg-icon ml-1"
v-html="icons.tierMod"
></div>
</li>
<li
v-once
class="staff"
class="staff d-flex justify-content-center"
>
{{ $t('tierStaff') }}
<div
class="svg-icon staff-icon"
class="svg-icon ml-1"
v-html="icons.tierStaff"
></div>
</li>
<li
v-once
class="npc"
class="npc d-flex justify-content-center"
>
{{ $t('tierNPC') }}
</li>
</ul>
</div>
<!-- Daniel in sweet, sweet retirement with Jorts -->
<div class="row">
<div>
<div class="gradient">
</div>
<div
@@ -308,20 +300,17 @@
</div>
<!-- email admin -->
<div class="row d-flex mx-auto">
<div class="question d-flex mx-auto">
<div class="d-flex flex-column justify-content-center">
<div class="question mx-auto">
{{ $t('anotherQuestion') }}
</div>
<div
class="contact d-flex mx-auto"
class="contact mx-auto"
>
<p v-html="$t('contactAdmin')"></p> <!-- there's html in here -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- final div! -->
</div>
@@ -330,138 +319,169 @@
<style lang="scss" scoped>
@import '~@/assets/scss/colors.scss';
.main-bg {
font-size: 16px !important;
h1 {
margin-top: 0px;
line-height: 1.33;
}
.headings {
font-size: 1em; // for some reason, em doesn't give the desired result
font-weight: 400;
line-height: 1.75;
color: $purple-200;
}
li {
padding-bottom: 16px;
.body-text {
font-size: 0.875em;
color: $gray-10;
line-height: 1.71;
&::marker {
size: 0.5em;
}
}
p {
margin-bottom: 1.5em;
margin-bottom: 21px;
}
ul {
padding-left: 20px;
}
li::marker {
size: 0.5em;
.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;
padding: 24px 0;
margin: 0 0 22px 24px;
border-radius: 16px;
}
.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-header {
font-size: 0.875em;
h2 {
color: $gray-10;
font-family: Roboto;
font-size: 14px;
font-weight: bold;
line-height: 1.71;
}
.staff {
font-size: 0.875em;
.staff-icon {
width: 10px;
margin-left: 4px;
margin-top: 5px;
}
.title {
height: 24px;
color: $purple-300;
font-weight: bold;
line-height: 1.71;
display: inline-block;
margin-top: 8px;
margin-bottom: 4px;
}
}
.tier-list {
list-style-type: none;
padding: 0;
width: 98%;
width: 282px;
font-size: 1em !important;
li {
border-radius: 2px;
background-color: #edecee;
border: solid 1px #c3c0c7;
height: 40px;
border-radius: 4px;
border: solid 1px $gray-500;
text-align: center;
padding: 1em;
margin-bottom: 1em;
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;
}
}
.tier8, .moderator {
.moderator {
color: #277eab;
.svg-icon {
width: 13px;
margin-top: 3px;
}
}
.tier9, .staff {
.staff {
color: #6133b4;
.svg-icon {
width: 10px;
margin-top: 7px;
}
}
.npc {
@@ -473,7 +493,7 @@
position: absolute;
width: 330px;
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%);
}
@@ -495,12 +515,11 @@
height: 30px;
background-repeat: no-repeat;
position: absolute;
z-index: 0;
margin-top: -30px;
}
.question {
font-size: 0.875em;
font-size: 1em;
font-weight: bold;
line-height: 1.71;
color: $gray-10;
@@ -508,9 +527,10 @@
}
.contact p {
font-size: 0.875em;
font-size: 1em;
margin-bottom: 0px;
}
}
</style>
<script>