feat(native): Improved layout in elk-native (#1359)

zio/stable
Piotrek Tomczewski 2023-01-21 15:55:20 +01:00 committed by GitHub
parent adbe31d523
commit 1cf123b62b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 60 additions and 34 deletions

View File

@ -5,6 +5,9 @@ defineProps<{
/** Show the back button on both small and big screens */ /** Show the back button on both small and big screens */
back?: boolean back?: boolean
}>() }>()
const route = useRoute()
const wideLayout = computed(() => route.meta.wideLayout ?? false)
</script> </script>
<template> <template>
@ -13,9 +16,10 @@ defineProps<{
sticky top-0 z10 backdrop-blur sticky top-0 z10 backdrop-blur
pt="[env(safe-area-inset-top,0)]" pt="[env(safe-area-inset-top,0)]"
border="b base" bg="[rgba(var(--rbg-bg-base),0.7)]" border="b base" bg="[rgba(var(--rbg-bg-base),0.7)]"
class="native:lg:w-[calc(100vw-5rem)] native:xl:w-[calc(135%+(100vw-1200px)/2)]"
> >
<div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }" data-tauri-drag-region> <div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }" data-tauri-drag-region class="native:xl:flex">
<div flex gap-3 items-center overflow-hidden py2> <div flex gap-3 items-center overflow-hidden py2 class="native-mac:pl-14 native-mac:sm:pl-0">
<NuxtLink <NuxtLink
v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0 xl:hidden v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0 xl:hidden
:aria-label="$t('nav.back')" :aria-label="$t('nav.back')"
@ -38,6 +42,8 @@ defineProps<{
<slot name="header" /> <slot name="header" />
</div> </div>
<div :class="{ 'xl:block': $route.name !== 'tag' }" hidden h-6 /> <div :class="{ 'xl:block': $route.name !== 'tag' }" hidden h-6 />
<slot /> <div :class="isHydrated && wideLayout ? 'xl:w-full sm:max-w-600px' : 'sm:max-w-600px md:shrink-0'" m-auto>
<slot />
</div>
</div> </div>
</template> </template>

View File

@ -16,11 +16,11 @@ const isGrayscale = usePreferences('grayscaleMode')
<template> <template>
<div h-full :data-mode="isHydrated && isGrayscale ? 'grayscale' : ''"> <div h-full :data-mode="isHydrated && isGrayscale ? 'grayscale' : ''">
<main flex w-full mxa lg:max-w-80rem> <main flex w-full mxa lg:max-w-80rem class="native:grid native:sm:grid-cols-[auto_1fr] native:lg:grid-cols-[auto_minmax(600px,2fr)_1fr]">
<aside class="hidden sm:flex w-1/8 md:w-1/6 lg:w-1/5 xl:w-1/4 justify-end xl:me-4 zen-hide" relative> <aside class="hidden native:w-auto sm:flex w-1/8 md:w-1/6 lg:w-1/5 xl:w-1/4 justify-end xl:me-4 zen-hide" relative>
<div sticky top-0 w-20 xl:w-100 h-screen flex="~ col" lt-xl-items-center> <div sticky top-0 w-20 xl:w-100 h-screen flex="~ col" lt-xl-items-center>
<slot name="left"> <slot name="left">
<div flex="~ col" overflow-y-auto justify-between h-full max-w-full mt-5> <div flex="~ col" overflow-y-auto justify-between h-full max-w-full pt-5 native:pt-7 overflow-x-hidden>
<NavTitle /> <NavTitle />
<NavSide command /> <NavSide command />
<div flex-auto /> <div flex-auto />
@ -50,7 +50,7 @@ const isGrayscale = usePreferences('grayscaleMode')
</slot> </slot>
</div> </div>
</aside> </aside>
<div w-full min-h-screen :class="isHydrated && wideLayout ? 'xl:w-full sm:w-600px' : 'sm:w-600px md:shrink-0'" border-base> <div w-full min-h-screen border-base>
<div min-h="[calc(100vh-3.5rem)]" sm:min-h-screen> <div min-h="[calc(100vh-3.5rem)]" sm:min-h-screen>
<slot /> <slot />
</div> </div>
@ -59,7 +59,7 @@ const isGrayscale = usePreferences('grayscaleMode')
<NavBottom v-if="isHydrated" sm:hidden /> <NavBottom v-if="isHydrated" sm:hidden />
</div> </div>
</div> </div>
<aside v-if="isHydrated && !wideLayout" class="hidden sm:none lg:block w-1/4 zen-hide"> <aside v-if="isHydrated && !wideLayout" class="hidden sm:none lg:block w-1/4 zen-hide native:lg:w-full">
<div sticky top-0 h-screen flex="~ col" gap-2 py3 ms-2> <div sticky top-0 h-screen flex="~ col" gap-2 py3 ms-2>
<slot name="right"> <slot name="right">
<div flex-auto /> <div flex-auto />

View File

@ -48,6 +48,9 @@ export default defineNuxtConfig({
'~/styles/default-theme.css', '~/styles/default-theme.css',
'~/styles/vars.css', '~/styles/vars.css',
'~/styles/global.css', '~/styles/global.css',
...process.env.TAURI_PLATFORM === 'macos'
? []
: ['~/styles/scrollbars.css'],
'~/styles/tiptap.css', '~/styles/tiptap.css',
'~/styles/dropdown.css', '~/styles/dropdown.css',
], ],

View File

@ -12,32 +12,6 @@ html {
src: url(/fonts/homemade-apple-v18.ttf) format('truetype'); src: url(/fonts/homemade-apple-v18.ttf) format('truetype');
} }
* {
scrollbar-color: #8885 var(--c-border);
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar:horizontal {
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--c-border);
border-radius: 1px;
}
::-webkit-scrollbar-thumb {
background: #8885;
border-radius: 1px;
}
::-webkit-scrollbar-thumb:hover {
background: #8886;
}
::-moz-selection { ::-moz-selection {
background: var(--c-bg-selection); background: var(--c-bg-selection);
} }

View File

@ -0,0 +1,25 @@
* {
scrollbar-color: #8885 var(--c-border);
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar:horizontal {
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--c-border);
border-radius: 1px;
}
::-webkit-scrollbar-thumb {
background: #8885;
border-radius: 1px;
}
::-webkit-scrollbar-thumb:hover {
background: #8886;
}

View File

@ -100,6 +100,24 @@ export default defineConfig({
}, },
}, },
}, },
variants: [
(matcher) => {
if (!process.env.TAURI_PLATFORM || !matcher.startsWith('native:'))
return matcher
return {
matcher: matcher.slice(7),
layer: 'native',
}
},
(matcher) => {
if (process.env.TAURI_PLATFORM !== 'macos' || !matcher.startsWith('native-mac:'))
return matcher
return {
matcher: matcher.slice(11),
layer: 'native-mac',
}
},
],
rules: [ rules: [
// scrollbar-hide // scrollbar-hide
[/^scrollbar-hide$/, (_, { constructCSS }) => { [/^scrollbar-hide$/, (_, { constructCSS }) => {