Add "jump to" year links
authorAlex Chan <alex@alexwlchan.net>
Sun, 2 Feb 2020 22:45:44 +0000 (22:45 +0000)
committerAlex Chan <alex@alexwlchan.net>
Sun, 2 Feb 2020 22:45:44 +0000 (22:45 +0000)
static/style.css
templates/list_reviews.html

index f38b4fa..05d6db7 100644 (file)
@@ -190,3 +190,7 @@ footer a:hover {
   margin-top:    1em;
   margin-bottom: 1em;
 }
+
+#jump_to {
+  margin-bottom: -0.5em;
+}
index 219db19..399bd62 100644 (file)
@@ -9,8 +9,19 @@
 
   <h2>books i&rsquo;ve read</h2>
 
+  <p id="jump_to">jump to:
+    {% for year, _ in all_reviews %}
+    <a href="#books_by_year_{{ year }}">
+      {% if year %}{{ year }}{% else %}other times{% endif -%}
+    </a>
+    {% if not loop.last %} / {% endif %}
+    {% endfor %}
+  </p>
+
   {% for year, reviews in all_reviews %}
-  <div class="books_by_year">
+  <div class="divider">{{ loop.cycle('&#x2766;', '&#x2767;') | safe }}</div>
+
+  <div class="books_by_year" id="books_by_year_{{ year }}">
     <h3>the {{ reviews|length }} book{% if reviews|length != 1 %}s{% endif %}
       {% if year == this_year %}
         i&rsquo;ve read so far
@@ -63,9 +74,5 @@
     {% endfor %}
   </div>
 
-  {% if not loop.last %}
-  <div class="divider">{{ loop.cycle('&#x2766;', '&#x2767;') | safe }}</div>
-  {% endif %}
-
   {% endfor %}
 {% endblock %}
\ No newline at end of file