From 69c2a1b3c2657c94d2ff50312f3c6eb8dba5b972 Mon Sep 17 00:00:00 2001
From: Richard Schreiber <schreiber@rami.io>
Date: Mon, 13 Nov 2023 14:23:28 +0100
Subject: [PATCH] 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
---
 .../event/mail_settings_fragment.html         |  1 -
 .../item/include_variations.html              |  2 -
 .../pretixcontrol/order/change_questions.html |  2 -
 .../pretixpresale/event/checkout_addons.html  |  1 -
 .../pretixpresale/event/checkout_base.html    |  1 -
 .../event/checkout_membership.html            |  1 -
 .../event/checkout_questions.html             |  6 ---
 .../event/fragment_addon_choice.html          |  2 +-
 .../event/fragment_cart_box.html              | 17 +++----
 .../event/fragment_product_list.html          |  2 +-
 .../pretixpresale/event/order_modify.html     |  2 -
 .../static/pretixcontrol/scss/main.scss       | 33 ++++++++++++-
 .../static/pretixpresale/scss/main.scss       | 48 +++++++++++++------
 13 files changed, 75 insertions(+), 43 deletions(-)

diff --git a/src/pretix/control/templates/pretixcontrol/event/mail_settings_fragment.html b/src/pretix/control/templates/pretixcontrol/event/mail_settings_fragment.html
index 6cfb7bded..076927574 100644
--- a/src/pretix/control/templates/pretixcontrol/event/mail_settings_fragment.html
+++ b/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 }}">
diff --git a/src/pretix/control/templates/pretixcontrol/item/include_variations.html b/src/pretix/control/templates/pretixcontrol/item/include_variations.html
index d9db4fdc9..462ab7346 100644
--- a/src/pretix/control/templates/pretixcontrol/item/include_variations.html
+++ b/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" %}
diff --git a/src/pretix/control/templates/pretixcontrol/order/change_questions.html b/src/pretix/control/templates/pretixcontrol/order/change_questions.html
index 02c76e7ba..02b4c7fc0 100644
--- a/src/pretix/control/templates/pretixcontrol/order/change_questions.html
+++ b/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 }}">
diff --git a/src/pretix/presale/templates/pretixpresale/event/checkout_addons.html b/src/pretix/presale/templates/pretixpresale/event/checkout_addons.html
index c39db9c5e..8b6f3d350 100644
--- a/src/pretix/presale/templates/pretixpresale/event/checkout_addons.html
+++ b/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 }}">
diff --git a/src/pretix/presale/templates/pretixpresale/event/checkout_base.html b/src/pretix/presale/templates/pretixpresale/event/checkout_base.html
index d582371f7..f9022a96d 100644
--- a/src/pretix/presale/templates/pretixpresale/event/checkout_base.html
+++ b/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>
diff --git a/src/pretix/presale/templates/pretixpresale/event/checkout_membership.html b/src/pretix/presale/templates/pretixpresale/event/checkout_membership.html
index 54a90033a..941b3e732 100644
--- a/src/pretix/presale/templates/pretixpresale/event/checkout_membership.html
+++ b/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>
diff --git a/src/pretix/presale/templates/pretixpresale/event/checkout_questions.html b/src/pretix/presale/templates/pretixpresale/event/checkout_questions.html
index a0655cc13..2bf004bd7 100644
--- a/src/pretix/presale/templates/pretixpresale/event/checkout_questions.html
+++ b/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>
diff --git a/src/pretix/presale/templates/pretixpresale/event/fragment_addon_choice.html b/src/pretix/presale/templates/pretixpresale/event/fragment_addon_choice.html
index bb0bd8652..25282f069 100644
--- a/src/pretix/presale/templates/pretixpresale/event/fragment_addon_choice.html
+++ b/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>
diff --git a/src/pretix/presale/templates/pretixpresale/event/fragment_cart_box.html b/src/pretix/presale/templates/pretixpresale/event/fragment_cart_box.html
index ce5823677..183c23cb5 100644
--- a/src/pretix/presale/templates/pretixpresale/event/fragment_cart_box.html
+++ b/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">
-                    {% if cart.minutes_left > 0 or cart.seconds_left > 0 %}
-                        {{ cart.minutes_left|stringformat:"02d" }}:{{ cart.seconds_left|stringformat:"02d" }}
-                    {% else %}
-                        {% trans "Cart expired" %}
-                    {% endif %}
-                </strong>
-                <i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
-            </span>
+            <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 %}
+                    {{ cart.minutes_left|stringformat:"02d" }}:{{ cart.seconds_left|stringformat:"02d" }}
+                {% else %}
+                    {% trans "Cart expired" %}
+                {% endif %}
+            </strong>
         </h2>
     </summary>
     <div>
diff --git a/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html b/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
index ebccea82e..bd9d8ce29 100644
--- a/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
+++ b/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>
diff --git a/src/pretix/presale/templates/pretixpresale/event/order_modify.html b/src/pretix/presale/templates/pretixpresale/event/order_modify.html
index fac46ff95..e4b35405c 100644
--- a/src/pretix/presale/templates/pretixpresale/event/order_modify.html
+++ b/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 }}">
diff --git a/src/pretix/static/pretixcontrol/scss/main.scss b/src/pretix/static/pretixcontrol/scss/main.scss
index 6278b7cc5..612f7fbe1 100644
--- a/src/pretix/static/pretixcontrol/scss/main.scss
+++ b/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 {
diff --git a/src/pretix/static/pretixpresale/scss/main.scss b/src/pretix/static/pretixpresale/scss/main.scss
index e439c58e2..60b30625c 100644
--- a/src/pretix/static/pretixpresale/scss/main.scss
+++ b/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,
-details.details-open .panel-heading .collapse-indicator,
-[aria-expanded=true]>.collapse-indicator {
-    -webkit-transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
-    -moz-transform: rotate(180deg);
-    transform: rotate(180deg);
+.nojs details:not([open], .details-open) .panel-heading .collapse-indicator,
+[aria-expanded=false]>.collapse-indicator {
+    -webkit-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    -moz-transform: rotate(-90deg);
+    transform: rotate(-90deg);
 }
 
 details.sneak-peek {