Skip to content
Snippets Groups Projects

make MkAbuseReport more friendly for smaller screen sizes

Merged make MkAbuseReport more friendly for smaller screen sizes
blueb/Sharkey:nicer-reports-page into develop
All threads resolved!
Merged blueb requested to merge blueb/Sharkey:nicer-reports-page into develop
All threads resolved!
Compare
and
1 file
+ 54
− 34
Compare changes
  • Side-by-side
  • Inline
packages/frontend/src/components/MkAbuseReport.vue
+ 54
− 34
@@ -4,40 +4,52 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="bcekxzvu _margin _panel">
<div class="target">
<MkA v-user-preview="report.targetUserId" class="info" :to="`/admin/user/${report.targetUserId}`" :behavior="'window'">
<MkAvatar class="avatar" :user="report.targetUser" indicator/>
<div class="names">
<MkUserName class="name" :user="report.targetUser"/>
<MkAcct class="acct" :user="report.targetUser" style="display: block;"/>
<div class="bcekxzvu _margin _panel">
<div class="target">
<MkA v-user-preview="report.targetUserId" class="info" :to="`/admin/user/${report.targetUserId}`" :behavior="'window'">
<MkAvatar class="avatar" :user="report.targetUser" indicator/>
<div class="names">
<MkUserName class="name" :user="report.targetUser"/>
<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>
</MkA>
<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>
<hr/>
<div>{{ i18n.ts.reporter }}: <MkA :to="`/admin/user/${report.reporter.id}`" class="_link" :behavior="'window'">@{{ report.reporter.username }}</MkA></div>
<div v-if="report.assignee">
{{ i18n.ts.moderator }}:
<MkAcct :user="report.assignee"/>
<hr>
</div>
<div><MkTime :time="report.createdAt"/></div>
<div class="action">
<MkSwitch v-model="forward" :disabled="report.targetUser.host == null || report.resolved">
{{ i18n.ts.forwardReport }}
<template #caption>{{ i18n.ts.forwardReportIsAnonymous }}</template>
</MkSwitch>
<MkButton v-if="!report.resolved" primary @click="resolve">{{ i18n.ts.abuseMarkAsResolved }}</MkButton>
<div class="detail">
<div>
<Mfm :text="report.comment" :isBlock="true" :linkNavigationBehavior="'window'"/>
</div>
<hr/>
<div v-if="report.assignee">
{{ i18n.ts.moderator }}:
<MkA :to="`/admin/user/${report.assignee.id}`" class="_link" :behavior="'window'">@{{ report.assignee.username }}</MkA>
<br>
</div>
<div class="action">
<MkSwitch v-model="forward" c:disabled="report.targetUser.host == null || report.resolved">
{{ 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>
</template>
<script lang="ts" setup>
@@ -72,13 +84,13 @@ function resolve() {
<style lang="scss" scoped>
.bcekxzvu {
display: flex;
flex-direction: column;
transition: .1s;
> .target {
width: 35%;
box-sizing: border-box;
text-align: left;
padding: 24px;
border-right: solid 1px var(--divider);
padding: 24px 24px 0px 24px;
> .info {
display: flex;
@@ -100,16 +112,24 @@ function resolve() {
padding: 0 8px;
flex: 1;
white-space: pre;
overflow: hidden;
> .name {
font-weight: bold;
}
}
}
> .keyvalCtn {
display: inline-flex;
gap: 15px;
}
}
> .detail {
flex: 1;
padding: 24px;
padding: 0px 24px 24px 24px;
}
}
</style>