UI: Improve panel collapse visibility (Z#23132549) (#3709)

* Move collapse indicator in panels before label

* only hide collapse indicator in panel titles

* remove unneeded collapse-indicators in pretix-control

* remove unneeded collapse-indicators in presale

* move collapse-indicator to left in variants-toggle-button

* remove chevron and use default collapse-indicator in control-variants

src/pretix/control/templates/pretixcontrol/event/mail_settings_fragment.html

@@ -5,7 +5,6 @@
     <summary class="panel-heading">
         <h4 class="panel-title">
             <strong>{% trans title %}</strong>
-            <i class="fa fa-angle-down collapse-indicator"></i>
         </h4>
     </summary>
     <div id="{{ pid }}">

src/pretix/control/templates/pretixcontrol/item/include_variations.html

@@ -17,7 +17,6 @@
                     <div class="row">
                         <div class="col-md-4 col-xs-12">
                             <strong class="panel-title">
-                                <span class="fa fa-fw chevron"></span>
                                 <span class="fa fa-warning text-danger hidden variation-error"></span>
                                 <span class="variation-name">
                                     Variation name
@@ -125,7 +124,6 @@
                     <div class="row">
                         <div class="col-md-4 col-xs-12">
                             <strong class="panel-title">
-                                <span class="fa fa-fw chevron"></span>
                                 <span class="fa fa-warning text-danger hidden variation-error"></span>
                                 <span class="variation-name">
                                     {% trans "New variation" %}

src/pretix/control/templates/pretixcontrol/order/change_questions.html

@@ -25,7 +25,6 @@
                             <strong>{% trans "Invoice information" %} {% if not request.event.settings.invoice_address_required %}
                                 {% trans "(optional)" %}
                             {% endif %}</strong>
-                            <i class="fa fa-angle-down collapse-indicator"></i>
                         </h4>
                     </summary>
                     <div id="invoice">
@@ -42,7 +41,6 @@
                             <strong>{{ pos.item }}{% if pos.variation %}
                                 – {{ pos.variation }}
                             {% endif %}</strong>
-                            <i class="fa fa-angle-down collapse-indicator"></i>
                         </h4>
                     </summary>
                     <div id="cp{{ pos.id }}">

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

@@ -21,7 +21,6 @@
                             <strong>{{ form.item.name }}{% if form.variation %}
                                 – {{ form.variation }}
                             {% endif %}</strong>
-                            <i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
                         </h3>
                     </summary>
                     <div id="cp{{ form.pos.pk }}">

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

@@ -28,7 +28,6 @@
                             {% trans "Cart expired" %}
                         {% endif %}
                     </strong>
-                    <i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
                 </span>
             </h2>
         </summary>

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

@@ -13,7 +13,6 @@
                         <strong>{{ form.position.item.name }}{% if form.position.variation %}
                             – {{ form.position.variation }}
                         {% endif %}</strong>
-                        <i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
                     </h4>
                 </summary>
                 <div>

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

@@ -21,7 +21,6 @@
                 <summary class="panel-heading">
                     <h3 class="panel-title">
                         <strong>{% trans "Contact information" %}</strong>
-                        <i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
                     </h3>
                 </summary>
                 <div id="contact">
@@ -40,8 +39,6 @@
                             <strong>{% trans "Invoice information" %}{% if not event.settings.invoice_address_required and not event.settings.invoice_name_required %}
                                 {% trans "(optional)" %}
                             {% endif %}</strong>
-
-                            <i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
                         </h3>
                     </summary>
                     {% if addresses_data %}
@@ -88,10 +85,7 @@
                                         <button type="button" data-id="{{ forloop.counter0 }}" name="copy"
                                                 class="js-copy-answers btn btn-default btn-xs">{% trans "Copy answers from above" %}</button>
                                     {% endif %}
-                                    <i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
                                 </span>
-                            {% else %}
-                                <i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
                             {% endif %}
                         </h3>
                     </summary>

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

@@ -97,8 +97,8 @@
                                         data-label-alt="{% trans "Hide variants" %}"
                                         aria-expanded="false"
                                         aria-label="{% blocktrans trimmed with item=item.name count=item.available_variations|length %}Show {{count}} variants of {{item}}{% endblocktrans %}">
-                                    <span>{% trans "Show variants" %}</span>
                                     <i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
+                                    <span>{% trans "Show variants" %}</span>
                                 </button>
                             {% endif %}
                         </div>

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

@@ -10,16 +10,13 @@
                 <i class="fa fa-shopping-cart" aria-hidden="true"></i>
                 <strong>{% trans "Your cart" %}</strong>
             </span>
-            <span aria-hidden="true">
+            <strong id="cart-deadline-short" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}" aria-hidden="true">
-                <strong id="cart-deadline-short" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}" aria-hidden="true">
+                {% if cart.minutes_left > 0 or cart.seconds_left > 0 %}
-                    {% if cart.minutes_left > 0 or cart.seconds_left > 0 %}
+                    {{ cart.minutes_left|stringformat:"02d" }}:{{ cart.seconds_left|stringformat:"02d" }}
-                        {{ cart.minutes_left|stringformat:"02d" }}:{{ cart.seconds_left|stringformat:"02d" }}
+                {% else %}
-                    {% else %}
+                    {% trans "Cart expired" %}
-                        {% trans "Cart expired" %}
+                {% endif %}
-                    {% endif %}
+            </strong>
-                </strong>
-                <i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
-            </span>
         </h2>
     </summary>
     <div>

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

@@ -89,8 +89,8 @@
                                     data-label-alt="{% trans "Hide variants" %}"
                                     aria-expanded="false"
                                     aria-label="{% blocktrans trimmed with item=item.name count=item.available_variations|length %}Show {{count}} variants of {{ item }}{% endblocktrans %}">
-                                    <span>{% trans "Show variants" %}</span>
                                     <i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
+                                    <span>{% trans "Show variants" %}</span>
                                 </button>
                             {% endif %}
                         </div>

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

@@ -33,7 +33,6 @@
                                     {% trans "Contact information" %}
                                 {% endif %}
                             </strong>
-                            <i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
                         </h4>
                     </summary>
                     <div id="invoice" class="panel-collapse">
@@ -55,7 +54,6 @@
                             <strong>{{ pos.item.name }}{% if pos.variation %}
                                 – {{ pos.variation }}
                             {% endif %}</strong>
-                            <i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
                         </h4>
                     </summary>
                     <div id="cp{{ pos.id }}">

src/pretix/static/pretixcontrol/scss/main.scss

@@ -482,7 +482,7 @@ td > .dl-horizontal {
     transform: rotate(180deg);
 }
 
-.panel-title a[data-toggle="collapse"], details h3.panel-title, details h4.panel-title {
+.panel-title a[data-toggle="collapse"], details .panel-title {
     display: flex;
     padding: 10px 15px;
     margin: -10px -15px;
@@ -490,6 +490,37 @@ td > .dl-horizontal {
     justify-content: space-between;
     outline: 0;
     text-decoration: none;
+    position: relative;
+    padding-left: 30px;
+}
+details strong.panel-title {
+    display: inline-block;
+}
+
+.panel-title a[data-toggle="collapse"] .collapse-indicator,
+details .panel-title .collapse-indicator {
+    /* hide old collapse indicators until they are all removed from HTML */
+    display: none;
+}
+
+.panel-title a[data-toggle="collapse"]::before,
+details .panel-title::before {
+    position: absolute;
+    top: 50%;
+    left: 10px;
+    margin-top: -.5em;
+    content: "";
+    width: 1em;
+    height: 1em;
+    font: normal normal normal 14px/1 FontAwesome;
+    display: inline-block;
+    text-align: center;
+    transform: rotate(-90deg);
+    transition: transform 150ms ease-in 0s;
+}
+.panel-title a:not(.collapsed)::before,
+details.details-open .panel-title::before {
+    transform: rotate(0deg);
 }
 
 .panel-title a[data-toggle="collapse"]:hover {

src/pretix/static/pretixpresale/scss/main.scss

@@ -342,13 +342,6 @@ body.loading .container {
     transition: all 150ms ease-in 0s;
 }
 
-.panel-title a:not(.collapsed) .collapse-indicator {
-    -webkit-transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
-    -moz-transform: rotate(180deg);
-    transform: rotate(180deg);
-}
-
 .panel-title a[data-toggle="collapse"], details .panel-title {
     display: flex;
     padding: 0.75*$line-height-computed;
@@ -357,6 +350,34 @@ body.loading .container {
     justify-content: space-between;
     outline: 0;
     text-decoration: none;
+    position: relative;
+    padding-left: 30px;
+}
+
+.panel-title a[data-toggle="collapse"] .collapse-indicator,
+details .panel-title .collapse-indicator {
+    /* hide old collapse indicators until they are all removed from HTML */
+    display: none;
+}
+
+.panel-title a[data-toggle="collapse"]::before,
+details .panel-title::before {
+    position: absolute;
+    top: 50%;
+    left: 10px;
+    margin-top: -.5em;
+    content: "";
+    width: 1em;
+    height: 1em;
+    font: normal normal normal 14px/1 FontAwesome;
+    display: inline-block;
+    text-align: center;
+    transform: rotate(-90deg);
+    transition: transform 150ms ease-in 0s;
+}
+.panel-title a:not(.collapsed)::before,
+details.details-open .panel-title::before {
+    transform: rotate(0deg);
 }
 
 .panel-default .panel-title a[data-toggle="collapse"]:hover {
@@ -389,13 +410,12 @@ details summary {
     -webkit-user-select: none;
     user-select: none;
 }
-.nojs details[open] .panel-heading .collapse-indicator,
+.nojs details:not([open], .details-open) .panel-heading .collapse-indicator,
-details.details-open .panel-heading .collapse-indicator,
+[aria-expanded=false]>.collapse-indicator {
-[aria-expanded=true]>.collapse-indicator {
+    -webkit-transform: rotate(-90deg);
-    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(-90deg);
-    -ms-transform: rotate(180deg);
+    -moz-transform: rotate(-90deg);
-    -moz-transform: rotate(180deg);
+    transform: rotate(-90deg);
-    transform: rotate(180deg);
 }
 
 details.sneak-peek {