GithubProxy/coai
1
0
Fork 0
mirror of https://github.com/coaidev/coai.git synced 2025-05-26 00:10:15 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix mobile padding adapter

Browse Source
This commit is contained in:
Zhang Minghan 2023-08-14 18:38:51 +08:00
parent e928311e87
commit 6163a17ce3
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/src/App.vue
View File

@ -13,7 +13,7 @@ import {ref} from "vue";
import Close from "./components/icons/close.vue"; import Close from "./components/icons/close.vue";
const current = manager.getCurrent(); const current = manager.getCurrent();
const sidebar = ref(false); const sidebar = ref(false), padding = ref(false);
function goto() { function goto() {
window.location.href = "https://deeptrain.net/login?app=chatnio"; window.location.href = "https://deeptrain.net/login?app=chatnio";
@ -26,6 +26,8 @@ function toggle(n: boolean) {
function setSidebar(n: boolean) { function setSidebar(n: boolean) {
sidebar.value = n; sidebar.value = n;
if (!n) return setTimeout(() => padding.value = false, 500);
padding.value = n;
} }
function toggleConversation(id: number) { function toggleConversation(id: number) {
@ -55,7 +57,7 @@ function toggleConversation(id: number) {
<heart /> <heart />
捐助我们 捐助我们
</a> </a>
<div class="conversation-container" v-if="auth" :class="{'mobile': mobile, 'active': sidebar}"> <div class="conversation-container" v-if="auth" :class="{'mobile': mobile, 'active': sidebar, 'padding': padding}">
<div class="operation-wrapper" v-if="mobile"> <div class="operation-wrapper" v-if="mobile">
<div class="grow" /> <div class="grow" />
<div class="operation" @click="setSidebar(false)"> <div class="operation" @click="setSidebar(false)">
@ -246,19 +248,22 @@ aside {
height: 100%; height: 100%;
background: rgb(32, 33, 35); background: rgb(32, 33, 35);
transition: .5s; transition: .5s;
transition-property: width, opacity;
z-index: 2; z-index: 2;
padding: 0;
margin: 0; margin: 0;
padding: 16px;
transform: translateX(-32px);
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
} }
.conversation-container.padding {
padding: 16px;
}
.conversation-container.mobile.active { .conversation-container.mobile.active {
width: calc(100% - 32px); width: calc(100% - 32px);
transform: translateX(0);
pointer-events: all;
opacity: 1; opacity: 1;
pointer-events: all;
} }
.operation-wrapper { .operation-wrapper {