slise liker and seenusers

src/server/util/middlewares.js

@@ -183,6 +183,10 @@ exports.swigFilters = function(crowi, app, swig) {
       return crowi.xss.process(string);
     });
 
+    swig.setFilter('slice', function(list, start, end) {
+      return list.slice(start, end);
+    });
+
     next();
   };
 };

src/server/views/layout-crowi/widget/page_side_header.html

@@ -20,20 +20,24 @@
 
   <div class="like-box">
     <dl class="dl-horizontal">
-      <dt>
+      <dt class="text-info">
         <i class="icon-like"></i> {{ t('Like!') }}
       </dt>
       <dd>
         <p class="liker-user-count">{{ page.liker.length|default(0) }}</p>
-        <div id="liker-list" data-user-ids="{{ page.liker|default([])|join(',') }}"></div>
+        {% if page.liker.length > 15 %}<span class="text-muted">..</span>{% endif %}
+        <span id="liker-list" data-user-ids="{{ page.liker|slice(-15)|default([])|join(',') }}"></div>
       </dd>
 
-      <dt><i class="fa fa-paw"></i> {{ t('Seen by') }}</dt>
+      <dt class="text-danger">
+        <i class="fa fa-paw"></i> {{ t('Seen by') }}
+      </dt>
       <dd>
-          <p class="seen-user-count">{{ page.seenUsers.length|default(0) }}</p>
-        <div id="seen-user-list" data-user-ids="{{ page.seenUsers|default([])|join(',') }}"></div>
+        <p class="seen-user-count">{{ page.seenUsers.length|default(0) }}</p>
+        {% if page.seenUsers.length > 15 %}<span class="text-muted">..</span>{% endif %}
+        <span id="seen-user-list" data-user-ids="{{ page.seenUsers|slice(-15)|default([])|join(',') }}"></span>
       </dd>
     </dl>
   </div>
-</div>
+</iv>
 {% endif %} {# if page }}} #}

src/server/views/layout-growi/user_page.html

@@ -45,10 +45,11 @@
     {# relocate #revision-toc #}
     <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
       <div class="liker-and-seenusers d-flex align-items-end justify-content-end">
-        <div class="text-danger">
-          <span id="seen-user-list" class="mr-3" data-user-ids="{{ page.seenUsers|default([])|join(',') }}"></span>
+        {% if page.seenUsers.length > 10 %}<span class="text-muted">..</span>{% endif %}
+        <span id="seen-user-list" class="mr-3" data-user-ids="{{ page.seenUsers|slice(-10)|default([])|join(',') }}"></span>
+        <span class="text-danger">
           <i class="icon-fw fa fa-paw"></i><span class="seen-user-count">{{ page.seenUsers.length|default(0) }}</span>
-        </div>
+        </span>
       </div>
       <div id="revision-toc" class="revision-toc mt-3" data-spy="affix" data-offset-top="116">
         <div id="revision-toc-content" class="revision-toc-content"></div>

src/server/views/layout-growi/widget/liker-and-seenusers.html

@@ -1,10 +1,16 @@
 <div class="liker-and-seenusers">
-  <div class="text-right text-info">
-    <span id="liker-list" class="mr-3" data-user-ids="{{ page.liker|default([])|join(',') }}"></span>
-    <i class="icon-fw icon-like"></i><span class="liker-user-count">{{ page.liker.length|default(0) }}</span>
+  <div class="text-right">
+    {% if page.liker.length > 10 %}<span class="text-muted">..</span>{% endif %}
+    <span id="liker-list" class="mr-3" data-user-ids="{{ page.liker|slice(-10)|default([])|join(',') }}"></span>
+    <span class="text-info">
+      <i class="icon-fw icon-like"></i><span class="liker-user-count">{{ page.liker.length|default(0) }}</span>
+    </span>
   </div>
-  <div class="text-right text-danger">
-    <span id="seen-user-list" class="mr-3" data-user-ids="{{ page.seenUsers|default([])|join(',') }}"></span>
-    <i class="icon-fw fa fa-paw"></i><span class="seen-user-count">{{ page.seenUsers.length|default(0) }}</span>
+  <div class="text-right">
+    {% if page.seenUsers.length > 10 %}<span class="text-muted">..</span>{% endif %}
+    <span id="seen-user-list" class="mr-3" data-user-ids="{{ page.seenUsers|slice(-10)|default([])|join(',') }}"></span>
+    <span class="text-danger">
+      <i class="icon-fw fa fa-paw"></i><span class="seen-user-count">{{ page.seenUsers.length|default(0) }}</span>
+    </span>
   </div>
 </div>