mirror of
https://github.com/pretix/pretix.git
synced 2026-05-05 15:14:04 +00:00
Cart: make single-select checkbox look like a button
This commit is contained in:
Richard Schreiber
committed by
GitHub
GitHub
parent
fd6843822b
commit
1897bd4b26
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>");
|
||||
|
||||
@@ -29,10 +29,6 @@
|
||||
color: $alert-warning-text;
|
||||
}
|
||||
}
|
||||
.item-checkbox-label {
|
||||
display: block;
|
||||
margin-top: .4em;
|
||||
}
|
||||
|
||||
.product-description.with-picture {
|
||||
margin-left: 70px;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user