Edit form style refine

lib/views/_form.html

@@ -9,23 +9,21 @@
 </div>
 {% endif %}
 <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>
+  <form action="{{ path }}/edit" method="post" class="col-md-6">
+    <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="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|default(page.grant) == grantId %}selected{% endif %}>{{ grantLabel }}</option>
-          {% endfor %}
-        </select>
+    <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|default(page.grant) == grantId %}selected{% endif %}>{{ grantLabel }}</option>
+        {% endfor %}
+      </select>
 
-        <input type="submit" class="btn btn-primary" id="edit-form-submit" value="ページを更新" />
-      </div>
-    </form>
-  </div>
+      <input type="submit" class="btn btn-primary" id="edit-form-submit" value="ページを更新" />
+    </div>
+  </form>
   <div class="col-md-6">
     <div id="preview-body" class="wiki preview-body">
     </div>

resource/css/_layout.scss

@@ -388,16 +388,24 @@
     left: 0;
     height: 100%;
     width: 100%;
-    padding: 16px;
 
     .nav {
       margin-top: 8px;
-      max-height: 8%;
+      height: 40px;
     }
 
     .tab-content {
-      margin-top: 1%;
-      height: 83%;
+      .alert-info {
+        display: none;
+      }
+
+      top: 48px;
+      bottom: 58px;
+      padding: 0 12px;
+      position: absolute;
+      left: 0;
+      right: 0;
+      margin-top: 4px;
 
       .edit-form {
         height: 100%;
@@ -405,19 +413,43 @@
           height: 100%;
           .col-md-6 {
             height: 100%;
-
-            form {
-              height: 100%;
-              textarea {
-                height: 100%;
-              }
+          }
+          form {
+            padding: 0;
+            border-right: solid 1px #ccc;
+            &::after {
+              position: absolute;
+              top: 0;
+              right: 15px;
+              font-size: 10px;
+              font-weight: 700;
+              color: #959595;
+              text-transform: uppercase;
+              letter-spacing: 1px;
+              content: "Input Content ...";
             }
-
-            .preview-body {
-              height: 100%;
-              padding-top: 5px;
-              padding-bottom: 5px;
-              overflow: scroll;
+          }
+          textarea {
+            height: 100%;
+            padding-top: 18px;
+            border: none;
+            box-shadow: none;
+          }
+          .preview-body {
+            height: 100%;
+            padding-top: 18px;
+            overflow: scroll;
+
+            &::after {
+              position: absolute;
+              top: 0;
+              right: 15px;
+              font-size: 10px;
+              font-weight: 700;
+              color: #959595;
+              text-transform: uppercase;
+              letter-spacing: 1px;
+              content: "Preview";
             }
           }
         }
@@ -430,7 +462,7 @@
       width: 100%;
       left: 0;
       padding: 8px;
-      max-height: 8%;
+      height: 50px;
       background: rgba(255,255,255,.8);
       border-top: solid 1px #ccc;
       margin-bottom: 0;