Adapt for Mobile Screen (#14)

ZhiShuYun · Jan 2, 2024 · 5e920f1 · 5e920f1
1 parent 6f1a78a
commit 5e920f1
Show file tree

Hide file tree

Showing 15 changed files with 355 additions and 152 deletions.
diff --git a/change/@zhishuyun-hub-bf95337c-cdeb-4103-a356-38668274b45e.json b/change/@zhishuyun-hub-bf95337c-cdeb-4103-a356-38668274b45e.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "adapt for mobile screen",
+  "packageName": "@zhishuyun/hub",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/src/components/chat/Introduction.vue b/src/components/chat/Introduction.vue
@@ -125,9 +125,15 @@ export default defineComponent({
 
 @media (max-width: 767px) {
   .introduction {
+    position: relative;
+    top: initial;
+    left: initial;
+    transform: initial;
     width: 90%;
-    left: 5%;
-    transform: translateY(-50%);
+    margin: auto;
+    .introduction-items {
+      margin-bottom: 0;
+    }
   }
 }
 </style>
diff --git a/src/components/chat/SidePanel.vue b/src/components/chat/SidePanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sidebar">
+  <div class="panel">
     <el-skeleton v-if="loading && conversations === undefined" />
     <div v-else class="conversations">
       <div class="conversation" @click="onNewConversation">
@@ -130,7 +130,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.sidebar {
+.panel {
   display: flex;
   flex-direction: column;
   align-items: flex-end;

diff --git a/src/components/common/Navigator.vue b/src/components/common/Navigator.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sidebar">
+  <div class="navigator">
     <div class="top">
       <div v-for="(link, linkIndex) in links" :key="linkIndex" class="link">
         <el-tooltip effect="dark" :content="link.displayName" placement="right">
@@ -97,7 +97,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.sidebar {
+.navigator {
   display: flex;
   flex-direction: column;
   align-items: center;

diff --git a/src/components/midjourney/ChannelSelector.vue b/src/components/midjourney/ChannelSelector.vue
@@ -108,4 +108,12 @@ export default defineComponent({
     }
   }
 }
+
+@media (max-width: 767px) {
+  .channel-selector {
+    .button {
+      padding: 20px 10px;
+    }
+  }
+}
 </style>
diff --git a/src/components/midjourney/tasks/TaskFullList.vue b/src/components/midjourney/tasks/TaskFullList.vue
@@ -14,13 +14,9 @@
       </el-skeleton>
     </el-card>
   </div>
-  <el-row>
-    <el-col :span="10" :offset="14">
-      <div class="pagination">
-        <pagination :current-page="page" :page-size="limit" :total="total" @change="onPageChange" />
-      </div>
-    </el-col>
-  </el-row>
+  <div class="pagination">
+    <pagination :current-page="page" :page-size="limit" :total="total" @change="onPageChange" />
+  </div>
 </template>
 
 <script lang="ts">
@@ -35,8 +31,6 @@ export default defineComponent({
   components: {
     TaskPreview,
     Pagination,
-    ElRow,
-    ElCol,
     ElSkeleton,
     ElSkeletonItem,
     ElCard
@@ -156,5 +150,7 @@ export default defineComponent({
 .pagination {
   height: 60px;
   padding-top: 10px;
+  width: fit-content;
+  margin: auto;
 }
 </style>
diff --git a/src/components/midjourney/tasks/TaskPreview.vue b/src/components/midjourney/tasks/TaskPreview.vue
@@ -139,7 +139,7 @@ export default defineComponent({
       required: true
     },
     applications: {
-      type: Object as () => IApplication[],
+      type: Object as () => IApplication[] | undefined,
       required: true
     },
     full: {

diff --git a/src/layouts/Chat.vue b/src/layouts/Chat.vue
@@ -1,25 +1,40 @@
 <template>
-  <div class="wrapper">
-    <div class="left">
-      <navigator />
+  <div class="main">
+    <div class="side">
+      <slot name="side">
+        <side-panel />
+      </slot>
     </div>
-    <div class="main">
-      <side-panel />
-      <router-view />
+    <div class="chat">
+      <slot name="chat" />
     </div>
+    <el-button round class="menu" @click="drawer = true">
+      <font-awesome-icon icon="fa-solid fa-bars" class="icon-menu" />
+    </el-button>
+    <el-drawer v-model="drawer" :with-header="false" size="340px" class="drawer">
+      <side-panel />
+    </el-drawer>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Navigator from '@/components/common/Navigator.vue';
 import SidePanel from '@/components/chat/SidePanel.vue';
+import { ElDrawer, ElButton } from 'element-plus';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 export default defineComponent({
   name: 'LayoutChat',
   components: {
     SidePanel,
-    Navigator
+    ElDrawer,
+    ElButton,
+    FontAwesomeIcon
+  },
+  data() {
+    return {
+      drawer: false
+    };
   },
   async mounted() {
     await this.onGetApplications();
@@ -37,24 +52,44 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.wrapper {
-  width: 100%;
-  height: 100%;
+.main {
+  width: calc(100% - 60px);
   display: flex;
   flex-direction: row;
-  .left {
-    width: 60px;
+  .side {
+    width: 300px;
     height: 100%;
-    border-right: 1px solid var(--el-border-color);
+    overflow-y: scroll;
   }
-  .main {
+
+  .chat {
     height: 100%;
+    padding: 15px;
     flex: 1;
-    width: calc(100% - 60px);
-    width: 100%;
+    width: calc(100% - 300px);
     height: 100%;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
+  }
+}
+
+.menu {
+  display: none;
+}
+
+@media (max-width: 767px) {
+  .side {
+    display: none;
+  }
+  .chat {
+    width: 100%;
+  }
+  .menu {
+    display: block;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+    z-index: 2000;
   }
 }
 </style>
diff --git a/src/layouts/Console.vue b/src/layouts/Console.vue
@@ -4,22 +4,38 @@
       <navigator />
     </div>
     <div class="main">
-      <side-panel />
-      <router-view />
+      <side-panel class="side" />
+      <router-view class="operation" />
     </div>
+    <el-button round class="menu" @click="drawer = true">
+      <font-awesome-icon icon="fa-solid fa-bars" class="icon-menu" />
+    </el-button>
+    <el-drawer v-model="drawer" :with-header="false" size="340px" class="drawer">
+      <side-panel />
+    </el-drawer>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import Navigator from '@/components/common/Navigator.vue';
 import SidePanel from '@/components/console/SidePanel.vue';
+import { ElDrawer, ElButton } from 'element-plus';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 export default defineComponent({
   name: 'LayoutConsole',
   components: {
     SidePanel,
-    Navigator
+    Navigator,
+    ElDrawer,
+    ElButton,
+    FontAwesomeIcon
+  },
+  data() {
+    return {
+      drawer: false
+    };
   }
 });
 </script>
@@ -43,4 +59,24 @@ export default defineComponent({
     flex-direction: row;
   }
 }
+
+@media screen and (max-width: 767px) {
+  .main {
+    .side {
+      display: none;
+    }
+    .panel {
+      width: 100%;
+      height: 100%;
+      overflow-y: scroll;
+    }
+  }
+  .menu {
+    display: block;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+    z-index: 1000;
+  }
+}
 </style>
diff --git a/src/layouts/Main.vue b/src/layouts/Main.vue
@@ -1,11 +1,7 @@
 <template>
   <div class="wrapper">
-    <div class="left">
-      <navigator />
-    </div>
-    <div class="main">
-      <router-view />
-    </div>
+    <navigator class="navigator" />
+    <router-view class="main" />
   </div>
 </template>
 
@@ -27,7 +23,8 @@ export default defineComponent({
   height: 100%;
   display: flex;
   flex-direction: row;
-  .left {
+  overflow: hidden;
+  .navigator {
     width: 60px;
     height: 100%;
     border-right: 1px solid var(--el-border-color);