Update styles for responsive design

pizza-studio · Feb 24, 2024 · 0018a57 · 0018a57
1 parent 4da83ab
commit 0018a57
Show file tree

Hide file tree

Showing 15 changed files with 91 additions and 138 deletions.
diff --git a/README.md b/README.md
@@ -1,10 +1,10 @@
 <h1 align="center">Momotalk Editor</h1>
 
 <div align="center">
-    <img src="https://img.shields.io/github/last-commit/u1805/momotalk/main">
-    <img src="https://img.shields.io/github/languages/top/U1805/momotalk" >
-    <a href="https://star-history.com/#U1805/momotalk"> 
-      <img src="https://img.shields.io/github/stars/U1805/momotalk" alt="stars"> 
+    <img src="https://img.shields.io/github/last-commit/Pizza-Studio/momotalk/main">
+    <img src="https://img.shields.io/github/languages/top/Pizza-Studio/momotalk" >
+    <a href="https://star-history.com/#Pizza-Studio/momotalk"> 
+      <img src="https://img.shields.io/github/stars/Pizza-Studio/momotalk" alt="stars"> 
     </a>
 </div>
 
@@ -46,7 +46,7 @@
 
 ## Star History
 
-[![Star History Chart](https://api.star-history.com/svg?repos=U1805/momotalk)](https://star-history.com/#U1805/momotalk)
+[![Star History Chart](https://api.star-history.com/svg?repos=Pizza-Studio/momotalk)](https://star-history.com/#Pizza-Studio/momotalk)
 
 ## Credits
 

diff --git a/src/App.vue b/src/App.vue
@@ -10,6 +10,7 @@ import SearchIcon from './components/icons/IconSearch.vue'
 import LanguageIcon from './components/icons/IconLanguage.vue'
 import PlayerDialog from '@/components/PlayerWindow.vue'
 import SettingDialog from '@/components/SettingWindow.vue'
+import CloseIcon from './components/icons/IconClose.vue'
 </script>
 
 <template>
@@ -19,16 +20,15 @@ import SettingDialog from '@/components/SettingWindow.vue'
         <div id="header">
             <div id="header__left">
                 <MomoIcon class="icon momo" />
-                <span class="header-title">MomoTalk+</span>
+                <span id="header__title">MomoTalk+</span>
                 <!-- <RouterLink to="/help"><button class="help">?</button></RouterLink> -->
-                <!-- <a href="https://github.com/U1805/momotalk/blob/main/README-zh.md"
+                <!-- <a href="https://github.com/Pizza-Studio/momotalk/blob/main/README-zh.md"
                     ><button class="help">?</button></a
                 > -->
             </div>
-            <div class="right">
-                <button class="close-button" ref="closeBtn">
-                    <CloseIcon class="icon close" />
-                </button>
+            <div id="header__right">
+                <SettingIcon class="icon setting" @click="store.showSettingDialog = true" />
+                <CloseIcon class="icon close" @click="closeWindow"/>
             </div>
         </div>
 
@@ -56,10 +56,15 @@ import SettingDialog from '@/components/SettingWindow.vue'
 
         <div id="listcard">
             <div id="listheader">
-                <div class="group">
-                    <SearchIcon class="icon search" />
-                    <input placeholder="Type / to search" type="text" class="search-text" v-model="searchText"
-                        ref="searchBox" />
+                <div class="search-group">
+                    <SearchIcon class="icon search-group__icon" />
+                    <input
+                        type="text"
+                        placeholder="Type / to search"
+                        class="search-group__text"
+                        v-model="searchText"
+                        id="searchBox"
+                    />
                 </div>
                 <div
                     class="student-list__button"
@@ -128,92 +133,11 @@ import { store } from '@/assets/storeUtils/store'
 import { talkHistory } from '@/assets/storeUtils/talkHistory'
 import { search } from './assets/utils/search'
 
-export default defineComponent({
-    props: {},
-    data() {
-        return {
-            store,
-            student: {},
-            currentStudent: -1,
-            database: data,
-            searchText: ''
-        }
-    },
-    methods: {
-        selectStudent(item: any, index: number) {
-            this.student = item
-            // this.store.pushStudent(item)
-            this.currentStudent = index
-        },
-        download() {
-            var node = document.getElementsByClassName('talk-list')[0]
-            node.setAttribute('style', 'overflow-y:hidden') // 隐藏截图的滚动条
-            var width = node.clientWidth
-            var height = node.scrollHeight
-            if (width && height) {
-                domtoimage
-                    .toPng(node, { width, height })
-                    .then(function (dataUrl: string) {
-                        try {
-                            (window as any).webkit.messageHandlers.downloadImage.postMessage(dataUrl);
-                        } catch (error) {
-                            console.log(error);
-                        }
-                        const link = document.createElement('a')
-                        link.download = `Momotalk-${Date.now()}.png`
-                        link.href = dataUrl
-                        link.click()
-                        alert('保存图片成功!')
-                    })
-                    .catch(function (error: Error) {
-                        console.error('oops, screenshot went wrong!', error)
-                    })
-                    .finally(function () {
-                        node.setAttribute('style', 'overflow-y:scroll') // 恢复滚动功能
-                    })
-            }
-        },
-        search() {
-            // https://www.cnblogs.com/caozhenfei/p/14882122.html
-            let text = this.searchText.toLowerCase()
-            let reg = new RegExp(text)
-            this.database = data.filter((item) => {
-                if (reg.test(item.Name)) return item
-                else if (item.Nickname)
-                    // 遍历别名
-                    for (let nickname of item.Nickname) if (reg.test(nickname.toLowerCase())) return item
-            })
-        },
-        exchangeList() {
-            ; (this.database as any) = this.database[0].Id == 10000 ? data_ : data
-        },
-        update(item: myStudent) {
-            item.cnt = (item.cnt + 1) % item.Avatar.length
-            for (var selectItem of this.store.selectList) {
-                if (selectItem.Id == item.Id) selectItem.cnt = item.cnt
-            }
-            this.store.setData()
-        }
-    },
-    watch: {
-        searchText() {
-            this.search()
-        }
-    },
-    mounted() {
-        document.onkeyup = (e) => {
-            if (e.key == '/') {
-                ; (this.$refs.searchBox as HTMLInputElement).focus()
-            }
-        }
+store.getData()
 
-        const closeBtn = this.$refs.closeBtn as HTMLElement;
-        closeBtn.addEventListener('click', () => {
-            (window as any).webkit.messageHandlers.callbackHandler.postMessage('close')
-        });
-    }
+const closeWindow = () => {
+    (window as any).webkit.messageHandlers.callbackHandler.postMessage('close')
 }
-store.getData()
 
 // student data
 const database = ref<studentInfo[][]>(await getStudents(store.language))
@@ -314,18 +238,8 @@ document.onkeyup = (e) => {
 </script>
 
 <style scoped lang="scss">
-@import './assets/css/app.scss';
-@import './assets/css/icons.scss';
 
-.close-button {
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-    outline: none;
-    transition: none;
-    -webkit-tap-highlight-color: transparent;
-}
+
 @import './app.scss';
 @import '@/assets/css/icons.scss';
 

diff --git a/src/app.scss b/src/app.scss
@@ -49,7 +49,7 @@
 
     &__title {
         color: white;
-        padding: 10px;
+        padding: 15px;
         user-select: none;
         @include font-heavy(32px);
         font-family: 'Nunito', sans-serif;

diff --git a/src/assets/css/dialog.scss b/src/assets/css/dialog.scss
@@ -17,3 +17,9 @@
     overflow: hidden;
     min-height: 250px;
 }
+
+@media (prefers-color-scheme: dark) {
+    .dialog-box {
+        background: #333;
+    }
+}
diff --git a/src/assets/css/icons.scss b/src/assets/css/icons.scss
@@ -5,21 +5,30 @@
 
 .icon {
     &.momo {
-        height: 25px;
-        padding-left: 20px;
+        height: 35px;
+        padding-left: 10px;
     }
     &.reset {
         height: 30px;
         @include setColor(#fff);
     }
-    &.language,
+    &.language {
+        height: 35px;
+        @include setColor(#fff);
+        cursor: pointer;
+    }
     &.setting {
         height: 35px;
         @include setColor(#fff);
         cursor: pointer;
+        padding-right: 20px;
+    }
+    &.close {
+        height: 35px;
+        @include setColor(#fff);
+        cursor: pointer;
     }
-    &.close,
-    &.download,
+    &.download；
     &.info,
     &.list {
         height: 35px;

diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
@@ -34,7 +34,7 @@ img {
     -webkit-user-drag: none;
 }
 
-@media screen and (max-width: 1150px) {
+@media screen and (max-width: 540px) {
     #app {
         width: 100vw;
     }

diff --git a/src/assets/css/mobile.scss b/src/assets/css/mobile.scss
@@ -1,4 +1,14 @@
-@media screen and (max-width: 1150px) {
+@media screen and (max-width: 1200px){
+    #root {
+        zoom: 0.6;
+    }
+
+    .dialog-mask {
+        zoom: 0.5;
+    }
+}
+
+@media screen and (max-width: 540px) {
     #root {
         grid-template-columns: 100vw 100vw;
         grid-template-rows: $header-height 1fr $sider-width;
@@ -40,7 +50,7 @@
     }
 }
 
-@media screen and (max-width: 1150px) {
+@media screen and (max-width: 540px) {
     .talk-wrapper {
         width: 100vw;
     }

diff --git a/src/assets/imgUtils/download.ts b/src/assets/imgUtils/download.ts
@@ -14,18 +14,22 @@ const download = () => {
         domtoimage
             .toPng(node, { width, height })
             .then(function (dataUrl: string) {
+                try {
+                    (window as any).webkit.messageHandlers.downloadImage.postMessage(dataUrl);
+                } catch (error) {
+                    console.log(error);
+                }
                 const link = document.createElement('a')
                 link.download = `Momotalk-${Date.now()}.png`
                 link.href = dataUrl
                 link.click()
+                alert('保存图片成功!')
             })
             .catch(function (error: Error) {
                 console.error('oops, screenshot went wrong!', error)
             })
             .finally(function () {
-                // 恢复滚动功能
-                node.setAttribute('style', 'overflow-y:scroll')
-                indicator.setAttribute('style', '')
+                node.setAttribute('style', 'overflow-y:scroll') // 恢复滚动功能
             })
     }
 }

diff --git a/src/assets/storeUtils/store.ts b/src/assets/storeUtils/store.ts
@@ -7,7 +7,7 @@ export const store = reactive({
     language: 'zh',
     theme: 'momotalk',
     fullScreen: false,
-    draggable: window.matchMedia('(max-width: 1150px)').matches,
+    draggable: window.matchMedia('(max-width: 540px)').matches,
     apikey: '',
     host: 'https://api.openai.com/v1/chat/completions',
 
@@ -40,7 +40,7 @@ export const store = reactive({
         this.apikey    = data[1] != null ? JSON.parse(data[1]) : ''
         this.host      = data[2] != null ? JSON.parse(data[2]) : 'https://api.openai.com/v1/chat/completions'
         this.theme     = data[3] != null ? JSON.parse(data[3]) : 'momotalk'
-        this.draggable = data[4] != null ? JSON.parse(data[4]) : window.matchMedia('(max-width: 1150px)').matches
+        this.draggable = data[4] != null ? JSON.parse(data[4]) : window.matchMedia('(max-width: 540px)').matches
         this.fullScreen = data[5] != null ? JSON.parse(data[5]) : false
     },
     resetData() {

diff --git a/src/components/SettingWindow.vue b/src/components/SettingWindow.vue
@@ -61,8 +61,8 @@ const changeTheme = () => {
                         <button @click="importJson">{{ $t('importButton') }}</button><br />
                     </p>
                     <p class="dialog-content">
-                        <a href="https://github.com/U1805/momotalk" class="icon-github" title="GITHUB"><IconGithub /></a>
-                        <a href="https://github.com/U1805/momotalk/blob/main/docs/update_log.md" class="icon-log" title="LOG"><IconLog /></a>
+                        <a href="https://github.com/Pizza-Studio/momotalk" class="icon-github" title="GITHUB"><IconGithub /></a>
+                        <a href="https://github.com/Pizza-Studio/momotalk/blob/main/docs/update_log.md" class="icon-log" title="LOG"><IconLog /></a>
                     </p>
                 </div>
                 <div class="page">
@@ -82,8 +82,8 @@ const changeTheme = () => {
                         <label>{{ $t('clickToStart') }}</label>
                     </p>
                     <p class="dialog-content">
-                        <a href="https://github.com/U1805/momotalk" class="icon-github" title="GITHUB"><IconGithub /></a>
-                        <a href="https://github.com/U1805/momotalk/blob/main/docs/update_log.md" class="icon-log" title="LOG"><IconLog /></a>
+                        <a href="https://github.com/Pizza-Studio/momotalk" class="icon-github" title="GITHUB"><IconGithub /></a>
+                        <a href="https://github.com/Pizza-Studio/momotalk/blob/main/docs/update_log.md" class="icon-log" title="LOG"><IconLog /></a>
                         <a href="./Arona" title="talk to A.R.O.N.A"><img class="arona-chat" src="/Arona.webp"></a>
                     </p>
                 </div>

diff --git a/src/components/icons/IconClose.vue b/src/components/icons/IconClose.vue
@@ -1,5 +1,15 @@
 <template>
     <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <g id="SVGRepo_bgCarrier" stroke-width="0"></g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g> <g id="SVGRepo_iconCarrier"> <path d="M5 5L19 19M5 19L19 5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ></path> </g>
+      <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+      <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+      <g id="SVGRepo_iconCarrier">
+        <path
+          d="M5 5L19 19M5 19L19 5"
+          stroke="#ffffff"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        ></path>
+      </g>
     </svg>
-</template>
+  </template>
diff --git a/src/locales/i18n-en.ts b/src/locales/i18n-en.ts
@@ -54,7 +54,7 @@ Below the sidebar, there are three buttons: "**Switch Language**," "**Reset**,"
 
 - Select Identity: The first four options are "**Teacher**," "**Story Event**," "**Reply**," and "**System Message**." The last button is used to **add custom characters**.
 - For Teachers/Students, clicking on the avatar sends in-game **chat stickers** and **student face variations images**.
-- You can use [a syntax similar to markdown](https://github.com/U1805/momotalk/blob/main/docs/How-to-use.md#%EF%B8%8F-%E7%BC%96%E8%BE%91%E6%B6%88%E6%81%AF--edit-messages) to send some special text styles.
+- You can use [a syntax similar to markdown](https://github.com/Pizza-Studio/momotalk/blob/main/docs/How-to-use.md#%EF%B8%8F-%E7%BC%96%E8%BE%91%E6%B6%88%E6%81%AF--edit-messages) to send some special text styles.
 
 ![](./img/stickers.webp)
 ![](./img/sendbar.webp)
@@ -78,7 +78,7 @@ Below the sidebar, there are three buttons: "**Switch Language**," "**Reset**,"
 
 This application is compatible with mobile devices, but due to limited capabilities, it's recommend to use on computers 💻📱.
 
-If you find any omissions or errors, **feel free to submit an [issue](https://github.com/U1805/momotalk/issues) or [pull request](https://github.com/U1805/momotalk/pulls)**. Of course, we welcome ideas and optimizations for functionality and code ❤️.
+If you find any omissions or errors, **feel free to submit an [issue](https://github.com/Pizza-Studio/momotalk/issues) or [pull request](https://github.com/Pizza-Studio/momotalk/pulls)**. Of course, we welcome ideas and optimizations for functionality and code ❤️.
 
 ![](./img/kyk.gif)
 `

diff --git a/src/locales/i18n-jp.ts b/src/locales/i18n-jp.ts
@@ -54,7 +54,7 @@ export default {
 
 - 役割の選択：最初の4つのアイテム「**先生**」「**絆イベント**」「**返信**」「**システムメッセージ**」および最後のボタンは**カスタムキャラクターの追加**に使用されます。
 - 先生/生徒の役割は、アイコンをクリックしてゲーム内のチャットルーム**ステッカー**と**生徒差分**を送信できます。
-- [Markdownのような構文](https://github.com/U1805/momotalk/blob/main/docs/How-to-use.md#%EF%B8%8F-%E7%BC%96%E8%BE%91%E6%B6%88%E6%81%AF--edit-messages)を使用して、特殊なテキストスタイルを送信できます。
+- [Markdownのような構文](https://github.com/Pizza-Studio/momotalk/blob/main/docs/How-to-use.md#%EF%B8%8F-%E7%BC%96%E8%BE%91%E6%B6%88%E6%81%AF--edit-messages)を使用して、特殊なテキストスタイルを送信できます。
 
 ![](./img/stickers.webp)
 ![](./img/sendbar.webp)
@@ -78,7 +78,7 @@ export default {
 
 このアプリはモバイルにも対応していますが、個人の能力の限界から、基本的にはコンピュータでの操作をお勧めします 💻📱
 
-機能やコードの改善に関するアイデアや提案は、**[issue](https://github.com/U1805/momotalk/issues)** または **[pr](https://github.com/U1805/momotalk/pulls)** を提供していただければ幸いです ❤️
+機能やコードの改善に関するアイデアや提案は、**[issue](https://github.com/Pizza-Studio/momotalk/issues)** または **[pr](https://github.com/Pizza-Studio/momotalk/pulls)** を提供していただければ幸いです ❤️
 
 ![](./img/kyk.gif)
 `