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

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) {

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;

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

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);