Update qute:bookmarks design.

qutebrowser/browser/qutescheme.py

@@ -156,6 +156,11 @@ def qute_bookmarks(_url):
     quickmarks = sorted(objreg.get('quickmark-manager').marks.items(),
                         key=lambda x: x[0])  # Sort by name
 
+    # bookmark title is url if bookmark has no title
+    for i, item in enumerate(bookmarks):
+        if not item[1]:
+            bookmarks[i] = (item[0], item[0])
+
     html = jinja.render('bookmarks.html',
                         title='Bookmarks',
                         bookmarks=bookmarks,

qutebrowser/html/bookmarks.html

@@ -1,34 +1,95 @@
 {% extends "base.html" %}
 
 {% block style %}
-table { border: 1px solid grey; border-collapse: collapse; width: 100%;}
-th, td { border: 1px solid grey; padding: 0px 5px; }
-th { background: lightgrey; }
+body {
+    background: #fefefe;
+    font-family: sans-serif;
+    margin: 0 auto;
+    max-width: 1280px;
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+h1 {
+    color: #444;
+    font-weight: normal;
+    margin-bottom: 10px;
+}
+
+a {
+    text-decoration: none;
+    color: #2562dc
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+.url a {
+    color: #444;
+}
+
+table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+th {
+    text-align: left;
+}
+
+tbody tr:nth-child(odd) {
+    background-color: #f8f8f8;
+}
+
+.qmarks .name {
+    padding-left: 5px;
+}
+
+.empty {
+    background-color: #f8f8f8;
+    color: #444;
+    display: inline-block;
+    text-align: center;
+    width: 100%;
+}
+
 {% endblock %}
 
 {% block content %}
 
-<table>
-    <tr>
-        <th><h3>Bookmark</h3></th>
-        <th><h3>URL</h3></th>
-    </tr>
-    {% for url, title in bookmarks %}
-    <tr>
-        <td><a href="{{url}}">{{title}}</a></td>
-        <td>{{url}}</td>
-    </tr>
-    {% endfor %}
-    <tr>
-        <th><h3>Quickmark</h3></th>
-        <th><h3>URL</h3></th>
-    </tr>
+<h1>Quickmarks</h1>
+
+{% if quickmarks|length %}
+<table class="qmarks">
+    <tbody>
     {% for name, url in quickmarks %}
     <tr>
-        <td><a href="{{url}}">{{name}}</a></td>
-        <td>{{url}}</td>
+        <td class="name"><a href="{{url}}">{{name}}</a></td>
+        <td class="url"><a href="{{url}}">{{url}}</a></td>
     </tr>
     {% endfor %}
+    </tbody>
 </table>
+{% else %}
+<span class="empty">You have no quickmarks</span>
+{% endif %}
+
+<h1>Bookmarks</h1>
+
+{% if bookmarks|length %}
+<table class="bmarks">
+    <tbody>
+    {% for url, title in bookmarks %}
+    <tr>
+        <td class="name"><a href="{{url}}">{{title}}</a></td>
+        <td class="url"><a href="{{url}}">{{url}}</a></td>
+    </tr>
+    {% endfor %}
+    </tbody>
+</table>
+{% else %}
+<span class="empty">You have no bookmarks</span>
+{% endif %}
 
 {% endblock %}