From dbcf47468bd88bed0938596f90ed95bfca4ab5ac Mon Sep 17 00:00:00 2001
From: Kovid Goyal <kovid@kovidgoyal.net>
Date: Thu, 14 Oct 2010 09:38:52 -0600
Subject: [PATCH] More semantic table markup.

---
 resources/content_server/browse/browse.css | 25 +++++++++++++++-------
 resources/content_server/browse/browse.js  |  4 +---
 src/calibre/library/server/browse.py       | 10 ++++-----
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/resources/content_server/browse/browse.css b/resources/content_server/browse/browse.css
index 7af4aeb5f4..0222aefdb4 100644
--- a/resources/content_server/browse/browse.css
+++ b/resources/content_server/browse/browse.css
@@ -206,29 +206,38 @@ h2.library_name {
 /* }}} */
 
 /* Category {{{ */
-.category table {
-    margin: 0;
-    padding: 0;
+.category > div.category-container {
     width: 100%;
-    border-collapse: collapse;
+    margin-top: 1ex;
+    margin-bottom: 1ex;
+    display: table;
 }
 
-.category tr.category-item td {
+.category div.category-item {
+    display: table-row;
+}
+
+.category div.category-item > div {
     padding: 0.75em;
     text-align: center;
     cursor: pointer;
+    display: table-cell;
 }
 
-.category tr.category-item:hover {
+.category div.category-name { font-weight: bold }
+
+.category div.category-item:hover > div {
     background-color: #d6d3c9;
     -moz-box-shadow: 5px 5px 5px #ccc;
     -webkit-box-shadow: 5px 5px 5px #ccc;
     box-shadow: 5px 5px 5px #ccc;
+    border-radius: 15px;
+    -moz-border-radius: 15px;
+    -webkit-border-radius: 15px;
 
 }
 
-.category tr.category-item h4 { display: inline }
-.category tr.category-item span.href { display: none }
+.category div.category-item span.href { display: none }
 
 #groups span.load_href { display: none }
 
diff --git a/resources/content_server/browse/browse.js b/resources/content_server/browse/browse.js
index a841fb5e5d..f3f278fc48 100644
--- a/resources/content_server/browse/browse.js
+++ b/resources/content_server/browse/browse.js
@@ -77,8 +77,6 @@ function init() {
 function toplevel() {
     $(".sort_select").hide();
 
-    $(".toplevel li").corner("15px");
-
     $(".toplevel li").click(function() {
         var href = $(this).children("span").html();
         window.location = href;
@@ -92,7 +90,7 @@ function render_error(msg) {
 
 // Category feed {{{
 function category() {
-    $(".category tr").click(function() {
+    $(".category .category-item").click(function() {
         var href = $(this).find("span.href").html();
         window.location = href;
     });
diff --git a/src/calibre/library/server/browse.py b/src/calibre/library/server/browse.py
index 4d860b2d0d..6a557e423a 100644
--- a/src/calibre/library/server/browse.py
+++ b/src/calibre/library/server/browse.py
@@ -106,10 +106,10 @@ def render_rating(rating, container='span'): # {{{
 def get_category_items(category, items, db, datatype): # {{{
 
     def item(i):
-        templ = (u'<tr title="{4}" class="category-item">'
-                '<td><h4>{0}</h4></td><td>{1}</td>'
-                '<td>{2}'
-                '<span class="href">{3}</span></td></tr>')
+        templ = (u'<div title="{4}" class="category-item">'
+                '<div class="category-name">{0}</div><div>{1}</div>'
+                '<div>{2}'
+                '<span class="href">{3}</span></div></div>')
         rating, rstring = render_rating(i.avg_rating)
         name = xml(i.name)
         if datatype == 'rating':
@@ -126,7 +126,7 @@ def get_category_items(category, items, db, datatype): # {{{
                 xml(desc), xml(quote(href)), rstring)
 
     items = list(map(item, items))
-    return '\n'.join(['<table>'] + items + ['</table>'])
+    return '\n'.join(['<div class="category-container">'] + items + ['</div>'])
 
 # }}}