refactor: 💄 style punishments

This commit is contained in:
ThatOneCalculator 2023-06-13 17:42:00 -07:00
parent de5d210b04
commit cd929a01c1
No known key found for this signature in database
GPG Key ID: 8703CACD01000000
1 changed files with 36 additions and 25 deletions

View File

@ -7,23 +7,6 @@
:class="{ wide: !narrow }" :class="{ wide: !narrow }"
> >
<div class="main"> <div class="main">
<div v-if="$i?.isModerator || $i?.isAdmin">
<div class="punished" v-if="user.isSilenced">
<i
class="ph-warning ph-bold ph-lg"
style="margin-right: 8px; color: var(--warn)"
></i>
{{ i18n.ts.silenced }}
</div>
<div class="punished" v-if="user.isSuspended">
<i
class="ph-warning ph-bold ph-lg"
style="margin-right: 8px; color: var(--warn)"
></i>
{{ i18n.ts.suspended }}
</div>
</div>
<div class="profile"> <div class="profile">
<MkMoved <MkMoved
v-if="user.movedToUri" v-if="user.movedToUri"
@ -130,6 +113,25 @@
class="followed" class="followed"
>{{ i18n.ts.followsYou }}</span >{{ i18n.ts.followsYou }}</span
> >
<div
v-if="$i?.isModerator || $i?.isAdmin"
class="punishments"
>
<span
class="punished"
v-if="user.isSilenced"
>
<i class="ph-warning ph-bold ph-lg"></i>
{{ i18n.ts.silenced }}
</span>
<span
class="punished"
v-if="user.isSuspended"
>
<i class="ph-warning ph-bold ph-lg"></i>
{{ i18n.ts.suspended }}
</span>
</div>
</div> </div>
<div class="bottom"> <div class="bottom">
<span class="username" <span class="username"
@ -458,14 +460,6 @@ onUnmounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.ftskorzw { .ftskorzw {
> .main { > .main {
> .punished {
font-size: 0.8em;
padding: 10px;
color: var(--infoWarnBg);
background-color: var(--infoWarnFg);
border-radius: 10px;
}
> .profile { > .profile {
> .main { > .main {
position: relative; position: relative;
@ -522,6 +516,23 @@ onUnmounted(() => {
border-radius: 6px; border-radius: 6px;
} }
> .punishments {
display: flex;
gap: 1rem;
margin-top: 0.5rem;
> .punished {
padding: 10px;
color: var(--infoWarnBg);
background-color: var(--infoWarnFg);
border-radius: 10px;
> i {
margin-right: 4px;
}
}
}
> .title { > .title {
position: absolute; position: absolute;
bottom: 0; bottom: 0;