arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-25 09:20:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

playground: improve responsive (#2675)

Browse Source
This commit is contained in:
Malik-Jouda
2024-11-19 20:26:09 +02:00
committed by GitHub
parent 9dd525ca26
commit 7a02bfeba6
3 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
playground-vue/src/app.vue
View File

@@ -84,9 +84,9 @@ defineShortcuts({
<UApp :toaster="(appConfig.toaster as any)"> <UApp :toaster="(appConfig.toaster as any)">
<div class="h-screen w-screen overflow-hidden flex min-h-0 bg-[var(--ui-bg)]" vaul-drawer-wrapper> <div class="h-screen w-screen overflow-hidden flex min-h-0 bg-[var(--ui-bg)]" vaul-drawer-wrapper>
<UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-[var(--ui-border)] overflow-y-auto w-48 p-4" /> <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-[var(--ui-border)] overflow-y-auto w-48 p-4" />
<UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-[var(--ui-border)] overflow-x-auto" /> <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-[var(--ui-border)] [&>div]:min-w-min overflow-x-auto" />
<div class="fixed top-4 right-4 flex items-center gap-2"> <div class="fixed top-15 lg:top-3 right-4 flex items-center gap-2">
<UButton <UButton
:icon="mode === 'dark' ? 'i-lucide-moon' : 'i-lucide-sun'" :icon="mode === 'dark' ? 'i-lucide-moon' : 'i-lucide-sun'"
color="neutral" color="neutral"
@@ -96,7 +96,7 @@ defineShortcuts({
/> />
</div> </div>
<div class="flex-1 flex flex-col items-center justify-around overflow-y-auto w-full py-12 px-4"> <div class="flex-1 flex flex-col items-center justify-around overflow-y-auto w-full py-14 px-4">
<Suspense> <Suspense>
<RouterView /> <RouterView />
</Suspense> </Suspense>

6
playground/app/app.vue
View File

@@ -85,9 +85,9 @@ defineShortcuts({
<UApp :toaster="appConfig.toaster"> <UApp :toaster="appConfig.toaster">
<div class="h-screen w-screen overflow-hidden flex flex-col lg:flex-row min-h-0 bg-[var(--ui-bg)]" vaul-drawer-wrapper> <div class="h-screen w-screen overflow-hidden flex flex-col lg:flex-row min-h-0 bg-[var(--ui-bg)]" vaul-drawer-wrapper>
<UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-[var(--ui-border)] overflow-y-auto w-48 p-4" /> <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-[var(--ui-border)] overflow-y-auto w-48 p-4" />
<UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-[var(--ui-border)] overflow-x-auto" /> <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-[var(--ui-border)] [&>div]:min-w-min overflow-x-auto" />
<div class="fixed top-4 right-4 flex items-center gap-2"> <div class="fixed top-15 lg:top-3 right-4 flex items-center gap-2">
<ClientOnly v-if="!colorMode?.forced"> <ClientOnly v-if="!colorMode?.forced">
<UButton <UButton
:icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'" :icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
@@ -103,7 +103,7 @@ defineShortcuts({
</ClientOnly> </ClientOnly>
</div> </div>
<div class="flex-1 flex flex-col items-center justify-around overflow-y-auto w-full py-12 px-4"> <div class="flex-1 flex flex-col items-center justify-around overflow-y-auto w-full py-14 px-4">
<NuxtPage /> <NuxtPage />
</div> </div>

2
playground/app/pages/components/table.vue
View File

@@ -276,7 +276,7 @@ onMounted(() => {
</script> </script>
<template> <template>
<div class="h-full flex flex-col flex-1 gap-4 w-full -my-8"> <div class="h-full flex flex-col flex-1 gap-4 w-full">
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center">
<UInput <UInput
:model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)" :model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"