CGM_Public/pretix_cgo
1
0
Fork 0
forked from CGM_Public/pretix_original
Code Pull Requests Actions Activity

Cart: make single-select checkbox look like a button

Browse Source
This commit is contained in:
Richard Schreiber
2023-06-06 08:53:35 +02:00
committed by GitHub
parent fd6843822b
commit 1897bd4b26
6 changed files with 40 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/pretix/presale/templates/pretixpresale/event/fragment_addon_choice.html
View File

@@ -177,7 +177,7 @@
{% if var.cached_availability.0 == 100 or var.initial %} {% if var.cached_availability.0 == 100 or var.initial %}
<div class="col-md-2 col-sm-3 col-xs-6 availability-box available"> <div class="col-md-2 col-sm-3 col-xs-6 availability-box available">
{% if c.max_count == 1 or not c.multi_allowed %} {% 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" <input type="checkbox" value="1"
{% if var.initial %}checked="checked"{% endif %} {% if var.initial %}checked="checked"{% endif %}
{% if item.free_price %} {% if item.free_price %}
@@ -187,7 +187,8 @@
name="cp_{{ form.pos.pk }}_variation_{{ item.id }}_{{ var.id }}" name="cp_{{ form.pos.pk }}_variation_{{ item.id }}_{{ var.id }}"
data-exclusive-prefix="cp_{{ form.pos.pk }}_variation_{{ item.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 %}"> 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> </label>
{% else %} {% else %}
<div class="input-item-count-group"> <div class="input-item-count-group">
@@ -305,7 +306,7 @@
{% if item.cached_availability.0 == 100 or item.initial %} {% if item.cached_availability.0 == 100 or item.initial %}
<div class="col-md-2 col-sm-3 col-xs-6 availability-box available"> <div class="col-md-2 col-sm-3 col-xs-6 availability-box available">
{% if c.max_count == 1 or not c.multi_allowed %} {% 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" <input type="checkbox" value="1"
{% if item.free_price %} {% if item.free_price %}
data-checked-onchange="price-item-{{ form.pos.pk }}-{{ item.pk }}" data-checked-onchange="price-item-{{ form.pos.pk }}-{{ item.pk }}"
@@ -320,7 +321,8 @@
id="cp_{{ form.pos.pk }}_item_{{ item.id }}" id="cp_{{ form.pos.pk }}_item_{{ item.id }}"
aria-label="{% blocktrans with item=item.name %}Add {{ item }} to cart{% endblocktrans %}" 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 %}> {% 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> </label>
{% else %} {% else %}
<div class="input-item-count-group"> <div class="input-item-count-group">

10
src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
View File

@@ -184,7 +184,7 @@
{% elif var.cached_availability.0 == 100 %} {% elif var.cached_availability.0 == 100 %}
<div class="col-md-2 col-sm-3 col-xs-6 availability-box available"> <div class="col-md-2 col-sm-3 col-xs-6 availability-box available">
{% if var.order_max == 1 %} {% if var.order_max == 1 %}
<label class="item-checkbox-label"> <label class="btn btn-default btn-checkbox">
<input type="checkbox" value="1" <input type="checkbox" value="1"
{% if item.free_price %} {% if item.free_price %}
data-checked-onchange="price-variation-{{ item.pk }}-{{ var.pk }}" data-checked-onchange="price-variation-{{ item.pk }}-{{ var.pk }}"
@@ -194,7 +194,8 @@
name="variation_{{ item.id }}_{{ var.id }}" name="variation_{{ item.id }}_{{ var.id }}"
aria-label="{% blocktrans with item=item.name var=var %}Add {{ item }}, {{ var }} to cart{% endblocktrans %}" 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 %}> {% 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> </label>
{% else %} {% else %}
<div class="input-item-count-group"> <div class="input-item-count-group">
@@ -328,7 +329,7 @@
{% elif item.cached_availability.0 == 100 %} {% elif item.cached_availability.0 == 100 %}
<div class="col-md-2 col-sm-3 col-xs-6 availability-box available"> <div class="col-md-2 col-sm-3 col-xs-6 availability-box available">
{% if item.order_max == 1 %} {% 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 %} <input type="checkbox" value="1" {% if itemnum == 1 %}checked{% endif %}
{% if item.free_price %} {% if item.free_price %}
data-checked-onchange="price-item-{{ item.pk }}" data-checked-onchange="price-item-{{ item.pk }}"
@@ -337,7 +338,8 @@
name="item_{{ item.id }}" id="item_{{ item.id }}" name="item_{{ item.id }}" id="item_{{ item.id }}"
aria-label="{% blocktrans with item=item.name %}Add {{ item }} to cart{% endblocktrans %}" aria-label="{% blocktrans with item=item.name %}Add {{ item }} to cart{% endblocktrans %}"
{% if item.description %} aria-describedby="item-{{ item.id }}-description"{% endif %}> {% 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> </label>
{% else %} {% else %}
<div class="input-item-count-group"> <div class="input-item-count-group">

10
src/pretix/presale/templates/pretixpresale/event/voucher.html
View File

@@ -243,7 +243,7 @@
<div class="col-md-2 col-sm-3 col-xs-6 availability-box available radio-box"> <div class="col-md-2 col-sm-3 col-xs-6 availability-box available radio-box">
{% if max_times > 1 %} {% if max_times > 1 %}
{% if var.order_max == 1 %} {% if var.order_max == 1 %}
<label class="item-checkbox-label"> <label class="btn btn-default btn-checkbox">
<input type="checkbox" <input type="checkbox"
value="1" value="1"
id="variation_{{ item.id }}_{{ var.id }}" id="variation_{{ item.id }}_{{ var.id }}"
@@ -251,7 +251,8 @@
{% if options == 1 %}checked{% endif %} {% if options == 1 %}checked{% endif %}
aria-label="{% blocktrans with item=item.name var=var %}Add {{ item }}, {{ var }} to cart{% endblocktrans %}" 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 %}> {% 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> </label>
{% else %} {% else %}
<div class="input-item-count-group"> <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"> <div class="col-md-2 col-sm-3 col-xs-6 availability-box available radio-box">
{% if max_times > 1 %} {% if max_times > 1 %}
{% if item.order_max == 1 %} {% if item.order_max == 1 %}
<label class="item-checkbox-label"> <label class="btn btn-default btn-checkbox">
<input type="checkbox" <input type="checkbox"
value="1" value="1"
id="item_{{ item.id }}" id="item_{{ item.id }}"
@@ -393,7 +394,8 @@
{% if options == 1 %}checked{% endif %} {% if options == 1 %}checked{% endif %}
aria-label="{% blocktrans with item=item.name %}Add {{ item }} to cart{% endblocktrans %}" aria-label="{% blocktrans with item=item.name %}Add {{ item }} to cart{% endblocktrans %}"
{% if item.description %} aria-describedby="item-{{ item.id }}-description"{% endif %}> {% 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> </label>
{% else %} {% else %}
<div class="input-item-count-group"> <div class="input-item-count-group">

6
src/pretix/static/pretixpresale/js/ui/main.js
View File

@@ -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.value = Math.max(controls.min, Math.min(controls.max || Number.MAX_SAFE_INTEGER, (currentValue || 0) + step));
controls.dispatchEvent(new Event("change")); 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 () { el.find("script[data-replace-with-qr]").each(function () {
var $div = $("<div>"); var $div = $("<div>");

4
src/pretix/static/pretixpresale/scss/_event.scss
View File

@@ -29,10 +29,6 @@
color: $alert-warning-text; color: $alert-warning-text;
} }
} }
.item-checkbox-label {
display: block;
margin-top: .4em;
}
.product-description.with-picture { .product-description.with-picture {
margin-left: 70px; margin-left: 70px;

16
src/pretix/static/pretixpresale/scss/_forms.scss
View File

@@ -7,6 +7,22 @@ a.btn, button.btn {
white-space: normal; 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 { .panel-title .radio {
margin-left: 20px; margin-left: 20px;
} }