feat: enhanced compatibility with mobile devices 🎨

CoderSerio · Jun 26, 2024 · ba12b41 · ba12b41
1 parent 89ea87a
commit ba12b41
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 54 deletions.
diff --git a/doc/src/App.vue b/doc/src/App.vue
@@ -13,6 +13,7 @@ import Navbar from "./components/navbar/Navbar.vue";
 
 <style scoped>
 .router-view-wrapper {
+  background-color: #252b3a;
 }
 
 .logo:hover {

diff --git a/doc/src/components/sideMenu/SideMenu.vue b/doc/src/components/sideMenu/SideMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <d-menu mode="vertical" multiple width="256px">
+  <d-menu mode="vertical" multiple width="108px">
     <template v-for="section in props.data" :key="section.title">
       <RouterLink :to="`/main/${section.title}`">
         <d-menu-item class="menu-item">
@@ -8,7 +8,7 @@
               activeSectionName === section.title
                 ? {
                     color: '#526ECC',
-                    borderLeft: '2px solid #344899',
+                    borderLeft: '4px solid #344899',
                     paddingLeft: '16px',
                     transition: '0.1s ease-in',
                   }
@@ -67,6 +67,7 @@ watch(
   width: 254px;
   height: calc(100vh - 60px);
   border-right: 2px solid #333;
+  background-color: red;
 }
 /* .menu-item { */
 /* width: 100%; */

diff --git a/doc/src/pages/home/Home.vue b/doc/src/pages/home/Home.vue
@@ -14,7 +14,9 @@ const linkTo = (path: string) => {
         <div class="title">Nighta</div>
         <div class="description">一夜之间诞生的脚本语言</div>
       </div>
-      <d-button variant="solid" @click="linkTo('/main')"> 从这里开始 </d-button>
+      <d-button variant="solid" @click="linkTo('/main')" class="button">
+        从这里开始
+      </d-button>
     </div>
 
     <div class="image-wrapper">
@@ -25,25 +27,75 @@ const linkTo = (path: string) => {
 
 <style scoped>
 .wrapper {
-  display: flex;
-  justify-content: space-around;
+  background-color: #252b3a;
+  height: calc(100vh - 60px);
 }
+@media screen and (min-width: 1024px) {
+  .wrapper {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  }
+  .image-wrapper {
+    width: 720px;
+    height: 720px;
+    background-color: #eeeeee;
+    border-radius: 20%;
+    transform: skewX(-10deg);
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 
-.image-wrapper {
-  width: 720px;
-  height: 720px;
-  background-color: #eeeeee;
-  border-radius: 20%;
-  transform: skewX(-10deg);
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  .image-wrapper > img {
+    height: 720px;
+    width: 720px;
+  }
+
+  .title {
+    font-size: 8rem;
+    margin-bottom: 1rem;
+    font-weight: 800;
+    transform: skewX(-10deg);
+  }
 }
 
-.image-wrapper > img {
-  height: 720px;
-  width: 720px;
+@media screen and (max-width: 1024px) {
+  .wrapper {
+    display: flex;
+    flex-direction: column-reverse;
+    justify-content: center;
+  }
+  .image-wrapper {
+    height: 240px;
+    border-radius: 20%;
+    transform: skewX(-10deg);
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    /* display: none; */
+  }
+
+  .image-wrapper > img {
+    height: 100%;
+    border-radius: 50%;
+    background-color: #eeeeee;
+  }
+
+  .button {
+    margin: 0 80px;
+    height: 64px;
+    font-size: 22px;
+    letter-spacing: 4px;
+    transform: skewX(-10deg);
+  }
+
+  .title {
+    font-size: 6rem;
+    margin-bottom: 1rem;
+    font-weight: 800;
+  }
 }
 
 .text-wrapper {
@@ -54,10 +106,6 @@ const linkTo = (path: string) => {
   gap: 4rem;
 }
 
-.title {
-  font-size: 6rem;
-}
-
 .description {
   font-size: 2rem;
 }

diff --git a/doc/src/pages/playground/Playground.vue b/doc/src/pages/playground/Playground.vue
@@ -1,3 +1,35 @@
+<template>
+  <div class="wrapper">
+    <div class="editor-container">
+      <div class="header">
+        <div class="name">Nighta Playground</div>
+        <d-button variant="solid" @click="runCode"> 运行代码 </d-button>
+      </div>
+      <div class="editor">
+        <MonacoEditor
+          v-model="value"
+          @editor-mounted="editorMounted"
+        ></MonacoEditor>
+      </div>
+    </div>
+    <div class="result-container">
+      <div
+        class="result"
+        :style="isValid ? { color: 'yellow' } : { color: 'red' }"
+      >
+        <template v-if="result instanceof Array">
+          <template v-for="item in result">
+            <div>{{ item }}</div>
+          </template>
+        </template>
+        <template v-else>
+          {{ result }}
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
 <script lang="ts" setup>
 // import * as monaco from "monaco-editor";
 import MonacoEditor from "../../components/monacoEditor/MonacoEditor.vue";
@@ -39,38 +71,6 @@ onMounted(() => {
 });
 </script>
 
-<template>
-  <div class="wrapper">
-    <div class="editor-container">
-      <div class="header">
-        <div class="name">Nighta Playground</div>
-        <d-button variant="solid" @click="runCode"> 运行代码 </d-button>
-      </div>
-      <div class="editor">
-        <MonacoEditor
-          v-model="value"
-          @editor-mounted="editorMounted"
-        ></MonacoEditor>
-      </div>
-    </div>
-    <div class="result-container">
-      <div
-        class="result"
-        :style="isValid ? { color: 'yellow' } : { color: 'red' }"
-      >
-        <template v-if="result instanceof Array">
-          <template v-for="item in result">
-            <div>{{ item }}</div>
-          </template>
-        </template>
-        <template v-else>
-          {{ result }}
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
 <style scoped>
 .wrapper {
   display: flex;
@@ -98,6 +98,7 @@ onMounted(() => {
 }
 .result-container {
   flex: 1;
+  min-width: 120px;
 }
 .result {
   height: 100%;