From 1897bd4b26ae9873a5a8d6686c2c790347844db9 Mon Sep 17 00:00:00 2001
From: Richard Schreiber <schreiber@rami.io>
Date: Tue, 6 Jun 2023 08:53:35 +0200
Subject: [PATCH] Cart: make single-select checkbox look like a button

---
 .../event/fragment_addon_choice.html             | 10 ++++++----
 .../event/fragment_product_list.html             | 10 ++++++----
 .../templates/pretixpresale/event/voucher.html   | 10 ++++++----
 src/pretix/static/pretixpresale/js/ui/main.js    |  6 ++++++
 src/pretix/static/pretixpresale/scss/_event.scss |  4 ----
 src/pretix/static/pretixpresale/scss/_forms.scss | 16 ++++++++++++++++
 6 files changed, 40 insertions(+), 16 deletions(-)

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 775730955f..8a0b2ed9a1 100644
--- a/src/pretix/presale/templates/pretixpresale/event/fragment_addon_choice.html
+++ b/src/pretix/presale/templates/pretixpresale/event/fragment_addon_choice.html
@@ -177,7 +177,7 @@
                                 {% if var.cached_availability.0 == 100 or var.initial %}
                                     <div class="col-md-2 col-sm-3 col-xs-6 availability-box available">
                                         {% if c.max_count == 1 or not c.multi_allowed %}
-                                            <label class="item-checkbox-label">
+                                            <label class="btn btn-default btn-checkbox">
                                                 <input type="checkbox" value="1"
                                                         {% if var.initial %}checked="checked"{% endif %}
                                                         {% if item.free_price %}
@@ -187,7 +187,8 @@
                                                         name="cp_{{ form.pos.pk }}_variation_{{ item.id }}_{{ var.id }}"
                                                         data-exclusive-prefix="cp_{{ form.pos.pk }}_variation_{{ item.id }}_"
                                                         aria-label="{% blocktrans with item=item.name var=var %}Add {{ item }}, {{ var }} to cart{% endblocktrans %}">
-                                                <i class="fa fa-cart-plus fa-lg" aria-hidden="true"></i>
+                                                <i class="fa fa-shopping-cart" aria-hidden="true"></i>
+                                                {% trans "Select" context "checkbox" %}
                                             </label>
                                         {% else %}
                                             <div class="input-item-count-group">
@@ -305,7 +306,7 @@
                     {% if item.cached_availability.0 == 100 or item.initial %}
                         <div class="col-md-2 col-sm-3 col-xs-6 availability-box available">
                             {% if c.max_count == 1 or not c.multi_allowed %}
-                                <label class="item-checkbox-label">
+                                <label class="btn btn-default btn-checkbox">
                                     <input type="checkbox" value="1"
                                             {% if item.free_price %}
                                                data-checked-onchange="price-item-{{ form.pos.pk }}-{{ item.pk }}"
@@ -320,7 +321,8 @@
                                             id="cp_{{ form.pos.pk }}_item_{{ item.id }}"
                                             aria-label="{% blocktrans with item=item.name %}Add {{ item }} to cart{% endblocktrans %}"
                                             {% if item.description %} aria-describedby="cp-{{ form.pos.pk }}-item-{{ item.id }}-description"{% endif %}>
-                                            <i class="fa fa-cart-plus fa-lg" aria-hidden="true"></i>
+                                            <i class="fa fa-shopping-cart" aria-hidden="true"></i>
+                                            {% trans "Select" context "checkbox" %}
                                 </label>
                             {% else %}
                                 <div class="input-item-count-group">
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 1502b68e1e..8bd295a81d 100644
--- a/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
+++ b/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
@@ -184,7 +184,7 @@
                                 {% elif var.cached_availability.0 == 100 %}
                                     <div class="col-md-2 col-sm-3 col-xs-6 availability-box available">
 										{% if var.order_max == 1 %}
-                                            <label class="item-checkbox-label">
+                                            <label class="btn btn-default btn-checkbox">
                                                 <input type="checkbox" value="1"
                                                     {% if item.free_price %}
                                                        data-checked-onchange="price-variation-{{ item.pk }}-{{ var.pk }}"
@@ -194,7 +194,8 @@
                                                        name="variation_{{ item.id }}_{{ var.id }}"
                                                        aria-label="{% blocktrans with item=item.name var=var %}Add {{ item }}, {{ var }} to cart{% endblocktrans %}"
                                                        {% if var.description %} aria-describedby="item-{{ item.pk }}-{{ var.pk }}-description"{% endif %}>
-                                               <i class="fa fa-cart-plus fa-lg" aria-hidden="true"></i>
+                                                <i class="fa fa-shopping-cart" aria-hidden="true"></i>
+                                                {% trans "Select" context "checkbox" %}
                                             </label>
                                         {% else %}
                                             <div class="input-item-count-group">
@@ -328,7 +329,7 @@
                     {% elif item.cached_availability.0 == 100 %}
                         <div class="col-md-2 col-sm-3 col-xs-6 availability-box available">
 							{% if item.order_max == 1 %}
-                                <label class="item-checkbox-label">
+                                <label class="btn btn-default btn-checkbox">
                                     <input type="checkbox" value="1" {% if itemnum == 1 %}checked{% endif %}
                                         {% if item.free_price %}
                                            data-checked-onchange="price-item-{{ item.pk }}"
@@ -337,7 +338,8 @@
                                            name="item_{{ item.id }}" id="item_{{ item.id }}"
                                            aria-label="{% blocktrans with item=item.name %}Add {{ item }} to cart{% endblocktrans %}"
                                            {% if item.description %} aria-describedby="item-{{ item.id }}-description"{% endif %}>
-                                           <i class="fa fa-cart-plus fa-lg" aria-hidden="true"></i>
+                                        <i class="fa fa-shopping-cart" aria-hidden="true"></i>
+                                        {% trans "Select" context "checkbox" %}
                                 </label>
                             {% else %}
                                 <div class="input-item-count-group">
diff --git a/src/pretix/presale/templates/pretixpresale/event/voucher.html b/src/pretix/presale/templates/pretixpresale/event/voucher.html
index 0d13a64488..062b4484aa 100644
--- a/src/pretix/presale/templates/pretixpresale/event/voucher.html
+++ b/src/pretix/presale/templates/pretixpresale/event/voucher.html
@@ -243,7 +243,7 @@
                                                 <div class="col-md-2 col-sm-3 col-xs-6 availability-box available radio-box">
                                                     {% if max_times > 1 %}
                                                         {% if var.order_max == 1 %}
-                                                            <label class="item-checkbox-label">
+                                                            <label class="btn btn-default btn-checkbox">
                                                                 <input type="checkbox"
                                                                         value="1"
                                                                         id="variation_{{ item.id }}_{{ var.id }}"
@@ -251,7 +251,8 @@
                                                                         {% if options == 1 %}checked{% endif %}
                                                                         aria-label="{% blocktrans with item=item.name var=var %}Add {{ item }}, {{ var }} to cart{% endblocktrans %}"
                                                                         {% if var.description %} aria-describedby="item-{{ item.pk }}-{{ var.pk }}-description"{% endif %}>
-                                                                <i class="fa fa-cart-plus fa-lg" aria-hidden="true"></i>
+                                                                <i class="fa fa-shopping-cart" aria-hidden="true"></i>
+                                                                {% trans "Select" context "checkbox" %}
                                                             </label>
                                                         {% else %}
                                                             <div class="input-item-count-group">
@@ -385,7 +386,7 @@
                                     <div class="col-md-2 col-sm-3 col-xs-6 availability-box available radio-box">
                                         {% if max_times > 1 %}
                                             {% if item.order_max == 1 %}
-                                                <label class="item-checkbox-label">
+                                                <label class="btn btn-default btn-checkbox">
                                                     <input type="checkbox"
                                                            value="1"
                                                            id="item_{{ item.id }}"
@@ -393,7 +394,8 @@
                                                            {% if options == 1 %}checked{% endif %}
                                                            aria-label="{% blocktrans with item=item.name %}Add {{ item }} to cart{% endblocktrans %}"
                                                            {% if item.description %} aria-describedby="item-{{ item.id }}-description"{% endif %}>
-                                                    <i class="fa fa-cart-plus fa-lg" aria-hidden="true"></i>
+                                                    <i class="fa fa-shopping-cart" aria-hidden="true"></i>
+                                                    {% trans "Select" context "checkbox" %}
                                                 </label>
                                             {% else %}
                                                 <div class="input-item-count-group">
diff --git a/src/pretix/static/pretixpresale/js/ui/main.js b/src/pretix/static/pretixpresale/js/ui/main.js
index 11b488e0e6..a95f451d3e 100644
--- a/src/pretix/static/pretixpresale/js/ui/main.js
+++ b/src/pretix/static/pretixpresale/js/ui/main.js
@@ -125,6 +125,12 @@ var form_handlers = function (el) {
         controls.value = Math.max(controls.min, Math.min(controls.max || Number.MAX_SAFE_INTEGER, (currentValue || 0) + step));
         controls.dispatchEvent(new Event("change"));
     });
+    el.find(".btn-checkbox input").on("change", function (e) {
+        $(this).closest(".btn-checkbox")
+            .toggleClass("btn-checkbox-checked", this.checked)
+            .find(".fa").toggleClass("fa-shopping-cart", !this.checked).toggleClass("fa-cart-arrow-down", this.checked);
+    });
+    el.find(".btn-checkbox:has([checked]) .fa-shopping-cart").toggleClass("fa-shopping-cart fa-cart-arrow-down")
 
     el.find("script[data-replace-with-qr]").each(function () {
         var $div = $("<div>");
diff --git a/src/pretix/static/pretixpresale/scss/_event.scss b/src/pretix/static/pretixpresale/scss/_event.scss
index 02570e6349..78cc79e071 100644
--- a/src/pretix/static/pretixpresale/scss/_event.scss
+++ b/src/pretix/static/pretixpresale/scss/_event.scss
@@ -29,10 +29,6 @@
             color: $alert-warning-text;
         }
     }
-    .item-checkbox-label {
-        display: block;
-        margin-top: .4em;
-    }
 
     .product-description.with-picture {
         margin-left: 70px;
diff --git a/src/pretix/static/pretixpresale/scss/_forms.scss b/src/pretix/static/pretixpresale/scss/_forms.scss
index ecc3ad12fb..faf1fad0cb 100644
--- a/src/pretix/static/pretixpresale/scss/_forms.scss
+++ b/src/pretix/static/pretixpresale/scss/_forms.scss
@@ -7,6 +7,22 @@ a.btn, button.btn {
   white-space: normal;
 }
 
+.btn-checkbox {
+    position: relative;
+    display: block;
+    padding-left: 24px;
+    padding-right: 24px;
+    white-space: normal;
+
+    input {
+        position: absolute;
+        left: 10px;
+    }
+    &.btn-checkbox-checked {
+        background-color: $gray-lighter;
+    }
+}
+
 .panel-title .radio {
   margin-left: 20px;
 }