[Tracker-discuss] [issue406] Ugly navbar in default view

[Ezio Melotti]

Ezio Melotti <ezio.melotti at gmail.com> added the comment:

Attached patch kills the table and replaces it with div/span/css.
The good news are that:
 * the navbar looks like it was before;
 * the behavior is now consistent in Firefox and Chrome.
The bad news is that:
 * the navbar takes 100% of the #content, so, if there are enough columns to make the table overflow from the #content on the right, the navbar will be shorter than the table.
The good news about the bad news is that:
 * you don't have to scroll on the right of the page to find the "next >>".

Note that normally all the columns fit the width of the page.  The http://bugs.python.org/issue page is a corner case because it lists them all, making the table overflow.

_______________________________________________________
PSF Meta Tracker <metatracker at psf.upfronthosting.co.za>
<http://psf.upfronthosting.co.za/roundup/meta/issue406>
_______________________________________________________
-------------- next part --------------
Index: issue.index.html
===================================================================
--- issue.index.html	(revision 88842)
+++ issue.index.html	(working copy)
@@ -93,37 +93,33 @@
   </tr>
 
  </tal:block>
-
- <metal:index define-macro="batch-footer">
- <tr tal:condition="batch">
-  <th tal:attributes="colspan python:len(request.columns)">
-   <table width="100%">
-    <tr class="navigation">
-     <th>
-      <a tal:define="prev batch/previous" tal:condition="prev"
-         tal:attributes="href python:request.indexargs_url(request.classname,
-         {'@startwith':prev.first, '@pagesize':prev.size})"
-         i18n:translate="">&lt;&lt; previous</a>
-      &nbsp;
-     </th>
-     <th i18n:translate=""><span tal:replace="batch/start" i18n:name="start"
-     />..<span tal:replace="python: batch.start + batch.length -1" i18n:name="end"
-     /> out of <span tal:replace="batch/sequence_length" i18n:name="total"
-     /></th>
-     <th>
-      <a tal:define="next batch/next" tal:condition="next"
-         tal:attributes="href python:request.indexargs_url(request.classname,
-         {'@startwith':next.first, '@pagesize':next.size})"
-         i18n:translate="">next &gt;&gt;</a>
-      &nbsp;
-     </th>
-    </tr>
-   </table>
-  </th>
- </tr>
- </metal:index>
 </table>
 
+<metal:index define-macro="batch-footer">
+ <div tal:condition="batch" class="navigation">
+     <span>
+         <a tal:define="prev batch/previous" tal:condition="prev"
+            tal:attributes="href python:request.indexargs_url(request.classname,
+            {'@startwith':prev.first, '@pagesize':prev.size})"
+            i18n:translate="">&lt;&lt; previous</a>
+         &nbsp;
+     </span>
+     <span>
+         <span tal:replace="batch/start" name="start" />..
+         <span tal:replace="python: batch.start + batch.length -1" name="end"/> out of
+         <span tal:replace="batch/sequence_length" name="total"/>
+     </span>
+     <span>
+         <a tal:define="next batch/next" tal:condition="next"
+            tal:attributes="href python:request.indexargs_url(request.classname,
+            {'@startwith':next.first, '@pagesize':next.size})"
+            i18n:translate="">next &gt;&gt;</a>
+         &nbsp;
+     </span>
+   </div>
+</metal:index>
+
+
 <a tal:attributes="href python:request.indexargs_url('issue',
             {'@action':'export_csv'})" i18n:translate="">Download as CSV</a>
 
Index: style.css
===================================================================
--- style.css	(revision 88848)
+++ style.css	(working copy)
@@ -233,18 +233,23 @@
   empty-cells: show;
 }
 
-table.list tr.navigation th {
-  width: 33%;
-  border-style: hidden;
+div.navigation {
+  background-color: #e0e0e0;
+}
+
+div.navigation span {
+  display: block;
+  width: 33.3%;
+  float: left;
   text-align: center;
+  font-weight: bold;
+  color: #234764;
+  background-color: #e0e0e0;
 }
-table.list tr.navigation td {
-    border: none
-}
-table.list tr.navigation th:first-child {
+div.navigation span:first-child {
   text-align: left;
 }
-table.list tr.navigation th:last-child {
+div.navigation span:last-child {
   text-align: right;
 }