Render year log with an accordion

This is specially useful for many entries
yanqian · Nov 9, 2015 · 3287821 · 3287821
1 parent e152206
commit 3287821
Showing 1 changed file with 18 additions and 11 deletions.
diff --git a/wger/manager/templates/calendar/month.html b/wger/manager/templates/calendar/month.html
@@ -165,17 +165,24 @@ <h4>{% trans 'Log' %}</h4>
 {% endif %}
 
 {% regroup month_list by year as year_list %}
-{% for year in year_list reversed %}
-    <div class="panel panel-default">
-        <div class="panel-heading">
-            <h3 class="panel-title">{{ year.grouper }}</h3>
+    <div class="panel-group" id="accordion">
+    {% for year in year_list reversed %}
+        <div class="panel panel-default">
+            <div class="panel-heading" role="tab" id="heading{{ year.grouper }}">
+                <h4 class="panel-title">
+                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{ year.grouper }}" aria-expanded="true" aria-controls="collapse{{ year.grouper }}">
+                        {{ year.grouper }}
+                    </a>
+                </h4>
+            </div>
+            <div id="collapse{{ year.grouper }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{ year.grouper }}">
+                <div class="list-group">
+                    {% for month in year.list %}
+                        <a href="{% url 'manager:workout:calendar' owner_user year.grouper month.month %}" class="list-group-item">{{month|date:"F"}}</a>
+                    {% endfor %}
+                </div>
+            </div>
         </div>
-
-        <ul class="list-group">
-        {% for month in year.list %}
-            <a href="{% url 'manager:workout:calendar' owner_user year.grouper month.month %}" class="list-group-item">{{month|date:"F"}}</a>
-        {% endfor %}
-        </ul>
+    {% endfor %}
     </div>
-{% endfor %}
 {% endblock %}