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

fix (client): list layout on mobile

Browse source
This commit is contained in:
naskya 2024-04-17 19:06:29 +09:00
parent 17fb05430e
commit 8489066130
No known key found for this signature in database
GPG key ID: 712D413B3A9FED5C
1 changed files with 9 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
packages/client/src/pages/user-list-timeline.vue
View file

@ -3,7 +3,7 @@
<template #header <template #header
><MkPageHeader :actions="headerActions" :tabs="headerTabs" ><MkPageHeader :actions="headerActions" :tabs="headerTabs"
/></template> /></template>
<div ref="rootEl" class="eqqrhokj"> <MkSpacer>
<div class="tl _block"> <div class="tl _block">
<XTimeline <XTimeline
ref="tlEl" ref="tlEl"
@ -14,12 +14,15 @@
:sound="true" :sound="true"
/> />
</div> </div>
</div> </MkSpacer>
</MkStickyContainer> </MkStickyContainer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref, watch } from "vue"; import { computed, ref, watch } from "vue";
import type { entities } from "firefish-js";
// TODO: disable this rule properly
// biome-ignore lint/style/useImportType: used in <template>
import XTimeline from "@/components/MkTimeline.vue"; import XTimeline from "@/components/MkTimeline.vue";
import * as os from "@/os"; import * as os from "@/os";
import { useRouter } from "@/router"; import { useRouter } from "@/router";
@ -33,9 +36,8 @@ const props = defineProps<{
listId: string; listId: string;
}>(); }>();
const list = ref(null); const list = ref<entities.UserList>();
const tlEl = ref<InstanceType<typeof XTimeline>>(); const tlEl = ref<InstanceType<typeof XTimeline>>();
const rootEl = ref<HTMLElement>();
watch( watch(
() => props.listId, () => props.listId,
@ -92,13 +94,8 @@ definePageMetadata(
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.eqqrhokj { .tl {
padding: var(--margin); background: none;
max-width: 800px; border-radius: var(--radius);
margin: 0 auto;
> .tl {
background: none;
border-radius: var(--radius);
}
} }
</style> </style>