WIP: reconstruct layouts

* on-edit

lib/views/_form.html

@@ -21,19 +21,16 @@
   <input type="hidden" id="form-body" name="pageForm[body]" value="{% if pageForm.body %}{{ pageForm.body }}{% endif %}">
   <input type="hidden" name="pageForm[path]" value="{{ path }}">
   <input type="hidden" name="pageForm[currentRevision]" value="{{ pageForm.currentRevision|default(page.revision._id.toString()) }}">
-  <div class="form-submit-group form-group form-inline d-flex justify-content-between">
+  <div class="page-editor-footer form-submit-group form-group form-inline d-flex justify-content-between">
     <div>
       <div id="page-editor-options-selector"></div>
     </div>
 
     <div class="form-inline page-form-setting d-flex" id="page-form-setting" data-slack-configured="{{ slackConfigured() }}">
-      {% if slackConfigured() %}
-      <span class="input-group extended-setting m-r-5">
+      {% if !slackConfigured() %}
+      <span class="input-group input-group-sm extended-setting m-r-5">
         <span class="input-group-addon">
-          <label>
-            <i class="fa fa-slack"></i>
-            <input class="" type="checkbox" name="pageForm[notify][slack][on]" value="1">
-          </label>
+          <input class="" type="checkbox" name="pageForm[notify][slack][on]" value="1">
         </span>
         <input class="form-control" type="text" name="pageForm[notify][slack][channel]" value="{{ page.extended.slack|default('') }}" placeholder="slack-channel-name"
           id="page-form-slack-channel"
@@ -49,14 +46,14 @@
       {% if forceGrant %}
       <input type="hidden" name="pageForm[grant]" value="{{ forceGrant }}">
       {% else %}
-      <select name="pageForm[grant]" class="form-control m-r-5">
+      <select name="pageForm[grant]" class="form-control input-sm m-r-5">
         {% for grantId, grantLabel in consts.pageGrants %}
         <option value="{{ grantId }}" {% if pageForm.grant|default(page.grant) == grantId %}selected{% endif %}>{{ t(grantLabel) }}</option>
         {% endfor %}
       </select>
       {% endif %}
       <input type="hidden" id="edit-form-csrf" name="_csrf" value="{{ csrf() }}">
-      <input type="submit" class="btn btn-primary" id="edit-form-submit" value="{{ t('Update Page') }}" />
+      <button type="submit" class="btn btn-sm btn-primary" id="edit-form-submit">{{ t('Update Page') }}</button>
     </div>
   </div>
 </form>

resource/js/components/PageEditor/OptionsSelector.js

@@ -84,7 +84,7 @@ export default class OptionsSelector extends React.Component {
     return (
       <FormGroup controlId="formControlsSelect">
         <ControlLabel>Theme:</ControlLabel>
-        <FormControl componentClass="select" placeholder="select"
+        <FormControl componentClass="select" placeholder="select" className="input-sm"
             onChange={this.onChangeTheme}
             inputRef={ el => this.themeSelectorInputEl=el }>
 
@@ -99,7 +99,7 @@ export default class OptionsSelector extends React.Component {
     const bool = this.state.editorOptions.styleActiveLine;
     return (
       <FormGroup controlId="formControlsSelect">
-        <Button active={bool} className="btn-style-active-line"
+        <Button active={bool} className="btn-sm btn-style-active-line"
             onClick={this.onClickStyleActiveLine}>
           Active Line
         </Button>
@@ -122,7 +122,7 @@ export default class OptionsSelector extends React.Component {
     return (
       <FormGroup controlId="formControlsSelect">
         <OverlayTrigger placement="top" overlay={tooltip}>
-          <Button active={isActive} className="btn-render-mathjax-in-realtime"
+          <Button active={isActive} className="btn-sm btn-render-mathjax-in-realtime"
               onClick={this.onClickRenderMathJaxInRealtime}>
             <i className="fa fa-superscript" aria-hidden="true"></i>
           </Button>

resource/styles/agile-admin/inverse/colors/_apply-colors.scss

@@ -247,7 +247,7 @@ body.on-edit {
     }
 
     .page-form {
-      .form-group.form-submit-group {
+      .page-editor-footer {
         border-top-color: $border;
       }
     }

resource/styles/agile-admin/inverse/eliteadmin.scss

@@ -635,7 +635,7 @@ label{
     border: 1px solid $light;
     border-radius: $radius;
     box-shadow: none;
-    height: 38px;
+    height: 34px;
     max-width: 100%;
     padding: 7px 12px;
     transition: all 300ms linear 0s;

resource/styles/agile-admin/inverse/widgets.scss

@@ -1301,7 +1301,7 @@ table.focus-on {
 */
 
 .input-group-addon {
-  border-radius: 2px;
+  border-radius: $radius;
   border: 1px solid $border;
 }
 /*

resource/styles/scss/_on-edit.scss

@@ -71,16 +71,25 @@ body.on-edit {
         .row, .col-md-6, .col-sm-12,
         .react-codemirror2, .CodeMirror, .CodeMirror-scroll,
         .page-editor-preview-body {
-          height: calc(100vh - 100px);
+          height: calc(100vh
+            - 2px   /* .main padding-top */
+            - 42px  /* .nav height */
+            - 1px   /* .page-editor-footer border-top */
+            - 39px  /* .page-editor-footer min-height */
+          );
         }
       }
 
-      .form-group.form-submit-group {
+      .page-editor-footer {
         width: 100%;
         margin: 0;
-        padding: 8px;
-        min-height: 50px;
+        padding: 4px;
+        min-height: 39px;
         border-top: solid 1px transparent;
+
+        .input-group-addon {
+          line-height: 1em;
+        }
       }
 
     }