Changeset - b56aa0ea3531
[Not reviewed]
default
0 14 0
Mads Kiilerich - 8 years ago 2017-06-25 18:49:21
mads@kiilerich.com
pagination: avoid superfluous margins - especially when pages are short and pagination isn't shown

Change our webhelpers paginator wrapper to emit full UL (or nothing) instead of
just ILs.

(Browsers still render extra space below the paginator - that is an artifact of
how Bootstrap use inline on the ILs.)
14 files changed with 8 insertions and 30 deletions:
0 comments (0 inline, 0 general)
kallithea/lib/page.py
Show inline comments
 
@@ -2,49 +2,49 @@
 
# This program is free software: you can redistribute it and/or modify
 
# it under the terms of the GNU General Public License as published by
 
# the Free Software Foundation, either version 3 of the License, or
 
# (at your option) any later version.
 
#
 
# This program is distributed in the hope that it will be useful,
 
# but WITHOUT ANY WARRANTY; without even the implied warranty of
 
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 
# GNU General Public License for more details.
 
#
 
# You should have received a copy of the GNU General Public License
 
# along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
"""
 
Custom paging classes
 
"""
 

	
 
import math
 
import re
 
from kallithea.config.routing import url
 
from webhelpers.html import literal, HTML
 
from webhelpers.paginate import Page as _Page
 

	
 
class Page(_Page):
 
    """
 
    Custom pager to match rendering style with YUI paginator
 
    Custom pager to match rendering style with YUI paginator emitting Bootstrap paginators
 
    """
 

	
 
    def __init__(self, *args, **kwargs):
 
        kwargs.setdefault('url', url.current)
 
        _Page.__init__(self, *args, **kwargs)
 

	
 
    def _get_pos(self, cur_page, max_page, items):
 
        edge = (items / 2) + 1
 
        if (cur_page <= edge):
 
            radius = max(items / 2, items - cur_page)
 
        elif (max_page - cur_page) < edge:
 
            radius = (items - 1) - (max_page - cur_page)
 
        else:
 
            radius = items / 2
 

	
 
        left = max(1, (cur_page - (radius)))
 
        right = min(max_page, cur_page + (radius))
 
        return left, cur_page, right
 

	
 
    def _range(self, regexp_match):
 
        """
 
        Return range of linked pages (e.g. '1 2 [3] 4 5 6 7 8').
 

	
 
        Arguments:
 
@@ -93,49 +93,49 @@ class Page(_Page):
 
                nav_items.append(text_)
 
            # Otherwise create just a link to that page
 
            else:
 
                nav_items.append(HTML.li(self._pagerlink(thispage, text_)))
 

	
 
        # Insert dots if there are pages between the displayed
 
        # page numbers and the end of the page range
 
        if self.last_page - rightmost_page > 1:
 
            text_ = '..'
 
            # Wrap in a SPAN tag if nolink_attr is set
 
            if self.dotdot_attr:
 
                text_ = HTML.span(c=text_, **self.dotdot_attr)
 
            nav_items.append(HTML.li(text_))
 

	
 
        # Create a link to the very last page (unless we are on the last
 
        # page or there would be no need to insert '..' spacers)
 
        if self.page != self.last_page and rightmost_page < self.last_page:
 
            nav_items.append(HTML.li(self._pagerlink(self.last_page, self.last_page)))
 

	
 
        #_page_link = url.current()
 
        #nav_items.append(literal('<link rel="prerender" href="%s?page=%s">' % (_page_link, str(int(self.page)+1))))
 
        #nav_items.append(literal('<link rel="prefetch" href="%s?page=%s">' % (_page_link, str(int(self.page)+1))))
 
        return self.separator.join(nav_items)
 

	
 
    def pager(self, format='$link_previous ~2~ $link_next', page_param='page', partial_param='partial',
 
    def pager(self, format='<ul class="pagination">$link_previous ~2~ $link_next</ul>', page_param='page', partial_param='partial',
 
        show_if_single_page=False, separator=' ', onclick=None,
 
        symbol_first='<<', symbol_last='>>',
 
        symbol_previous='<', symbol_next='>',
 
        link_attr=None,
 
        curpage_attr=None,
 
        dotdot_attr=None, **kwargs):
 
        self.curpage_attr = curpage_attr or {'class': 'active'}
 
        self.separator = separator
 
        self.pager_kwargs = kwargs
 
        self.page_param = page_param
 
        self.partial_param = partial_param
 
        self.onclick = onclick
 
        self.link_attr = link_attr or {'class': 'pager_link', 'rel': 'prerender'}
 
        self.dotdot_attr = dotdot_attr or {'class': 'pager_dotdot'}
 

	
 
        # Don't show navigator if there is no more than one page
 
        if self.page_count == 0 or (self.page_count == 1 and not show_if_single_page):
 
            return ''
 

	
 
        from string import Template
 
        # Replace ~...~ in token format by range of pages
 
        result = re.sub(r'~(\d+)~', self._range, format)
 

	
 
        # Interpolate '%' variables
kallithea/public/css/style.css
Show inline comments
 
@@ -656,48 +656,52 @@ div.panel.panel-default div.panel-headin
 

	
 
#content div.panel table td.date {
 
    width: 33%;
 
    text-align: center;
 
}
 

	
 
#content div.panel div.action {
 
    float: right;
 
    background: #FFF;
 
    text-align: right;
 
    margin: 10px 0 0;
 
    padding: 0;
 
}
 

	
 
#content div.panel div.action select {
 
    font-size: 11px;
 
    margin: 0;
 
}
 

	
 
#content div.panel div.action .ui-selectmenu {
 
    margin: 0;
 
    padding: 0;
 
}
 

	
 
#content div.panel ul.pagination {
 
    margin: 10px 0 0 0;
 
}
 

	
 
#content div.panel ul.pagination > li > a,
 
#content div.panel ul.pagination > li > span {
 
    background: #ebebeb url("../images/pager.png") repeat-x;
 
    color: #4A4A4A;
 
    font-weight: 700;
 
    border-top: 1px solid #dedede;
 
    border-left: 1px solid #cfcfcf;
 
    border-bottom: 1px solid #c4c4c4;
 
    border-right: 1px solid #cfcfcf;
 
}
 

	
 

	
 
#content div.panel ul.pagination > li.active > span,
 
#content div.panel ul.pagination > li:hover > a,
 
#content div.panel ul.pagination > li:active > a {
 
    background: #b4b4b4 url("../images/pager_selected.png") repeat-x;
 
    border-top: 1px solid #ccc;
 
    border-left: 1px solid #bebebe;
 
    border-bottom: 1px solid #afafaf;
 
    border-right: 1px solid #bebebe;
 
    color: #515151;
 
}
 

	
 
#content div.panel div.traffic div.legend {
kallithea/templates/admin/admin_log.html
Show inline comments
 
@@ -34,30 +34,29 @@
 
        <td>${h.fmt_date(l.action_date)}</td>
 
        <td>${l.user_ip}</td>
 
    </tr>
 
    %endfor
 
</table>
 

	
 
<script type="text/javascript">
 
  $(document).ready(function(){
 
    var $user_log = $('#user_log');
 
    $user_log.on('click','.pager_link',function(e){
 
      asynchtml(e.target.href, $user_log, function(){
 
        show_more_event();
 
        tooltip_activate();
 
      });
 
      e.preventDefault();
 
    });
 
    $user_log.on('click','.show_more',function(e){
 
      var el = e.target;
 
      $('#'+el.id.substring(1)).show();
 
      $(el.parentNode).hide();
 
    });
 
  });
 
</script>
 

	
 
<ul class="pagination">
 
    ${c.users_log.pager()}
 
</ul>
 

	
 
%else:
 
    ${_('No actions yet')}
 
%endif
kallithea/templates/admin/gists/index.html
Show inline comments
 
@@ -40,34 +40,31 @@
 
    </div>
 
    <div class="panel-body">
 
      %if c.gists_pager.item_count>0:
 
        % for gist in c.gists_pager:
 
          <div class="gist-item clearfix">
 
            ${h.gravatar_div(gist.owner.email, size=28)}
 
            <span title="${gist.owner.full_contact}" class="user">
 
                <b>${h.person(gist.owner.full_contact)}</b> /
 
                <b><a href="${h.url('gist',gist_id=gist.gist_access_id)}">gist: ${gist.gist_access_id}</a></b>
 
            </span>
 
            <div>
 
                ${_('Created')} ${h.age(gist.created_on)} /
 
                <span class="text-muted">
 
                  %if gist.gist_expires == -1:
 
                   ${_('Expires')}: ${_('Never')}
 
                  %else:
 
                   ${_('Expires')}: ${h.age(h.time_to_datetime(gist.gist_expires))}
 
                  %endif
 
                </span>
 
            </div>
 

	
 
            <div class="text-muted">${gist.gist_description}</div>
 
          </div>
 
        % endfor
 

	
 
        <ul class="pagination">
 
            ${c.gists_pager.pager(**request.GET.mixed())}
 
        </ul>
 
      %else:
 
        <div>${_('There are no gists yet')}</div>
 
      %endif
 
    </div>
 
</div>
 
</%def>
kallithea/templates/admin/notifications/notifications_data.html
Show inline comments
 
%if c.notifications:
 

	
 
<div class="list-group">
 
%for notification in c.notifications:
 
  <div id="notification_${notification.notification.notification_id}" class="list-group-item ${'' if notification.read else 'list-group-item-warning'} clearfix">
 
      <span class="pull-left">
 
        ${h.gravatar_div(notification.notification.created_by_user.email, size=24)}
 
        <a href="${url('notification', notification_id=notification.notification.notification_id)}">${notification.notification.description}</a>
 
      </span>
 
      <span class="pull-right">
 
        %if not notification.read:
 
          <span id="${notification.notification.notification_id}" class="btn btn-default btn-xs read-notification"><i class="icon-ok"></i>${_('Mark as read')}</span>
 
        %endif
 
        <span id="${notification.notification.notification_id}" class="btn btn-default btn-xs delete-notification"><i class="icon-minus-circled"></i>${_('Delete')}</span>
 
      </span>
 
  </div>
 
%endfor
 
</div>
 

	
 
<ul class="pagination">
 
    ${c.notifications.pager(controller='admin/notifications', **request.GET.mixed())}
 
</ul>
 

	
 
%else:
 
    <div>${_('No notifications here yet')}</div>
 
%endif
kallithea/templates/changelog/changelog.html
Show inline comments
 
@@ -154,51 +154,49 @@ ${self.repo_context_bar('changelog', c.f
 
                                        %endfor
 
                                    %endif
 
                                    %for tag in cs.tags:
 
                                        <span class="tagtag" title="${_('Tag %s') % tag}">
 
                                            ${h.link_to(tag,h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id))}
 
                                        </span>
 
                                    %endfor
 
                                    %if (not c.branch_name) and cs.branch:
 
                                        <span class="branchtag" title="${_('Branch %s' % cs.branch)}">
 
                                            ${h.link_to(cs.branch,h.url('changelog_home',repo_name=c.repo_name,branch=cs.branch))}
 
                                        </span>
 
                                    %endif
 
                                </div>
 
                            </div>
 
                        </td>
 
                    </tr>
 
                %endfor
 
                </tbody>
 
                </table>
 

	
 
                <input type="checkbox" id="singlerange" style="display:none"/>
 

	
 
                </div>
 

	
 
                <ul class="pagination">
 
                    ${c.pagination.pager()}
 
                </ul>
 

	
 
        <script type="text/javascript" src="${h.url('/js/graph.js', ver=c.kallithea_version)}"></script>
 
        <script type="text/javascript">
 
            var jsdata = ${h.js(c.jsdata)};
 
            var graph = new BranchRenderer('graph_canvas', 'graph_content', 'chg_');
 

	
 
            $(document).ready(function(){
 
                var $checkboxes = $('.changeset_range');
 

	
 
                pyroutes.register('changeset_home', ${h.js(h.url('changeset_home', repo_name='%(repo_name)s', revision='%(revision)s'))}, ['repo_name', 'revision']);
 

	
 
                var checkbox_checker = function(e) {
 
                    var $checked_checkboxes = $checkboxes.filter(':checked');
 
                    var $singlerange = $('#singlerange');
 

	
 
                    $('#rev_range_container').hide();
 
                    $checkboxes.show();
 
                    $singlerange.show();
 

	
 
                    if ($checked_checkboxes.length > 0) {
 
                        $checked_checkboxes.first().parent('td').append($singlerange);
 
                        var singlerange = $singlerange.prop('checked');
 
                        var rev_end = $checked_checkboxes.first().prop('name');
 
                        if ($checked_checkboxes.length > 1 || singlerange) {
kallithea/templates/changelog/changelog_summary_data.html
Show inline comments
 
@@ -50,51 +50,50 @@
 
        <td>
 
            %if h.is_hg(c.db_repo_scm_instance):
 
                %for book in cs.bookmarks:
 
                    <span class="booktag" title="${_('Bookmark %s') % book}">
 
                        ${h.link_to(book,h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id))}
 
                    </span>
 
                %endfor
 
            %endif
 
            %for tag in cs.tags:
 
             <span class="tagtag" title="${_('Tag %s') % tag}">
 
                 ${h.link_to(tag,h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id))}
 
             </span>
 
            %endfor
 
            %if cs.branch:
 
             <span class="branchtag" title="${_('Branch %s' % cs.branch)}">
 
                 ${h.link_to(cs.branch,h.url('changelog_home',repo_name=c.repo_name,branch=cs.branch))}
 
             </span>
 
            %endif
 
        </td>
 
    </tr>
 
%endfor
 

	
 
</table>
 

	
 
<ul class="pagination">
 
    ${c.repo_changesets.pager()}
 
</ul>
 

	
 
%else:
 

	
 
%if h.HasRepoPermissionLevel('write')(c.repo_name):
 
<h4>${_('Add or upload files directly via Kallithea')}</h4>
 
<div>
 
  <div id="add_node_id" class="add_node">
 
      <a class="btn btn-default btn-xs" href="${h.url('files_add_home',repo_name=c.repo_name,revision=0,f_path='', anchor='edit')}">${_('Add New File')}</a>
 
  </div>
 
</div>
 
%endif
 

	
 

	
 
<h4>${_('Push new repository')}</h4>
 
<pre>
 
    ${c.db_repo_scm_instance.alias} clone ${c.clone_repo_url}
 
    ${c.db_repo_scm_instance.alias} add README # add first file
 
    ${c.db_repo_scm_instance.alias} commit -m "Initial" # commit with message
 
    ${c.db_repo_scm_instance.alias} push ${'origin master' if h.is_git(c.db_repo_scm_instance) else ''} # push changes back
 
</pre>
 

	
 
<h4>${_('Existing repository?')}</h4>
 
<pre>
 
%if h.is_git(c.db_repo_scm_instance):
 
    git remote add origin ${c.clone_repo_url}
kallithea/templates/followers/followers_data.html
Show inline comments
 
## -*- coding: utf-8 -*-
 

	
 
% for f in c.followers_pager:
 
    <div>
 
        <div class="follower_user">
 
            ${h.gravatar_div(f.user.email, size=24)}
 
            <span> <b>${f.user.username}</b> (${f.user.name} ${f.user.lastname})</span>
 
        </div>
 
        <div class="follower_date">${_('Started following -')}
 
          <span data-toggle="tooltip" title="${f.follows_from}"> ${h.age(f.follows_from)}</span>
 
        </div>
 
    </div>
 
% endfor
 

	
 
<ul class="pagination">
 
    ${c.followers_pager.pager()}
 
</ul>
kallithea/templates/forks/forks_data.html
Show inline comments
 
## -*- coding: utf-8 -*-
 

	
 
% if c.forks_pager:
 
    % for f in c.forks_pager:
 
        <div>
 
            <div class="fork_user">
 
                ${h.gravatar_div(f.owner.email, size=24)}
 
                <span>
 
                 <b>${f.owner.username}</b> (${f.owner.name} ${f.owner.lastname}) /
 
                  ${h.link_to(f.repo_name,h.url('summary_home',repo_name=f.repo_name))}
 
                </span>
 
                <div>${f.description}</div>
 
            </div>
 
            <div class="follower_date">${_('Forked')} -
 
                <span data-toggle="tooltip" title="${h.fmt_date(f.created_on)}"> ${h.age(f.created_on)}</span>
 
                <a title="${_('Compare fork with %s') % c.repo_name}"
 
                   href="${h.url('compare_url',repo_name=c.repo_name, org_ref_type=c.db_repo.landing_rev[0],org_ref_name=c.db_repo.landing_rev[1],other_repo=f.repo_name,other_ref_type=c.db_repo.landing_rev[0],other_ref_name=c.db_repo.landing_rev[1], merge=1)}"
 
                   class="btn btn-default btn-sm"><i class="icon-git-compare"></i> ${_('Compare Fork')}</a>
 
            </div>
 
        </div>
 
    % endfor
 
    <ul class="pagination">
 
        ${c.forks_pager.pager()}
 
    </ul>
 
% else:
 
    ${_('There are no forks yet')}
 
% endif
kallithea/templates/journal/journal_data.html
Show inline comments
 
@@ -15,33 +15,30 @@
 
                  <div class="clearfix">
 
                    <div class="pull-left">
 
                      <div class="journal_icon"> ${h.action_parser(entry)[2]()}</div>
 
                    </div>
 
                    <div class="pull-left">
 
                      <div class="journal_action">${h.action_parser(entry)[0]()}</div>
 
                      <div class="journal_repo">
 
                          <span class="journal_repo_name">
 
                          %if entry.repository is not None:
 
                            ${h.link_to(entry.repository.repo_name,
 
                                        h.url('summary_home',repo_name=entry.repository.repo_name))}
 
                          %else:
 
                            ${entry.repository_name}
 
                          %endif
 
                          </span>
 
                      </div>
 
                      <div class="journal_action_params">${h.literal(h.action_parser(entry)[1]())}</div>
 
                      <div class="date"><span data-toggle="tooltip" title="${h.fmt_date(entry.action_date)}">${h.age(entry.action_date)}</span></div>
 
                    </div>
 
                  </div>
 
                %endfor
 
            </div>
 
        %endfor
 
    %endfor
 

	
 
    <ul class="pagination">
 
        ${c.journal_pager.pager()}
 
    </ul>
 
%else:
 
  <div>
 
      ${_('No entries yet')}
 
  </div>
 
%endif
kallithea/templates/pullrequests/pullrequest_data.html
Show inline comments
 
@@ -59,30 +59,28 @@
 
        </a>
 
      </td>
 
      <td>
 
        %if pr.owner_id == request.authuser.user_id:
 
          ${h.form(url('pullrequest_delete', repo_name=pr.other_repo.repo_name, pull_request_id=pr.pull_request_id))}
 
          <div class="btn btn-default btn-xs"
 
                  id="remove_${pr.pull_request_id}"
 
                  name="remove_${pr.pull_request_id}"
 
                  title="${_('Delete Pull Request')}"
 
                  onclick="return confirm('${_('Confirm to delete this pull request')}')
 
                      && ((${len(pr.comments)} == 0) ||
 
                          confirm('${_('Confirm again to delete this pull request with %s comments') % len(pr.comments)}'))
 
                      ">
 
            <i class="icon-minus-circled"></i>
 
          </div>
 
          ${h.end_form()}
 
        %endif
 
      </td>
 
    </tr>
 
% endfor
 
  </table>
 
</div>
 

	
 
%if hasattr(pullrequests, 'pager'):
 
    <ul class="pagination">
 
        ${pullrequests.pager(**request.GET.mixed())}
 
    </ul>
 
%endif
 

	
 
</%def>
kallithea/templates/search/search_commit.html
Show inline comments
 
@@ -11,28 +11,26 @@
 
            <div class="panel-body">
 
                <div class="author">
 
                    ${h.gravatar_div(h.email_or_none(sr['author']), size=20)}
 
                    <span>${h.person(sr['author'])}</span><br/>
 
                    <span>${h.email_or_none(sr['author'])}</span><br/>
 
                </div>
 
                %if sr['message_hl']:
 
                <div class="search-code-body">
 
                    <pre>${h.literal(sr['message_hl'])}</pre>
 
                </div>
 
                %else:
 
                <div class="message">${h.urlify_text(sr['message'], sr['repository'])}</div>
 
                %endif
 
            </div>
 
        </div>
 
    %else:
 
        %if cnt == 0:
 
            <div class="alert alert-warning" role="alert">
 
                ${_('Permission denied')}
 
            </div>
 
        %endif
 
    %endif
 
%endfor
 
%if c.cur_query and c.formated_results:
 
    <ul class="pagination">
 
        ${c.formated_results.pager()}
 
    </ul>
 
%endif
kallithea/templates/search/search_content.html
Show inline comments
 
##content highlighting
 

	
 
%for cnt,sr in enumerate(c.formated_results):
 
    %if h.HasRepoPermissionLevel('read')(sr['repository'],'search results check'):
 
        <div class="panel panel-default">
 
            <div class="panel-heading">
 
                ${h.link_to(h.literal('%s &raquo; %s' % (sr['repository'],sr['f_path'])),
 
                    h.url('files_home',repo_name=sr['repository'],revision='tip',f_path=sr['f_path']))}
 
            </div>
 
            <div class="panel-body search-code-body">
 
                <pre>${h.literal(sr['content_short_hl'])}</pre>
 
            </div>
 
        </div>
 
    %else:
 
        %if cnt == 0:
 
            <div class="alert alert-warning" role="alert">
 
                ${_('Permission denied')}
 
            </div>
 
        %endif
 
    %endif
 
%endfor
 
%if c.cur_query and c.formated_results:
 
    <ul class="pagination">
 
        ${c.formated_results.pager()}
 
    </ul>
 
%endif
kallithea/templates/search/search_path.html
Show inline comments
 
##path search
 

	
 
%for cnt,sr in enumerate(c.formated_results):
 
    %if h.HasRepoPermissionLevel('read')(sr['repository'],'search results check'):
 
        <div class="panel panel-default">
 
            <div class="panel-heading">
 
                ${h.link_to(h.literal('%s &raquo; %s' % (sr['repository'],sr['f_path'])),
 
                    h.url('files_home',repo_name=sr['repository'],revision='tip',f_path=sr['f_path']))}
 
            </div>
 
        </div>
 
    %else:
 
        %if cnt == 0:
 
            <div class="alert alert-warning" role="alert">
 
                ${_('Permission denied')}
 
            </div>
 
        %endif
 
    %endif
 
%endfor
 
%if c.cur_query and c.formated_results:
 
    <ul class="pagination">
 
        ${c.formated_results.pager()}
 
    </ul>
 
%endif
0 comments (0 inline, 0 general)