|
|
|
@ -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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|