reconstruct layouts

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

@@ -1,4 +1,4 @@
-{% extends '../../page.html' %}
+{% extends '../../layout/layout.html' %}
 
 
 {% block layout_main %}
@@ -16,19 +16,15 @@
   {% endif %}
   <article>
     {% block content_main_before %}
-      {% parent %}
     {% endblock %}
 
     {% block content_main %}
-      {% parent %}
     {% endblock content_main %}
 
     {% block content_main_after %}
-      {% parent %}
     {% endblock %}
 
     {% block content_footer %}
-      {% parent %}
     {% endblock %}
   </article>
 </div>

lib/views/layout-growi/page.html

@@ -17,13 +17,18 @@
 
 {% endblock %} {# /content_head #}
 
+
+{% block content_main_before %}
+{% endblock %}
+
+
 {% block content_main %}
   <div class="container-fluid">
     <div class="row">
 
       <div class="col-lg-10 col-md-9">
 
-        {% parent %}
+        {% include '../widget/page_content.html' %}
 
         {# force remove #revision-toc from #content_main of parent #}
         <script>
@@ -55,3 +60,17 @@
 {% block content_main_after %}
   {% include 'widget/comments.html' %}
 {% 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>
+
+  {% include '../widget/page_modals.html' %}
+{% endblock %}

lib/views/layout/2column.html

@@ -38,9 +38,15 @@
   </p>
   {% endif %}
   <article>
+    {% block content_main_before %}
+    {% endblock %}
+
     {% block content_main %}
     {% endblock content_main %}
 
+    {% block content_main_after %}
+    {% endblock %}
+
     {% block content_footer %}
     {% endblock %}
   </article>

lib/views/page.html

@@ -4,106 +4,46 @@
 
 {% block layout_header %}
 
-{% block layout_header_before %}
-{% endblock %}
-
-<div class="header-wrap">
-  <header id="page-header">
-    <div class="flex-title-line">
-      <h1 class="title flex-item-title" id="revision-path"></h1>
-      {% if page %}
-      <div class="flex-item-action">
-        {% if user %}
-        <span id="bookmark-button"></span>
-        {% endif %}
-      </div>
-      <div class="flex-item-action visible-xs visible-sm">
-        {% if user %}
-        <button
-            data-csrftoken="{{ csrf() }}"
-            data-liked="{% if page.isLiked(user) %}1{% else %}0{% endif %}"
-            class="like-button btn btn-default btn-outline btn-circle {% if page.isLiked(user) %}active{% endif %}"
-        ><i class="icon-like"></i></button>
+  {% block layout_header_before %}
+  {% endblock %}
+
+  <div class="header-wrap">
+    <header id="page-header">
+      <div class="flex-title-line">
+        <h1 class="title flex-item-title" id="revision-path"></h1>
+        {% if page %}
+        <div class="flex-item-action">
+          {% if user %}
+          <span id="bookmark-button"></span>
+          {% endif %}
+        </div>
+        <div class="flex-item-action visible-xs visible-sm">
+          {% if user %}
+          <button
+              data-csrftoken="{{ csrf() }}"
+              data-liked="{% if page.isLiked(user) %}1{% else %}0{% endif %}"
+              class="like-button btn btn-default btn-outline btn-circle {% if page.isLiked(user) %}active{% endif %}"
+          ><i class="icon-like"></i></button>
+          {% endif %}
+        </div>
         {% endif %}
       </div>
-      {% endif %}
-    </div>
 
-    <div id="revision-url" class="url-line"></div>
-  </header>
-</div>
+      <div id="revision-url" class="url-line"></div>
+    </header>
+  </div>
 
-{% block layout_header_after %}
-{% endblock %}
+  {% block layout_header_after %}
+  {% endblock %}
 
 {% endblock %}
 
-{% block content_main %}
 
 {% block content_main_before %}
-  {% if page.isDeleted() %}
-  <div class="alert alert-warning alert-trash d-flex align-items-center justify-content-between">
-    <div>
-      <i class="icon-trash" aria-hidden="true"></i>
-      This page is in the trash.<br>
-      Deleted by <img src="{{ page.lastUpdateUser|picture }}" class="picture picture-sm img-circle"> {{ page.lastUpdateUser.name }} at {{ page.updatedAt|datetz('Y-m-d H:i:s') }}
-    </div>
-    {% if user %}
-    <ul class="list-inline">
-      <li>
-        <a href="#" class="btn btn-default btn-rounded btn-sm" data-target="#putBackPage" data-toggle="modal"><i class="icon-action-undo" aria-hidden="true"></i> {{ t('Put Back') }}</a>
-      </li>
-      <li>
-        <a href="#" class="btn btn-danger btn-rounded btn-sm" data-target="#deletePage" data-toggle="modal"><i class="icon-fire" aria-hidden="true"></i> {{ t('Delete Completely') }}</a>
-      </li>
-    </ul>{# /.pull-right #}
-    {% endif %}
-  </div>
-  {% endif %}
-
-  {% if req.query.renamed and not page.isDeleted() %}
-  <div class="alert alert-info alert-moved">
-    <span>
-      <strong>{{ t('Moved') }}: </strong> {{ t('page_page.notice.moved', req.query.renamed) }}
-    </span>
-  </div>
-  {% endif %}
-  {% if req.query.redirectFrom and not page.isDeleted() %}
-  <div class="alert alert-info alert-moved d-flex align-items-center justify-content-between">
-    <span>
-      <strong>{{ t('Moved') }}: </strong> {{ t('page_page.notice.moved', req.query.redirectFrom) }}
-    </span>
-    {% if user %}
-    <form role="form" id="unlink-page-form" onsubmit="return false;">
-      <input type="hidden" name="_csrf" value="{{ csrf() }}">
-      <input type="hidden" name="path" value="{{ page.path }}">
-      <input type="hidden" name="page_id" value="{{ page._id.toString() }}">
-      <button type="submit" class="btn btn-default btn-sm pull-right">
-        <i class="fa fa-unlink" aria-hidden="true"></i>
-        Unlink
-      </button>
-    </form>
-    {% endif %}
-  </div>
-  {% endif %}
-  {% if req.query.unlinked %}
-  <div class="alert alert-info alert-unlinked">
-    <strong>{{ t('Unlinked') }}: </strong> {{ t('page_page.notice.unlinked') }}
-  </div>
-  {% endif %}
-
 {% endblock %}
 
-<div id="content-main" class="content-main"
-  data-path="{{ path }}"
-  data-path-shortname="{{ path|path2name }}"
-  data-page-id="{% if page %}{{ page._id.toString() }}{% endif %}"
-  data-current-user="{% if user %}{{ user._id.toString() }}{% endif %}"
-  data-page-revision-id="{% if revision %}{{ revision._id.toString() }}{% endif %}"
-  data-page-revision-created="{% if revision %}{{ revision.createdAt|datetz('U') }}{% endif %}"
-  data-page-is-seen="{% if page and page.isSeenUser(user) %}1{% else %}0{% endif %}"
-  >
 
+{% block content_main %}
   {% if not page %}
   <ul class="nav nav-tabs hidden-print">
     <li><a>Create: {{ path }}</a></li>
@@ -116,127 +56,20 @@
     {% include '_form.html' %}
     </div>
   </div>
-
   {% else %}
-
-  {% if not page.isDeleted() %}
-  <ul class="nav nav-tabs hidden-print">
-    <li class=" {% if not req.body.pageForm %}active{% endif %}" data-toggle="tooltip" {# data-title="あなたの 確認待ち です" title="" data-placement="bottom" data-trigger="manual" data-tooltip-stay #}>
-      <a href="#revision-body" data-toggle="tab">
-      <i class="icon-control-play"></i> View
-      {#
-        <span class="label label-danger" style=""> 承認待ち</span>
-      #}
-      </a>
-    </li>
-
-    <li {% if req.body.pageForm %}class="active"{% endif %}>
-      <a {% if user %}href="#edit-form" data-toggle="tab"{% endif %} class="edit-button {% if not user %}edit-button-disabled{% endif %}">
-        <i class="icon-note"></i> {{ t('Edit') }}
-      </a>
-    </li>
-
-
-    <li class="dropdown pull-right">
-      <a class="dropdown-toggle {% if not user %}dropdown-disabled{% endif %}" {% if user %}data-toggle="dropdown" href="#"{% endif %}>
-        <i class="icon-options-vertical"></i>
-      </a>
-      <ul class="dropdown-menu">
-       <li><a href="#" data-target="#renamePage" data-toggle="modal"><i class="icon-fw icon-action-redo"></i> {{ t('Move') }}</a></li>
-       <li class="divider"></li>
-       <li><a href="#" data-target="#duplicatePage" data-toggle="modal"><i class="icon-fw icon-docs"></i> {{ t('Duplicate') }}</a></li>
-       {% if isDeletablePage() %}
-       <li class="divider"></li>
-       <li class=""><a href="#" data-target="#deletePage" data-toggle="modal"><i class="icon-fw icon-fire text-danger"></i> {{ t('Delete') }}</a></li>
-       {% endif %}
-      </ul>
-    </li>
-    {% if page %}
-    <li class="pull-right"><a href="#revision-history" data-toggle="tab"><i class="icon-layers"></i> History</a></li>
-    <li class="pull-right"><a href="?presentation=1" class="toggle-presentation"><i class="icon-film"></i> {{ t('Presentation Mode') }}</a></li>
-    {% endif %}
-  </ul>
-  {% endif %}
-
-  <div class="tab-content">
-
-  {% if not page.isLatestRevision() %}
-  <div class="alert alert-warning">
-    <strong>{{ t('Warning') }}: </strong> {{ t('page_page.notice.version') }} <i class="fa fa-magic"></i> <a href="{{ page.path }}">{{ t('Show latest') }}</a>
-  </div>
-  {% endif %}
-
-{#
-  <div class="panel panel-default">
-    <div class="panel-heading">承認待ち</div>
-    <div class="panel-body">
-      ほげほげ
-    </div>
-  </div>
-#}
-    <script type="text/template" id="raw-text-original">{{ revision.body }}</script>
-
-    {# formatted text #}
-    <div class="tab-pane {% if not req.body.pageForm %}active{% endif %}" id="revision-body">
-      <div class="revision-toc" id="revision-toc">
-        <a data-toggle="collapse" data-parent="#revision-toc" href="#revision-toc-content" class="revision-toc-head">{{ t('Table of Contents') }}</a>
-        <div id="revision-toc-content" class="revision-toc-content collapse in"></div>
-      </div>
-      <div id="page" class="m-t-15"></div>
-    </div>
-
-    {# edit form #}
-    {% if not page.isDeleted() %}
-    <div class="edit-form tab-pane {% if req.body.pageForm %}active{% endif %}" id="edit-form">
-      {% include '_form.html' %}
-    </div>
-    {% endif %}
-
-    {# raw revision history #}
-    {% if not page %}
-    {% else %}
-    <div class="tab-pane revision-history m-t-10" id="revision-history">
-    </div>
-    {% endif %}
-
-  </div>
+    {% include 'widget/page_content.html' %}
   {% endif %}
+{% endblock %}
 
-  <div id="notifPageEdited" class="myadmin-alert alert-warning myadmin-alert-bottom alertbottom2">
-    <i class="fa fa-exclamation-triangle"></i> <span class="edited-user"></span> {{ t('edited this page') }} <a href="javascript:location.reload();"><i class="fa fa-angle-double-right"></i> {{ t('Load latest') }}</a>
-  </div>
-</div>
 
 {% block content_main_after %}
 {% endblock %}
 
-{% endblock %}
 
 {% block content_footer %}
-
-
-{% if page %}
-<div class="row page-attachments-row">
-  <div class="col-xs-12">
-    <div class="m-t-15 m-l-15 m-r-15 m-b-15">
-      <div class="page-attachments" id="page-attachment"></div>
-
-      <p class="page-meta">
-        Path: <span id="pagePath">{{ page.path }}</span><br>
-        {# for BC #}
-        {% if page.lastUpdateUser %}
-          Last updated at {{ page.updatedAt|datetz('Y-m-d H:i:s') }} by <img src="{{ page.lastUpdateUser|picture }}" class="picture img-circle"> {{ page.lastUpdateUser.name }}<br>
-        {% else %}
-          Last updated at {{ page.revision.createdAt|datetz('Y-m-d H:i:s') }} by <img src="{{ page.revision.author|picture }}" class="picture img-circle"> {{ page.revision.author.name }}<br>
-        {% endif %}
-        {# /for BC #}
-        Created at {{ page.createdAt|datetz('Y-m-d H:i:s') }} by <img src="{{ page.creator|default(page.creator)|picture }}" class="picture img-circle"> {{ page.creator.name }}<br>
-      </p>
-    </div>
-  </div>
-</div>
-{% endif %}
-
+  {% if page %}
+    {% include 'widget/page_attachments.html' %}
+  {% endif %}
 {% endblock %}
 
 {% block side_header %}
@@ -255,17 +88,9 @@
 {% endblock %}
 
 {% block body_end %}
-  {% parent %}
-
-<div id="presentation-layer" class="fullscreen-layer">
-  <div id="presentation-container"></div>
-</div>
+  <div id="presentation-layer" class="fullscreen-layer">
+    <div id="presentation-container"></div>
+  </div>
 
-<div id="crowi-modals">
-  {% include 'modal/rename.html' %}
-  {% include 'modal/delete.html' %}
-  {% include 'modal/duplicate.html' %}
-  {% include 'modal/put_back.html' %}
-  {% include 'modal/page_name_warning.html' %}
-</div>
+  {% include 'widget/page_modals.html' %}
 {% endblock %}

lib/views/widget/page_alerts.html

@@ -0,0 +1,57 @@
+<div class="row row-alerts">
+  <div class="col-xs-12">
+    {% if page.isDeleted() %}
+    <div class="alert alert-warning alert-trash d-flex align-items-center justify-content-between">
+      <div>
+        <i class="icon-trash" aria-hidden="true"></i>
+        This page is in the trash.<br>
+        Deleted by <img src="{{ page.lastUpdateUser|picture }}" class="picture picture-sm img-circle"> {{ page.lastUpdateUser.name }} at {{ page.updatedAt|datetz('Y-m-d H:i:s') }}
+      </div>
+      {% if user %}
+      <ul class="list-inline">
+        <li>
+          <a href="#" class="btn btn-default btn-rounded btn-sm" data-target="#putBackPage" data-toggle="modal"><i class="icon-action-undo" aria-hidden="true"></i> {{ t('Put Back') }}</a>
+        </li>
+        <li>
+          <a href="#" class="btn btn-danger btn-rounded btn-sm" data-target="#deletePage" data-toggle="modal"><i class="icon-fire" aria-hidden="true"></i> {{ t('Delete Completely') }}</a>
+        </li>
+      </ul>{# /.pull-right #}
+      {% endif %}
+    </div>
+    {% endif %}
+
+    {% if req.query.renamed and not page.isDeleted() %}
+    <div class="alert alert-info alert-moved">
+      <span>
+        <strong>{{ t('Moved') }}: </strong> {{ t('page_page.notice.moved', req.query.renamed) }}
+      </span>
+    </div>
+    {% endif %}
+
+    {% if req.query.redirectFrom and not page.isDeleted() %}
+    <div class="alert alert-info alert-moved d-flex align-items-center justify-content-between">
+      <span>
+        <strong>{{ t('Moved') }}: </strong> {{ t('page_page.notice.moved', req.query.redirectFrom) }}
+      </span>
+      {% if user %}
+      <form role="form" id="unlink-page-form" onsubmit="return false;">
+        <input type="hidden" name="_csrf" value="{{ csrf() }}">
+        <input type="hidden" name="path" value="{{ page.path }}">
+        <input type="hidden" name="page_id" value="{{ page._id.toString() }}">
+        <button type="submit" class="btn btn-default btn-sm pull-right">
+          <i class="fa fa-unlink" aria-hidden="true"></i>
+          Unlink
+        </button>
+      </form>
+      {% endif %}
+    </div>
+    {% endif %}
+
+    {% if req.query.unlinked %}
+    <div class="alert alert-info alert-unlinked">
+      <strong>{{ t('Unlinked') }}: </strong> {{ t('page_page.notice.unlinked') }}
+    </div>
+    {% endif %}
+
+  </div>
+</div>

lib/views/widget/page_attachments.html

@@ -0,0 +1,19 @@
+<div class="row page-attachments-row">
+  <div class="col-xs-12">
+    <div class="m-t-15 m-l-15 m-r-15 m-b-15">
+      <div class="page-attachments" id="page-attachment"></div>
+
+      <p class="page-meta">
+        Path: <span id="pagePath">{{ page.path }}</span><br>
+        {# for BC #}
+        {% if page.lastUpdateUser %}
+          Last updated at {{ page.updatedAt|datetz('Y-m-d H:i:s') }} by <img src="{{ page.lastUpdateUser|picture }}" class="picture img-circle"> {{ page.lastUpdateUser.name }}<br>
+        {% else %}
+          Last updated at {{ page.revision.createdAt|datetz('Y-m-d H:i:s') }} by <img src="{{ page.revision.author|picture }}" class="picture img-circle"> {{ page.revision.author.name }}<br>
+        {% endif %}
+        {# /for BC #}
+        Created at {{ page.createdAt|datetz('Y-m-d H:i:s') }} by <img src="{{ page.creator|default(page.creator)|picture }}" class="picture img-circle"> {{ page.creator.name }}<br>
+      </p>
+    </div>
+  </div>
+</div>

lib/views/widget/page_content.html

@@ -0,0 +1,90 @@
+<div id="content-main" class="content-main"
+  data-path="{{ path }}"
+  data-path-shortname="{{ path|path2name }}"
+  data-page-id="{% if page %}{{ page._id.toString() }}{% endif %}"
+  data-current-user="{% if user %}{{ user._id.toString() }}{% endif %}"
+  data-page-revision-id="{% if revision %}{{ revision._id.toString() }}{% endif %}"
+  data-page-revision-created="{% if revision %}{{ revision.createdAt|datetz('U') }}{% endif %}"
+  data-page-is-seen="{% if page and page.isSeenUser(user) %}1{% else %}0{% endif %}"
+  >
+
+  {% include 'page_alerts.html' %}
+
+  {% if not page.isDeleted() %}
+  <ul class="nav nav-tabs hidden-print">
+    <li class=" {% if not req.body.pageForm %}active{% endif %}" data-toggle="tooltip" {# data-title="あなたの 確認待ち です" title="" data-placement="bottom" data-trigger="manual" data-tooltip-stay #}>
+      <a href="#revision-body" data-toggle="tab">
+      <i class="icon-control-play"></i> View
+      </a>
+    </li>
+
+    <li {% if req.body.pageForm %}class="active"{% endif %}>
+      <a {% if user %}href="#edit-form" data-toggle="tab"{% endif %} class="edit-button {% if not user %}edit-button-disabled{% endif %}">
+        <i class="icon-note"></i> {{ t('Edit') }}
+      </a>
+    </li>
+
+
+    <li class="dropdown pull-right">
+      <a class="dropdown-toggle {% if not user %}dropdown-disabled{% endif %}" {% if user %}data-toggle="dropdown" href="#"{% endif %}>
+        <i class="icon-options-vertical"></i>
+      </a>
+      <ul class="dropdown-menu">
+       <li><a href="#" data-target="#renamePage" data-toggle="modal"><i class="icon-fw icon-action-redo"></i> {{ t('Move') }}</a></li>
+       <li class="divider"></li>
+       <li><a href="#" data-target="#duplicatePage" data-toggle="modal"><i class="icon-fw icon-docs"></i> {{ t('Duplicate') }}</a></li>
+       {% if isDeletablePage() %}
+       <li class="divider"></li>
+       <li class=""><a href="#" data-target="#deletePage" data-toggle="modal"><i class="icon-fw icon-fire text-danger"></i> {{ t('Delete') }}</a></li>
+       {% endif %}
+      </ul>
+    </li>
+    {% if page %}
+    <li class="pull-right"><a href="#revision-history" data-toggle="tab"><i class="icon-layers"></i> History</a></li>
+    <li class="pull-right"><a href="?presentation=1" class="toggle-presentation"><i class="icon-film"></i> {{ t('Presentation Mode') }}</a></li>
+    {% endif %}
+  </ul>
+  {% endif %}
+
+  <div class="tab-content">
+
+    {% if not page.isLatestRevision() %}
+    <div class="alert alert-warning">
+      <strong>{{ t('Warning') }}: </strong> {{ t('page_page.notice.version') }} <i class="fa fa-magic"></i> <a href="{{ page.path }}">{{ t('Show latest') }}</a>
+    </div>
+    {% endif %}
+
+    <script type="text/template" id="raw-text-original">{{ revision.body }}</script>
+
+    {# formatted text #}
+    <div class="tab-pane {% if not req.body.pageForm %}active{% endif %}" id="revision-body">
+      <div class="revision-toc" id="revision-toc">
+        <a data-toggle="collapse" data-parent="#revision-toc" href="#revision-toc-content" class="revision-toc-head">{{ t('Table of Contents') }}</a>
+        <div id="revision-toc-content" class="revision-toc-content collapse in"></div>
+      </div>
+      <div id="page" class="m-t-15"></div>
+    </div>
+
+    {# edit form #}
+    {% if not page.isDeleted() %}
+    <div class="edit-form tab-pane {% if req.body.pageForm %}active{% endif %}" id="edit-form">
+      {% include '../_form.html' %}
+    </div>
+    {% endif %}
+
+    {# raw revision history #}
+    {% if not page %}
+    {% else %}
+    <div class="tab-pane revision-history m-t-10" id="revision-history">
+    </div>
+    {% endif %}
+
+  </div>
+
+  <div id="notifPageEdited" class="myadmin-alert alert-warning myadmin-alert-bottom alertbottom2">
+    <i class="fa fa-exclamation-triangle"></i> <span class="edited-user"></span> {{ t('edited this page') }} <a href="javascript:location.reload();"><i class="fa fa-angle-double-right"></i> {{ t('Load latest') }}</a>
+  </div>
+</div>
+
+{% block content_main_after %}
+{% endblock %}

lib/views/widget/page_modals.html

@@ -0,0 +1,7 @@
+<div id="crowi-modals">
+  {% include '../modal/rename.html' %}
+  {% include '../modal/delete.html' %}
+  {% include '../modal/duplicate.html' %}
+  {% include '../modal/put_back.html' %}
+  {% include '../modal/page_name_warning.html' %}
+</div>