zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

feat: improve layout (#19) 

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
zio/stable
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>
<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>

2
components/publish/PublishWidget.vue
View File

@ -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?"

38
layouts/default.vue
View File

@ -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 100644
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 {
background: #666;
}
/* Force vertical scrollbar to be always visible to avoid layout shift while loading the content */
html {
overflow-y: scroll;
}