New, nicer pagination.
authorAnt Zucaro <azucaro@gmail.com>
Fri, 29 Mar 2013 23:20:21 +0000 (19:20 -0400)
committerAnt Zucaro <azucaro@gmail.com>
Fri, 29 Mar 2013 23:20:21 +0000 (19:20 -0400)
xonstat/static/css/app.css
xonstat/static/css/app.min.css
xonstat/templates/navlinks.mako

index 3661e75d8db702be2ea23b36e8855aca0fdcce6c..11786f7af6182b8e1aaa09aa31d710609bc6eda7 100644 (file)
@@ -239,6 +239,17 @@ table td {
   float: left;
 }
 
+/* Navigation links */
+.pagination > li > a, .pagination > li > span {
+    background-color: #111111;
+    border-color: rgb(49, 49, 49);
+    color: rgb(121, 121, 121);
+}
+.pagination>li>a:hover, .pagination>li>a:focus, .pagination>.active>a, .pagination>.active>span{
+    background-color: rgb(43, 34, 34);
+}
+
+
 /* Desktop-specific stuff */
 @media (min-width: 768px) {
     .navbar-form {
index 58c64e4b6646ac6cf5365a0f11cd46c3938f08a3..42875f1c0952174bd0400ea307c50d47a090954b 100644 (file)
@@ -1 +1 @@
-@font-face{font-family:'XoloniumNormal';src:url('fonts/xolonium-webfont.eot');src:url('fonts/xolonium-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/xolonium-webfont.woff') format('woff'),url('fonts/xolonium-webfont.ttf') format('truetype'),url('fonts/xolonium-webfont.svg#XoloniumNormal') format('svg');font-weight:normal;font-style:normal}body{background:url("img/web_background_4.jpg") no-repeat fixed center center / cover black;background-color:black;color:#d0d0d0;font-family:"XoloniumNormal","Helvetica Neue",Helvetica,Arial,sans-serif}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-weight:normal;color:#999}h1{font-size:30px;line-height:36px}h1 small{font-size:18px}h2{font-size:24px;line-height:36px}h2 small{font-size:18px}h3{line-height:27px;font-size:18px}h3 small{font-size:14px}h4,h5,h6{line-height:18px}h4{font-size:14px}h4 small{font-size:12px}h5{font-size:12px}h6{font-size:11px;color:#999;text-transform:uppercase}table{background:#000;background:none repeat scroll 0 0 rgba(0,0,0,0.7);border:1px solid #436688}table th{border:1px solid #436688;background-color:#001021}table td{border:1px solid #436688;font-size:10px}.table-hover>tbody>tr:hover>td,.table-hover>tbody>tr:hover>th{background-color:#222}.table th,.table td{border:1px solid #436688}.table td{vertical-align:middle}.table .tdcenter{text-align:center}.accordion-group{border:1px solid #272525}.accordion-inner{border:0}#statline{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;position:relative;top:-25px}#xonborder{background:#000;background:none repeat scroll 0 0 rgba(0,0,0,0.5);border-radius:15px 15px 15px 15px;margin-bottom:30px;margin-left:0;padding:20px}#title{color:#08c;font-size:30px;margin-bottom:15px;position:relative;text-align:center;text-shadow:2px 2px 3px #333}.indexform{margin:20px 0 20px 0}.indexbox{width:250px}.navbar-brand{margin-left:0;padding-bottom:0;padding-top:10px;text-align:left}.navbar-inverse{background:none repeat scroll 0 0 rgba(0,0,0,0.6)}.navbar-inverse .nav>.active>a,.navbar-inverse .nav>.active>a:hover,.navbar-inverse .nav>.active>a:focus{background:none repeat scroll 0 0 rgba(49,49,49,0.6)}.navbar-inverse .nav>li>a,.navbar-brand{font-family:XoloniumNormal}.search,input[type="search"]{background-color:#606060;border:1px solid #202020;color:#aaa;width:100px}.game{float:left;margin-bottom:30px;min-width:700px;padding:10px 7px}.game a{color:#CCC}.game a:hover{color:#d95f00;text-decoration:none}.game tr{background-color:#000}.game tr.red{background-color:#4d0000}.game tr.blue{background-color:#00004d}.game tr.yellow{background-color:#4d4d00}.game tr.pink{background-color:#4d004d}.game tr:hover{background-color:#222}.weapon-nav{height:70px;margin-bottom:20px}.weapon-nav ul{display:block;list-style:none outside none}.weapon-nav li{cursor:pointer;float:left;margin-right:10px}.weapon-nav li:hover{border-bottom:2px solid #001021}.weapon-nav .weapon-active{border-bottom:2px solid #436688}.weapon-nav p{text-align:center}.flot table,.flot td{background-color:black;border:0}#gbtabcontainer{margin-top:10px}#gbtab{font-size:12px}.tabbable p{font-size:14px}.tabs-below .nav-tabs>li>a{border-radius:4px 4px 4px 4px}.nav-tabs>.active>a,.nav-tabs>.active>a:hover{background-color:#111;color:#aaa;border-color:#222}.nav-tabs>li>a{border-radius:4px 4px 4px 4px;text-align:center}.nav-tabs>li>a:hover{background-color:#111;border-color:#333}.nav-tabs{border-bottom:0 solid #000}.table .tdcenter{text-align:center}.game-detail img{float:left;margin-right:10px;margin-bottom:5px}.game img{float:left;margin-right:5px;margin-bottom:5px}.game-detail p,.game h4{float:left}@media(min-width:768px){.navbar-form{float:right}}
\ No newline at end of file
+@font-face{font-family:'XoloniumNormal';src:url('fonts/xolonium-webfont.eot');src:url('fonts/xolonium-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/xolonium-webfont.woff') format('woff'),url('fonts/xolonium-webfont.ttf') format('truetype'),url('fonts/xolonium-webfont.svg#XoloniumNormal') format('svg');font-weight:normal;font-style:normal}body{background:url("img/web_background_4.jpg") no-repeat fixed center center / cover black;background-color:black;color:#d0d0d0;font-family:"XoloniumNormal","Helvetica Neue",Helvetica,Arial,sans-serif}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-weight:normal;color:#999}h1{font-size:30px;line-height:36px}h1 small{font-size:18px}h2{font-size:24px;line-height:36px}h2 small{font-size:18px}h3{line-height:27px;font-size:18px}h3 small{font-size:14px}h4,h5,h6{line-height:18px}h4{font-size:14px}h4 small{font-size:12px}h5{font-size:12px}h6{font-size:11px;color:#999;text-transform:uppercase}table{background:#000;background:none repeat scroll 0 0 rgba(0,0,0,0.7);border:1px solid #436688}table th{border:1px solid #436688;background-color:#001021}table td{border:1px solid #436688;font-size:10px}.table-hover>tbody>tr:hover>td,.table-hover>tbody>tr:hover>th{background-color:#222}.table th,.table td{border:1px solid #436688}.table td{vertical-align:middle}.table .tdcenter{text-align:center}.accordion-group{border:1px solid #272525}.accordion-inner{border:0}#statline{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;position:relative;top:-25px}#xonborder{background:#000;background:none repeat scroll 0 0 rgba(0,0,0,0.5);border-radius:15px 15px 15px 15px;margin-bottom:30px;margin-left:0;padding:20px}#title{color:#08c;font-size:30px;margin-bottom:15px;position:relative;text-align:center;text-shadow:2px 2px 3px #333}.indexform{margin:20px 0 20px 0}.indexbox{width:250px}.navbar-brand{margin-left:0;padding-bottom:0;padding-top:10px;text-align:left}.navbar-inverse{background:none repeat scroll 0 0 rgba(0,0,0,0.6)}.navbar-inverse .nav>.active>a,.navbar-inverse .nav>.active>a:hover,.navbar-inverse .nav>.active>a:focus{background:none repeat scroll 0 0 rgba(49,49,49,0.6)}.navbar-inverse .nav>li>a,.navbar-brand{font-family:XoloniumNormal}.search,input[type="search"]{background-color:#606060;border:1px solid #202020;color:#aaa;width:100px}.game{float:left;margin-bottom:30px;min-width:700px;padding:10px 7px}.game a{color:#CCC}.game a:hover{color:#d95f00;text-decoration:none}.game tr{background-color:#000}.game tr.red{background-color:#4d0000}.game tr.blue{background-color:#00004d}.game tr.yellow{background-color:#4d4d00}.game tr.pink{background-color:#4d004d}.game tr:hover{background-color:#222}.weapon-nav{height:70px;margin-bottom:20px}.weapon-nav ul{display:block;list-style:none outside none}.weapon-nav li{cursor:pointer;float:left;margin-right:10px}.weapon-nav li:hover{border-bottom:2px solid #001021}.weapon-nav .weapon-active{border-bottom:2px solid #436688}.weapon-nav p{text-align:center}.flot table,.flot td{background-color:black;border:0}#gbtabcontainer{margin-top:10px}#gbtab{font-size:12px}.tabbable p{font-size:14px}.tabs-below .nav-tabs>li>a{border-radius:4px 4px 4px 4px}.nav-tabs>.active>a,.nav-tabs>.active>a:hover{background-color:#111;color:#aaa;border-color:#222}.nav-tabs>li>a{border-radius:4px 4px 4px 4px;text-align:center}.nav-tabs>li>a:hover{background-color:#111;border-color:#333}.nav-tabs{border-bottom:0 solid #000}.table .tdcenter{text-align:center}.game-detail img{float:left;margin-right:10px;margin-bottom:5px}.game img{float:left;margin-right:5px;margin-bottom:5px}.game-detail p,.game h4{float:left}.pagination>li>a,.pagination>li>span{background-color:#111;border-color:#313131;color:#797979}.pagination>li>a:hover,.pagination>li>a:focus,.pagination>.active>a,.pagination>.active>span{background-color:#2b2222}@media(min-width:768px){.navbar-form{float:right}}
\ No newline at end of file
index 4f9aa837e18db3ced656bab62b08d11d29ed8e8e..112e521a108697939cce6fcbef5088fa6df1465b 100644 (file)
@@ -11,9 +11,12 @@ if 'search_query' in kwargs.keys():
 % endif
 
 % if not (curr == last and curr == 1):
+<div class="row">
+<div class="span12 text-center">
+<ul class="pagination">
     % if curr != 1:
             <% kwargs['_query']['page'] = curr-1 %>
-            <a class="pagination" href="${request.route_url(view, **kwargs)}" name="Previous Page">previous</a>
+            <li><a href="${request.route_url(view, **kwargs)}" name="Previous Page"><i class="glyphicon glyphicon-arrow-left"></i></a></li>
     % endif
 
     % if last < 8:
@@ -25,44 +28,47 @@ if 'search_query' in kwargs.keys():
             % for i in range(1,7):
             ${link_page(view, i, curr, **kwargs)}
             % endfor
-            <span class="pagination">...</span>
+            <li><span>...<span></li>
             <% kwargs['_query']['page'] = last %>
-            <a class="pagination" href="${request.route_url(view, **kwargs)}" name="Last Page">${last}</a>
+            <li><a  href="${request.route_url(view, **kwargs)}" name="Last Page">${last}</a></li>
 
         % elif last-curr < 6:
             <% kwargs['_query']['page'] = 1 %>
-            <a class="pagination" href="${request.route_url(view, **kwargs)}" name="First Page">1</a>
-            <span class="pagination">...</span>
+            <li><a  href="${request.route_url(view, **kwargs)}" name="First Page">1</a></li>
+            <li><span >...</span></li>
             % for i in range(last-5, last+1):
             ${link_page(view, i, curr, **kwargs)}
             % endfor
         % else:
             <% kwargs['_query']['page'] = 1 %>
-            <a class="pagination" href="${request.route_url(view, **kwargs)}" name="First Page">1</a>
+            <li><a  href="${request.route_url(view, **kwargs)}" name="First Page">1</a></li>
 
-            <span class="pagination">...</span>
+            <li><span >...</span></li>
             % for i in range(curr-2, curr+3):
             ${link_page(view, i, curr, **kwargs)}
             % endfor
-            <span class="pagination">...</span>
+            <li><span >...</span></li>
             <% kwargs['_query']['page'] = last %>
-            <a class="pagination" href="${request.route_url(view, **kwargs)}" name="Last Page">${last}</a>
+            <li><a  href="${request.route_url(view, **kwargs)}" name="Last Page">${last}</a></li>
 
         % endif
     % endif
 
     % if curr != last:
             <% kwargs['_query']['page'] = curr+1 %>
-        <a class="pagination" href="${request.route_url(view, **kwargs)}" name="Next Page">next</a>
+        <li><a  href="${request.route_url(view, **kwargs)}" name="Next Page"><i class="glyphicon glyphicon-arrow-right"></i></a></li>
     % endif
+</ul>
+</div> <!-- end span12 -->
+</div> <!-- end row -->
 % endif
 </%def>
 
 <%def name="link_page(view, page_num, curr_page, **kwargs)">
 % if page_num == curr_page:
-<span class="pagination" style="color:#d95b00;">${page_num}</span>
+<li><span  style="color:#d95b00;">${page_num}</span></li>
 % else:
     <% kwargs['_query']['page'] = page_num %>
-    <a class="pagination" href="${request.route_url(view, **kwargs)}" name="Go to page ${page_num}">${page_num}</a>
+    <li><a  href="${request.route_url(view, **kwargs)}" name="Go to page ${page_num}">${page_num}</a></li>
 % endif
 </%def>