Merge branch 'newbmarkstyle' of https://github.com/imransobir/qutebrowser into imransobir-newbmarkstyle

3 files changed, 94 insertions, 55 deletions

diff --git a/qutebrowser/html/bookmarks.html b/qutebrowser/html/bookmarks.html
index 2f82453ab..7e6f46ea9 100644
--- a/qutebrowser/html/bookmarks.html
+++ b/qutebrowser/html/bookmarks.html
@@ -1,34 +1,66 @@
-{% extends "base.html" %}
+{% extends "styled.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; }
+{{super()}}
+h1 {
+    margin-bottom: 10px;
+}
+
+.url a {
+    color: #444;
+}
+
+th {
+    text-align: left;
+}
+
+.qmarks .name {
+    padding-left: 5px;
+}
+
+.empty-msg {
+    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 %}
+<h1>Quickmarks</h1>
+
+{% if quickmarks|length %}
+<table class="qmarks">
+    <tbody>
+    {% for name, url in quickmarks %}
     <tr>
-        <td><a href="{{url}}">{{title}}</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-msg">You have no quickmarks</span>
+{% endif %}
+
+<h1>Bookmarks</h1>
+
+{% if bookmarks|length %}
+<table class="bmarks">
+    <tbody>
+    {% for url, title in bookmarks %}
     <tr>
-        <th><h3>Quickmark</h3></th>
-        <th><h3>URL</h3></th>
-    </tr>
-    {% for name, url in quickmarks %}
-    <tr>
-        <td><a href="{{url}}">{{name}}</a></td>
-        <td>{{url}}</td>
+        <td class="name"><a href="{{url}}">{{title | default(url, true)}}</a></td>
+        <td class="url"><a href="{{url}}">{{url}}</a></td>
     </tr>
     {% endfor %}
+    </tbody>
 </table>
+{% else %}
+<span class="empty-msg">You have no bookmarks</span>
+{% endif %}
 
 {% endblock %}
diff --git a/qutebrowser/html/history.html b/qutebrowser/html/history.html
index 4135fc627..94f82182f 100644
--- a/qutebrowser/html/history.html
+++ b/qutebrowser/html/history.html
@@ -1,29 +1,9 @@
-{% extends "base.html" %}
+{% extends "styled.html" %}
 
 {% block style %}
+{{super()}}
 body {
-    background: #fefefe;
-    font-family: sans-serif;
-    margin: 0 auto;
     max-width: 1440px;
-    padding-left: 20px;
-    padding-right: 20px;
-}
-
-h1 {
-    color: #444;
-    font-weight: normal;
-}
-
-table {
-    border-collapse: collapse;
-    width: 100%;
-}
-
-td {
-    max-width: 50%;
-    padding: 2px 5px;
-    text-align: left;
 }
 
 td.title {
@@ -36,19 +16,6 @@ td.time {
     white-space: nowrap;
 }
 
-a {
-    text-decoration: none;
-    color: #2562dc
-}
-
-a:hover {
-    text-decoration: underline;
-}
-
-tr:nth-child(odd) {
-    background-color: #f8f8f8;
-}
-
 .date {
     color: #888;
     font-size: 14pt;
@@ -66,7 +33,6 @@ tr:nth-child(odd) {
     color: #333;
     font-weight: bold;
 }
-
 {% endblock %}
 
 {% block content %}
diff --git a/qutebrowser/html/styled.html b/qutebrowser/html/styled.html
new file mode 100644
index 000000000..e2a608538
--- /dev/null
+++ b/qutebrowser/html/styled.html
@@ -0,0 +1,41 @@
+{% extends "base.html" %}
+
+{% block style %}
+a {
+    text-decoration: none;
+    color: #2562dc
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+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;
+}
+
+table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+tbody tr:nth-child(odd) {
+    background-color: #f8f8f8;
+}
+
+td {
+    max-width: 50%;
+    padding: 2px 5px;
+    text-align: left;
+}
+{% endblock %}