Improve mobile shopping cart experience

This commit is contained in:
Raphael Michel
2020-09-04 05:01:22 +02:00
parent 9ba517109d
commit b91c16538e
3 changed files with 53 additions and 27 deletions

View File

@@ -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 %}

View File

@@ -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%;
}
}
}
}

View File

@@ -1,3 +1,8 @@
a.btn, button.btn {
max-width: 100%;
white-space: normal;
}
.panel-title .radio {
margin-left: 20px;
}