Nikurasu/elk
1
0
Fork 0
forked from Mirrors/elk
Code Pull requests Releases 2 Packages Activity

feat: improve layout (#19)

Browse source 
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
This commit is contained in:
patak 2022-11-20 22:30:21 +01:00 committed by GitHub
parent 70daeeaed5
commit 2442c80bfb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 60 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
components/main/MainContent.vue
View file

@ -1,13 +1,17 @@
<template> <template>
<div flex flex-col> <div relative>
<div flex justify-between> <div sticky top-0 bg="#222" z10>
<div p3 flex gap-1> <div flex justify-between>
<slot name="title" /> <div p3 flex gap-1>
</div> <slot name="title" />
<div p3 flex> </div>
<slot name="actions" /> <div p3 flex>
<slot name="actions" />
</div>
</div> </div>
</div> </div>
<slot /> <div>
<slot />
</div>
</div> </div>
</template> </template>

2
components/publish/PublishWidget.vue
View file

@ -17,7 +17,7 @@ async function publish() {
</script> </script>
<template> <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 <textarea
v-model="draftPost" v-model="draftPost"
placeholder="What's on your mind?" placeholder="What's on your mind?"

38
layouts/default.vue
View file

@ -1,21 +1,27 @@
<template> <template>
<div h-full of-hidden> <div h-full>
<main grid="~ lg:cols-[1fr_40rem_1fr]" max-w-80rem mxa h-full> <main flex w-full mxa h-full lg:max-w-80rem>
<div> <div class="w-1/4" hidden lg:flex flex-col items-end>
<slot name="left"> <div fixed>
<AccountMe /> <slot name="left">
</slot> <AccountMe />
</slot>
</div>
</div> </div>
<div h-full of-auto border="l r border"> <div class="lg:w-3/4" flex>
<slot /> <div h-full border="l r border" class="w-full md:w-2/3">
</div> <slot />
<div flex="~ col"> </div>
<slot name="right"> <div hidden md:flex="~ col" class="w-1/3">
<NavTitle p5 /> <div fixed>
<NavSide border="y border" py8 /> <slot name="right">
<div flex-auto /> <NavTitle p5 />
<NavFooter /> <NavSide border="y border" py8 />
</slot> <div flex-auto />
<NavFooter />
</slot>
</div>
</div>
</div> </div>
</main> </main>
</div> </div>

20
pages/tags/[tag].vue Normal file
View 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>

5
styles/global.css
View file

@ -23,3 +23,8 @@
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: #666; background: #666;
} }
/* Force vertical scrollbar to be always visible to avoid layout shift while loading the content */
html {
overflow-y: scroll;
}