WIP: reconstruct layouts

* user page

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

@@ -1,4 +1,4 @@
-{% extends '../../user_page.html' %}
+{% extends '../../layout/layout.html' %}
 
 
 {% block layout_main %}
@@ -30,7 +30,6 @@
           {% endblock %}
 
           {% block content_main %}
-            {% parent %}
           {% endblock content_main %}
 
         </div> {# /.col- #}

lib/views/layout-growi/user_page.html

@@ -1,22 +1,66 @@
-{% extends 'base/user_page_nosidebar.html' %}
+{% extends 'page.html' %}
 
 {% block main_css_class %}
-  main-crowi-plus-customized
   {% parent %}
+  user-page
 {% endblock %}
 
 {% block layout_header %}
-  {% parent %}
-{% endblock %} {# /content_head #}
+  {% if pageUser %}
+    {% include '../widget/user_page_header.html' %}
+  {% else %}
+    {% parent %}
+  {% endif %}
+{% endblock %}
 
 
 {% block content_main %}
-  {% parent %}
+  <div class="container-fluid">
+    <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">
+          {% 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 visible-lg visible-md">
+        <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 'crowi-plus' === behaviorType() %}
+    <div class="row page-list m-t-30">
+      <div class="col-md-12">
+        {% include '../widget/page_list_and_timeline.html' %}
+      </div>
+    </div>
+    {% endif %}
 
-  {# force remove #revision-toc from #content_main of parent #}
-  <script>
-    $('#revision-toc').remove();
-  </script>
+  </div>
 {% endblock %}
 
 {% block content_main_after %}

lib/views/user_page.html

@@ -4,96 +4,16 @@
 
 
 {% block layout_header %}
-
-{% if pageUser %}
-
-<div class="header-wrap">
-  <header id="page-header" class="user-page-header">
-
-    <h4 id="revision-path"></h4>
-
-    <div class="d-flex align-items-center">
-      <img src="{{ pageUser|picture }}" class="picture img-circle">
-      <div class="m-l-30">
-        <div class="d-flex align-items-center">
-          <h1>
-            {{ pageUser.name }}
-          </h1>
-          <div class="m-l-5">
-            {% if page %}
-            <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>
-            <span id="bookmark-button"></span>
-            {% endif %}
-          </div>
-        </div>
-        <div class="user-page-meta">
-          <ul>
-            <li class="user-page-username"><i class="fa fa-user"></i> @{{ pageUser.username }}</li>
-            <li class="user-page-email"><i class="fa fa-envelope-o"></i> {{ pageUser.email }}</li>
-            {% if pageUser.introduction %}
-            <li class="user-page-introduction"><p>{{ pageUser.introduction|nl2br }}</p></li>
-            {% endif %}
-          </ul>
-        </div>
-      </div>
-    </div>
-  </header>
-</div>
-
-{% else %}
-  {% parent %}
-{% endif %}
-
+  {% if pageUser %}
+    {% include 'widget/user_page_header.html' %}
+  {% else %}
+    {% parent %}
+  {% endif %}
 {% endblock %}
 
 
 {% block content_main_before %}
-  <div class="user-page-content">
-    <ul class="nav nav-tabs user-page-content-menu">
-      <li class="active">
-        <a href="#user-bookmark-list" data-toggle="tab"><i class="fa fa-star"></i> Bookmarks</a>
-      </li>
-      <li>
-        <a href="#user-created-list" data-toggle="tab"><i class="fa fa-pencil"></i> Recent Created</a>
-      </li>
-      {% if user._id.toString() == pageUser._id.toString() %}
-      <li>
-        <a href="/me"><i class="fa fa-gears"></i> Settings</a>
-      </li>
-      {% endif %}
-    </ul>
-    <div class="user-page-content-tab tab-content">
-
-      <div class="tab-pane user-bookmark-list page-list active" id="user-bookmark-list">
-        <div class="page-list-container">
-          {% if bookmarkList.length == 0 %}
-          No bookmarks yet.
-          {% else %}
-            {% include 'widget/page_list.html' with { pages: bookmarkList, pagePropertyName: 'page' } %}
-            <div class="user-page-list-additional-link">
-              <a href="/user/{{ pageUser.username }}/bookmarks"><i class="fa fa-angle-double-right"></i> See bookmarks</a>
-            </div>
-          {% endif %}
-        </div>
-      </div>
-
-      <div class="tab-pane user-created-list page-list" id="user-created-list">
-        <div class="page-list-container">
-          {% if createdList.length == 0 %}
-          No created pages yet.
-          {% else %}
-            {% include 'widget/page_list.html' with { pages: createdList } %}
-            <div class="user-page-list-additional-link">
-              <a href="/user/{{ pageUser.username }}/recent-create"><i class="fa fa-angle-double-right"></i> See created pages</a>
-            </div>
-          {% endif %}
-        </div>
-      </div>
-    </div>
+  <div class="m-l-15 m-r-15 m-b-30">
+    {% include 'widget/user_page_content.html' %}
   </div>
-</div>
 {% endblock %}

lib/views/widget/user_page_content.html

@@ -0,0 +1,44 @@
+<div class="user-page-content">
+  <ul class="nav nav-tabs user-page-content-menu">
+    <li class="active">
+      <a href="#user-bookmark-list" data-toggle="tab"><i class="fa fa-star"></i> Bookmarks</a>
+    </li>
+    <li>
+      <a href="#user-created-list" data-toggle="tab"><i class="fa fa-pencil"></i> Recent Created</a>
+    </li>
+    {% if user._id.toString() == pageUser._id.toString() %}
+    <li>
+      <a href="/me"><i class="fa fa-gears"></i> Settings</a>
+    </li>
+    {% endif %}
+  </ul>
+
+  <div class="m-t-10 user-page-content-tab tab-content">
+
+    <div class="tab-pane user-bookmark-list page-list active" id="user-bookmark-list">
+      <div class="page-list-container">
+        {% if bookmarkList.length == 0 %}
+        No bookmarks yet.
+        {% else %}
+          {% include 'page_list.html' with { pages: bookmarkList, pagePropertyName: 'page' } %}
+          <div class="user-page-list-additional-link">
+            <a href="/user/{{ pageUser.username }}/bookmarks"><i class="fa fa-angle-double-right"></i> See bookmarks</a>
+          </div>
+        {% endif %}
+      </div>
+    </div>
+
+    <div class="tab-pane user-created-list page-list" id="user-created-list">
+      <div class="page-list-container">
+        {% if createdList.length == 0 %}
+        No created pages yet.
+        {% else %}
+          {% include 'page_list.html' with { pages: createdList } %}
+          <div class="user-page-list-additional-link">
+            <a href="/user/{{ pageUser.username }}/recent-create"><i class="fa fa-angle-double-right"></i> See created pages</a>
+          </div>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</div>

lib/views/widget/user_page_header.html

@@ -0,0 +1,36 @@
+<div class="header-wrap">
+  <header id="page-header" class="user-page-header">
+
+    <h4 id="revision-path"></h4>
+
+    <div class="d-flex align-items-center">
+      <img src="{{ pageUser|picture }}" class="picture img-circle">
+      <div class="m-l-30">
+        <div class="d-flex align-items-center">
+          <h1>
+            {{ pageUser.name }}
+          </h1>
+          <div class="m-l-5">
+            {% if page %}
+            <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>
+            <span id="bookmark-button"></span>
+            {% endif %}
+          </div>
+        </div>
+        <div class="user-page-meta">
+          <ul>
+            <li class="user-page-username"><i class="fa fa-user"></i> @{{ pageUser.username }}</li>
+            <li class="user-page-email"><i class="fa fa-envelope-o"></i> {{ pageUser.email }}</li>
+            {% if pageUser.introduction %}
+            <li class="user-page-introduction"><p>{{ pageUser.introduction|nl2br }}</p></li>
+            {% endif %}
+          </ul>
+        </div>
+      </div>
+    </div>
+  </header>
+</div>

resource/styles/scss/_layout.scss

@@ -22,12 +22,12 @@
     padding: 0; // cancel bootstrap padding
 
     .header-wrap {
-      padding: 16px 16px 0 16px;
+      padding: 15px 15px 0 15px;
       min-height: 70px;
     }
 
     .content-main {
-      padding: 8px 16px;
+      padding: 8px 15px;
     }
   }
 

resource/styles/scss/_user.scss

@@ -2,6 +2,7 @@
   .user-page-header {
 
     h1 {
+      font-size: 2.5em;
       color: #666;
     }
 
@@ -28,41 +29,7 @@
       }
     }
 
-    /*
-    .header-wrap {
-
-      h1 {
-        margin: 0;
-        font-size: 1.1em;
-      }
-
-      .user-page-header {
-        margin-bottom: 32px;
-
-        .bookmark-link {
-          float: right;
-          color: #e6b422;
-          font-size: 2em;
-          &.bookmarked {
-            //color: #fff;
-          }
-        }
-
-        .user-page-picture {
-          img {
-            height: 64px;
-            width: 64px;
-          }
-        }
-      }
-
-      .user-page-content-tab {
-        padding: 16px 0 8px;
-      }
-
-    }
-    */
-  } // }}}
+  }
 }
 
 .user-component {

resource/styles/scss/_user_crowi-plus.scss

@@ -1,20 +1,15 @@
-.growi.main-container {
-  .main-crowi-plus-customized.user-page {
+.growi.main-container .user-page {
 
-    .header-wrap {
-      padding: 16px 0 0 0;
+  // affix
+  .user-page-header.affix {
+    #revision-path {
+      display: none;
     }
+  }
 
-    .revision-toc {
-      .revision-toc-content {
-        margin-top: 0;
-        background: none;
-      }
-
-      &.affix {
-        top: 0;
-      }
+  .revision-toc {
+    &.affix {
+      top: 130px;
     }
-
   }
 }