amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merge: make MkAbuseReport more friendly for smaller screen sizes (!646)

Browse Source 
View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/646

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: fEmber <acomputerdog@gmail.com>
This commit is contained in:
dakkar 2024-10-03 15:57:19 +00:00
commit bc8c6592ea
1 changed files with 64 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
packages/frontend/src/components/MkAbuseReport.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div class="bcekxzvu _margin _panel"> <div class="bcekxzvu _margin _panel">
<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/>
@ -13,31 +13,40 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkAcct class="acct" :user="report.targetUser" style="display: block;"/> <MkAcct class="acct" :user="report.targetUser" style="display: block;"/>
</div> </div>
</MkA> </MkA>
<div class="keyvalCtn">
<MkKeyValue> <MkKeyValue>
<template #key>{{ i18n.ts.registeredDate }}</template> <template #key>{{ i18n.ts.registeredDate }}</template>
<template #value>{{ dateString(report.targetUser.createdAt) }} (<MkTime :time="report.targetUser.createdAt"/>)</template> <template #value>{{ dateString(report.targetUser.createdAt) }} (<MkTime :time="report.targetUser.createdAt"/>)</template>
</MkKeyValue> </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>
<hr>
</div> </div>
<div class="detail"> <div class="detail">
<div> <div>
<Mfm :text="report.comment" :isBlock="true" :linkNavigationBehavior="'window'"/> <Mfm :text="report.comment" :isBlock="true" :linkNavigationBehavior="'window'"/>
</div> </div>
<hr/> <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" class="assignee">
<div v-if="report.assignee">
{{ i18n.ts.moderator }}: {{ i18n.ts.moderator }}:
<MkAcct :user="report.assignee"/> <MkA :to="`/admin/user/${report.assignee.id}`" class="_link" :behavior="'window'">@{{ report.assignee.username }}</MkA>
</div> </div>
<div><MkTime :time="report.createdAt"/></div>
<div class="action"> <div class="action">
<MkSwitch v-model="forward" :disabled="report.targetUser.host == null || report.resolved"> <MkSwitch v-model="forward" c:disabled="report.targetUser.host == null || report.resolved">
{{ i18n.ts.forwardReport }} {{ i18n.ts.forwardReport }}
<template #caption>{{ i18n.ts.forwardReportIsAnonymous }}</template> <template #caption>{{ i18n.ts.forwardReportIsAnonymous }}</template>
</MkSwitch> </MkSwitch>
<MkButton v-if="!report.resolved" primary @click="resolve">{{ i18n.ts.abuseMarkAsResolved }}</MkButton> <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>
@ -72,13 +81,13 @@ function resolve() {
<style lang="scss" scoped> <style lang="scss" scoped>
.bcekxzvu { .bcekxzvu {
display: flex; display: flex;
flex-direction: column;
transition: .1s;
> .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 +109,36 @@ 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;
margin-top: 15px;
}
} }
> .detail { > .detail {
flex: 1; display: flex;
padding: 24px; flex-direction: column;
padding: 0px 24px 24px 24px;
.assignee {
margin-bottom: 15px;
}
.action {
display: flex;
flex-direction: column;
gap: 15px;
}
} }
} }
</style> </style>