Improve edit form style

bower.json

@@ -19,7 +19,7 @@
     "tests"
   ],
   "dependencies": {
-    "bootstrap-sass-official": "~3.2.0",
-    "fontawesome": "~4.1.0"
+    "bootstrap-sass-official": "~3.3.1",
+    "fontawesome": "~4.2.0"
   }
 }

resource/css/_layout.scss

@@ -354,12 +354,68 @@
   .wiki-content {
   }
 
-  .tab-content {
-    margin-top: 30px;
-    .form-box {
+  .content-main {
+    .tab-content {
       margin-top: 30px;
     }
   }
+  // on-edit
+  .content-main.on-edit {
+    position: fixed;
+    z-index: 1060;
+    background: #fff;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    padding: 16px;
+
+    .nav {
+      margin-top: 8px;
+      max-height: 8%;
+    }
+
+    .tab-content {
+      margin-top: 1%;
+      height: 83%;
+
+      .edit-form {
+        height: 100%;
+        .row {
+          height: 100%;
+          .col-md-6 {
+            height: 100%;
+
+            form {
+              height: 100%;
+              textarea {
+                height: 100%;
+              }
+            }
+
+            .preview-body {
+              height: 100%;
+              padding-top: 5px;
+              padding-bottom: 5px;
+              overflow: scroll;
+            }
+          }
+        }
+      }
+    }
+
+    .form-group.form-submit-group {
+      position: fixed;
+      bottom: 0;
+      width: 100%;
+      left: 0;
+      padding: 8px;
+      max-height: 8%;
+      background: rgba(255,255,255,.8);
+      border-top: solid 1px #ccc;
+      margin-bottom: 0;
+    }
+  }
 }
 
 .crowi.single { // {{{

resource/css/crowi.scss

@@ -47,14 +47,6 @@ footer, aside {
 }
 
 
-.preview-body {
-  border-top: solid 1px #ccc;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  max-height: 500px;
-  overflow: scroll;
-}
-
 .form-element {
   margin-bottom: 1em;
 }

views/_form.html

@@ -8,87 +8,82 @@
   </ul>
 </div>
 {% endif %}
-<div id="form-box">
-    <div class="row">
-      <div class="col-md-8">
-        <a href="javascript:;" id="form-box-full">最大化切り換え</a>
-        <form action="{{ path }}/edit" method="post" class="">
-          <div class="form-group">
-            <textarea name="pageForm[body]" class="form-control form-body-height" id="form-body">{% if pageForm.body %}{{ pageForm.body }}{% elseif not revision.body %}# {{ path|path2name }}{% else %}{{ revision.body }}{% endif %}</textarea>
-          </div>
-          <input type="hidden" name="pageForm[format]" value="markdown" id="form-format">
-          <input type="hidden" name="pageForm[currentRevision]" value="{{ pageForm.currentRevision|default(revision._id.toString()) }}">
-          <div class="form-group form-inline">
-            <select name="pageForm[grant]" class="form-control">
-              {% for grantId, grantLabel in consts.pageGrants %}
-              <option value="{{ grantId }}" {% if (pageForm.grant && grantId == pageForm.grant) || (page.grant == grantId ) %}selected{% endif %}>{{ grantLabel }}</option>
-              {% endfor %}
-            </select>
+<div id="form-box" class="row">
+  <div class="col-md-6">
+    <form action="{{ path }}/edit" method="post" class="">
+      <textarea name="pageForm[body]" class="form-control form-body-height" id="form-body">{% if pageForm.body %}{{ pageForm.body }}{% elseif not revision.body %}# {{ path|path2name }}{% else %}{{ revision.body }}{% endif %}</textarea>
 
-            <input type="submit" class="btn btn-primary" id="edit-form-submit" value="ページを更新" />
-          </div>
-        </form>
-      </div>
-      <div class="col-md-4">
-        <div id="preview-body" class="wiki preview-body">
-        </div>
+      <input type="hidden" name="pageForm[format]" value="markdown" id="form-format">
+      <input type="hidden" name="pageForm[currentRevision]" value="{{ pageForm.currentRevision|default(revision._id.toString()) }}">
+      <div class="form-submit-group form-group form-inline">
+        <select name="pageForm[grant]" class="form-control">
+          {% for grantId, grantLabel in consts.pageGrants %}
+          <option value="{{ grantId }}" {% if (pageForm.grant && grantId == pageForm.grant) || (page.grant == grantId ) %}selected{% endif %}>{{ grantLabel }}</option>
+          {% endfor %}
+        </select>
+
+        <input type="submit" class="btn btn-primary" id="edit-form-submit" value="ページを更新" />
       </div>
+    </form>
+  </div>
+  <div class="col-md-6">
+    <div id="preview-body" class="wiki preview-body">
     </div>
-    <script type="text/javascript">
-    $(function() {
-      // preview watch
-      var prevContent = "";
-      var watchTimer = setInterval(function() {
-        $('#preview-body').height($('#form-body').height() + 'px');
-        var content = $('#form-body').val();
-        if (prevContent != content) {
-          var renderer = new Crowi.renderer('#form-body', $('#form-format').val(), '#preview-body');
-          renderer.render();
+  </div>
+  <script type="text/javascript">
+  $(function() {
+    // preview watch
+    var prevContent = "";
+    var watchTimer = setInterval(function() {
+      var content = $('#form-body').val();
+      if (prevContent != content) {
+        var renderer = new Crowi.renderer('#form-body', $('#form-format').val(), '#preview-body');
+        renderer.render();
 
-          prevContent = content;
-        }
-      }, 1000);
-
-      function maximizeFormBox()
-      {
-        $('#form-box').addClass('form-maximized');
-        $('#form-body').height($(window).height() - 150 + 'px');
-      }
-      function minimizeFormBox()
-      {
-        $('#form-box').removeClass('form-maximized');
-        $('#form-body').height('300px');
+        prevContent = content;
       }
-      $('#form-box-full').toggle(function()
-      {
-        maximizeFormBox();
-      }, function() {
-        minimizeFormBox();
-      });
+    }, 1000);
 
-      // tabs handle
-      $('textarea#form-body').on('keydown', function(event){
-        var self  = $(this)
-            start = this.selectionStart,
-            end   = this.selectionEnd
-            val   = self.val();
+    function maximizeFormBox()
+    {
+      $('#form-box').addClass('form-maximized');
+      $('#form-body').height($(window).height() - 150 + 'px');
+    }
+    function minimizeFormBox()
+    {
+      $('#form-box').removeClass('form-maximized');
+      $('#form-body').height('300px');
+    }
+    $('#form-box-full').toggle(function()
+    {
+      maximizeFormBox();
+    }, function() {
+      minimizeFormBox();
+    });
+
+    // tabs handle
+    $('textarea#form-body').on('keydown', function(event){
+      var self  = $(this)
+          start = this.selectionStart,
+          end   = this.selectionEnd
+          val   = self.val();
 
-        if (event.keyCode === 9) {
-          // tab
-          event.preventDefault();
-          self.val(
-            val.substring(0, start)
-            + '    '
-            + val.substring(end, val.length)
-          );
-          this.selectionStart = start + 4;
-          this.selectionEnd   = start + 4;
-        } else if (event.keyCode === 27) {
-          // escape
-          self.blur();
-        }
-      });
+      if (event.keyCode === 9) {
+        // tab
+        event.preventDefault();
+        self.val(
+          val.substring(0, start)
+          + '    '
+          + val.substring(end, val.length)
+        );
+        this.selectionStart = start + 4;
+        this.selectionEnd   = start + 4;
+      } else if (event.keyCode === 27) {
+        // escape
+        self.blur();
+      }
     });
+  });
 
-    </script>
+  </script>
 </div>

views/page.html

@@ -90,7 +90,7 @@
     </div>
 
     {# edit form #}
-    <div class="tab-pane {% if req.body.pageForm %}active{% endif %}" id="edit-form">
+    <div class="edit-form tab-pane {% if req.body.pageForm %}active{% endif %}" id="edit-form">
       {% include '_form.html' %}
     </div>
   </div>
@@ -101,6 +101,13 @@
         Crowi.correctHeaders('#revision-body-content');
         Crowi.revisionToc('#revision-body-content', '#revision-toc');
 
+        $('a[data-toggle="tab"][href="#edit-form"]').on('show.bs.tab', function() {
+          $('.content-main').addClass('on-edit');
+        });
+        $('a[data-toggle="tab"][href="#edit-form"]').on('hide.bs.tab', function() {
+          $('.content-main').removeClass('on-edit');
+        });
+
         $('#edit-form').submit(function()
         {
           //console.log('save');
@@ -112,15 +119,18 @@
           $('.content-main').css({'padding-top': topMargin});
         });
         $('#page-header').on('affixed-top.bs.affix', function(e) {
-          $('.content-main').css({'padding-top': 0});
+          if (!$('.content-main').hasClass('on-edit')) {
+            $('.content-main').css({'padding-top': 0});
+          }
         });
         $('[data-affix-disable]').on('click', function(e) {
           $elm = $($(this).data('affix-disable'));
           $elm.removeClass('affix')
             .addClass('affix-top')
             .removeAttr('data-spy');
-          $('.content-main').css({'padding-top': 0});
-
+          if (!$('.content-main').hasClass('on-edit')) {
+            $('.content-main').css({'padding-top': 0});
+          }
           return false;
         });
     });