ae5d052274
to keep things manageable i merged a lot of one off values into just a handful of common sizes, so some parts of the ui will look different than upstream even with the "Misskey" rounding mode
56 lines
1.3 KiB
Vue
56 lines
1.3 KiB
Vue
<!--
|
|
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
-->
|
|
|
|
<template>
|
|
<MkStickyContainer>
|
|
<MkSpacer :contentMax="700">
|
|
<div>
|
|
<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="lists">
|
|
<MkA v-for="list in items" :key="list.id" class="_panel" :class="$style.list" :to="`/list/${ list.id }`">
|
|
<div>{{ list.name }}</div>
|
|
<MkAvatars :userIds="list.userIds"/>
|
|
</MkA>
|
|
</MkPagination>
|
|
</div>
|
|
</MkSpacer>
|
|
</MkStickyContainer>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import {} from 'vue';
|
|
import * as Misskey from 'misskey-js';
|
|
import MkPagination from '@/components/MkPagination.vue';
|
|
import MkStickyContainer from '@/components/global/MkStickyContainer.vue';
|
|
import MkSpacer from '@/components/global/MkSpacer.vue';
|
|
import MkAvatars from '@/components/MkAvatars.vue';
|
|
|
|
const props = defineProps<{
|
|
user: Misskey.entities.UserDetailed;
|
|
}>();
|
|
|
|
const pagination = {
|
|
endpoint: 'users/lists/list' as const,
|
|
noPaging: true,
|
|
limit: 10,
|
|
params: {
|
|
userId: props.user.id,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" module>
|
|
.list {
|
|
display: block;
|
|
padding: 16px;
|
|
border: solid 1px var(--divider);
|
|
border-radius: var(--radius-sm);
|
|
margin-bottom: 8px;
|
|
|
|
&:hover {
|
|
border: solid 1px var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
</style>
|