feat: improve layout (#19)
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
This commit is contained in:
parent
70daeeaed5
commit
2442c80bfb
|
@ -1,13 +1,17 @@
|
|||
<template>
|
||||
<div flex flex-col>
|
||||
<div flex justify-between>
|
||||
<div p3 flex gap-1>
|
||||
<slot name="title" />
|
||||
</div>
|
||||
<div p3 flex>
|
||||
<slot name="actions" />
|
||||
<div relative>
|
||||
<div sticky top-0 bg="#222" z10>
|
||||
<div flex justify-between>
|
||||
<div p3 flex gap-1>
|
||||
<slot name="title" />
|
||||
</div>
|
||||
<div p3 flex>
|
||||
<slot name="actions" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<slot />
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -17,7 +17,7 @@ async function publish() {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div flex flex-col gap-4 :class="isSending ? ' pointer-events-none' : ''">
|
||||
<div xl:w-70 flex flex-col gap-4 :class="isSending ? ' pointer-events-none' : ''">
|
||||
<textarea
|
||||
v-model="draftPost"
|
||||
placeholder="What's on your mind?"
|
||||
|
|
|
@ -1,21 +1,27 @@
|
|||
<template>
|
||||
<div h-full of-hidden>
|
||||
<main grid="~ lg:cols-[1fr_40rem_1fr]" max-w-80rem mxa h-full>
|
||||
<div>
|
||||
<slot name="left">
|
||||
<AccountMe />
|
||||
</slot>
|
||||
<div h-full>
|
||||
<main flex w-full mxa h-full lg:max-w-80rem>
|
||||
<div class="w-1/4" hidden lg:flex flex-col items-end>
|
||||
<div fixed>
|
||||
<slot name="left">
|
||||
<AccountMe />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
<div h-full of-auto border="l r border">
|
||||
<slot />
|
||||
</div>
|
||||
<div flex="~ col">
|
||||
<slot name="right">
|
||||
<NavTitle p5 />
|
||||
<NavSide border="y border" py8 />
|
||||
<div flex-auto />
|
||||
<NavFooter />
|
||||
</slot>
|
||||
<div class="lg:w-3/4" flex>
|
||||
<div h-full border="l r border" class="w-full md:w-2/3">
|
||||
<slot />
|
||||
</div>
|
||||
<div hidden md:flex="~ col" class="w-1/3">
|
||||
<div fixed>
|
||||
<slot name="right">
|
||||
<NavTitle p5 />
|
||||
<NavSide border="y border" py8 />
|
||||
<div flex-auto />
|
||||
<NavFooter />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
|
20
pages/tags/[tag].vue
Normal file
20
pages/tags/[tag].vue
Normal file
|
@ -0,0 +1,20 @@
|
|||
<script setup lang="ts">
|
||||
const params = useRoute().params
|
||||
const tag = $computed(() => params.tag as string)
|
||||
const masto = await useMasto()
|
||||
const paginator = masto.timelines.getHashtagIterable(tag)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MainContent>
|
||||
<template #title>
|
||||
<div i-ri:hashtag h-6 mr-1 /><span>{{ tag }}</span>
|
||||
</template>
|
||||
<template #actions>
|
||||
<div color-gray i-ri:equalizer-fill mr-1 h-6 />
|
||||
</template>
|
||||
<slot>
|
||||
<TimelinePaginator :paginator="paginator" />
|
||||
</slot>
|
||||
</MainContent>
|
||||
</template>
|
|
@ -23,3 +23,8 @@
|
|||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #666;
|
||||
}
|
||||
|
||||
/* Force vertical scrollbar to be always visible to avoid layout shift while loading the content */
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
}
|
Loading…
Reference in a new issue