From ded1cf626161458858265b384daa9283fc0bb617 Mon Sep 17 00:00:00 2001
From: Nicolas Giard <github@ngpixel.com>
Date: Fri, 25 Jan 2019 20:00:30 -0500
Subject: [PATCH] fix: markdown editor media button position

---
 client/components/editor/editor-markdown.vue | 31 ++++++++++++--------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/client/components/editor/editor-markdown.vue b/client/components/editor/editor-markdown.vue
index 938849ab..e38a9398 100644
--- a/client/components/editor/editor-markdown.vue
+++ b/client/components/editor/editor-markdown.vue
@@ -1,6 +1,6 @@
 <template lang='pug'>
-  .editor-code
-    v-toolbar.editor-code-toolbar(dense, color='primary', dark)
+  .editor-markdown
+    v-toolbar.editor-markdown-toolbar(dense, color='primary', dark)
       v-tooltip(top)
         v-btn(icon, slot='activator').mx-0
           v-icon format_bold
@@ -50,17 +50,17 @@
           v-icon remove
         span Horizontal Bar
 
-    .editor-code-main
-      .editor-code-editor
-        .editor-code-editor-title(v-if='previewShown', @click='previewShown = false') Editor
-        .editor-code-editor-title(v-else='previewShown', @click='previewShown = true'): v-icon(dark) drag_indicator
+    .editor-markdown-main
+      .editor-markdown-editor
+        .editor-markdown-editor-title(v-if='previewShown', @click='previewShown = false') Editor
+        .editor-markdown-editor-title(v-else='previewShown', @click='previewShown = true'): v-icon(dark) drag_indicator
         codemirror(ref='cm', v-model='code', :options='cmOptions', @ready='onCmReady', @input='onCmInput')
-      transition(name='editor-code-preview')
-        .editor-code-preview(v-if='previewShown')
-          .editor-code-preview-title(@click='previewShown = false') Preview
-          .editor-code-preview-content.contents(ref='editorPreview', v-html='previewHTML')
+      transition(name='editor-markdown-preview')
+        .editor-markdown-preview(v-if='previewShown')
+          .editor-markdown-preview-title(@click='previewShown = false') Preview
+          .editor-markdown-preview-content.contents(ref='editorPreview', v-html='previewHTML')
 
-      v-speed-dial(v-model='fabInsertMenu', :open-on-hover='true', direction='top', transition='slide-y-reverse-transition', fixed, left, bottom)
+      v-speed-dial.editor-markdown-insert(v-model='fabInsertMenu', :open-on-hover='true', direction='top', transition='slide-y-reverse-transition', fixed, bottom, :right='!previewShown || $vuetify.breakpoint.smAndDown')
         v-btn(color='blue', fab, dark, v-model='fabInsertMenu', slot='activator')
           v-icon add_circle
           v-icon close
@@ -262,7 +262,7 @@ export default {
 </script>
 
 <style lang='scss'>
-.editor-code {
+.editor-markdown {
   &-main {
     display: flex;
     width: 100%;
@@ -372,6 +372,13 @@ export default {
     }
   }
 
+  &-insert:not(.v-speed-dial--right) {
+    @include from($tablet) {
+      left: 50%;
+      margin-left: -28px;
+    }
+  }
+
   // ==========================================
   // Fix FAB revealing under codemirror
   // ==========================================