From c7060d188fccf2bc8c301f36cd0cff60752b342b Mon Sep 17 00:00:00 2001
From: Richard Schreiber <schreiber@rami.io>
Date: Fri, 3 Mar 2023 14:26:11 +0100
Subject: [PATCH] Product list: Indent variations, improve alignment of price
 and quantity (#3135)

---
 .../event/fragment_addon_choice.html          | 21 +++++------
 .../event/fragment_availability.html          |  4 +--
 .../event/fragment_product_list.html          | 25 ++++++-------
 .../pretixpresale/event/voucher.html          | 18 +++++-----
 src/pretix/static/pretixbase/js/details.js    |  2 +-
 .../static/pretixpresale/scss/_event.scss     | 36 ++++++++++++++++++-
 .../static/pretixpresale/scss/_rtl.scss       |  5 +++
 .../static/pretixpresale/scss/main.scss       |  4 ++-
 8 files changed, 79 insertions(+), 36 deletions(-)

diff --git a/src/pretix/presale/templates/pretixpresale/event/fragment_addon_choice.html b/src/pretix/presale/templates/pretixpresale/event/fragment_addon_choice.html
index 01b401a2c..f223a5337 100644
--- a/src/pretix/presale/templates/pretixpresale/event/fragment_addon_choice.html
+++ b/src/pretix/presale/templates/pretixpresale/event/fragment_addon_choice.html
@@ -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"
diff --git a/src/pretix/presale/templates/pretixpresale/event/fragment_availability.html b/src/pretix/presale/templates/pretixpresale/event/fragment_availability.html
index 5e97dd429..0f4bedebc 100644
--- a/src/pretix/presale/templates/pretixpresale/event/fragment_availability.html
+++ b/src/pretix/presale/templates/pretixpresale/event/fragment_availability.html
@@ -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." %}
diff --git a/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html b/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
index 1ac274119..8d7182beb 100644
--- a/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
+++ b/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
@@ -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 %}
diff --git a/src/pretix/presale/templates/pretixpresale/event/voucher.html b/src/pretix/presale/templates/pretixpresale/event/voucher.html
index 103df6c56..1c7e3c249 100644
--- a/src/pretix/presale/templates/pretixpresale/event/voucher.html
+++ b/src/pretix/presale/templates/pretixpresale/event/voucher.html
@@ -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">
diff --git a/src/pretix/static/pretixbase/js/details.js b/src/pretix/static/pretixbase/js/details.js
index b493db801..af0fabbac 100644
--- a/src/pretix/static/pretixbase/js/details.js
+++ b/src/pretix/static/pretixbase/js/details.js
@@ -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) {
diff --git a/src/pretix/static/pretixpresale/scss/_event.scss b/src/pretix/static/pretixpresale/scss/_event.scss
index 7f7e50928..02570e634 100644
--- a/src/pretix/static/pretixpresale/scss/_event.scss
+++ b/src/pretix/static/pretixpresale/scss/_event.scss
@@ -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;
diff --git a/src/pretix/static/pretixpresale/scss/_rtl.scss b/src/pretix/static/pretixpresale/scss/_rtl.scss
index fcdf9b0ec..550c2e912 100644
--- a/src/pretix/static/pretixpresale/scss/_rtl.scss
+++ b/src/pretix/static/pretixpresale/scss/_rtl.scss
@@ -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;
   }
diff --git a/src/pretix/static/pretixpresale/scss/main.scss b/src/pretix/static/pretixpresale/scss/main.scss
index 002842c81..da44b4625 100644
--- a/src/pretix/static/pretixpresale/scss/main.scss
+++ b/src/pretix/static/pretixpresale/scss/main.scss
@@ -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);