From b91c16538ef3374294f3289017d33426c27da3ec Mon Sep 17 00:00:00 2001
From: Raphael Michel <mail@raphaelmichel.de>
Date: Fri, 4 Sep 2020 05:01:22 +0200
Subject: [PATCH] Improve mobile shopping cart experience

---
 .../pretixpresale/event/fragment_cart.html    | 18 +-----
 .../static/pretixpresale/scss/_cart.scss      | 57 +++++++++++++++----
 .../static/pretixpresale/scss/_forms.scss     |  5 ++
 3 files changed, 53 insertions(+), 27 deletions(-)

diff --git a/src/pretix/presale/templates/pretixpresale/event/fragment_cart.html b/src/pretix/presale/templates/pretixpresale/event/fragment_cart.html
index 84d128b6e4..2c458049a6 100644
--- a/src/pretix/presale/templates/pretixpresale/event/fragment_cart.html
+++ b/src/pretix/presale/templates/pretixpresale/event/fragment_cart.html
@@ -5,7 +5,7 @@
 {% load money %}
 {% blocktrans asvar s_taxes %}taxes{% endblocktrans %}
 {% for line in cart.positions %}
-    <div class="row cart-row {% if download %}has-downloads{% endif %}">
+    <div class="row cart-row {% if download %}has-downloads{% endif %}{% if editable %}editable{% endif %}">
         <div class="product">
             {% if line.addon_to %}
                 <span class="addon-signifier">+</span>
@@ -217,22 +217,6 @@
                 {% endif %}
             {% endif %}
         </div>
-        {% if download %}
-            <div class="download-mobile">
-                {% if line.generate_ticket %}
-                {% for b in download_buttons %}
-                    <form action="{% if position_page and line.addon_to %}{% eventurl event "presale:event.order.position.download" secret=line.addon_to.web_secret order=order.code output=b.identifier pid=line.pk position=line.addon_to.positionid %}{% elif position_page %}{% eventurl event "presale:event.order.position.download" secret=line.web_secret order=order.code output=b.identifier pid=line.pk position=line.positionid %}{% else %}{% eventurl event "presale:event.order.download" secret=order.secret order=order.code output=b.identifier position=line.pk %}{% endif %}"
-                        method="post" data-asynctask data-asynctask-download class="download-btn-form">
-                        {% csrf_token %}
-                        <button type="submit"
-                           class="btn btn-sm {% if b.identifier == "pdf" %}btn-primary{% else %}btn-default{% endif %}">
-                            <span class="fa {{ b.icon }}"></span> {{ b.text }}
-                        </button>
-                    </form>
-                {% endfor %}
-                {% endif %}
-            </div>
-        {% endif %}
         <div class="clearfix"></div>
     </div>
 {% endfor %}
diff --git a/src/pretix/static/pretixpresale/scss/_cart.scss b/src/pretix/static/pretixpresale/scss/_cart.scss
index e8631ad56f..f0a2e4a038 100644
--- a/src/pretix/static/pretixpresale/scss/_cart.scss
+++ b/src/pretix/static/pretixpresale/scss/_cart.scss
@@ -37,11 +37,6 @@
         padding-right: floor(($grid-gutter-width / 2));
         float: left;
     }
-    .download-mobile {
-        display: none;
-        width: 100%;
-        clear: both;
-    }
     .download-desktop {
         display: block;
         width: percentage((4 / $grid-columns));
@@ -80,18 +75,60 @@
 }
 
 @media(max-width: $screen-sm-max) {
-    .cart-row {
-        .download-mobile {
+    .cart .panel-body {
+        padding: 5px;
+        .checkout-button-row {
+            padding: 0 10px;
+        }
+        #cart-deadline {
             display: block;
+            padding: 0 10px 5px;
         }
+    }
+    .cart-row {
         .download-desktop {
-            display: none;
+            clear: both;
+            display: block;
+            width: 50%;
+            text-align: left;
+            a.btn, button.btn {
+                word-break: break-all;
+                display: block;
+                width: 100%;
+                margin-bottom: 5px;
+            }
         }
-        &.has-downloads .product, .product, .count, .singleprice, .totalprice {
+
+        .totalprice {
             width: 50%;
         }
-        .singleprice {
+        .product, &.has-downloads .product {
+            width: 100%;
+        }
+        &.total .product {
+            width: 50%;
+        }
+        .count {
             clear: both;
+            width: 25%;
+            text-align: left;
+        }
+        .singleprice {
+            width: 25%;
+        }
+
+        &.editable {
+            .count {
+                width: 50%;
+                text-align: right;
+            }
+            .singleprice {
+                clear: both;
+                width: 50%;
+            }
+            .totalprice {
+                width: 50%;
+            }
         }
     }
 }
diff --git a/src/pretix/static/pretixpresale/scss/_forms.scss b/src/pretix/static/pretixpresale/scss/_forms.scss
index 0feb77c207..52afe098a3 100644
--- a/src/pretix/static/pretixpresale/scss/_forms.scss
+++ b/src/pretix/static/pretixpresale/scss/_forms.scss
@@ -1,3 +1,8 @@
+a.btn, button.btn {
+  max-width: 100%;
+  white-space: normal;
+}
+
 .panel-title .radio {
   margin-left: 20px;
 }