nonstop/templates/nonstop/search.html

   1 {% extends "base.html" %}
   2 {% load i18n %}
   3
   4 {% block appbar %}
   5 <h2>Nonstop</h2>
   6 {% endblock %}
   7
   8 {% block content %}
   9 <form id="track-search">
  10   {{ form.as_p }}
  11   <button>{% trans "Search" %}</button>
  12 </form>
  13 <hr>
  14
  15 {% if tracks %}
  16 <table>
  17   {% for track in tracks %}
  18   <tr><td class="track"><a href="{% url 'track-view' pk=track.id %}">{{track.title}}</a></td>
  19       <td class="artist">{{track.artist.name}}</td>
  20       <td class="zone">{% for zone in track.nonstop_zones.all %}{{ zone.title }}{% if not forloop.last %}, {% endif %}{% endfor %}</td>
  21       <td class="since">{% if track.added_to_nonstop_timestamp %}(since {{track.added_to_nonstop_timestamp|date:"SHORT_DATE_FORMAT" }}{% endif %}</td>
  22   </tr>
  23   {% endfor %}
  24 </table>
  25
  26 <div class="pagination">
  27     <span class="step-links">
  28         {% if tracks.has_previous %}
  29             <a href="?{{ qs }}&page={{ tracks.previous_page_number }}">←</a>
  30         {% endif %}
  31
  32         <span class="current">
  33             {{ tracks.number }} / {{ tracks.paginator.num_pages }}
  34         </span>
  35
  36         {% if tracks.has_next %}
  37             <a href="?{{ qs }}&page={{ tracks.next_page_number }}">→</a>
  38         {% endif %}
  39     </span>
  40 </div>
  41 {% endif %}
  42
  43 <style>
  44 table {
  45         max-width: 100%;
  46         min-width: 50em;
  47 }
  48 td {
  49         padding: 0.4ex 1ex;
  50 }
  51 td.track {
  52         min-width: 30em;
  53 }
  54 td.artist {
  55         min-width: 20em;
  56 }
  57 td.zone {
  58         min-width: 10em;
  59 }
  60 td.since {
  61         min-width: 10em;
  62 }
  63 tr:nth-child(even) {
  64   background: #f2f2f2;
  65 }
  66
  67 .step-links a {
  68         padding: 1ex;
  69 }
  70
  71 div.pagination {
  72         margin-top: 1em;
  73 }
  74 </style>
  75
  76 {% endblock %}