Added Like button in smartphone and tablet view

lib/views/page.html

@@ -13,10 +13,21 @@
     <p class="stopper"><a href="#" data-affix-disable="#page-header"><i class="fa fa-chevron-up"></i></a></p>
 
 
-    {% if page %}
-    <a href="#" title="Bookmark" class="bookmark-link" id="bookmark-button" data-csrftoken="{{ csrf() }}" data-bookmarked="0"><i class="fa fa-star-o"></i></a>
+    <div class="flex-title-line">
+      <h1 class="title flex-item-title" id="revision-path">{{ path|insertSpaceToEachSlashes }}</h1>
+      {% if page %}
+      <div class="flex-item-action">
+        <a href="#" title="Bookmark" class="bookmark-link" id="bookmark-button" data-csrftoken="{{ csrf() }}" data-bookmarked="0"><i class="fa fa-star-o"></i></a>
+      </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>
+    </div>
     {% endif %}
-    <h1 class="title" id="revision-path">{{ path|insertSpaceToEachSlashes }}</h1>
   </header>
   {% else %}
   {# trash/* #}

lib/views/widget/page_side_header.html

@@ -35,8 +35,8 @@
         <button
           data-csrftoken="{{ csrf() }}"
           data-liked="{% if page.isLiked(user) %}1{% else %}0{% endif %}"
-          class="btn btn-default btn-sm {% if page.isLiked(user) %}active{% endif %}"
-          id="like-button"><i class="fa fa-thumbs-o-up"></i> いいね！</button>
+          class="like-button btn btn-default btn-sm {% if page.isLiked(user) %}active{% endif %}"
+          ><i class="fa fa-thumbs-o-up"></i> いいね！</button>
         </p>
         <p id="liker-list" class="liker-list" data-likers="{{ page.liker|default([])|join(',') }}">
         </p>

resource/css/_page.scss

@@ -54,7 +54,6 @@
 
     article header { // not affixed
       .bookmark-link {
-        float: right;
         color: #e6b422;
         font-size: 2em;
         &.bookmarked {
@@ -62,6 +61,25 @@
         }
       }
 
+      .flex-title-line {
+        display: -webkit-flex;
+        display: flex;
+        -webkit-align-items: center;
+        align-items:         center;
+
+        .flex-item-title {
+          -webkit-flex-basis: auto;
+          flex-basis: auto;
+          margin-right: auto;
+        }
+        .flex-item-action {
+          -webkit-flex-basis: 2em;
+          flex-basis: 2em;
+          text-align: center;
+          padding: 0 2px;
+        }
+      }
+
       h1 {
         font-size: 28px;
         margin-top: 0;
@@ -298,4 +316,3 @@
   }
 
 } // }}}
-

resource/js/crowi.js

@@ -619,7 +619,7 @@ $(function() {
     }
 
     // Like
-    var $likeButton = $('#like-button');
+    var $likeButton = $('.like-button');
     var $likeCount = $('#like-count');
     $likeButton.click(function() {
       var liked = $likeButton.data('liked');