fix(stage-ui): model selector in mobile overlaps
This commit is contained in:
Neko Ayaka
+1
-1
@@ -39,7 +39,7 @@ onMounted(() => screenSafeArea.update())
|
||||
</DrawerTrigger>
|
||||
<DrawerPortal>
|
||||
<DrawerOverlay class="fixed inset-0" />
|
||||
<DrawerContent class="fixed bottom-0 left-0 right-0 z-1000 mt-20 h-full max-h-[96%] flex flex-col rounded-t-2xl bg-neutral-50 px-4 pt-4 outline-none backdrop-blur-md dark:bg-neutral-900/95" :style="{ paddingBottom: `${Math.max(Number.parseFloat(screenSafeArea.bottom.value.replace('px', '')), 24)}px` }">
|
||||
<DrawerContent class="fixed bottom-0 left-0 right-0 z-1000 mt-20 h-full max-h-[80%] flex flex-col rounded-t-2xl bg-neutral-50 px-4 pt-4 outline-none backdrop-blur-md sm:max-h-[75%] dark:bg-neutral-900/95" :style="{ paddingBottom: `${Math.max(Number.parseFloat(screenSafeArea.bottom.value.replace('px', '')), 24)}px` }">
|
||||
<DrawerHandle />
|
||||
<ModelManager v-model="selectedModel" @close="showDialog = false" />
|
||||
</DrawerContent>
|
||||
|
||||
+31
-12
@@ -93,14 +93,24 @@ vrmDialog.onChange(handleAddVRMModel)
|
||||
:side-offset="8"
|
||||
>
|
||||
<DropdownMenuItem
|
||||
class="data-[disabled]:text-mauve8 relative flex cursor-pointer select-none items-center rounded-md px-3 py-2 text-base leading-none outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-primary-100/20 sm:text-sm data-[highlighted]:text-primary-200"
|
||||
:class="[
|
||||
'data-[disabled]:text-mauve8 relative flex cursor-pointer select-none items-center rounded-md px-3 py-2 leading-none outline-none data-[disabled]:pointer-events-none',
|
||||
'text-base sm:text-sm',
|
||||
'data-[highlighted]:bg-primary-300/20 dark:data-[highlighted]:bg-primary-100/20',
|
||||
'data-[highlighted]:text-primary-400 dark:data-[highlighted]:text-primary-200',
|
||||
]"
|
||||
transition="colors duration-200 ease-in-out"
|
||||
@click="live2dDialog.open()"
|
||||
>
|
||||
Live2D
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
class="data-[disabled]:text-mauve8 relative flex cursor-pointer select-none items-center rounded-md px-3 py-2 text-base leading-none outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-primary-100/20 sm:text-sm data-[highlighted]:text-primary-200"
|
||||
:class="[
|
||||
'data-[disabled]:text-mauve8 relative flex cursor-pointer select-none items-center rounded-md px-3 py-2 leading-none outline-none data-[disabled]:pointer-events-none',
|
||||
'text-base sm:text-sm',
|
||||
'data-[highlighted]:bg-primary-300/20 dark:data-[highlighted]:bg-primary-100/20',
|
||||
'data-[highlighted]:text-primary-400 dark:data-[highlighted]:text-primary-200',
|
||||
]"
|
||||
transition="colors duration-200 ease-in-out" @click="vrmDialog.open()"
|
||||
>
|
||||
VRM
|
||||
@@ -113,19 +123,22 @@ vrmDialog.onChange(handleAddVRMModel)
|
||||
<div v-if="displayModelsFromIndexedDBLoading">
|
||||
Loading display models...
|
||||
</div>
|
||||
<div class="flex-1 md:flex-none" h-full w-full overflow-x-hidden overflow-y-scroll>
|
||||
<div class="grid grid-cols-2 gap-2 lg:max-h-80dvh">
|
||||
<div class="flex-1 overflow-x-auto overflow-y-hidden md:flex-none sm:overflow-x-hidden sm:overflow-y-scroll" h-full w-full>
|
||||
<div class="w-full flex gap-2 md:grid lg:grid-cols-2 md:grid-cols-1 lg:max-h-80dvh">
|
||||
<div
|
||||
v-for="(model) of displayModels"
|
||||
:key="model.id"
|
||||
v-auto-animate
|
||||
relative w-full flex="~ col md:row" gap-2
|
||||
relative gap-2
|
||||
class="block h-full w-full md:flex md:flex-row"
|
||||
@click="() => highlightDisplayModelCard = model.id"
|
||||
>
|
||||
<div absolute left-3 top-4 z-1>
|
||||
<DropdownMenuRoot>
|
||||
<DropdownMenuTrigger
|
||||
bg="neutral-900/20 hover:neutral-900/45 active:neutral-900/60 dark:neutral-950/50 hover:dark:neutral-900/65 active:dark:neutral-900/90"
|
||||
:class="[
|
||||
'bg-neutral-900/20 hover:bg-neutral-900/45 active:bg-neutral-900/60 dark:bg-neutral-950/50 hover:dark:bg-neutral-900/65 active:dark:bg-neutral-900/90',
|
||||
]"
|
||||
text="white"
|
||||
h-7 w-7 flex items-center justify-center rounded-lg backdrop-blur-sm
|
||||
transition="colors duration-200 ease-in-out"
|
||||
@@ -135,16 +148,22 @@ vrmDialog.onChange(handleAddVRMModel)
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuPortal>
|
||||
<DropdownMenuContent
|
||||
class="will-change-[opacity,transform] z-10000 max-w-45 rounded-lg p-0.5 text-white shadow-md outline-none data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade dark:text-black"
|
||||
bg="neutral-700/50 dark:neutral-950/50"
|
||||
:class="[
|
||||
'will-change-[opacity,transform] z-10000 max-w-45 rounded-lg p-0.5 text-white shadow-md outline-none data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade dark:text-black',
|
||||
'bg-neutral-900/30 dark:bg-neutral-950/50',
|
||||
'backdrop-blur-sm',
|
||||
]"
|
||||
transition="colors duration-200 ease-in-out"
|
||||
backdrop-blur-sm
|
||||
align="start"
|
||||
side="bottom"
|
||||
:side-offset="4"
|
||||
>
|
||||
<DropdownMenuItem
|
||||
class="data-[disabled]:text-mauve8 relative flex cursor-pointer select-none items-center rounded-md px-3 py-2 text-base leading-none outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-red-100/20 sm:text-sm data-[highlighted]:text-red-200"
|
||||
:class="[
|
||||
'relative flex cursor-pointer select-none items-center rounded-md px-3 py-2 text-base leading-none outline-none data-[disabled]:pointer-events-none sm:text-sm',
|
||||
'data-[highlighted]:bg-red-900/20 dark:data-[highlighted]:bg-red-100/20',
|
||||
'text-white dark:text-white data-[highlighted]:text-red-200 dark:data-[highlighted]:text-red-200',
|
||||
]"
|
||||
transition="colors duration-200 ease-in-out"
|
||||
>
|
||||
<button flex items-center gap-1 outline-none @click="handleRemoveModel(model)">
|
||||
@@ -157,7 +176,7 @@ vrmDialog.onChange(handleAddVRMModel)
|
||||
</DropdownMenuRoot>
|
||||
</div>
|
||||
<div
|
||||
class="min-w-60 lg:min-h-60"
|
||||
class="h-full min-w-80 w-full lg:min-h-60 md:min-w-70 sm:min-w-65"
|
||||
aspect="12/16"
|
||||
px-1 py-2
|
||||
>
|
||||
@@ -177,7 +196,7 @@ vrmDialog.onChange(handleAddVRMModel)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div h-full w-full flex flex-col>
|
||||
<div w-full flex flex-col>
|
||||
<div w-full flex-1 p-2>
|
||||
<EditableRoot
|
||||
v-slot="{ isEditing }"
|
||||
|
||||
Reference in New Issue
Block a user