WIP: reconstruct layouts

* like, bookmark button

lib/views/layout-crowi/page.html

@@ -14,22 +14,7 @@
           <h1 class="title flex-item-title" id="revision-path"></h1>
           <div id="revision-url" class="url-line"></div>
         </div>
-        {% if page %}
-        <div>
-          {% 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>
-        <div>
-          {% if user %}
-          <span id="bookmark-button"></span>
-          {% endif %}
-        </div>
-        {% endif %}
+        {% include '../widget/header-buttons.html' %}
       </div>
     </header>
   </div>

lib/views/layout-crowi/page_list.html

@@ -36,22 +36,7 @@
         </div>
         <div id="revision-url" class="url-line"></div>
       </div>
-      {% if page %}
-      <div>
-        {% 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>
-      <div>
-        {% if user %}
-        <span id="bookmark-button"></span>
-        {% endif %}
-      </div>
-      {% endif %}
+      {% include '../widget/header-buttons.html' %}
     </div>
 
   </header>

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

@@ -11,20 +11,7 @@
         <div id="revision-url" class="url-line"></div>
       </div>
       {% if page %}
-      <div>
-        {% 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>
-      <div>
-        {% if user %}
-        <span id="bookmark-button"></span>
-        {% endif %}
-      </div>
+      {% include '../../widget/header-buttons.html' %}
 
       <ul class="authors hidden-sm hidden-xs">
         <li>

lib/views/widget/header-button-bookmark.html

@@ -0,0 +1,6 @@
+{# This widget will be rendered by React #}
+{% if not size == null %}
+  <span id="bookmark-button-{{size}}"></span>
+{% else %}
+  <span id="bookmark-button"></span>
+{% endif %}

lib/views/widget/header-button-like.html

@@ -0,0 +1,7 @@
+<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 not size == null %}btn-{{size}}{% endif %}
+          {% if page.isLiked(user) %}active{% endif %}"
+><i class="icon-like"></i></button>

lib/views/widget/header-buttons-lg.html

@@ -0,0 +1,13 @@
+{% if page %}
+  {% set opts = { size: 'lg' }  %}
+  <div>
+    {% if user %}
+      {% include 'header-button-like.html' with opts %}
+    {% endif %}
+  </div>
+  <div class="m-l-5">
+    {% if user %}
+      {% include 'header-button-bookmark.html' with opts %}
+    {% endif %}
+  </div>
+{% endif %}

lib/views/widget/header-buttons.html

@@ -0,0 +1,12 @@
+{% if page %}
+  <div>
+    {% if user %}
+      {% include 'header-button-like.html' %}
+    {% endif %}
+  </div>
+  <div class="m-l-5">
+    {% if user %}
+      {% include 'header-button-bookmark.html' %}
+    {% endif %}
+  </div>
+{% endif %}

lib/views/widget/user_page_header.html

@@ -21,15 +21,8 @@
           </ul>
         </div>
       </div>
-      <div>
-        {% if page and user %}
-        <button
-            data-csrftoken="{{ csrf() }}"
-            data-liked="{% if page.isLiked(user) %}1{% else %}0{% endif %}"
-            class="like-button btn btn-lg btn-default btn-outline btn-circle {% if page.isLiked(user) %}active{% endif %}"
-        ><i class="icon-like"></i></button>
-        <span id="bookmark-button-lg"></span>
-        {% endif %}
+      <div class="d-flex">
+        {% include 'header-buttons-lg.html' %}
       </div>
     </div>
   </header>

resource/styles/scss/_page.scss

@@ -37,7 +37,7 @@
       border: none;
       font-size: 1.2em;
       line-height: 0.8em;
-      &:not(:hover) {
+      &:not(:hover):not(.active) {
         background-color: transparent;
       }
     }

resource/styles/scss/style.scss

@@ -3,6 +3,7 @@
 @import 'vendor';
 
 // import variables
+@import '../agile-admin/inverse/variables';
 @import 'variables';
 
 // override react-bootstrap-typeahead styles