CGM_Public/pretix_original
2
0
Fork 1
mirror of https://github.com/pretix/pretix.git synced 2026-05-06 15:24:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Product list: Indent variations, improve alignment of price and quantity (#3135)

Browse Source
This commit is contained in:
Richard Schreiber
2023-03-03 14:26:11 +01:00
committed by GitHub
parent 9a53dc9c5e
commit c7060d188f
8 changed files with 79 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -40,7 +40,7 @@
{% if item.has_variations %}
<article aria-labelledby="cp-{{ form.pos.pk }}-item-{{ item.pk }}-legend"{% if item.description %} aria-describedby="cp-{{ form.pos.pk }}-item-{{ item.pk }}-description"{% endif %} class="item-with-variations{% if event.settings.show_variations_expanded %} details-open{% endif %}" id="item-{{ item.pk }}">
<div class="row-fluid product-row headline">
<div class="col-md-8 col-xs-12">
<div class="col-md-8 col-sm-6 col-xs-12">
{% if item.picture %}
<a href="{{ item.picture.url }}" class="productpicture"
data-title="{{ item.name|force_escape|force_escape }}"
@@ -68,7 +68,7 @@
{% endif %}
</div>
</div>
<div class="col-md-2 col-xs-6 price">
<div class="col-md-2 col-sm-3 col-xs-6 price">
<p>
{% if c.price_included %}
<span class="sr-only">{% trans "free" context "price" %}</span>
@@ -89,13 +89,14 @@
{% endif %}
</p>
</div>
<div class="col-md-2 col-xs-6 availability-box">
<div class="col-md-2 col-sm-3 col-xs-6 availability-box">
{% if not event.settings.show_variations_expanded %}
<button type="button" data-toggle="variations" class="btn btn-default btn-block js-only"
data-label-alt="{% trans "Hide variants" %}"
aria-expanded="false"
aria-label="{% blocktrans trimmed with item=item.name count=item.available_variations|length %}Show {{count}} variants of {{item}}{% endblocktrans %}">
{% trans "Show variants" %}
<span>{% trans "Show variants" %}</span>
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
</button>
{% endif %}
</div>
@@ -104,7 +105,7 @@
<div class="variations {% if not event.settings.show_variations_expanded %}variations-collapsed{% endif %}">
{% for var in item.available_variations %}
<article aria-labelledby="cp-{{ form.pos.pk }}-item-{{ item.pk }}-{{ var.pk }}-legend"{% if var.description %} aria-describedby="cp-{{ form.pos.pk }}-item-{{ item.pk }}-{{ var.pk }}-description"{% endif %} class="row-fluid product-row variation">
<div class="col-md-8 col-xs-12">
<div class="col-md-8 col-sm-6 col-xs-12">
<h5 id="cp-{{ form.pos.pk }}-item-{{ item.pk }}-{{ var.pk }}-legend">{{ var }}</h5>
{% if var.description %}
<div id="cp-{{ form.pos.pk }}-item-{{ item.pk }}-{{ var.pk }}-description" class="variation-description">
@@ -115,7 +116,7 @@
{% include "pretixpresale/event/fragment_quota_left.html" with avail=var.cached_availability %}
{% endif %}
</div>
<div class="col-md-2 col-xs-6 price">
<div class="col-md-2 col-sm-3 col-xs-6 price">
{% if not c.price_included %}
{% if var.original_price %}
<del><span class="sr-only">{% trans "Original price:" %}</span>
@@ -170,7 +171,7 @@
{% endif %}
</div>
{% if var.cached_availability.0 == 100 or var.initial %}
<div class="col-md-2 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 %}
<label class="item-checkbox-label">
<input type="checkbox" value="1"
@@ -206,7 +207,7 @@
</article>
{% else %}
<article aria-labelledby="cp-{{ form.pos.pk }}-item-{{ item.pk }}-legend"{% if item.description %} aria-describedby="cp-{{ form.pos.pk }}-item-{{ item.pk }}-description"{% endif %} class="row-fluid product-row simple">
<div class="col-md-8 col-xs-12">
<div class="col-md-8 col-sm-6 col-xs-12">
{% if item.picture %}
<a href="{{ item.picture.url }}" class="productpicture"
data-title="{{ item.name|force_escape|force_escape }}"
@@ -237,7 +238,7 @@
{% endif %}
</div>
</div>
<div class="col-md-2 col-xs-6 price">
<div class="col-md-2 col-sm-3 col-xs-6 price">
<p>
{% if not c.price_included %}
{% if item.original_price %}
@@ -292,7 +293,7 @@
</p>
</div>
{% if item.cached_availability.0 == 100 or item.initial %}
<div class="col-md-2 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 %}
<label class="item-checkbox-label">
<input type="checkbox" value="1"

4
src/pretix/presale/templates/pretixpresale/event/fragment_availability.html
View File

@@ -1,7 +1,7 @@
{% load i18n %}
{% load eventurl %}
{% if avail <= 10 %}
<div class="col-md-2 col-xs-6 availability-box gone">
<div class="col-md-2 col-sm-3 col-xs-6 availability-box gone">
{% if price != None and not price %}
<strong>{% trans "FULLY BOOKED" %}</strong>
{% else %}
@@ -16,7 +16,7 @@
{% endif %}
</div>
{% elif avail < 100 %}
<div class="col-md-2 col-xs-6 availability-box unavailable">
<div class="col-md-2 col-sm-3 col-xs-6 availability-box unavailable">
<strong>{% trans "Reserved" %}</strong>
<br/>
{% trans "All remaining products are reserved but might become available again." %}

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

@@ -17,7 +17,7 @@
{% if item.has_variations %}
<article aria-labelledby="item-{{ item.pk }}-legend"{% if item.description %} aria-describedby="item-{{ item.pk }}-description"{% endif %} class="item-with-variations{% if event.settings.show_variations_expanded %} details-open{% endif %}" id="item-{{ item.pk }}">
<div class="row product-row headline">
<div class="col-md-8 col-xs-12">
<div class="col-md-8 col-sm-6 col-xs-12">
{% if item.picture %}
<a href="{{ item.picture.url }}" class="productpicture"
data-title="{{ item.name|force_escape|force_escape }}"
@@ -46,7 +46,7 @@
{% endif %}
</div>
</div>
<div class="col-md-2 col-xs-6 price">
<div class="col-md-2 col-sm-3 col-xs-6 price">
{% if item.free_price %}
{% blocktrans trimmed with price=item.min_price|money:event.currency %}
from {{ price }}
@@ -64,7 +64,7 @@
{{ item.min_price|money:event.currency }}
{% endif %}
</div>
<div class="col-md-2 col-xs-6 availability-box">
<div class="col-md-2 col-sm-3 col-xs-6 availability-box">
{% if not event.settings.show_variations_expanded %}
{% if item.best_variation_availability <= 10 %}
{% if not item.min_price %}
@@ -89,7 +89,8 @@
data-label-alt="{% trans "Hide variants" %}"
aria-expanded="false"
aria-label="{% blocktrans trimmed with item=item.name count=item.available_variations|length %}Show {{count}} variants of {{ item }}{% endblocktrans %}">
{% trans "Show variants" %}
<span>{% trans "Show variants" %}</span>
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
</button>
{% endif %}
</div>
@@ -98,7 +99,7 @@
<div class="variations {% if not event.settings.show_variations_expanded %}variations-collapsed{% endif %}">
{% for var in item.available_variations %}
<article aria-labelledby="item-{{ item.pk }}-{{ var.pk }}-legend"{% if var.description %} aria-describedby="item-{{ item.pk }}-{{ var.pk }}-description"{% endif %} class="row product-row variation" id="item-{{ item.pk }}-{{ var.pk }}">
<div class="col-md-8 col-xs-12">
<div class="col-md-8 col-sm-6 col-xs-12">
<h5 id="item-{{ item.pk }}-{{ var.pk }}-legend">{{ var }}</h5>
{% if var.description %}
<div id="item-{{ item.pk }}-{{ var.pk }}-description" class="variation-description">
@@ -109,7 +110,7 @@
{% include "pretixpresale/event/fragment_quota_left.html" with avail=var.cached_availability %}
{% endif %}
</div>
<div class="col-md-2 col-xs-6 price">
<div class="col-md-2 col-sm-3 col-xs-6 price">
{% if var.original_price %}
<p>
<del><span class="sr-only">{% trans "Original price:" %}</span>
@@ -173,11 +174,11 @@
</p>
</div>
{% if item.require_voucher %}
<div class="col-md-2 col-xs-6 availability-box unavailable">
<div class="col-md-2 col-sm-3 col-xs-6 availability-box unavailable">
<p><small><a href="#voucher">{% trans "Enter a voucher code below to buy this ticket." %}</a></small></p>
</div>
{% elif var.cached_availability.0 == 100 %}
<div class="col-md-2 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 %}
<label class="item-checkbox-label">
<input type="checkbox" value="1"
@@ -213,7 +214,7 @@
</article>
{% else %}
<article aria-labelledby="item-{{ item.pk }}-legend"{% if item.description %} aria-describedby="item-{{ item.pk }}-description"{% endif %} class="row product-row simple" id="item-{{ item.pk }}">
<div class="col-md-8 col-xs-12">
<div class="col-md-8 col-sm-6 col-xs-12">
{% if item.picture %}
<a href="{{ item.picture.url }}" class="productpicture"
data-title="{{ item.name|force_escape|force_escape }}"
@@ -245,7 +246,7 @@
{% endif %}
</div>
</div>
<div class="col-md-2 col-xs-6 price">
<div class="col-md-2 col-sm-3 col-xs-6 price">
{% if item.original_price %}
<p>
<del><span class="sr-only">{% trans "Original price:" %}</span>
@@ -307,11 +308,11 @@
</p>
</div>
{% if item.require_voucher %}
<div class="col-md-2 col-xs-6 availability-box unavailable">
<div class="col-md-2 col-sm-3 col-xs-6 availability-box unavailable">
<p><small><a href="#voucher">{% trans "Enter a voucher code below to buy this ticket." %}</a></small></p>
</div>
{% elif item.cached_availability.0 == 100 %}
<div class="col-md-2 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 %}
<label class="item-checkbox-label">
<input type="checkbox" value="1" {% if itemnum == 1 %}checked{% endif %}

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

@@ -121,7 +121,7 @@
{% if item.has_variations %}
<article aria-labelledby="item-{{ item.pk }}-legend"{% if item.description %} aria-describedby="item-{{ item.pk }}-description"{% endif %} class="item-with-variations" id="item-{{ item.pk }}">
<div class="row product-row headline">
<div class="col-md-8 col-xs-12">
<div class="col-md-8 col-sm-6 col-xs-12">
{% if item.picture %}
<a href="{{ item.picture.url }}" class="productpicture"
data-title="{{ item.name|force_escape|force_escape }}"
@@ -143,7 +143,7 @@
{% endif %}
</div>
</div>
<div class="col-md-2 col-xs-6 price">
<div class="col-md-2 col-sm-3 col-xs-6 price">
{% if item.min_price != item.max_price or item.free_price %}
{% blocktrans trimmed with minprice=item.min_price|money:event.currency %}
from {{ minprice }}
@@ -156,14 +156,14 @@
{{ item.min_price|money:event.currency }}
{% endif %}
</div>
<div class="col-md-2 col-xs-6 availability-box">
<div class="col-md-2 col-sm-3 col-xs-6 availability-box">
</div>
<div class="clearfix"></div>
</div>
<div class="variations">
{% for var in item.available_variations %}
<article aria-labelledby="item-{{ item.pk }}-{{ var.pk }}-legend"{% if var.description %} aria-describedby="item-{{ item.pk }}-{{ var.pk }}-description"{% endif %} class="row product-row variation" id="item-{{ item.pk }}-{{ var.pk }}">
<div class="col-md-8 col-xs-12">
<div class="col-md-8 col-sm-6 col-xs-12">
<h5 id="item-{{ item.pk }}-{{ var.pk }}-legend">{{ var }}</h5>
{% if var.description %}
<div id="item-{{ item.pk }}-{{ var.pk }}-description" class="variation-description">
@@ -174,7 +174,7 @@
{% include "pretixpresale/event/fragment_quota_left.html" with avail=var.cached_availability %}
{% endif %}
</div>
<div class="col-md-2 col-xs-6 price">
<div class="col-md-2 col-sm-3 col-xs-6 price">
{% if var.original_price %}
<p>
<del><span class="sr-only">{% trans "Original price:" %}</span>
@@ -236,7 +236,7 @@
</p>
</div>
{% if var.cached_availability.0 == 100 %}
<div class="col-md-2 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 var.order_max == 1 %}
<label class="item-checkbox-label">
@@ -278,7 +278,7 @@
</article>
{% else %}
<article aria-labelledby="item-{{ item.pk }}-legend"{% if item.description %} aria-describedby="item-{{ item.pk }}-description"{% endif %} class="row product-row simple" id="item-{{ item.pk }}">
<div class="col-md-8 col-xs-12">
<div class="col-md-8 col-sm-6 col-xs-12">
{% if item.picture %}
<a href="{{ item.picture.url }}" class="productpicture"
data-title="{{ item.name|force_escape|force_escape }}"
@@ -310,7 +310,7 @@
{% endif %}
</div>
</div>
<div class="col-md-2 col-xs-6 price">
<div class="col-md-2 col-sm-3 col-xs-6 price">
{% if item.original_price %}
<p>
<del><span class="sr-only">{% trans "Original price:" %}</span>
@@ -370,7 +370,7 @@
</p>
</div>
{% if item.cached_availability.0 == 100 %}
<div class="col-md-2 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 item.order_max == 1 %}
<label class="item-checkbox-label">

2
src/pretix/static/pretixbase/js/details.js
View File

@@ -70,7 +70,7 @@ setup_collapsible_details = function (el) {
var altLabel = $button.attr("data-label-alt");
$button.attr("data-label-alt", $button.text());
$button.text(altLabel);
$button.find("span").text(altLabel);
$button.attr("aria-expanded", !isOpen);
if (isOpen) {

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

@@ -146,7 +146,7 @@ article.item-with-variations .product-row:last-child:after {
}
.product-row {
padding: 0.75*$line-height-computed 0;
padding: 1.25*$line-height-computed 0;
.count form {
display: inline;
@@ -163,6 +163,21 @@ article.item-with-variations .product-row:last-child:after {
&.total {
border-top: 1px solid $table-border-color;
}
&.variation>div:first-child {
position: relative;
padding-inline-start: calc(15px + 1.3em);
}
&.variation h5:before {
content: "";
display: block;
width: .65em;
height: 6px;
position: absolute;
left: 16px;
top: 0.35em;
border-width: 0 0 1px 1px;
border-style: solid;
}
}
.panel-contact dl {
margin-bottom: 0;
@@ -200,6 +215,25 @@ div.front-page {
margin-bottom: 15px;
}
}
@media (min-width: $screen-sm-min) {
.col-xs-6.availability-box,
.col-xs-6.price:has(.input-group-price) {
margin-top: -6px;
margin-bottom: -6px;
}
}
@media (max-width: $screen-xs-max) {
.product-description p:last-child {
margin-bottom: 15px;
}
.product-row .price {
text-align: left;
}
.product-row.variation .price {
padding-inline-start: calc(1.3em + 15px);
}
}
.subevent-list {
background-color: white;

5
src/pretix/static/pretixpresale/scss/_rtl.scss
View File

@@ -13,6 +13,11 @@ html.rtl {
margin-right: 0;
margin-left: 10px;
}
.product-row.variation h5:before {
left: auto;
right: 1px;
border-width: 0 1px 1px 0;
}
.cart-row > div {
float: right;
}

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

@@ -389,7 +389,9 @@ details summary {
-webkit-user-select: none;
user-select: none;
}
.nojs details[open] .collapse-indicator, details.details-open .collapse-indicator {
.nojs details[open] .panel-heading .collapse-indicator,
details.details-open .panel-heading .collapse-indicator,
[aria-expanded=true]>.collapse-indicator {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);