sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

フォローリクエストのUI改善 (#10275)

Browse Source 
* フォローリクエストのUI改善

* Update CHANGELOG.md
This commit is contained in:
Ebise Lutica
2023-03-09 12:17:34 +09:00
committed by GitHub
parent 965433bea9
commit 9d1a874ddc
3 changed files with 27 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/frontend/src/pages/follow-requests.vue
View File

@@ -18,12 +18,9 @@
<MkA v-user-preview="req.follower.id" class="name" :to="userPage(req.follower)"><MkUserName :user="req.follower"/></MkA>
<p class="acct">@{{ acct(req.follower) }}</p>
</div>
<div v-if="req.follower.description" class="description" :title="req.follower.description">
<Mfm :text="req.follower.description" :is-note="false" :author="req.follower" :i="$i" :plain="true" :nowrap="true"/>
</div>
<div class="actions">
<button class="_button" @click="accept(req.follower)"><i class="ti ti-check"></i></button>
<button class="_button" @click="reject(req.follower)"><i class="ti ti-x"></i></button>
<div class="commands">
<MkButton class="command" rounded primary @click="accept(req.follower)"><i class="ti ti-check"/> {{ i18n.ts.accept }}</MkButton>
<MkButton class="command" rounded danger @click="reject(req.follower)"><i class="ti ti-x"/> {{ i18n.ts.reject }}</MkButton>
</div>
</div>
</div>
@@ -37,6 +34,7 @@
<script lang="ts" setup>
import { shallowRef, computed } from 'vue';
import MkPagination from '@/components/MkPagination.vue';
import MkButton from '@/components/MkButton.vue';
import { userPage, acct } from '@/filters/user';
import * as os from '@/os';
import { i18n } from '@/i18n';
@@ -90,13 +88,11 @@ definePageMetadata(computed(() => ({
display: flex;
width: calc(100% - 54px);
position: relative;
flex-wrap: wrap;
gap: 8px;
> .name {
width: 45%;
@media (max-width: 500px) {
width: 100%;
}
flex: 1 1 50%;
> .name,
> .acct {
@@ -136,6 +132,11 @@ definePageMetadata(computed(() => ({
}
}
> .commands {
display: flex;
gap: 8px;
}
> .actions {
position: absolute;
top: 0;