changeset 6293:103f07acad83

templates: use bootstrap pagination The origiinal patch has been modified by Mads Kiilerich.
author domruf <dominikruf@gmail.com>
date Tue, 20 Sep 2016 21:12:56 +0200
parents ea818def1a09
children c40e567e4b82
files kallithea/lib/page.py kallithea/public/css/style.css kallithea/templates/admin/admin_log.html kallithea/templates/admin/gists/index.html kallithea/templates/admin/notifications/notifications_data.html kallithea/templates/changelog/changelog.html kallithea/templates/changelog/changelog_summary_data.html kallithea/templates/followers/followers_data.html kallithea/templates/forks/forks_data.html kallithea/templates/journal/journal_data.html kallithea/templates/pullrequests/pullrequest_data.html kallithea/templates/search/search_commit.html kallithea/templates/search/search_content.html kallithea/templates/search/search_path.html
diffstat 14 files changed, 66 insertions(+), 173 deletions(-) [+]
line wrap: on
line diff
--- a/kallithea/lib/page.py	Tue Oct 25 18:48:20 2016 +0200
+++ b/kallithea/lib/page.py	Tue Sep 20 21:12:56 2016 +0200
@@ -72,7 +72,7 @@
         # Create a link to the first page (unless we are on the first page
         # or there would be no need to insert '..' spacers)
         if self.page != self.first_page and self.first_page < leftmost_page:
-            nav_items.append(self._pagerlink(self.first_page, self.first_page))
+            nav_items.append(HTML.li(self._pagerlink(self.first_page, self.first_page)))
 
         # Insert dots if there are pages between the first page
         # and the currently displayed page range
@@ -81,7 +81,7 @@
             text_ = '..'
             if self.dotdot_attr:
                 text_ = HTML.span(c=text_, **self.dotdot_attr)
-            nav_items.append(text_)
+            nav_items.append(HTML.li(text_))
 
         for thispage in xrange(leftmost_page, rightmost_page + 1):
             # Highlight the current page number and do not use a link
@@ -89,11 +89,11 @@
             if thispage == self.page:
                 # Wrap in a SPAN tag if nolink_attr is set
                 if self.curpage_attr:
-                    text_ = HTML.span(c=text_, **self.curpage_attr)
+                    text_ = HTML.li(HTML.span(c=text_), **self.curpage_attr)
                 nav_items.append(text_)
             # Otherwise create just a link to that page
             else:
-                nav_items.append(self._pagerlink(thispage, text_))
+                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
@@ -102,26 +102,26 @@
             # 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(text_)
+            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(self._pagerlink(self.last_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='~2~', page_param='page', partial_param='partial',
+    def pager(self, format='$link_previous ~2~ $link_next', 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': 'pager_curpage'}
+        self.curpage_attr = curpage_attr or {'class': 'active'}
         self.separator = separator
         self.pager_kwargs = kwargs
         self.page_param = page_param
@@ -152,12 +152,12 @@
                     self._pagerlink(self.first_page, symbol_first) or '',
             'link_last': self.page < self.last_page and \
                     self._pagerlink(self.last_page, symbol_last) or '',
-            'link_previous': self.previous_page and \
+            'link_previous': HTML.li(self.previous_page and \
                     self._pagerlink(self.previous_page, symbol_previous) \
-                    or HTML.span(symbol_previous, class_="yui-pg-previous"),
-            'link_next': self.next_page and \
+                    or HTML.a(symbol_previous)),
+            'link_next': HTML.li(self.next_page and \
                     self._pagerlink(self.next_page, symbol_next) \
-                    or HTML.span(symbol_next, class_="yui-pg-next")
+                    or HTML.a(symbol_next))
         })
 
         return literal(result)
--- a/kallithea/public/css/style.css	Tue Oct 25 18:48:20 2016 +0200
+++ b/kallithea/public/css/style.css	Tue Sep 20 21:12:56 2016 +0200
@@ -1119,75 +1119,7 @@
     padding: 0;
 }
 
-#content div.panel div.pagination {
-    height: 1%;
-    clear: both;
-    overflow: hidden;
-    margin: 10px 0 0;
-    padding: 0;
-}
-
-#content div.panel div.pagination ul.pager {
-    float: right;
-    text-align: right;
-    margin: 0;
-    padding: 0;
-}
-
-#content div.panel div.pagination ul.pager li {
-    height: 1%;
-    float: left;
-    list-style: none;
-    background: #ebebeb url("../images/pager.png") repeat-x;
-    border-top: 1px solid #dedede;
-    border-left: 1px solid #cfcfcf;
-    border-right: 1px solid #c4c4c4;
-    border-bottom: 1px solid #c4c4c4;
-    color: #4A4A4A;
-    font-weight: 700;
-    margin: 0 0 0 4px;
-    padding: 0;
-}
-
-#content div.panel div.pagination ul.pager li.separator {
-    padding: 6px;
-}
-
-#content div.panel div.pagination ul.pager li.current {
-    background: #b4b4b4 url("../images/pager_selected.png") repeat-x;
-    border-top: 1px solid #ccc;
-    border-left: 1px solid #bebebe;
-    border-right: 1px solid #b1b1b1;
-    border-bottom: 1px solid #afafaf;
-    color: #515151;
-    padding: 6px;
-}
-
-#content div.panel div.pagination ul.pager li a {
-    height: 1%;
-    display: block;
-    float: left;
-    color: #515151;
-    text-decoration: none;
-    margin: 0;
-    padding: 6px;
-}
-
-#content div.panel div.pagination ul.pager li a:hover,
-#content div.panel div.pagination ul.pager li a:active {
-    background: #b4b4b4 url("../images/pager_selected.png") repeat-x;
-    border-top: 1px solid #ccc;
-    border-left: 1px solid #bebebe;
-    border-right: 1px solid #b1b1b1;
-    border-bottom: 1px solid #afafaf;
-    margin: -1px;
-}
-
-#content div.panel div.pagination-right {
-    float: right;
-}
-
-#content div.panel div.pagination-wh {
+#content div.panel ul.pagination {
     height: 1%;
     overflow: hidden;
     text-align: right;
@@ -1195,21 +1127,20 @@
     padding: 0;
 }
 
-#content div.panel div.pagination-wh > :first-child {
+#content div.panel ul.pagination > li {
+    display: inline;
+}
+
+#content div.panel ul.pagination > :first-child {
     border-radius: 4px 0px 0px 4px;
 }
 
-#content div.panel div.pagination-wh > :last-child {
+#content div.panel ul.pagination > :last-child {
     border-radius: 0px 4px 4px 0px;
     border-right: 1px solid #cfcfcf;
 }
 
-#content div.panel div.pagination-wh a,
-#content div.panel div.pagination-wh span.pager_dotdot,
-#content div.panel div.pagination-wh span.yui-pg-previous,
-#content div.panel div.pagination-wh span.yui-pg-last,
-#content div.panel div.pagination-wh span.yui-pg-next,
-#content div.panel div.pagination-wh span.yui-pg-first {
+#content div.panel ul.pagination > li {
     height: 1%;
     float: left;
     background: #ebebeb url("../images/pager.png") repeat-x;
@@ -1221,20 +1152,16 @@
     padding: 6px;
 }
 
-#content div.panel div.pagination-wh span.pager_curpage {
-    height: 1%;
-    float: left;
+#content div.panel ul.pagination > li.active {
     background: #b4b4b4 url("../images/pager_selected.png") repeat-x;
     border-top: 1px solid #ccc;
     border-left: 1px solid #bebebe;
     border-bottom: 1px solid #afafaf;
     color: #515151;
-    font-weight: 700;
-    padding: 6px;
-}
-
-#content div.panel div.pagination-wh a:hover,
-#content div.panel div.pagination-wh a:active {
+}
+
+#content div.panel ul.pagination > a:hover,
+#content div.panel ul.pagination > a:active {
     background: #b4b4b4 url("../images/pager_selected.png") repeat-x;
     border-top: 1px solid #ccc;
     border-left: 1px solid #bebebe;
@@ -1242,6 +1169,11 @@
     text-decoration: none;
 }
 
+#content div.panel ul.pagination > li a {
+    color: inherit;
+    text-decoration: inherit;
+}
+
 #content div.panel div.traffic div.legend {
     clear: both;
     overflow: hidden;
@@ -3465,36 +3397,6 @@
     padding: 0;
 }
 
-#content div.panel div.pagination div.results,
-#content div.panel div.pagination-wh div.results {
-    text-align: left;
-    float: left;
-    margin: 0;
-    padding: 0;
-}
-
-#content div.panel div.pagination div.results span,
-#content div.panel div.pagination-wh div.results span {
-    height: 1%;
-    display: block;
-    float: left;
-    background: #ebebeb url("../images/pager.png") repeat-x;
-    border-top: 1px solid #dedede;
-    border-left: 1px solid #cfcfcf;
-    border-right: 1px solid #c4c4c4;
-    border-bottom: 1px solid #c4c4c4;
-    color: #4A4A4A;
-    font-weight: 700;
-    margin: 0;
-    padding: 6px 8px;
-}
-
-#content div.panel div.pagination ul.pager li.disabled,
-#content div.panel div.pagination-wh a.disabled {
-    color: #B4B4B4;
-    padding: 6px;
-}
-
 #login, #register {
     width: 520px;
     margin: 10% auto 0;
@@ -4084,10 +3986,6 @@
     vertical-align: middle;
 }
 
-.notification-paginator {
-    padding: 0px 0px 4px 16px;
-}
-
 .badge {
     padding: 4px 4px !important;
     text-align: center;
--- a/kallithea/templates/admin/admin_log.html	Tue Oct 25 18:48:20 2016 +0200
+++ b/kallithea/templates/admin/admin_log.html	Tue Sep 20 21:12:56 2016 +0200
@@ -56,8 +56,9 @@
   });
 </script>
 
-<div class="pagination-wh pagination-left">
-${c.users_log.pager('$link_previous ~2~ $link_next')}
+<ul class="pagination">
+    ${c.users_log.pager()}
+</ul>
 </div>
 %else:
     ${_('No actions yet')}
--- a/kallithea/templates/admin/gists/index.html	Tue Oct 25 18:48:20 2016 +0200
+++ b/kallithea/templates/admin/gists/index.html	Tue Sep 20 21:12:56 2016 +0200
@@ -63,11 +63,9 @@
           </div>
         % endfor
 
-        <div class="notification-paginator">
-          <div class="pagination-wh pagination-left">
-            ${c.gists_pager.pager('$link_previous ~2~ $link_next', **request.GET.mixed())}
-          </div>
-        </div>
+        <ul class="pagination">
+            ${c.gists_pager.pager(**request.GET.mixed())}
+        </ul>
     %else:
         <div class="table">${_('There are no gists yet')}</div>
     %endif
--- a/kallithea/templates/admin/notifications/notifications_data.html	Tue Oct 25 18:48:20 2016 +0200
+++ b/kallithea/templates/admin/notifications/notifications_data.html	Tue Sep 20 21:12:56 2016 +0200
@@ -27,11 +27,9 @@
 %endfor
 </div>
 
-<div class="notification-paginator">
-  <div class="pagination-wh pagination-left">
-  ${c.notifications.pager('$link_previous ~2~ $link_next',controller='admin/notifications',**request.GET.mixed())}
-  </div>
-</div>
+<ul class="pagination">
+    ${c.notifications.pager(controller='admin/notifications', **request.GET.mixed())}
+</ul>
 
 %else:
     <div class="table">${_('No notifications here yet')}</div>
--- a/kallithea/templates/changelog/changelog.html	Tue Oct 25 18:48:20 2016 +0200
+++ b/kallithea/templates/changelog/changelog.html	Tue Sep 20 21:12:56 2016 +0200
@@ -182,9 +182,9 @@
 
                 </div>
 
-                <div class="pagination-wh pagination-left">
-                    ${c.pagination.pager('$link_previous ~2~ $link_next')}
-                </div>
+                <ul class="pagination">
+                    ${c.pagination.pager()}
+                </ul>
             </div>
         </div>
 
--- a/kallithea/templates/changelog/changelog_summary_data.html	Tue Oct 25 18:48:20 2016 +0200
+++ b/kallithea/templates/changelog/changelog_summary_data.html	Tue Sep 20 21:12:56 2016 +0200
@@ -75,9 +75,9 @@
 
 </table>
 
-<div class="pagination-wh pagination-left">
-${c.repo_changesets.pager('$link_previous ~2~ $link_next')}
-</div>
+<ul class="pagination">
+    ${c.repo_changesets.pager()}
+</ul>
 %else:
 
 %if h.HasRepoPermissionAny('repository.write','repository.admin')(c.repo_name):
--- a/kallithea/templates/followers/followers_data.html	Tue Oct 25 18:48:20 2016 +0200
+++ b/kallithea/templates/followers/followers_data.html	Tue Sep 20 21:12:56 2016 +0200
@@ -13,6 +13,6 @@
     </div>
 % endfor
 
-<div class="pagination-wh pagination-left">
-${c.followers_pager.pager('$link_previous ~2~ $link_next')}
-</div>
+<ul class="pagination">
+    ${c.followers_pager.pager()}
+</ul>
--- a/kallithea/templates/forks/forks_data.html	Tue Oct 25 18:48:20 2016 +0200
+++ b/kallithea/templates/forks/forks_data.html	Tue Sep 20 21:12:56 2016 +0200
@@ -21,9 +21,9 @@
             <div style="border-bottom: 1px solid #DDD;margin:10px 0px 10px 0px"></div>
         </div>
     % endfor
-  <div class="pagination-wh pagination-left">
-  ${c.forks_pager.pager('$link_previous ~2~ $link_next')}
-  </div>
+    <ul class="pagination">
+        ${c.forks_pager.pager()}
+    </ul>
 % else:
     ${_('There are no forks yet')}
 % endif
--- a/kallithea/templates/journal/journal_data.html	Tue Oct 25 18:48:20 2016 +0200
+++ b/kallithea/templates/journal/journal_data.html	Tue Sep 20 21:12:56 2016 +0200
@@ -33,9 +33,9 @@
         %endfor
     %endfor
 
-  <div class="pagination-wh pagination-left" style="padding: 0px 0px 0px 10px;">
-  ${c.journal_pager.pager('$link_previous ~2~ $link_next')}
-  </div>
+    <ul class="pagination">
+        ${c.journal_pager.pager()}
+    </ul>
 %else:
   <div style="padding:5px 0px 10px 10px;">
       ${_('No entries yet')}
--- a/kallithea/templates/pullrequests/pullrequest_data.html	Tue Oct 25 18:48:20 2016 +0200
+++ b/kallithea/templates/pullrequests/pullrequest_data.html	Tue Sep 20 21:12:56 2016 +0200
@@ -80,11 +80,9 @@
 </div>
 
 %if hasattr(pullrequests, 'pager'):
-<div class="notification-paginator">
-  <div class="pagination-wh pagination-left">
-  ${pullrequests.pager('$link_previous ~2~ $link_next', **request.GET.mixed())}
-  </div>
-</div>
+    <ul class="pagination">
+        ${pullrequests.pager(**request.GET.mixed())}
+    </ul>
 %endif
 
 </%def>
--- a/kallithea/templates/search/search_commit.html	Tue Oct 25 18:48:20 2016 +0200
+++ b/kallithea/templates/search/search_commit.html	Tue Sep 20 21:12:56 2016 +0200
@@ -37,7 +37,7 @@
     %endif
 %endfor
 %if c.cur_query and c.formated_results:
-<div class="pagination-wh pagination-left">
-    ${c.formated_results.pager('$link_previous ~2~ $link_next')}
-</div>
+    <ul class="pagination">
+        ${c.formated_results.pager()}
+    </ul>
 %endif
--- a/kallithea/templates/search/search_content.html	Tue Oct 25 18:48:20 2016 +0200
+++ b/kallithea/templates/search/search_content.html	Tue Sep 20 21:12:56 2016 +0200
@@ -26,7 +26,7 @@
     %endif
 %endfor
 %if c.cur_query and c.formated_results:
-<div class="pagination-wh pagination-left" style="padding-left:16px">
-    ${c.formated_results.pager('$link_previous ~2~ $link_next')}
-</div>
+    <ul class="pagination">
+        ${c.formated_results.pager()}
+    </ul>
 %endif
--- a/kallithea/templates/search/search_path.html	Tue Oct 25 18:48:20 2016 +0200
+++ b/kallithea/templates/search/search_path.html	Tue Sep 20 21:12:56 2016 +0200
@@ -20,7 +20,7 @@
     %endif
 %endfor
 %if c.cur_query and c.formated_results:
-<div class="pagination-wh pagination-left">
-    ${c.formated_results.pager('$link_previous ~2~ $link_next')}
-</div>
+    <ul class="pagination">
+        ${c.formated_results.pager()}
+    </ul>
 %endif