Refactor templates for better top nav customization, refs #540

simonw · Jul 7, 2019 · 99eb057 · 99eb057
1 parent 726e824
commit 99eb057
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 29 deletions.
diff --git a/datasette/static/app.css b/datasette/static/app.css
@@ -1,5 +1,6 @@
 body {
-    margin: 0 1em;
+    margin: 0;
+    padding: 0;
     font-family: "Helvetica Neue", sans-serif;
     font-size: 1rem;
     font-weight: 400;
@@ -8,6 +9,9 @@ body {
     text-align: left;
     background-color: #fff;
 }
+.bd {
+    margin: 0 1em;
+}
 table {
     border-collapse: collapse;
 }
@@ -82,9 +86,21 @@ table a:visited {
 
 .hd {
     border-bottom: 2px solid #ccc;
+    padding: 0.2em 1em;
+    background-color: #eee;
+    overflow: hidden;
+    box-sizing: border-box;
+}
+.hd p {
+    margin: 0;
+    padding: 0;
+}
+.hd .crumbs {
+    float: left;
 }
 .ft {
     margin: 1em 0;
+    padding: 0.5em 1em 0 1em;
     border-top: 1px solid #ccc;
     font-size: 0.8em;
 }

diff --git a/datasette/templates/_footer.html b/datasette/templates/_footer.html
@@ -0,0 +1,21 @@
+Powered by <a href="https://github.com/simonw/datasette" title="Datasette v{{ datasette_version }}">Datasette</a>
+{% if query_ms %}&middot; Query took {{ query_ms|round(3) }}ms{% endif %}
+{% if metadata %}
+    {% if metadata.license or metadata.license_url %}&middot; Data license:
+        {% if metadata.license_url %}
+            <a href="{{ metadata.license_url }}">{{ metadata.license or metadata.license_url }}</a>
+        {% else %}
+            {{ metadata.license }}
+        {% endif %}
+    {% endif %}
+    {% if metadata.source or metadata.source_url %}&middot;
+        Data source: {% if metadata.source_url %}
+            <a href="{{ metadata.source_url }}">
+        {% endif %}{{ metadata.source or metadata.source_url }}{% if metadata.source_url %}</a>{% endif %}
+    {% endif %}
+    {% if metadata.about or metadata.about_url %}&middot;
+        About: {% if metadata.about_url %}
+            <a href="{{ metadata.about_url }}">
+        {% endif %}{{ metadata.about or metadata.about_url }}{% if metadata.about_url %}</a>{% endif %}
+    {% endif %}
+{% endif %}
diff --git a/datasette/templates/base.html b/datasette/templates/base.html
@@ -14,33 +14,15 @@
 </head>
 <body class="{% block body_class %}{% endblock %}">
 
+<nav class="hd">{% block nav %}{% endblock %}</nav>
+
+<div class="bd">
 {% block content %}
 {% endblock %}
-
-<div class="ft">
-    Powered by <a href="https://github.com/simonw/datasette" title="Datasette v{{ datasette_version }}">Datasette</a>
-    {% if query_ms %}&middot; Query took {{ query_ms|round(3) }}ms{% endif %}
-    {% if metadata %}
-        {% if metadata.license or metadata.license_url %}&middot; Data license:
-            {% if metadata.license_url %}
-                <a href="{{ metadata.license_url }}">{{ metadata.license or metadata.license_url }}</a>
-            {% else %}
-                {{ metadata.license }}
-            {% endif %}
-        {% endif %}
-        {% if metadata.source or metadata.source_url %}&middot;
-            Data source: {% if metadata.source_url %}
-                <a href="{{ metadata.source_url }}">
-            {% endif %}{{ metadata.source or metadata.source_url }}{% if metadata.source_url %}</a>{% endif %}
-        {% endif %}
-        {% if metadata.about or metadata.about_url %}&middot;
-            About: {% if metadata.about_url %}
-                <a href="{{ metadata.about_url }}">
-            {% endif %}{{ metadata.about or metadata.about_url }}{% if metadata.about_url %}</a>{% endif %}
-        {% endif %}
-    {% endif %}
 </div>
 
+<div class="ft">{% block footer %}{% include "_footer.html" %}{% endblock %}</div>
+
 {% for body_script in body_scripts %}
     <script>{{ body_script }}</script>
 {% endfor %}

diff --git a/datasette/templates/database.html b/datasette/templates/database.html
@@ -9,8 +9,14 @@
 
 {% block body_class %}db db-{{ database|to_css_class }}{% endblock %}
 
+{% block nav %}
+    <p class="crumbs">
+        <a href="/">home</a>
+    </p>
+    {{ super() }}
+{% endblock %}
+
 {% block content %}
-<div class="hd"><a href="/">home</a></div>
 
 <h1 style="padding-left: 10px; border-left: 10px solid #{{ database_color(database) }}">{{ metadata.title or database }}</h1>
 

diff --git a/datasette/templates/index.html b/datasette/templates/index.html
@@ -21,7 +21,8 @@ <h2 style="padding-left: 10px; border-left: 10px solid #{{ database.color }}"><a
             {{ "{:,}".format(database.views_count) }} view{% if database.views_count != 1 %}s{% endif %}
         {% endif %}
     </p>
-    <p>{% for table in database.tables_and_views_truncated %}<a href="{{ database.path }}/{{ table.name|quote_plus }}"{% if table.count %} title="{{ table.count }} rows"{% endif %}>{{ table.name }}</a>{% if not loop.last %}, {% endif %}{% endfor %}{% if database.tables_and_views_more %}, <a href="{{ database.path }}">...</a>{% endif %}</p>
+    <p>{% for table in database.tables_and_views_truncated %}<a href="{{ database.path }}/{{ table.name|quote_plus 
+    }}"{% if table.count %} title="{{ table.count }} rows"{% endif %}>{{ table.name }}</a>{% if not loop.last %}, {% endif %}{% endfor %}{% if database.tables_and_views_more %}, <a href="{{ database.path }}">...</a>{% endif %}</p>
 {% endfor %}
 
 {% endblock %}
diff --git a/datasette/templates/row.html b/datasette/templates/row.html
@@ -15,9 +15,16 @@
 
 {% block body_class %}row db-{{ database|to_css_class }} table-{{ table|to_css_class }}{% endblock %}
 
-{% block content %}
-<div class="hd"><a href="/">home</a> / <a href="{{ database_url(database) }}">{{ database }}</a> / <a href="{{ database_url(database) }}/{{ table|quote_plus }}">{{ table }}</a></div>
+{% block nav %}
+    <p class="crumbs">
+        <a href="/">home</a> /
+        <a href="{{ database_url(database) }}">{{ database }}</a> /
+        <a href="{{ database_url(database) }}/{{ table|quote_plus }}">{{ table }}</a>
+    </p>
+    {{ super() }}
+{% endblock %}
 
+{% block content %}
 <h1 style="padding-left: 10px; border-left: 10px solid #{{ database_color(database) }}">{{ table }}: {{ ', '.join(primary_key_values) }}</a></h1>
 
 {% block description_source_license %}{% include "_description_source_license.html" %}{% endblock %}

diff --git a/datasette/templates/table.html b/datasette/templates/table.html
@@ -16,8 +16,15 @@
 
 {% block body_class %}table db-{{ database|to_css_class }} table-{{ table|to_css_class }}{% endblock %}
 
+{% block nav %}
+    <p class="crumbs">
+        <a href="/">home</a> /
+        <a href="{{ database_url(database) }}">{{ database }}</a>
+    </p>
+    {{ super() }}
+{% endblock %}
+
 {% block content %}
-<div class="hd"><a href="/">home</a> / <a href="{{ database_url(database) }}">{{ database }}</a></div>
 
 <h1 style="padding-left: 10px; border-left: 10px solid #{{ database_color(database) }}">{{ metadata.title or table }}{% if is_view %} (view){% endif %}</h1>