Clarify UX around subevent selection

src/pretix/presale/templates/pretixpresale/event/index.html

@@ -95,18 +95,35 @@
 
     {% if show_dates %}
         {% if subevent %}
-            <a class="subevent-toggle">
+            {% if show_cart %}
-                {% trans "View other date" %}
+                <a class="subevent-toggle btn btn-primary btn-block btn-lg">
-            </a>
+                    {% trans "Add tickets for a different date" %}
+                </a>
+            {% else %}
+                <a class="subevent-toggle btn btn-default btn-block">
+                    {% trans "View other date" %}
+                </a>
+            {% endif %}
         {% else %}
             <h3>{% trans "Choose date to buy a ticket" %}</h3>
         {% endif %}
-        <div class="subevent-list">
+        <div class="panel panel-default subevent-list">
-            {% if list_type == "calendar" %}
+            <div class="panel-heading">
-                {% include "pretixpresale/event/fragment_subevent_calendar.html" %}
+                {% if subevent %}
-            {% else %}
+                    {% trans "Other dates" context "subevent" %}
-                {% include "pretixpresale/event/fragment_subevent_list.html" %}
+                {% else %}
-            {% endif %}
+                    {% trans "Dates" context "subevent" %}
+                {% endif %}
+            </div>
+            <div class="panel-body">
+                <div>
+                    {% if list_type == "calendar" %}
+                        {% include "pretixpresale/event/fragment_subevent_calendar.html" %}
+                    {% else %}
+                        {% include "pretixpresale/event/fragment_subevent_list.html" %}
+                    {% endif %}
+                </div>
+            </div>
         </div>
         {% if subevent %}
             <h2 class="subevent-head">{{ subevent.name }}</h2>

src/pretix/static/pretixpresale/js/ui/main.js

@@ -181,6 +181,7 @@ $(function () {
         $(".subevent-list").hide();
         $(".subevent-toggle").css("display", "block").click(function () {
             $(".subevent-list").slideToggle(300);
+            $(".subevent-toggle").slideToggle(300)
         });
     }
 

src/pretix/static/pretixpresale/scss/_event.scss

@@ -189,18 +189,7 @@ section.front-page {
     }
 }
 .subevent-toggle {
-    padding: 5px;
-    text-align: center;
-    background-color: darken($gray-lighter, 30%);
     display: none;
-    color: white;
-    cursor: pointer;
-
-    &:hover {
-        color: white;
-        text-decoration: none;
-        background-color: darken($gray-lighter, 40%);
-    }
 }
 h2.subevent-head {
     margin-top: 10px;