HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

improvement: make MkAbuseReport more friendly for smaller screen sizes

Browse source
This commit is contained in:
blueb 2024-10-03 00:02:04 -04:00
parent a357e9bca2
commit a32a8e0404
1 changed files with 59 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
packages/frontend/src/components/MkAbuseReport.vue
View file

@ -4,40 +4,52 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div class="bcekxzvu _margin _panel"> <div class="bcekxzvu _margin _panel" :class="{ resolved: resolved }">
<div class="target"> <div class="target">
<MkA v-user-preview="report.targetUserId" class="info" :to="`/admin/user/${report.targetUserId}`" :behavior="'window'"> <MkA v-user-preview="report.targetUserId" class="info" :to="`/admin/user/${report.targetUserId}`" :behavior="'window'">
<MkAvatar class="avatar" :user="report.targetUser" indicator/> <MkAvatar class="avatar" :user="report.targetUser" indicator/>
<div class="names"> <div class="names">
<MkUserName class="name" :user="report.targetUser"/> <MkUserName class="name" :user="report.targetUser"/>
<MkAcct class="acct" :user="report.targetUser" style="display: block;"/> <MkAcct class="acct" :user="report.targetUser" style="display: block;"/>
</div>
</MkA>
<br>
<div class="keyvalCtn">
<MkKeyValue>
<template #key>{{ i18n.ts.registeredDate }}</template>
<template #value>{{ dateString(report.targetUser.createdAt) }} (<MkTime :time="report.targetUser.createdAt"/>)</template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts.reporter }}</template>
<template #value><MkA :to="`/admin/user/${report.reporter.id}`" class="_link" :behavior="'window'">@{{ report.reporter.username }}</MkA></template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts.createdAt }}</template>
<template #value><MkTime :time="report.createdAt" mode="absolute"/> (<MkTime :time="report.createdAt" mode="relative"/>)</template>
</MkKeyValue>
</div> </div>
</MkA> <hr>
<MkKeyValue>
<template #key>{{ i18n.ts.registeredDate }}</template>
<template #value>{{ dateString(report.targetUser.createdAt) }} (<MkTime :time="report.targetUser.createdAt"/>)</template>
</MkKeyValue>
</div>
<div class="detail">
<div>
<Mfm :text="report.comment" :isBlock="true" :linkNavigationBehavior="'window'"/>
</div> </div>
<hr/> <div class="detail">
<div>{{ i18n.ts.reporter }}: <MkA :to="`/admin/user/${report.reporter.id}`" class="_link" :behavior="'window'">@{{ report.reporter.username }}</MkA></div> <div>
<div v-if="report.assignee"> <Mfm :text="report.comment" :isBlock="true" :linkNavigationBehavior="'window'"/>
{{ i18n.ts.moderator }}: </div>
<MkAcct :user="report.assignee"/> <hr/>
</div> <div v-if="report.assignee">
<div><MkTime :time="report.createdAt"/></div> {{ i18n.ts.moderator }}:
<div class="action"> <MkA :to="`/admin/user/${report.assignee.id}`" class="_link" :behavior="'window'">@{{ report.assignee.username }}</MkA>
<MkSwitch v-model="forward" :disabled="report.targetUser.host == null || report.resolved"> <br>
{{ i18n.ts.forwardReport }} </div>
<template #caption>{{ i18n.ts.forwardReportIsAnonymous }}</template> <div class="action">
</MkSwitch> <MkSwitch v-model="forward" c:disabled="report.targetUser.host == null || report.resolved">
<MkButton v-if="!report.resolved" primary @click="resolve">{{ i18n.ts.abuseMarkAsResolved }}</MkButton> {{ i18n.ts.forwardReport }}
<template #caption>{{ i18n.ts.forwardReportIsAnonymous }}</template>
</MkSwitch>
<br v-if="!report.resolved">
<MkButton v-if="!report.resolved" primary @click="resolve">{{ i18n.ts.abuseMarkAsResolved }}</MkButton>
</div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -58,6 +70,7 @@ const emit = defineEmits<{
}>(); }>();
const forward = ref(props.report.forwarded); const forward = ref(props.report.forwarded);
const resolved = ref(props.report.resolved);
function resolve() { function resolve() {
os.apiWithDialog('admin/resolve-abuse-user-report', { os.apiWithDialog('admin/resolve-abuse-user-report', {
@ -72,13 +85,17 @@ function resolve() {
<style lang="scss" scoped> <style lang="scss" scoped>
.bcekxzvu { .bcekxzvu {
display: flex; display: flex;
flex-direction: column;
transition: .1s;
&.resolved:not(:hover,:focus) {
opacity: 50%;
}
> .target { > .target {
width: 35%;
box-sizing: border-box; box-sizing: border-box;
text-align: left; text-align: left;
padding: 24px; padding: 24px 24px 0px 24px;
border-right: solid 1px var(--divider);
> .info { > .info {
display: flex; display: flex;
@ -100,16 +117,24 @@ function resolve() {
padding: 0 8px; padding: 0 8px;
flex: 1; flex: 1;
white-space: pre;
overflow: hidden;
> .name { > .name {
font-weight: bold; font-weight: bold;
} }
} }
} }
> .keyvalCtn {
display: inline-flex;
gap: 15px;
}
} }
> .detail { > .detail {
flex: 1; flex: 1;
padding: 24px; padding: 0px 24px 24px 24px;
} }
} }
</style> </style>