Merge remote-tracking branch 'private/natalie/antisocial' into sabrecat/chat-warning

This commit is contained in:
SabreCat
2023-06-07 15:02:11 -05:00
3 changed files with 223 additions and 137 deletions

View File

@@ -2,6 +2,7 @@
<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">
<!-- title goes here -->
<div class="title-details">
<h1 v-once>
{{ $t('sunsetFaqTitle') }}
@@ -154,142 +155,170 @@
<div class="col-12 col-sm-4 sidebar">
<div class="section">
<div class="px-4">
<sidebar-section :title="$t('staff')">
<div class="staff-header">
{{ $t('staff') }}
<div class="staff-header">
{{ $t('staff') }}
</div>
<div class="row">
<div
v-for="user in staff"
:key="user.uuid"
class="col-6 staff"
:class="{
staff: user.type === 'Staff',}"
>
<div>
<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"
v-html="icons.tierStaff"
></div>
</div>
</div>
<div class="row">
<div
v-for="user in staff"
:key="user.uuid"
class="col-6 staff"
:class="{
staff: user.type === 'Staff',}"
>
<div>
<router-link
class="title"
:to="{'name': 'userProfile', 'params': {'userId': user.uuid}}"
>
{{ user.name }}
</router-link>
</div>
<!-- player tiers -->
<div class="row">
<div class="col-12">
<div class="player-header">
{{ $t('playerTiers') }}
</div>
<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
v-if="user.type === 'Staff'"
class="svg-icon staff-icon"
v-html="icons.tierStaff"
></div>
</div>
</div>
</li>
<li
v-once
class="npc"
>
{{ $t('tierNPC') }}
</li>
</ul>
</div>
</sidebar-section>
<sidebar-section :title="$t('playerTiers')">
<!-- Daniel in sweet, sweet retirement with Jorts -->
<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 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>
</sidebar-section>
<!-- 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>
@@ -440,17 +469,54 @@
}
}
.staff .title {
color: #6133b4;
.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%);
}
.moderator .title {
color: #277eab;
.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>
<script>
import sidebarSection from '../sidebarSection';
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';
@@ -464,10 +530,6 @@ import tierStaff from '@/assets/svg/tier-staff.svg';
import staffList from '../../libs/staffList';
export default {
componenets: {
sidebarSection,
},
data () {
return {
icons: Object.freeze({
@@ -492,6 +554,27 @@ export default {
};
},
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'),