Fix fullscreen editor (#1093)

getgrav · Apr 28, 2017 · bc0bf6b · bc0bf6b
1 parent e1f0786
commit bc0bf6b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/themes/grav/app/forms/fields/editor/buttons.js b/themes/grav/app/forms/fields/editor/buttons.js
@@ -307,10 +307,10 @@ export default {
                     let previewContainer = textarea.data('grav-editor-preview-container');
                     let content = textarea.parent('.grav-editor-content');
 
-                    content.css('display', 'block');
+                    content.addClass('is-active');
                     ui.navigation.find('.grav-editor-actions').css('visibility', 'visible');
                     if (previewContainer) {
-                        previewContainer.css('display', 'none');
+                        previewContainer.removeClass('is-active');
                     }
                 });
             }
@@ -338,8 +338,9 @@ export default {
                         textarea.data('grav-editor-preview-container', previewContainer);
                     }
 
-                    previewContainer.css({ height: content.height(), display: 'block' });
-                    content.css('display', 'none');
+                    previewContainer.css({ height: content.height() });
+                    previewContainer.addClass('is-active');
+                    content.removeClass('is-active');
                     ui.navigation.find('.grav-editor-actions').css('visibility', 'hidden');
 
                     let url = `${textarea.data('grav-urlpreview')}/task${config.param_sep}processmarkdown`;

diff --git a/themes/grav/scss/template/_editor.scss b/themes/grav/scss/template/_editor.scss
@@ -61,6 +61,10 @@
     .grav-editor-resizer {
         display: none;
     }
+
+    .grav-editor-content.is-active {
+        display: flex;
+    }
 }
 
 .grav-editor-toolbar {
@@ -146,6 +150,11 @@
 .grav-editor-content, .grav-editor-preview {
     @include clearfix;
     cursor: text;
+    display: none;
+
+    &.is-active {
+        display: block;
+    }
 }
 
 .grav-editor-content {

diff --git a/themes/grav/templates/forms/fields/editor/editor.html.twig b/themes/grav/templates/forms/fields/editor/editor.html.twig
@@ -12,7 +12,7 @@
 {% block field %}
     <div class="form-field {{ field.classes|default('') }}">
         <div class="form-data grav-editor">
-            <div class="grav-editor-content">
+            <div class="grav-editor-content is-active">
                 <textarea
                     data-grav-editor="{{ {'codemirror': codemirrorOptions} | json_encode|e('html_attr') }}"
                     data-grav-editor-mode="editor"