#5030 Only show the subscribers list on demand
Merged 4 years ago by pingou. Opened 4 years ago by pingou.

file modified
+15 -2
@@ -590,6 +590,9 @@ 

            <div class="py-2 text-uppercase font-size-09">

              Subscribers

              <span class="badge badge-secondary badge-pill font-size-09 ml-1" id="subscribers-count">{{subscribers|count}}</span>

+             <span id="subscribers-toggle" title="Show/Hide subscribers">

+               <span class="fa fa-arrow-circle-down fa-fw fa-1x"></span>

+             </span>

            </div>

            <div class="ml-auto">

                <a href="#" class="btn btn-sm btn-link" id="subcribe-btn"
@@ -603,11 +606,11 @@ 

          </h5>

  

          {% if subscribers %}

-         <div id="subscribers_list" class="p-2">

+         <div id="subscribers_list" class="p-2 hidden">

          {% for subscriber in subscribers %}

              <a href="{{ url_for('ui_ns.view_user', username=subscriber)

              }}" title="{{ subscriber }}" id="sub-avatar-{{subscriber}}">{{

-               subscriber |avatar(size=30, css_class="pb-1") | safe

+               subscriber |avatar(size=30, css_class="pb-1", src_tag="data-src") | safe

              }}</a>

          {% endfor %}

          </div>
@@ -816,6 +819,16 @@ 

      return false;

    };

  

+   $('#subscribers-toggle').click(function(event){

+     var _el = $('#subscribers_list');

+     if (! _el.is(':visible')){

+       $('#subscribers-toggle').html('<span class="fa fa-arrow-circle-up fa-fw fa-1x">');

+     } else {

+       $('#subscribers-toggle').html('<span class="fa fa-arrow-circle-down fa-fw fa-1x">');

+     }

+     _el.toggle();

+   });

+ 

    {% if g.repo_user %}

    $('#closeticket').click(function(event){

      event.preventDefault();

@@ -626,6 +626,9 @@ 

                <div class="py-2 text-uppercase font-size-09">

                  Subscribers

                  <span class="badge badge-secondary badge-pill font-size-09 ml-1" id="subscribers-count">{{subscribers|count}}</span>

+                 <span title="Show/Hide subscribers" id="subscribers-toggle">

+                   <span class="fa fa-arrow-circle-down fa-fw fa-1x"</span>

+                 </span>

                </div>

                <div class="ml-auto">

                    <a href="#" class="btn btn-sm btn-link" id="subcribe-btn"
@@ -637,13 +640,13 @@ 

                  </a>

                  </div>

              </h5>

-               {% if subscribers %}

  

-             <div id="subscribers_list" class="p-2">

+             {% if subscribers %}

+             <div id="subscribers_list" class="p-2 hidden">

              {% for subscriber in subscribers %}

                  <a href="{{ url_for('ui_ns.view_user', username=subscriber)

                  }}" title="{{ subscriber }}" id="sub-avatar-{{subscriber}}">{{

-                   subscriber |avatar(size=30, css_class="pb-1") | safe

+                   subscriber |avatar(size=30, css_class="pb-1", src_tag="data-src") | safe

                  }}</a>

              {% endfor %}

  
@@ -891,6 +894,16 @@ 

  

  $(document).ready(function() {

  

+   $('#subscribers-toggle').click(function(event){

+     var _el = $('#subscribers_list');

+     if (! _el.is(':visible')){

+       $('#subscribers-toggle').html('<span class="fa fa-arrow-circle-up fa-fw fa-1x">');

+     } else {

+       $('#subscribers-toggle').html('<span class="fa fa-arrow-circle-down fa-fw fa-1x">');

+     }

+     _el.toggle();

+   });

+ 

    {# Show latest tag #}

    {% if pull_request.commit_stop %};

      var url = '{{ url_for("api_ns.api_commit_flags",
@@ -981,7 +994,6 @@ 

      });

    });

  

- 

    $('#merge_btn').click(function() {

        return confirm('Confirm merging this pull-request');

    });
@@ -1485,7 +1497,7 @@ 

              _countlabel.text(_count+1)

              var _html = '<a href="/user/' + data.user + '"'

                        + 'title="'+data.user+'" id="sub-avatar-'+data.user+'">'

-                       + '<img src="'+data.avatar_url+'" class="pb-1"></a>';

+                       + '<img src="'+data.avatar_url+'" class="pb-1 lazyload"></a>';

              $('#subscribers_list').prepend(_html);

            } else {

              _btn.text('Subscribe');

file modified
+3 -2
@@ -500,7 +500,7 @@ 

  

  

  @UI_NS.app_template_filter("avatar")

- def avatar(packager, size=64, css_class=None):

+ def avatar(packager, size=64, css_class=None, src_tag="src"):

      """ Template filter that returns html for avatar of any given Username.

      """

      if not isinstance(packager, six.text_type):
@@ -515,8 +515,9 @@ 

      if css_class:

          class_string = class_string + " " + css_class

  

-     output = '<img class="%s" src="%s"/>' % (

+     output = '<img class="%s lazyload" %s="%s"/>' % (

          class_string,

+         src_tag,

          avatar_url(packager, size),

      )

  

This will speed up the page loading as the images will only be loaded
on demand and not on page load, which for issues/PRs with lots of people
subscribed will have quite a performance impact.

Fixes https://pagure.io/pagure/issue/5012

Signed-off-by: Pierre-Yves Chibon pingou@pingoured.fr

Looks good, but needs rebasing.

rebased onto 1dc8271fd7863ff7b82c846a64b79f21928f6cd9

4 years ago

pretty please pagure-ci rebuild

4 years ago

pretty please pagure-ci rebuild

4 years ago

rebased onto 57af283

4 years ago

Pull-Request has been merged by pingou

4 years ago