Dashboard columns now respond to media queries, closes #106

Author: simonw

django_sql_dashboard/templates/django_sql_dashboard/_css.html

@@ -104,4 +104,21 @@
 .save-dashboard-form .helptext {
   color: #666;
   white-space: nowrap;
-}
+}
+ul.dashboard-columns {
+  column-count: 2;
+}
+ul.dashboard-columns li {
+  break-inside: avoid;
+  margin-bottom: 0.3em;
+}
+ul.dashboard-columns li p {
+  margin: 0;
+  color: #666;
+  font-size: 0.8em;
+}
+@media (max-width: 800px) {
+  ul.dashboard-columns {
+    column-count: auto;
+  }
+}

django_sql_dashboard/templates/django_sql_dashboard/dashboard.html

@@ -81,27 +81,29 @@ <h2 id="save-dashboard">Save this dashboard</h2>
 
 {% if saved_dashboards %}
   <h2>Saved dashboards</h2>
-  <ul style="column-count: 2">
+  <ul class="dashboard-columns">
     {% for dashboard, can_edit in saved_dashboards %}
-      <li style="break-inside: avoid;">
+      <li>
         <a href="{{ dashboard.get_absolute_url }}" title="{{ dashboard.description }}">{{ dashboard }}</a>
-        <br><span style="text-indent: 1em; color: #666; font-size: 0.8em">
+        <p>
           By <strong>{{ dashboard.owned_by }}</strong>,
           Visibility: {{ dashboard.view_summary }}
           {% if can_edit %}
             - <a href="{{ dashboard.get_edit_url }}">edit</a>
           {% endif %}
-        </span>
+        </p>
       </li>
     {% endfor %}
   </ul>
 {% endif %}
 
 <h2>Available tables</h2>
-<ul style="column-count: 2">
+<ul class="dashboard-columns">
   {% for table in available_tables %}
-  <li style="break-inside: avoid;"><a href="?sql={% filter sign_sql|urlencode %}select count(*) from {{ table.name }}{% endfilter %}&sql={% filter sign_sql|urlencode %}select * from {{ table.name }}{% endfilter %}">{{ table.name }}</a>
-    <br><span style="text-indent: 1em; color: #666; font-size: 0.8em">{{ table.columns }}</span></li>
+  <li>
+    <a href="?sql={% filter sign_sql|urlencode %}select count(*) from {{ table.name }}{% endfilter %}&sql={% filter sign_sql|urlencode %}select * from {{ table.name }}{% endfilter %}">{{ table.name }}</a>
+    <p>{{ table.columns }}</p>
+  </li>
   {% endfor %}
 </ul>