ui: improve layout

This commit is contained in:
Anthony Fu 2022-11-23 10:53:22 +08:00
parent df9ee293a7
commit 936488f51e
8 changed files with 30 additions and 19 deletions

View file

@ -0,0 +1,10 @@
<template>
<div p8 flex="~ col gap4">
<div text-sm op50>
Sign in to follow profiles or hashtags, favourite, share and reply to posts, or interact from your account on a different server.
</div>
<NuxtLink to="/signin" class="btn-solid text-center">
Sign in
</NuxtLink>
</div>
</template>

View file

@ -1,26 +1,25 @@
<template> <template>
<div h-full> <div h-full>
<main flex w-full mxa lg:max-w-80rem> <main flex w-full mxa lg:max-w-80rem>
<div class="w-1/4" hidden lg:flex flex-col items-end> <div class="hidden md:block w-1/4" relative>
<div fixed> <div sticky top-0 h-screen flex="~ col">
<slot name="left"> <slot name="left">
<AccountMe /> <AccountMe v-if="currentUser" />
<AccountSignIn v-else />
</slot> </slot>
</div> </div>
</div> </div>
<div class="lg:w-3/4" flex> <div class="w-full md:w-2/4 min-h-screen" border="l r base">
<div class="w-full md:w-2/3" border="l r base" min-h-screen> <slot />
<slot /> </div>
</div> <div class="hidden md:block w-1/4">
<div hidden md:flex="~ col" class="w-1/3"> <div sticky top-0 h-screen flex="~ col">
<div fixed> <slot name="right">
<slot name="right"> <NavTitle p5 />
<NavTitle p5 /> <NavSide border="y base" py8 />
<NavSide border="y base" py8 /> <div flex-auto />
<div flex-auto /> <NavFooter />
<NavFooter /> </slot>
</slot>
</div>
</div> </div>
</div> </div>
</main> </main>

View file

@ -17,7 +17,6 @@
"@iconify-json/logos": "^1.1.18", "@iconify-json/logos": "^1.1.18",
"@iconify-json/ri": "^1.1.3", "@iconify-json/ri": "^1.1.3",
"@iconify-json/twemoji": "^1.1.5", "@iconify-json/twemoji": "^1.1.5",
"@nuxtjs/color-mode": "^3.1.8",
"@pinia/nuxt": "^0.4.3", "@pinia/nuxt": "^0.4.3",
"@types/fs-extra": "^9.0.13", "@types/fs-extra": "^9.0.13",
"@types/sanitize-html": "^2.6.2", "@types/sanitize-html": "^2.6.2",

View file

@ -3,7 +3,7 @@ definePageMeta({
layout: 'none', layout: 'none',
}) })
const server = ref(useAppCookies().server.value) const server = ref()
async function oauth() { async function oauth() {
const a = document.createElement('a') const a = document.createElement('a')

View file

@ -28,7 +28,7 @@ export default defineEventHandler(async ({ context, req, res }) => {
}) })
res.writeHead(302, { res.writeHead(302, {
Location: `${HOST_DOMAIN}/login/callback?${stringifyQuery({ server, token: result.access_token })}`, Location: `${HOST_DOMAIN}/signin/callback?${stringifyQuery({ server, token: result.access_token })}`,
}) })
res.end() res.end()

View file

@ -1,5 +1,6 @@
:root { :root {
--c-primary: #53b3cb; --c-primary: #53b3cb;
--c-primary-active: #3a7b8c;
--c-border: #88888820; --c-border: #88888820;
--c-bg-base: #fff; --c-bg-base: #fff;
--c-text-base: #222; --c-text-base: #222;

View file

@ -15,6 +15,8 @@ export default defineConfig({
'border-base': 'border-$c-border', 'border-base': 'border-$c-border',
'bg-base': 'bg-$c-bg-base', 'bg-base': 'bg-$c-bg-base',
'text-base': 'text-$c-text-base', 'text-base': 'text-$c-text-base',
'btn-solid': 'px-4 py-2 rounded text-white bg-$c-primary hover:bg-$c-primary-active',
'btn-outline': 'px-4 py-2 rounded text-$c-primary border-$c-primary hover:bg-$c-primary hover:text-white',
}, },
], ],
presets: [ presets: [