display new layout

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

@@ -1,30 +1,28 @@
-{% extends '../../layout/layout.html' %}
-
-{% block layout_main %}
+{% extends '../../layout/layout.html' %} {% block layout_main %}
 <div class="container-fluid">
 
-  <div class="row bg-title">
-    <div class="col-xs-12">
-      {% block content_header %}
-      {% endblock %}
-    </div>
-  </div><!-- /.bg-title -->
+
 
   <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 %}">
-      {% block content_main_before %}
-      {% endblock %}
 
-      {% block content_main %}
-      {% endblock content_main %}
+    <div id="main" class="main m-t-15 col-md-7 kibela-block {% if page %}{{ css.grant(page) }}{% endif %} {% block main_css_class %}{% endblock %}">
+
+      <div class="row bg-title kibela-title m-10">
+        <div class="col-xs-12 bg-white">
+          {% block content_header %} {% endblock %}
+        </div>
+      </div>
+      <!-- /.bg-title -->
+
 
-      {% block content_main_after %}
-      {% endblock %}
+      {% block content_main_before %} {% endblock %} {% block content_main %} {% endblock content_main %} {% block content_main_after
+      %} {% endblock %}
     </div>
 
   </div>
 
-</div><!-- /.container-fluid -->
+</div>
+<!-- /.container-fluid -->
 
 <footer class="footer">
   {% include '../../widget/system-version.html' %}

lib/views/layout-kibela/page_list.html

@@ -1,60 +1,40 @@
-{% extends 'base/layout.html' %}
-
-
-{% block content_header %}
-  {% include 'widget/header.html' %}
-{% endblock %}
-
-
-{% block content_main_before %}
-{% endblock %}
-
-
-{% block content_main %}
-  <div class="row">
-
-    <div class="col-lg-10 col-md-9">
-
-      {% include '../widget/page_content.html' %}
-
-      {# force remove #revision-toc from #content_main of parent #}
-      <script>
-        $('#revision-toc').remove();
-      </script>
-
-    </div> {# /.col- #}
-
-    {# relocate #revision-toc #}
-    <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>
-    </div> {# /.col- #}
-
-  </div>
-
-  <div class="row page-list {% if isPortal %}m-t-30{% endif %}">
-    <div class="col-md-10">
-      {% include '../widget/page_list_and_timeline.html' %}
-    </div>
-  </div>
-{% endblock %}
-
-
-{% block content_footer %}
-  {% if page %}
-    {% include '../widget/page_attachments.html' %}
-  {% endif %}
-{% endblock %}
-
-
-{% block body_end %}
-  <div id="presentation-layer" class="fullscreen-layer">
-    <div id="presentation-container"></div>
-  </div>
-  <div id="crowi-modals">
-    {% include '../widget/page_modals.html' %}
-    {% include '../modal/what_is_portal.html' %}
-    {% include '../modal/unportalize.html' %}
-  </div>
-{% endblock %}
+{% extends 'base/layout.html' %} {% block content_header %} {% include 'widget/header.html' %} {% endblock %} {% block content_main_before
+%} {% endblock %} {% block content_main %}
+<div class="row p-10">
+  <div class="bg-white p-10">
+
+    {% include '../widget/page_content.html' %}
+
+  </div>
+
+    <div class="row page-list bg-white p-10 pt-20 {% if isPortal %}m-t-30{% endif %}">
+      <div class="col-md-10">
+        {% include '../widget/page_list_and_timeline.html' %}
+      </div>
+    </div>
+
+
+  {# force remove #revision-toc from #content_main of parent #}
+  <script>
+    $('#revision-toc').remove();
+
+  </script>
+
+</div> {# /.col- #}
+
+
+{# relocate #revision-toc #}
+<div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs position-absolute">
+  <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>
+</div> {# /.col- #} {% endblock %} {% block content_footer %} {% if page %} {% include '../widget/page_attachments.html' %} {% endif
+%} {% endblock %} {% block body_end %}
+<div id="presentation-layer" class="fullscreen-layer">
+  <div id="presentation-container"></div>
+</div>
+<div id="crowi-modals">
+  {% include '../widget/page_modals.html' %} {% include '../modal/what_is_portal.html' %} {% include '../modal/unportalize.html'
+  %}
+</div>
+{% endblock %}

lib/views/layout-kibela/user_page.html

@@ -1,67 +1,67 @@
-{% extends 'page.html' %}
-
-{% block main_css_class %}
-  {% parent %}
-  user-page
-{% endblock %}
-
-{% block content_header %}
-  {% if pageUser %}
-    {% include '../widget/user_page_header.html' %}
-  {% else %}
-    {% parent %}
-  {% endif %}
-{% endblock %}
-
-
-{% block content_main %}
-  <div class="row">
-
-    <div class="col-lg-10 col-md-9">
-
-      {#
-        # ensure to insert 'user_page_content' widget to here
-        #
-        #   Because this block has content like 'Bookmarks' or 'Recent Created' whose height changes dynamically,
-        #   setting of 'revision-toc' (affix) is hindered.
-        #}
-      <div class="m-b-30 user-page-content-container">
-        {% include '../widget/user_page_content.html' %}
-      </div>
-
-      {% block content_main_before %}
-        {% parent %}
-      {% endblock %}
-
-      {% include '../widget/page_content.html' %}
-
-      {# force remove #revision-toc from #content_main of parent #}
-      <script>
-        $('#revision-toc').remove();
-      </script>
-
-    </div> {# /.col- #}
-
-    {# relocate #revision-toc #}
-    <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>
-    </div> {# /.col- #}
-
-  </div>
-
-  {% if 'growi' === behaviorType() || 'crowi-plus' === behaviorType() %}
-  <div class="row page-list m-t-30">
-    <div class="col-md-10">
-      {% include '../widget/page_list_and_timeline.html' %}
-    </div>
-  </div>
-  {% endif %}
-
-{% endblock %}
-
-
-{% block content_main_after %}
-  {% include 'widget/comments.html' %}
-{% endblock %}
+{% extends 'page.html' %}
+
+{% block main_css_class %}
+  {% parent %}
+  user-page
+{% endblock %}
+
+{% block content_header %}
+  {% if pageUser %}
+    {% include '../widget/user_page_header.html' %}
+  {% else %}
+    {% parent %}
+  {% endif %}
+{% endblock %}
+
+
+{% block content_main %}
+  <div class="row pt-15">
+
+    <div class="col-lg-10 col-md-9">
+
+      {#
+        # ensure to insert 'user_page_content' widget to here
+        #
+        #   Because this block has content like 'Bookmarks' or 'Recent Created' whose height changes dynamically,
+        #   setting of 'revision-toc' (affix) is hindered.
+        #}
+      <div class="m-b-30 user-page-content-container">
+        {% include '../widget/user_page_content.html' %}
+      </div>
+
+      {% block content_main_before %}
+        {% parent %}
+      {% endblock %}
+
+      {% include '../widget/page_content.html' %}
+
+      {# force remove #revision-toc from #content_main of parent #}
+      <script>
+        $('#revision-toc').remove();
+      </script>
+
+    </div> {# /.col- #}
+
+    {# relocate #revision-toc #}
+    <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>
+    </div> {# /.col- #}
+
+  </div>
+
+  {% if 'growi' === behaviorType() || 'crowi-plus' === behaviorType() %}
+  <div class="row page-list m-t-30">
+    <div class="col-md-10">
+      {% include '../widget/page_list_and_timeline.html' %}
+    </div>
+  </div>
+  {% endif %}
+
+{% endblock %}
+
+
+{% block content_main_after %}
+  {% include 'widget/comments.html' %}
+{% endblock %}

resource/js/util/GrowiRenderer.js

@@ -23,6 +23,7 @@ export default class GrowiRenderer {
    *
    * @param {Crowi} crowi
    * @param {GrowiRenderer} originRenderer may be customized by plugins
+   * @param {Kibela} kibela
    * @param {object} options
    */
   constructor(crowi, originRenderer, options) {

resource/styles/scss/_layout_kibela.scss

@@ -1,3 +1,16 @@
+.kibela-block {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  margin: auto;
+}
+.kibela-title {
+  margin: none !important;
+  padding: none !important;
+}
+
 .growi.main-container {
   .content-main {
     padding: 0;
@@ -5,7 +18,8 @@
 
   .revision-toc {
     &.affix {
-      margin-top: 5px;
+      right: 5rem;
+      margin-top: 10px;
       top: calc(46px + 5px);
       min-width: calc(#{100/12*2%} - #{$grid-gutter-width});  // width of 2column - padding
     }