WIP: reconstruct layouts

* page-editor

lib/views/layout-crowi/base/layout.html

@@ -28,8 +28,8 @@
     </div>
   </div><!-- /.bg-title -->
 
-  <div class="row m-t-15">
-    <div id="main" class="main col-md-9 {% if page %}{{ css.grant(page) }}{% endif %} {% block main_css_class %}{% endblock %}">
+  <div class="row">
+    <div id="main" class="main m-t-15 col-md-9 {% if page %}{{ css.grant(page) }}{% endif %} {% block main_css_class %}{% endblock %}">
       {% if page && page.grant != 1 %}
       <p class="page-grant">
         <i class="fa fa-lock"></i> {{ consts.pageGrants[page.grant] }} ({{ t('Browsing of this page is restricted') }})
@@ -41,19 +41,19 @@
         <input type="text" class="copy-link form-control" value="{{ baseUrl }}/{{ page._id.toString() }}" readonly>
       </p>
       {% endif %}
-      <article>
-        {% block content_main_before %}
-        {% endblock %}
 
-        {% block content_main %}
-        {% endblock content_main %}
+      {% block content_main_before %}
+      {% endblock %}
+
+      {% block content_main %}
+      {% endblock content_main %}
 
-        {% block content_main_after %}
-        {% endblock %}
+      {% block content_main_after %}
+      {% endblock %}
+
+      {% block content_footer %}
+      {% endblock %}
 
-        {% block content_footer %}
-        {% endblock %}
-      </article>
     </div>
   </div>
 

lib/views/layout-crowi/not_found.html

@@ -29,11 +29,6 @@
 
 
 {% block content_main %}
-  <h2 class="message-not-found text-muted m-b-20">
-    <i class="icon-info" aria-hidden="true"></i>
-    Page is not found
-  </h2>
-
   {% include '../widget/not_found_content.html' %}
 {% endblock %}
 

lib/views/layout-crowi/page.html

@@ -45,21 +45,7 @@
 
 
 {% block content_main %}
-  {% if not page %}
-  <ul class="nav nav-tabs hidden-print">
-    <li><a>Create: {{ path }}</a></li>
-    <li class="dropdown pull-right">
-      <a href="#" onclick="history.back();"><i class="icon-close"></i> {{ t('Cancel') }}</a>
-    </li>
-  </ul>
-  <div class="tab-content">
-    <div class="edit-form">
-    {% include '../_form.html' %}
-    </div>
-  </div>
-  {% else %}
-    {% include '../widget/page_content.html' %}
-  {% endif %}
+  {% include '../widget/page_content.html' %}
 {% endblock %}
 
 

lib/views/layout-growi/base/layout.html

@@ -11,8 +11,8 @@
     </div>
   </div><!-- /.bg-title -->
 
-  <div class="row m-t-15">
-    <div id="main" class="main col-md-12 {% if page %}{{ css.grant(page) }}{% endif %} {% block main_css_class %}{% endblock %}">
+  <div class="row">
+    <div id="main" class="main m-t-15 col-md-12 {% if page %}{{ css.grant(page) }}{% endif %} {% block main_css_class %}{% endblock %}">
       {% if page && page.grant != 1 %}
       <p class="page-grant">
         <i class="fa fa-lock"></i> {{ consts.pageGrants[page.grant] }} ({{ t('Browsing of this page is restricted') }})
@@ -24,16 +24,16 @@
         <input type="text" class="copy-link form-control" value="{{ baseUrl }}/{{ page._id.toString() }}" readonly>
       </p>
       {% endif %}
-      <article>
-        {% block content_main_before %}
-        {% endblock %}
 
-        {% block content_main %}
-        {% endblock content_main %}
+      {% block content_main_before %}
+      {% endblock %}
+
+      {% block content_main %}
+      {% endblock content_main %}
+
+      {% block content_main_after %}
+      {% endblock %}
 
-        {% block content_main_after %}
-        {% endblock %}
-      </article>
     </div>
 
   </div>

lib/views/layout-growi/not_found.html

@@ -14,13 +14,7 @@
 {% block content_main %}
   <div class="row">
     <div class="col-lg-10 col-md-9">
-      <h2 class="message-not-found text-muted m-b-20">
-        <i class="icon-info" aria-hidden="true"></i>
-        Page is not found
-      </h2>
-
       {% include '../widget/not_found_content.html' %}
-
     </div> {# /.col- #}
   </div>
 {% endblock %}

lib/views/layout-growi/page.html

@@ -25,7 +25,7 @@
     </div> {# /.col- #}
 
     {# relocate #revision-toc #}
-    <div class="col-lg-2 col-md-3 visible-lg visible-md">
+    <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
       <div id="revision-toc" class="revision-toc" data-spy="affix" data-offset-top="80">
         <div id="revision-toc-content" class="revision-toc-content"></div>
       </div>

lib/views/layout-growi/page_list.html

@@ -25,7 +25,7 @@
     </div> {# /.col- #}
 
     {# relocate #revision-toc #}
-    <div class="col-lg-2 col-md-3 visible-lg visible-md">
+    <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
       <div id="revision-toc" class="revision-toc" data-spy="affix" data-offset-top="80">
         <div id="revision-toc-content" class="revision-toc-content"></div>
       </div>

lib/views/layout-growi/user_page.html

@@ -43,7 +43,7 @@
     </div> {# /.col- #}
 
     {# relocate #revision-toc #}
-    <div class="col-lg-2 col-md-3 visible-lg visible-md">
+    <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
       <div id="revision-toc" class="revision-toc" data-spy="affix" data-offset-top="75">
         <div id="revision-toc-content" class="revision-toc-content"></div>
       </div>

lib/views/layout-growi/widget/header.html

@@ -26,7 +26,7 @@
         {% endif %}
       </div>
 
-      <ul class="authors visible-md visible-lg">
+      <ul class="authors hidden-sm hidden-xs">
         <li>
           <div class="d-flex align-items-center">
             <a class="m-r-5" href="{{ userPageRoot(page.creator) }}">

lib/views/widget/not_found_content.html

@@ -1,3 +1,12 @@
+<div class="row not-found-message-row m-b-20">
+  <div class="col-md-12">
+    <h2 class="text-muted">
+      <i class="icon-info" aria-hidden="true"></i>
+      Page is not found
+    </h2>
+  </div>
+</div>
+
 <div id="content-main" class="content-main content-main-not-found page-list"
   data-path="{{ path }}"
   data-path-shortname="{{ path|path2name }}"

resource/styles/scss/_layout.scss

@@ -154,7 +154,7 @@
       display: none !important;
     }
     .main {
-      article header {
+      header {
         border-bottom: solid 1px #666;
         h1 {
           font-size: 2em;

resource/styles/scss/_on-edit.scss

@@ -1,77 +1,112 @@
 body.on-edit {
 
+  // hide unnecessary elements
   .navbar.navbar-static-top,
   .row.page-list,
   .row.page-comments-row,
   .row.page-attachments-row,
+  .row.not-found-message-row,
+  .alert-info.alert-moved,
+  .alert-info.alert-unlinked,
+  .like-button, .bookmark-link, .btn-edit,
+  .authors,
   footer {
     display: none;
   }
 
+  // hide unnecessary elements for growi layout
+  .revision-toc-container {
+    display: none;
+  }
 
+  // hide unnecessary elements for crowi layout
+  #toggle-sidebar,
+  .crowi-sidebar {
+    display: none;
+  }
 
-  /*
-  padding: 0;
+  /*****************
+   * Expand Editor
+   *****************/
+  .expand-by-flex {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+  .container-fluid {
+    padding-bottom: 0;
+  }
+  .main {
+    width: 100vw;
+    height: 100vh;
+    margin-top: 0px !important;
+    padding-top: 2px;
+    padding-left: 0;
+    padding-right: 0;
 
-  position: fixed;
-  z-index: 1050;
-  background: #fff;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
+    // for growi layout
+    > .row {
+      margin: 0;
+      > .col-lg-10, > .col-md-9 {
+        width: 100vw;
+        padding: 0;
+      }
+    }
+
+    &,
+    .content-main,
+    .tab-content,
+    .edit-form,
+    .page-form {
+      @extend .expand-by-flex;
+    }
 
-  .nav {
-    margin-top: 8px;
-    height: 40px;
+    .page-form {
+
+      #page-editor {
+        &,
+        .row, .col-md-6, .col-sm-12,
+        .react-codemirror2, .CodeMirror, .CodeMirror-scroll,
+        .page-editor-preview-body {
+          height: calc(100vh - 100px);
+        }
+      }
+
+      .form-group.form-submit-group {
+        width: 100%;
+        margin: 0;
+        padding: 8px;
+        min-height: 50px;
+        background-color: #fafafa;
+        border-top: solid 1px #ccc;
+      }
 
-    .dropdown-menu {
-      z-index: 1060;
     }
   }
 
-  .tab-content {
-    top: 48px;
-    bottom: 58px;
+  .row.bg-title {
     position: absolute;
-    z-index: 1051;
-    left: 0;
-    right: 0;
-    margin-top: 4px;
+    z-index: 1;
+    left: 190px;
+    min-width: calc(50% - 190px);
 
-    .alert-info.alert-moved,
-    .alert-info.alert-unlinked {
-      display: none;
-    }
+    background: none;
 
-    // layout (height: 100%)
-    .edit-form {
-      height: 100%;
-      > form {
-        height: 100%;
-        > #page-editor {
-          height: 100%;
-
-          .row, .col-md-6, .col-sm-12,
-          .react-codemirror2, .CodeMirror, .CodeMirror-scroll,
-          .page-editor-preview-body
-          {
-            height: 100%;
-          }
-        }
-      }
+    h1 {
+      font-size: 20px;
+      line-height: 1em;
     }
   }
 
-  .page-form-setting {
-    .extended-setting {
-      label {
-        margin-bottom: 0;
-      }
+  /*****************
+   * Editor styles
+   *****************/
+  .main {
+    background-color: #fafafa;
+    #page-editor {
+      background-color: #fff;
     }
   }
-*/
-
   .page-editor-editor-container {
     padding-right: 0;
     border-right: 1px solid #ccc;
@@ -206,19 +241,6 @@ body.on-edit {
     overflow-y: scroll;
   }
 
-  // .form-group.form-submit-group {
-  //   position: fixed;
-  //   z-index: 1054;
-  //   bottom: 0;
-  //   width: 100%;
-  //   left: 0;
-  //   padding: 8px;
-  //   min-height: 50px;
-  //   background: rgba(255,255,255,.8);
-  //   border-top: solid 1px #ccc;
-  //   margin-bottom: 0;
-  // }
-
   #page-editor-options-selector {
     label {
       margin-right: 0.5em;

resource/styles/scss/_override-agileadmin.scss

@@ -1,3 +1,7 @@
+#page-wrapper {
+  padding-bottom: 0;
+}
+
 /*
  * Sidebar
  */

resource/styles/scss/crowi-sidebar.scss

@@ -113,9 +113,5 @@
 
   .main { // {{{
     width: 100%;
-
-    article header.affix {
-      width: 100%;
-    }
   } // }}}
 } // }}}