add information of authors to .flex-title-line

lib/views/crowi-plus/layout/page_nosidebar.html

@@ -0,0 +1,42 @@
+{% extends '../../page.html' %}
+
+
+{% block layout_sidebar %}
+{% endblock %}
+
+
+{% block layout_main %}
+<div id="main" class="main 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') }})
+  </p>
+  {% endif %}
+  {% if page && page.grant == 2 %}
+  <p class="alert alert-info">
+    {{ t('Shareable Link') }}
+    <input type="text" class="copy-link form-control" value="{{ baseUrl }}/{{ page._id.toString() }}" readonly>
+  </p>
+  {% endif %}
+  <article>
+    {% block content_head %}
+      {% parent %}
+    {% endblock %}
+
+    {% block content_main_before %}
+    {% endblock %}
+
+    {% block content_main %}
+      {% parent %}
+    {% endblock content_main %}
+
+    {% block content_main_after %}
+    {% endblock %}
+
+    {% block content_footer %}
+      {% parent %}
+    {% endblock %}
+  </article>
+</div>
+
+{% endblock %} {# layout_main #}

lib/views/crowi-plus/page.html

@@ -1,7 +1,63 @@
-{% extends '../page.html' %}
+{% extends 'layout/page_nosidebar.html' %}
 
-{% block content_main_after %}
-  {% if not page.isDeleted() %}
-    {% include 'widget/comments.html' %}
-  {% endif %}
-{% endblock %}
+
+{% block content_head %}
+
+  {% block content_head_before %}
+  {% endblock %}
+
+  <div class="header-wrap">
+    {% if not page.isDeleted() %}
+    <header id="page-header">
+      <p class="stopper"><a href="#" data-affix-disable="#page-header"><i class="fa fa-chevron-up"></i></a></p>
+
+      <div class="flex-title-line">
+        <div>
+          <h1 class="title flex-item-title" id="revision-path"></h1>
+          <div id="revision-url" class="url-line"></div>
+        </div>
+        {% if page %}
+        <div class="flex-item-action">
+          <span id="bookmark-button">
+            <p class="bookmark-link">
+              <i class="fa fa-star-o"></i>
+            </p>
+          </span>
+        </div>
+        <div class="flex-item-action visible-xs visible-sm">
+          <button
+              data-csrftoken="{{ csrf() }}"
+              data-liked="{% if page.isLiked(user) %}1{% else %}0{% endif %}"
+              class="like-button btn btn-default btn-sm {% if page.isLiked(user) %}active{% endif %}"
+          ><i class="fa fa-thumbs-o-up"></i></button>
+        </div>
+        {% endif %}
+
+        {% if page %}
+          {% include 'widget/authors.html' %}
+        {% endif %}
+
+      </div>
+
+    </header>
+    {% else %}
+    {# trash/* #}
+    <header id="page-header">
+      <div class="flex-title-line">
+        <h1 class="title flex-item-title"></h1>
+        <div class="flex-item-action">
+          <span id="bookmark-button">
+            <p class="bookmark-link">
+              <i class="fa fa-star-o"></i>
+            </a>
+          </span>
+        </div>
+      </div>
+    </header>
+    {% endif %}
+  </div>
+
+  {% block content_head_after %}
+  {% endblock %}
+
+{% endblock %} {# /content_head #}

lib/views/crowi-plus/widget/authors.html

@@ -0,0 +1,24 @@
+<ul class="authors visible-md visible-lg">
+  <li>
+    <div class="creator-picture">
+      <a href="{{ userPageRoot(page.creator) }}">
+        <img src="{{ page.creator|default(author)|picture }}" class="picture picture-rounded"><br>
+      </a>
+    </div>
+    <div class="">
+      <div>Created by <a href="{{ userPageRoot(page.creator) }}">{{ page.creator.name|default(author.name) }}</a></div>
+      <div class="text-muted">{{ page.createdAt|datetz('Y/m/d H:i:s') }}</div>
+    </div>
+  </li>
+  <li>
+    <div class="creator-picture">
+      <a href="{{ userPageRoot(page.lastUpdateUser) }}">
+        <img src="{{ page.lastUpdateUser|default(author)|picture }}" class="picture picture-rounded"><br>
+      </a>
+    </div>
+    <div class="">
+      <div>Updated by <a href="{{ userPageRoot(page.lastUpdateUser) }}">{{ page.lastUpdateUser.name|default(author.name) }}</a></div>
+      <div class="text-muted">{{ page.updatedAt|datetz('Y/m/d H:i:s') }}</div>
+    </div>
+  </li>
+</ul>

lib/views/layout/layout.html

@@ -55,7 +55,7 @@
 
 {% block html_body %}
 <body
-  class="crowi main-container {% block html_base_css %}{% endblock %}"
+  class="crowi main-container {% block html_base_css %}{% endblock %} {% if 'crowi-plus' === layoutType() %}crowi-plus{% endif %}"
   data-me="{{ user._id.toString() }}"
   data-plugin-enabled="{{ isEnabledPlugins() }}"
  {% block html_base_attr %}{% endblock %}

resource/css/_page_crowi-plus.scss

@@ -0,0 +1,36 @@
+.crowi-plus.main-container {
+  .flex-title-line {
+
+    // the container of h1
+    div:first-child {
+      margin-right: auto;
+    }
+
+    ul.authors {
+      margin: 0;
+
+      li {
+        display: flex;
+        list-style: none;
+        font-size: 12px;
+
+        .creator-picture {
+          width: 24px;
+          height: 24px;
+          margin-right: 10px;
+        }
+      }
+
+      li:first-child {
+        margin-bottom: 10px;
+      }
+    }
+  }
+
+  // hide authors from affix
+  .main #page-header.affix {
+    .authors {
+      display: none !important;
+    }
+  }
+}

resource/css/crowi.scss

@@ -23,6 +23,7 @@ $bootstrap-sass-asset-helper: true;
 @import 'layout';
 @import 'page_list';
 @import 'page';
+@import 'page_crowi-plus';
 @import 'portal';
 @import 'search';
 @import 'user';