Added header with breadcrumbs and footer

Also cleaned up titles on various pages.

Closes #61

datasette/app.py

@@ -393,6 +393,7 @@ class RowView(BaseView):
             'rows': rows,
             'columns': columns,
             'primary_keys': pks,
+            'primary_key_values': pk_values,
         }, {
             'database_hash': hash,
             'row_link': None,

datasette/static/app.css

@@ -52,3 +52,15 @@ th {
         font-size: 0.8em;
     }
 }
+
+.hd {
+    border-bottom: 2px solid #ccc;
+}
+.ft {
+    margin-top: 1em;
+    border-top: 1px solid #ccc;
+    font-size: 0.8em;
+}
+.hd :link {
+    text-decoration: none;
+}

datasette/templates/base.html

@@ -14,5 +14,10 @@
 {% block content %}
 {% endblock %}
 
+<div class="ft">
+    Powered by <a href="https://github.com/simonw/datasette">Datasette</a>
+    {% if took_ms %}&middot; Query took {{ took_ms|round(3) }}ms{% endif %}
+</div>
+
 </body>
 </html>

datasette/templates/database.html

@@ -3,6 +3,8 @@
 {% block title %}{{ database }}{% endblock %}
 
 {% block content %}
+<div class="hd"><a href="/">home</a></div>
+
 <h1 style="padding-left: 10px; border-left: 10px solid #{{ database_hash[:6] }}">{{ database }}</h1>
 
 <p><a href="/{{ database }}-{{ database_hash }}.db">download {{ database }}.db</a></p>

datasette/templates/index.html

@@ -1,13 +1,13 @@
 {% extends "base.html" %}
 
-{% block title %}Databases{% endblock %}
+{% block title %}Datasette: {% for database in databases %}{{ database.name }}{% if not loop.last %}, {% endif %}{% endfor %}{% endblock %}
 
 {% block content %}
-<h1>Database{% if databases|length != 1 %}s{% endif %}</h1>
+<h1>Datasette</h1>
 {% for database in databases %}
     <h2 style="padding-left: 10px; border-left: 10px solid #{{ database.hash[:6] }}"><a href="{{ database.path }}">{{ database.name }}</a></h2>
     <p>{{ "{:,}".format(database.total_rows) }} rows in {{ database.tables_count }} table{% if database.tables_count != 1 %}s{% endif %}</p>
     <p>{% for table, count in database.tables_truncated %}<a href="{{ database.path }}/{{ table }}" title="{{ count }} rows">{{ table }}</a>{% if not loop.last %}, {% endif %}{% endfor %}{% if database.tables_more %}, <a href="{{ database.path }}">...</a>{% endif %}</p>
 {% endfor %}
 
-{% endblock %}
+{% endblock %}

datasette/templates/row.html

@@ -13,9 +13,9 @@
 {% endblock %}
 
 {% block content %}
-<h1 style="padding-left: 10px; border-left: 10px solid #{{ database_hash[:6] }}"><a href="/{{ database }}-{{ database_hash }}">{{ database }}</a></h1>
+<div class="hd"><a href="/">home</a> / <a href="/{{ database }}-{{ database_hash }}">{{ database }}</a> / <a href="/{{ database }}-{{ database_hash }}/{{ table }}">{{ table }}</a></div>
 
-<h2><a href="/{{ database }}-{{ database_hash }}/{{ table }}">{{ table }}</a></h2>
+<h1 style="padding-left: 10px; border-left: 10px solid #{{ database_hash[:6] }}">{{ table }}: {{ ', '.join(primary_key_values) }}</a></h1>
 
 <table>
     <thead>
@@ -33,5 +33,4 @@
     {% endfor %}
     </tbody>
 </table>
-{% if took_ms %}<small>Took {{ took_ms }}</small>{% endif %}
 {% endblock %}

datasette/templates/table.html

@@ -14,9 +14,13 @@
 {% endblock %}
 
 {% block content %}
-<h1 style="padding-left: 10px; border-left: 10px solid #{{ database_hash[:6] }}"><a href="/{{ database }}-{{ database_hash }}">{{ database }}</a></h1>
+<div class="hd"><a href="/">home</a> / <a href="/{{ database }}-{{ database_hash }}">{{ database }}</a></div>
 
-<h2>{{ table }}{% if total_rows != None %} ({{ "{:,}".format(total_rows) }} total row{% if total_rows == 1 %}{% else %}s{% endif %} in this table){% endif %}</h2>
+<h1 style="padding-left: 10px; border-left: 10px solid #{{ database_hash[:6] }}">{{ table }}</h1>
+
+{% if total_rows != None %}
+    <h2>{{ "{:,}".format(total_rows) }} total row{% if total_rows == 1 %}{% else %}s{% endif %} in this table</h2>
+{% endif %}
 
 <table>
     <thead>
@@ -41,5 +45,5 @@
 {% if after_link %}
     <p><a href="{{ after_link }}">Next page</a></p>
 {% endif %}
-{% if took_ms %}<small>Took {{ took_ms }}</small>{% endif %}
+
 {% endblock %}