CGM_Public/pretix_original
2
0
Fork 1
mirror of https://github.com/pretix/pretix.git synced 2026-05-07 15:34: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">