From 26ed51e360188ff22052d022fadccf5e39c5a18f Mon Sep 17 00:00:00 2001
From: deanly <deanly88@gmail.com>
Date: Tue, 17 May 2022 00:17:54 +0900
Subject: [PATCH] fix: preview show/hide button and moving ratio.

---
 client/components/editor/editor-markdown.vue | 29 ++++----------------
 1 file changed, 6 insertions(+), 23 deletions(-)

diff --git a/client/components/editor/editor-markdown.vue b/client/components/editor/editor-markdown.vue
index c38a6e0c..421f6553 100644
--- a/client/components/editor/editor-markdown.vue
+++ b/client/components/editor/editor-markdown.vue
@@ -486,25 +486,10 @@ export default {
         const preview = resizer.nextElementSibling
         const { addEventListener, removeEventListener } = window
         const onMouseMove = function({ pageX }) {
-          const ratio = (pageX - sidebar.offsetWidth) / (editor.offsetWidth + preview.offsetWidth)
-          if (ratio >= 0.85) {
-            self.flexBasisEditor = 0.90
-          } else if (ratio >= 0.75 && ratio < 0.85) {
-            self.flexBasisEditor = 0.80
-          } else if (ratio >= 0.65 && ratio < 0.75) {
-            self.flexBasisEditor = 0.70
-          } else if (ratio >= 0.55 && ratio < 0.65) {
-            self.flexBasisEditor = 0.60
-          } else if (ratio > 0.35 && ratio <= 0.45) {
-            self.flexBasisEditor = 0.40
-          } else if (ratio > 0.25 && ratio <= 0.35) {
-            self.flexBasisEditor = 0.30
-          } else if (ratio > 0.15 && ratio <= 0.25) {
-            self.flexBasisEditor = 0.20
-          } else if (ratio <= 0.15) {
-            self.flexBasisEditor = 0.10
-          } else {
-            self.flexBasisEditor = 0.5
+          const ratio = Number(((pageX - sidebar.offsetWidth) / (editor.offsetWidth + preview.offsetWidth)).toFixed(1))
+          // const ratio = Number(((pageX - sidebar.offsetWidth) / (editor.offsetWidth + preview.offsetWidth) * 5).toFixed(1)) / 5
+          if (ratio >= 0.10 && ratio <= 0.90) {
+            self.flexBasisEditor = ratio
           }
         }
         const onMouseUp = function() {
@@ -939,7 +924,6 @@ $editor-height-mobile: calc(100vh - 112px - 16px);
 
   &-editor {
     background-color: darken(mc('grey', '900'), 4.5%);
-    flex: 1 1 50%;
     display: block;
     height: $editor-height;
     position: relative;
@@ -950,7 +934,6 @@ $editor-height-mobile: calc(100vh - 112px - 16px);
   }
 
   &-preview {
-    flex: 1 1 50%;
     background-color: mc('grey', '100');
     position: relative;
     height: $editor-height;
@@ -967,10 +950,10 @@ $editor-height-mobile: calc(100vh - 112px - 16px);
 
     &-enter-active, &-leave-active {
       transition: max-width .5s ease;
-      max-width: 50vw;
+      max-width: 100vw;
 
       .editor-code-preview-content {
-        width: 50vw;
+        width: 100vw;
         overflow:hidden;
       }
     }