update: small layout

canwdev · Sep 20, 2023 · 8b121d8 · 8b121d8
1 parent 9d0d5c4
commit 8b121d8
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 72 deletions.
diff --git a/vue/index.html b/vue/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <title>KeeNote v4.0.5</title>
+    <title>KeeNote v4.0.6</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/vue/src/components/MarkdownEditor.vue b/vue/src/components/MarkdownEditor.vue
@@ -267,6 +267,9 @@ export default defineComponent({
   min-height: 50px;
   border-radius: 4px;
   border: 1px solid rgb(224, 224, 230);
+  @media screen and (max-height: 500px) {
+    height: calc(100vh - 30px);
+  }
   &._dark {
     border-color: transparent;
   }

diff --git a/vue/src/views/Home/LoginView.vue b/vue/src/views/Home/LoginView.vue
@@ -143,17 +143,5 @@ export default defineComponent({
 </template>
 
 <style lang="scss" scoped>
-.login-view {
-  height: 100%;
-
-  :deep(.n-layout-scroll-container) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .card-wrap {
-    max-width: 500px;
-    margin: 20px;
-  }
-}
+@import './login';
 </style>
diff --git a/vue/src/views/Home/UnlockView.vue b/vue/src/views/Home/UnlockView.vue
@@ -235,17 +235,5 @@ export default defineComponent({
 </template>
 
 <style lang="scss" scoped>
-.login-view {
-  height: 100%;
-
-  :deep(.n-layout-scroll-container) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .card-wrap {
-    max-width: 500px;
-    margin: 20px;
-  }
-}
+@import './login';
 </style>
diff --git a/vue/src/views/Home/login.scss b/vue/src/views/Home/login.scss
@@ -0,0 +1,17 @@
+
+.login-view {
+  height: 100%;
+
+  :deep(.n-layout-scroll-container) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    @media screen and (max-height: 500px) {
+      align-items: flex-start;
+    }
+  }
+  .card-wrap {
+    max-width: 500px;
+    margin: 20px;
+  }
+}
diff --git a/vue/src/views/Note/DetailView.vue b/vue/src/views/Note/DetailView.vue
@@ -196,7 +196,7 @@ export default defineComponent({
 <template>
   <div class="detail-view">
     <n-layout class="layout-inner-root">
-      <n-layout-header bordered>
+      <n-layout-header class="detail-header" bordered>
         <n-space align="center" justify="space-between" class="header-space">
           <n-button quaternary @click="handleBack">
             <n-icon size="18"> <ArrowLeft16Regular /> </n-icon>&nbsp;Back</n-button
@@ -228,7 +228,7 @@ export default defineComponent({
 
       <div v-if="entryDetail" class="detail-card-wrap">
         <div class="detail-card">
-          <n-space vertical>
+          <n-space vertical class="detail-infos">
             <n-space justify="space-between">
               <n-space align="center">
                 <n-date-picker
@@ -312,23 +312,24 @@ export default defineComponent({
 
               <AttachmentBox :entry-detail="entryDetail" @dataUpdated="syncAndSave" />
             </n-collapse-transition>
-            <MarkdownEditor
-              ref="complexEditorRef"
-              v-if="isComplexEditor"
-              v-model="entryDetail.fieldsV2.Notes"
-              @turnOff="isComplexEditor = false"
-            />
-            <n-input
-              v-else
-              v-model:value="entryDetail.fieldsV2.Notes"
-              type="textarea"
-              placeholder="Input your Note here."
-              :autosize="{
-                minRows: 20,
-              }"
-              style="background-color: inherit !important"
-            />
           </n-space>
+
+          <MarkdownEditor
+            ref="complexEditorRef"
+            v-if="isComplexEditor"
+            v-model="entryDetail.fieldsV2.Notes"
+            @turnOff="isComplexEditor = false"
+          />
+          <n-input
+            v-else
+            v-model:value="entryDetail.fieldsV2.Notes"
+            type="textarea"
+            placeholder="Input your Note here."
+            :autosize="{
+              minRows: 20,
+            }"
+            style="background-color: inherit !important"
+          />
         </div>
       </div>
 
@@ -344,13 +345,26 @@ export default defineComponent({
   height: 100%;
   $min_width: 800px;
 
-  .header-space {
-    width: 100%;
-    height: 100%;
-    padding: 6px 24px;
-    box-sizing: border-box;
-    @media screen and (max-width: $min_width) {
-      padding: 2px;
+  .detail-header {
+    .header-space {
+      width: 100%;
+      height: 100%;
+      padding: 6px 24px;
+      box-sizing: border-box;
+      @media screen and (max-width: $min_width) {
+        padding: 2px;
+      }
+      @media screen and (max-height: 500px) {
+        height: 10px;
+        overflow: hidden;
+        transition: all 0.3s;
+        opacity: 0;
+        &:hover {
+          opacity: 1;
+          height: 100%;
+          border: 1px dashed;
+        }
+      }
     }
   }
 
@@ -375,6 +389,9 @@ export default defineComponent({
       overflow: auto;
       padding-top: 10px;
       padding-bottom: 5px;
+      @media screen and (max-height: 500px) {
+        padding-top: 0;
+      }
     }
 
     .detail-card {
@@ -391,25 +408,43 @@ export default defineComponent({
       @media screen and (max-width: 1200px) {
         margin-top: 10px;
       }
-    }
-  }
-
-  .extra-info {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: auto;
-    gap: 10px;
-    margin-bottom: 10px;
-    @media screen and (max-width: $min_width) {
-      grid-template-columns: repeat(1, 1fr);
-    }
-    .extra-item {
-      display: flex;
-      align-items: center;
-      label {
-        margin-right: 5px;
-        min-width: 70px;
-        text-align: right;
+      @media screen and (max-height: 500px) {
+        margin-top: 1px;
+      }
+      .detail-infos {
+        @media screen and (max-height: 500px) {
+          height: 10px;
+          overflow: hidden;
+          transition: all 0.3s;
+          opacity: 0;
+          &:hover {
+            margin-left: -5px;
+            margin-right: -5px;
+            padding: 5px 5px 0;
+            opacity: 1;
+            outline: 1px dashed;
+            height: 100%;
+          }
+        }
+        .extra-info {
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          grid-template-rows: auto;
+          gap: 10px;
+          margin-bottom: 10px;
+          @media screen and (max-width: $min_width) {
+            grid-template-columns: repeat(1, 1fr);
+          }
+          .extra-item {
+            display: flex;
+            align-items: center;
+            label {
+              margin-right: 5px;
+              min-width: 70px;
+              text-align: right;
+            }
+          }
+        }
       }
     }
   }

diff --git a/vue/src/views/Note/NoteBaseView.vue b/vue/src/views/Note/NoteBaseView.vue
@@ -495,7 +495,7 @@ export default defineComponent({
         <n-layout-sider
           collapse-mode="width"
           :collapsed-width="50"
-          :width="248"
+          :width="240"
           show-trigger="arrow-circle"
           bordered
         >