improved layout

src/pretix/control/templates/pretixcontrol/items/category.html

@@ -16,8 +16,8 @@
                         {% bootstrap_field form.internal_name layout="control" %}
                     </div>
                     {% bootstrap_field form.description layout="control" %}
-                    {% bootstrap_field form.category_type layout="control" %}
-                    {% bootstrap_field form.cross_selling_condition layout="control" %}
+                    {% bootstrap_field form.category_type layout="control" horizontal_field_class="big-radio-wrapper col-lg-9" %}
+                    {% bootstrap_field form.cross_selling_condition layout="control" horizontal_field_class="big-radio-wrapper col-lg-9" %}
                     {% bootstrap_field form.cross_selling_match_products layout="control" %}
                 </fieldset>
             </div>

src/pretix/presale/templates/pretixpresale/event/checkout_addons.html

@@ -20,10 +20,12 @@
                 <details class="panel panel-default" open>
                     <summary class="panel-heading">
                         <h3 class="panel-title">
-                            <span class="sr-only">{% trans "Add-ons:" %}</span>
-                            <strong>{{ form.item.name }}{% if form.variation %}
-                                – {{ form.variation }}
-                            {% endif %}</strong>
+                            <span>
+                                {% trans "Additional options for" %}
+                                <strong>{{ form.item.name }}{% if form.variation %}
+                                    – {{ form.variation }}
+                                {% endif %}</strong>
+                            </span>
                         </h3>
                     </summary>
                     <div id="cp{{ form.pos.pk }}">
@@ -50,7 +52,18 @@
             {% endfor %}
         </div>
 
-        {% include "pretixpresale/event/fragment_product_list.html" with items_by_category=cross_selling_data ev=event %}
+        {% if cross_selling_data %}
+            <details class="panel panel-default cross-selling" open>
+                <summary class="panel-heading">
+                    <h3 class="panel-title">
+                        {% trans "More recommendations" %}
+                    </h3>
+                </summary>
+                <div class="panel-body">
+                    {% include "pretixpresale/event/fragment_product_list.html" with items_by_category=cross_selling_data ev=event %}
+                </div>
+            </details>
+        {% endif %}
 
         <div class="row checkout-button-row">
             <div class="col-md-4 col-sm-6">

src/pretix/static/pretixcontrol/scss/_forms.scss

@@ -567,7 +567,7 @@ table td > .checkbox input[type="checkbox"] {
     }
   }
 }
-.form-horizontal .big-radio {
+.form-horizontal .big-radio, .form-horizontal .big-radio-wrapper .radio {
   border: 1px solid #ccc;
   border-bottom: 0;
   padding: 0;
@@ -588,6 +588,9 @@ table td > .checkbox input[type="checkbox"] {
     border-bottom: 1px solid #ccc;
   }
 }
+.form-horizontal .big-radio-wrapper .radio label > span {
+  display: block;
+}
 .accordion-radio {
   display: block;
   margin: 0;

src/pretix/static/pretixpresale/scss/_checkout.scss

@@ -102,6 +102,9 @@
     }
   }
 }
+.cross-selling .panel-body > section:first-child > h3 {
+  margin-top: 10px; font-size: 21px;
+}
 
 
 .panel-confirm {