reconstruct layouts

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

@@ -1,6 +1,6 @@
 <div class="header-wrap">
   <header id="page-header">
-    <div class="flex-title-line">
+    <div class="d-flex align-items-center">
       <div class="title-logo-container hidden-xs hidden-sm">
         <a class="logo" href="/">
           <div class="light-logo">{% include '../../widget/logo.html' %}</div>
@@ -11,7 +11,7 @@
         <div id="revision-url" class="url-line"></div>
       </div>
       {% if page %}
-      <div class="flex-item-action">
+      <div>
         {% if user %}
         <button
             data-csrftoken="{{ csrf() }}"
@@ -20,7 +20,7 @@
         ><i class="icon-like"></i></button>
         {% endif %}
       </div>
-      <div class="flex-item-action">
+      <div>
         {% if user %}
         <span id="bookmark-button"></span>
         {% endif %}

lib/views/page.html

@@ -9,15 +9,13 @@
 
   <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 class="d-flex align-items-center">
+        <div class="title-container">
+          <h1 class="title flex-item-title" id="revision-path"></h1>
+          <div id="revision-url" class="url-line"></div>
         </div>
-        <div class="flex-item-action visible-xs visible-sm">
+        {% if page %}
+        <div>
           {% if user %}
           <button
               data-csrftoken="{{ csrf() }}"
@@ -26,10 +24,13 @@
           ><i class="icon-like"></i></button>
           {% endif %}
         </div>
+        <div>
+          {% if user %}
+          <span id="bookmark-button"></span>
+          {% endif %}
+        </div>
         {% endif %}
       </div>
-
-      <div id="revision-url" class="url-line"></div>
     </header>
   </div>
 

lib/views/page_list.html

@@ -13,31 +13,29 @@
 {% endblock %}
 
 <div class="header-wrap">
-  <header class="portal-header {% if page %}has-page{% endif %}">
-
-    <div class="flex-title-line">
-      <h1 class="title flex-item-title">
-        <span id="revision-path"></span>
-        {% if searchConfigured() && !isTopPage() && !isTrashPage() %}
-        <form class="input-group search-input-group hidden-xs hidden-sm" data-toggle="tooltip" data-placement="bottom" title="{{ path }} 以下から検索" id="search-listpage-form">
-          <div class="input-group">
-            <input id="#search-listpage-input" type="text" class="form-control" data-path="{{ path }}" placeholder="Search for...">
-            <span class="input-group-btn">
-              <button class="btn btn-default"><i class="icon-magnifier"></i></button>
-            </span>
-          </div><!-- /input-group -->
-          <a class="search-listpage-clear" id="search-listpage-clear"><i class="fa fa-times-circle"></i></a>
-        </form>
-        {% endif %}
-      </h1>
-
-      {% if page %}
-      <div class="flex-item-action">
-        {% if user %}
-        <span id="bookmark-button" data-csrftoken="{{ csrf() }}"></span>
-        {% endif %}
+  <header id="page-header" class="{% if page %}has-page{% endif %}">
+
+    <div class="d-flex align-items-center">
+      <div class="title-container">
+        <div class="d-flex">
+          <h1 class="title flex-item-title" id="revision-path"></h1>
+          {% if searchConfigured() && !isTopPage() && !isTrashPage() %}
+          <form id="search-listpage-form" class="m-l-10 input-group search-input-group hidden-xs hidden-sm"
+              data-toggle="tooltip" data-placement="bottom" title="{{ path }} 以下から検索" data-container="body">
+            <div class="input-group">
+              <input id="#search-listpage-input" type="text" class="form-control input-sm" data-path="{{ path }}" placeholder="Search for...">
+              <span class="input-group-btn">
+                <button class="btn btn-default btn-sm"><i class="icon-magnifier"></i></button>
+              </span>
+            </div><!-- /input-group -->
+            <a class="search-listpage-clear" id="search-listpage-clear"><i class="fa fa-times-circle"></i></a>
+          </form>
+          {% endif %}
+        </div>
+        <div id="revision-url" class="url-line"></div>
       </div>
-      <div class="flex-item-action visible-xs visible-sm">
+      {% if page %}
+      <div>
         {% if user %}
         <button
             data-csrftoken="{{ csrf() }}"
@@ -46,11 +44,14 @@
         ><i class="icon-like"></i></button>
         {% endif %}
       </div>
+      <div>
+        {% if user %}
+        <span id="bookmark-button"></span>
+        {% endif %}
+      </div>
       {% endif %}
     </div>
 
-    <div id="revision-url" class="url-line"></div>
-
   </header>
 </div>
 
@@ -110,7 +111,7 @@
     {% else %}
     <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-virtical"></i>
+        <i class="icon-options-vertical"></i>
       </a>
       <ul class="dropdown-menu">
         <li><a href="#" data-target="#unportalize" data-toggle="modal"><i class="fa fa-share"></i> {{ t('Unportalize') }}</a></li>

resource/styles/scss/_layout_crowi.scss

@@ -0,0 +1,7 @@
+header {
+  #search-listpage-form {
+    .btn-sm {
+      line-height: 0.5em;
+    }
+  }
+}

resource/styles/scss/_page.scss

@@ -8,6 +8,16 @@
    * header
    */
   header {
+    line-height: 1em;
+
+    // the container of h1
+    div.title-container {
+      margin-right: auto;
+      h1 {
+        line-height: 1.1em;
+      }
+    }
+
     .btn-copy, .btn-copy-link, .btn-edit {
       @extend .text-muted;
       opacity: 0.3;
@@ -42,22 +52,6 @@
       }
     }
 
-    .flex-title-line {
-      line-height: 1;
-      display: flex;
-      align-items:         center;
-
-      .flex-item-title {
-        flex-basis: auto;
-        margin-right: auto;
-      }
-      .flex-item-action {
-        flex-basis: 2em;
-        text-align: center;
-        padding: 0 2px;
-      }
-    }
-
     h1 {
       font-size: 28px;
       margin-top: 0;

resource/styles/scss/_page_crowi-plus.scss

@@ -1,5 +1,5 @@
 .crowi-plus.main-container {
-  .flex-title-line {
+  header {
 
     div.title-logo-container {
       display: none;  // hide in default
@@ -20,14 +20,6 @@
       }
     }
 
-    // the container of h1
-    div.title-container {
-      margin-right: auto;
-      h1 {
-        line-height: 1.1em;
-      }
-    }
-
     ul.authors {
       margin: 0;
 

resource/styles/scss/crowi.scss

@@ -18,6 +18,7 @@
 @import 'create-page';
 @import 'crowi-sidebar';
 @import 'layout';
+@import 'layout_crowi';
 @import 'layout_crowi-plus';
 @import 'on-edit';
 @import 'page_list';