From 07192131551cd30fdf4de817597a8471fd1f94b6 Mon Sep 17 00:00:00 2001
From: Raphael Michel <michel@rami.io>
Date: Thu, 15 Apr 2021 22:09:04 +0200
Subject: [PATCH] Clean up alignment on shop page (#2025)

---
 .../event/fragment_product_list.html          | 10 ++---
 .../templates/pretixpresale/event/index.html  |  6 +--
 .../static/pretixpresale/scss/_event.scss     | 44 ++++++++++++++++---
 3 files changed, 45 insertions(+), 15 deletions(-)

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 2136c3f12..8ebd5f1c7 100644
--- a/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
+++ b/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
@@ -17,10 +17,10 @@
         {% endif %}
         {% for item in tup.1 %}
             {% if item.has_variations %}
-                <article>
-                <details class="item-with-variations" {% if event.settings.show_variations_expanded %}open{% endif %}
+                <article class="item-with-variations">
+                <details {% if event.settings.show_variations_expanded %}open{% endif %}
                         id="item-{{ item.id }}">
-                    <summary class="row-fluid product-row headline">
+                    <summary class="row product-row headline">
                         <div class="col-md-8 col-xs-12">
                             {% if item.picture %}
                                 <a href="{{ item.picture.url }}" class="productpicture"
@@ -78,7 +78,7 @@
                     </summary>
                     <div class="variations {% if not event.settings.show_variations_expanded %}variations-collapsed{% endif %}">
                         {% for var in item.available_variations %}
-                            <article class="row-fluid product-row variation">
+                            <article class="row product-row variation">
                                 <div class="col-md-8 col-xs-12">
                                     <h5>
                                         <label for="variation_{{ item.pk }}_{{ var.pk }}">
@@ -179,7 +179,7 @@
                 </details>
                 </article>
             {% else %}
-                <article class="row-fluid product-row simple" id="item-{{ item.id }}">
+                <article class="row product-row simple" id="item-{{ item.id }}">
                     <div class="col-md-8 col-xs-12">
                         {% if item.picture %}
                             <a href="{{ item.picture.url }}" class="productpicture"
diff --git a/src/pretix/presale/templates/pretixpresale/event/index.html b/src/pretix/presale/templates/pretixpresale/event/index.html
index e12d552c2..2e5282443 100644
--- a/src/pretix/presale/templates/pretixpresale/event/index.html
+++ b/src/pretix/presale/templates/pretixpresale/event/index.html
@@ -271,7 +271,7 @@
                 {% include "pretixpresale/event/fragment_product_list.html" %}
                 {% if ev.presale_is_running and display_add_to_cart %}
                     <section class="front-page">
-                        <div class="row-fluid">
+                        <div class="row">
                             <div class="col-md-4 col-md-offset-8 col-xs-12">
                                 <button class="btn btn-block btn-primary btn-lg" type="submit" id="btn-add-to-cart">
                                     {% if request.event.settings.redirect_to_checkout_directly %}
@@ -302,7 +302,7 @@
                 </div>
             {% endif %}
             <form method="get" action="{% eventurl event "presale:event.redeem" cart_namespace=cart_namespace %}">
-                <div class="row-voucher">
+                <div class="row row-voucher">
                     <div class="col-md-8 col-sm-6 col-xs-12">
                         <label for="voucher" class="sr-only">{% trans "Voucher code" %}</label>
                         <div class="input-group">
@@ -326,7 +326,7 @@
         {% eventsignal event "pretix.presale.signals.front_page_bottom" subevent=subevent request=request %}
         <aside class="front-page" aria-labelledby="if-you-already-ordered-a-ticket">
             <h3 id="if-you-already-ordered-a-ticket">{% trans "If you already ordered a ticket" %}</h3>
-            <div>
+            <div class="row">
                 <div class="col-md-8 col-xs-12">
                     <p>
                         {% blocktrans trimmed %}
diff --git a/src/pretix/static/pretixpresale/scss/_event.scss b/src/pretix/static/pretixpresale/scss/_event.scss
index 5901d0784..5d706066c 100644
--- a/src/pretix/static/pretixpresale/scss/_event.scss
+++ b/src/pretix/static/pretixpresale/scss/_event.scss
@@ -1,5 +1,4 @@
 .product-row {
-    border-top: 1px solid $table-border-color;
     .addons &:first-child {
         border-top: 2px solid $table-border-color;
     }
@@ -84,6 +83,43 @@
         font-weight: bold;
         text-decoration: none;
     }
+
+    position: relative;
+
+    border-top: 1px solid transparent;
+    &::before {
+        position: absolute;
+        top: 0;
+        left: 15px;
+        width: calc(100% - 30px);
+        content: '';
+        border-top: 1px solid $table-border-color;
+    }
+
+    &.headline, &.simple {
+        border-top: 2px solid transparent;
+        &::before {
+            border-top: 2px solid $table-border-color;
+        }
+    }
+}
+
+article.item-with-variations {
+    margin: 0 -15px;
+    padding: 0 15px;
+}
+
+article.item-with-variations:last-child, .product-row:last-child {
+    position: relative;
+    border-bottom: 2px solid transparent;
+    &::after {
+        position: absolute;
+        bottom: 0;
+        left: 15px;
+        width: calc(100% - 30px);
+        content: '';
+        border-bottom: 2px solid $table-border-color;
+    }
 }
 
 .radio .variation-description {
@@ -101,12 +137,6 @@
 #voucher-toggle {
     display: none;
 }
-.item-with-variations .product-row.headline, .product-row.simple {
-    border-top: 2px solid $table-border-color;
-}
-.item-with-variations:last-child {
-    border-bottom: 2px solid $table-border-color;
-}
 
 .panel-body address:last-child {
     margin-bottom: 0;