Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style: main content mobile adaption #5

Merged
merged 1 commit into from
Dec 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions packages/stage/src/auto-imports.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -319,9 +319,6 @@ declare global {
// @ts-ignore
export type { UseWhisperOptions } from './composables/whisper'
import('./composables/whisper')
// @ts-ignore
export type { Temporal } from './stores/agent'
import('./stores/agent')
}

// for vue template auto import
Expand All @@ -347,7 +344,6 @@ declare module 'vue' {
readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
readonly createTemporal: UnwrapRef<typeof import('./stores/agent')['createTemporal']>
readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
Expand Down Expand Up @@ -433,7 +429,6 @@ declare module 'vue' {
readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']>
readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
readonly useAgentStore: UnwrapRef<typeof import('./stores/agent')['useAgentStore']>
readonly useAnimate: UnwrapRef<typeof import('@vueuse/core')['useAnimate']>
readonly useArrayDifference: UnwrapRef<typeof import('@vueuse/core')['useArrayDifference']>
readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
Expand Down
6 changes: 3 additions & 3 deletions packages/stage/src/components/Layouts/InteractiveArea.vue
Original file line number Diff line number Diff line change
Expand Up @@ -158,14 +158,14 @@ onAfterSend(async () => {
</div>
</label>
</fieldset>
<div h-full max-h="[85vh]" w-full px-12 py-4>
<div h-full max-h="[85vh]" w-full px="12 <md:0" py="4">
<div
flex="~ col"
border="solid 4 pink-100 dark:pink-400/20"
h-full w-full overflow-scroll rounded-xl
>
<ChatHistory h-full flex-1 p-4 w="full" max-h="[80vh]" />
<div flex gap-2>
<ChatHistory h-full flex-1 p-4 w="full" max-h="<md:[60%]" />
<div h="<md:full" flex gap-2>
<BasicTextarea
v-model="messageInput"
:placeholder="t('stage.message')"
Expand Down
4 changes: 2 additions & 2 deletions packages/stage/src/components/Scenes/Live2D.vue
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ defineExpose({
h-fit cursor-pointer
:class="[show ? 'bg-zinc-300 text-zinc-900 dark:bg-zinc-200 dark:text-zinc-800' : '']"
transition="all ease-in-out duration-500"
rounded-md px-2 py-2
rounded-md px-2 py-2 z="<md:1000"
>
<input
v-model="show"
Expand All @@ -62,7 +62,7 @@ defineExpose({
</label>
</div>
<TransitionVertical>
<div v-if="show" absolute w-full top="10" min-w="50vw">
<div v-if="show" absolute w-full top="10" min-w="50vw" z="<md:1000">
<div bg="zinc-200/20 dark:black/20" rounded-lg p-2 backdrop-blur-sm>
<div font-mono>
<span>Emotions</span>
Expand Down
8 changes: 6 additions & 2 deletions packages/stage/src/components/Widgets/ChatHistory.vue
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,14 @@ onTokenLiteral(async () => {
<template>
<div
relative
class="<lg:(absolute bottom-0 from-zinc-100/80 to-zinc-800/0 bg-gradient-to-t p-2 dark:from-zinc-800/80)"
class="<md:(absolute left-0 top-0 from-zinc-100/80 to-zinc-800/0 bg-gradient-to-t p-2 dark:from-zinc-800/80)"
px="<sm:2" py="<sm:2" flex="~ col"
rounded="lg"
overflow-hidden
>
<div ref="chatHistoryRef" v-auto-animate h-full w-full overflow-scroll>
<div flex-1 /> <!-- spacer -->
<div ref="chatHistoryRef" v-auto-animate h-full w-full flex="~ col" overflow-scroll>
<div flex-1 /> <!-- spacer -->
<div v-for="(message, index) in messages" :key="index" mb-2>
<div v-if="message.role === 'assistant'" flex mr="12">
<div
Expand All @@ -48,6 +50,7 @@ onTokenLiteral(async () => {
shadow="md pink-200/50 dark:none"
min-w-20 rounded-lg px-2 py-1
h="unset <sm:fit"
bg="<md:pink-500/25"
>
<div>
<span text-xs text="pink-400/90 dark:pink-600/90" font-semibold class="inline <sm:hidden">Airi</span>
Expand All @@ -63,6 +66,7 @@ onTokenLiteral(async () => {
shadow="md teal-200/50 dark:none"
px="2"
h="unset <sm:fit" min-w-20 rounded-lg px-2 py-1
bg="<md:teal-500/25"
>
<div>
<span text-xs text="teal-400/90 dark:teal-600/90" font-semibold class="inline <sm:hidden">You</span>
Expand Down
6 changes: 3 additions & 3 deletions packages/stage/src/pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import Stage from '../components/Widgets/Stage.vue'
<template>
<div h-full max-h="[100vh]" max-w="[100vw]" p="2" flex="~ col" overflow-hidden>
<Header />
<div flex="~ row 1" relative h-full w-full items-end gap-2>
<Stage w="50%" />
<InteractiveArea w="50%" />
<div flex="~ row 1 <md:col" relative h-full w-full items-end gap-2>
<Stage w="50% <md:100%" h="100% <md:60%" />
<InteractiveArea w="50% <md:100%" h="100% <md:40%" />
</div>
</div>
</template>
Expand Down
Loading