Colorize popular page

lib/views/widget/page_list.html

@@ -26,14 +26,14 @@
     {% endif  %}
 
     {% if page.liker.length > 0 %}
-    <span>
+    <span class="page-list-liker" data-count="{{ page.liker.length }}">
       <i class="fa fa-thumbs-up"></i>{{ page.liker.length }}
     </span>
     {% endif  %}
 
     {% if viewConfig.seener_threshold and page.seenUsers.length >= viewConfig.seener_threshold %}
-    <span>
-      <i class="fa fa-eye"></i>{{ page.seenUsers.length }}
+    <span class="page-list-seer" data-count="{{ page.seenUsers.length }}">
+      <i class="fa fa-check-square"></i>{{ page.seenUsers.length }}
     </span>
     {% endif  %}
 

lib/views/widget/page_side_header.html

@@ -42,7 +42,7 @@
         </p>
       </dd>
 
-      <dt><i class="fa fa-eye"></i> 見た人</dt>
+      <dt><i class="fa fa-check-square"></i> 見た人</dt>
       <dd>
         <p class="seen-user-count">
           {{ page.seenUsers.length }}

resource/css/crowi.scss

@@ -126,6 +126,19 @@ footer {
   }
 }
 
+.popular-page-high {
+  color: #e80000;
+  font-size: 1.1em;
+  font-weight: bold;
+}
+.popular-page-mid {
+  color: #e47800;
+  font-weight: bold;
+}
+.popular-page-low {
+  color: #ab7c7c;
+}
+
 
 // {{{ add badge variation
 .badge-default {

resource/js/crowi.js

@@ -910,6 +910,38 @@ window.addEventListener('load', function(e) {
       $('a[data-toggle="tab"][href="#revision-history"]').tab('show');
     }
   }
+
+  if (crowi.users || crowi.users.length == 0) {
+    var totalUsers = crowi.users.length;
+    var $listLiker = $('.page-list-liker');
+    $listLiker.each(function(i, liker) {
+      var count = $(liker).data('count') || 0;
+      if (count/totalUsers > 0.05) {
+        $(liker).addClass('popular-page-high');
+        // 5%
+      } else if (count/totalUsers > 0.02) {
+        $(liker).addClass('popular-page-mid');
+        // 2%
+      } else if (count/totalUsers > 0.005) {
+        $(liker).addClass('popular-page-low');
+        // 0.5%
+      }
+    });
+    var $listSeer = $('.page-list-seer');
+    $listSeer.each(function(i, seer) {
+      var count = $(seer).data('count') || 0;
+      if (count/totalUsers > 0.10) {
+        // 10%
+        $(seer).addClass('popular-page-high');
+      } else if (count/totalUsers > 0.05) {
+        // 5%
+        $(seer).addClass('popular-page-mid');
+      } else if (count/totalUsers > 0.02) {
+        // 2%
+        $(seer).addClass('popular-page-low');
+      }
+    });
+  }
 });
 
 window.addEventListener('hashchange', function(e) {