Presale: Improve visibiltity of edit links on order confirm/details page (Z#23108817)

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

@@ -18,6 +18,9 @@
                 <h3 class="panel-title">
                     <i class="fa fa-shopping-cart" aria-hidden="true"></i>
                     {% trans "Your cart" %}
+                    <a href="{% eventurl request.event "presale:event.index" cart_namespace=cart_namespace|default_if_none:"" %}" class="h6">
+                        <span class="fa fa-edit" aria-hidden="true"></span>{% trans "Add or remove tickets" %}
+                    </a>
                 </h3>
                 <span class="panel-heading-flex-gap"></span>
                 <strong class="helper-display-block" id="cart-deadline-short" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}">
@@ -27,30 +30,21 @@
                         {% trans "Cart expired" %}
                     {% endif %}
                 </strong>
-                <span class="helper-display-block cart-modify">
-                    <a href="{% eventurl request.event "presale:event.index" cart_namespace=cart_namespace|default_if_none:"" %}">
-                        <span class="fa fa-edit" aria-hidden="true"></span>
-                        {% trans "Add or remove tickets" %}
-                    </a>
-                </span>
             </div>
             <div class="panel-body">
                 {% include "pretixpresale/event/fragment_cart.html" with cart=cart event=request.event editable=False %}
             </div>
         </div>
         {% if payments %}
-            <div class="panel panel-primary">
+            <div class="panel panel-default">
                 <div class="panel-heading">
-                    {% if payment_provider.identifier != "free" %}
-                        <div class="pull-right flip">
-                            <a href="{% eventurl request.event "presale:event.checkout" step="payment" cart_namespace=cart_namespace|default_if_none:"" %}" aria-label="{% trans "Modify payment" %}">
-                                <span class="fa fa-edit" aria-hidden="true"></span>
-                                {% trans "Modify" %}
-                            </a>
-                        </div>
-                    {% endif %}
                     <h3 class="panel-title">
                         {% trans "Payment" %}
+                        {% if payment_provider.identifier != "free" %}
+                                <a href="{% eventurl request.event "presale:event.checkout" step="payment" cart_namespace=cart_namespace|default_if_none:"" %}" aria-label="{% trans "Modify payment" %}" class="h6">
+                                    <span class="fa fa-edit" aria-hidden="true"></span>{% trans "Modify" %}
+                                </a>
+                        {% endif %}
                     </h3>
                 </div>
                 <ul class="list-group">
@@ -78,16 +72,13 @@
         <div class="row">
             {% if invoice_address_asked %}
                 <div class="col-md-6 col-xs-12">
-                    <div class="panel panel-primary panel-contact">
+                    <div class="panel panel-default panel-contact">
                         <div class="panel-heading">
-                            <div class="pull-right flip">
-                                <a href="{% eventurl request.event "presale:event.checkout" step="questions" cart_namespace=cart_namespace|default_if_none:"" %}?invoice=1" aria-label="{% trans "Modify invoice information" %}">
-                                    <span class="fa fa-edit" aria-hidden="true"></span>
-                                    {% trans "Modify" %}
-                                </a>
-                            </div>
                             <h3 class="panel-title">
                                 {% trans "Invoice information" %}
+                                <a href="{% eventurl request.event "presale:event.checkout" step="questions" cart_namespace=cart_namespace|default_if_none:"" %}?invoice=1" aria-label="{% trans "Modify invoice information" %}" class="h6">
+                                    <span class="fa fa-edit" aria-hidden="true"></span>{% trans "Modify" %}
+                                </a>
                             </h3>
                         </div>
                         <div class="panel-body">
@@ -128,16 +119,13 @@
                 </div>
             {% endif %}
             <div class="{% if invoice_address_asked %}col-md-6{% endif %} col-xs-12">
-                <div class="panel panel-primary panel-contact">
+                <div class="panel panel-default panel-contact">
                     <div class="panel-heading">
-                        <div class="pull-right flip">
-                            <a href="{% eventurl request.event "presale:event.checkout" step="questions" cart_namespace=cart_namespace|default_if_none:"" %}" aria-label="{% trans "Modify contact information" %}">
-                                <span class="fa fa-edit" aria-hidden="true"></span>
-                                {% trans "Modify" %}
-                            </a>
-                        </div>
                         <h3 class="panel-title">
                             {% trans "Contact information" %}
+                            <a href="{% eventurl request.event "presale:event.checkout" step="questions" cart_namespace=cart_namespace|default_if_none:"" %}" aria-label="{% trans "Modify contact information" %}" class="h6">
+                                <span class="fa fa-edit" aria-hidden="true"></span>{% trans "Modify" %}
+                            </a>
                         </h3>
                     </div>
                     <div class="panel-body">

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

@@ -100,23 +100,21 @@
                 {% if last_payment %}
                     {{ last_payment_info }}
                     {% if can_pay %}
-                        <div class="text-right flip">
+                        <p>
                             <a href="{% eventurl event "presale:event.order.pay.change" secret=order.secret order=order.code %}"
-                                    class="btn btn-default">
+                                    class="btn btn-primary">
                                 {% trans "Re-try payment or choose another payment method" %}
                             </a>
-                        </div>
+                        </p>
                     {% endif %}
                 {% else %}
                     {% if can_pay %}
-                        <div class="text-right flip">
+                        <p>
                             <a href="{% eventurl event "presale:event.order.pay.change" secret=order.secret order=order.code %}"
                                     class="btn btn-primary btn-lg">{% trans "Pay now" %}</a>
-                        </div>
+                        </p>
                     {% endif %}
                 {% endif %}
-
-                <div class="clearfix"></div>
             </div>
         </div>
     {% endif %}
@@ -191,18 +189,15 @@
         {% endif %}
     {% endif %}
     {% include "pretixpresale/event/fragment_downloads.html" with position_page=False %}
-    <div class="panel panel-primary cart">
+    <div class="panel panel-default cart">
         <div class="panel-heading">
-            {% if order.can_modify_answers %}
-                <div class="pull-right flip">
-                    <a href="{% eventurl event "presale:event.order.modify" secret=order.secret order=order.code %}" aria-label="{% trans "Change ordered items" %}">
-                        <span class="fa fa-edit" aria-hidden="true"></span>
-                        {% trans "Change details" %}
-                    </a>
-                </div>
-            {% endif %}
             <h3 class="panel-title">
                 {% trans "Ordered items" %}
+                {% if order.can_modify_answers %}
+                    <a href="{% eventurl event "presale:event.order.modify" secret=order.secret order=order.code %}" aria-label="{% trans "Change ordered items" %}" class="h6">
+                        <span class="fa fa-edit" aria-hidden="true"></span>{% trans "Change details" %}
+                    </a>
+                {% endif %}
             </h3>
         </div>
         <div class="panel-body">
@@ -284,20 +279,17 @@
             </div>
         {% endif %}
         <div class="col-xs-12 {% if invoices or can_generate_invoice %}col-md-6{% endif %}">
-            <div class="panel panel-primary">
+            <div class="panel panel-default">
                 <div class="panel-heading">
-                    {% if invoice_address_asked or request.event.settings.invoice_name_required %}
-                        {% if order.can_modify_answers %}
-                            <div class="pull-right flip">
-                                <a href="{% eventurl event "presale:event.order.modify" secret=order.secret order=order.code %}" aria-label="{% trans "Change your information" %}">
-                                    <span class="fa fa-edit" aria-hidden="true"></span>
-                                    {% trans "Change details" %}
-                                </a>
-                            </div>
-                        {% endif %}
-                    {% endif %}
                     <h3 class="panel-title">
                         {% trans "Your information" %}
+                        {% if invoice_address_asked or request.event.settings.invoice_name_required %}
+                            {% if order.can_modify_answers %}
+                                <a href="{% eventurl event "presale:event.order.modify" secret=order.secret order=order.code %}" aria-label="{% trans "Change your information" %}" class="h6">
+                                    <span class="fa fa-edit" aria-hidden="true"></span>{% trans "Change details" %}
+                                </a>
+                            {% endif %}
+                        {% endif %}
                     </h3>
                 </div>
                 <div class="panel-body">
@@ -347,7 +339,7 @@
         <div class="clearfix"></div>
     </div>
     {% if user_change_allowed or user_cancel_allowed %}
-        <div class="panel panel-primary panel-cancellation">
+        <div class="panel panel-default panel-cancellation">
             <div class="panel-heading">
                 <h3 class="panel-title">
                     {% trans "Change or cancel your order" context "action" %}

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

@@ -140,6 +140,7 @@ article.item-with-variations .product-row:last-child:after {
     display: none;
 }
 
+.panel-body > *:last-child,
 .panel-body address:last-child {
     margin-bottom: 0;
 }

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

@@ -367,6 +367,14 @@ body.loading .container {
     background-color: darken($btn-primary-bg, 10%);
 }
 
+.panel-title a.h6 {
+    text-decoration: underline;
+    margin-left: .5em;
+}
+.panel-title a.h6 .fa {
+    margin-left: .25em;
+    margin-right: .25em;
+}
 
 details {
     list-style: none;