Allowing more options to style pretix shops (#1585)

* Fix caching issues in SASS compilation

* Allow to set a custom page background color

* Allow to disable round corners

* Support larger header pictures

* Allow to show title despite header

* Move language picker

* FIx widget styles

src/pretix/control/forms/event.py

@@ -355,11 +355,23 @@ class EventSettingsForm(SettingsForm):
         required=False,
     )
     logo_image = ExtFileField(
-        label=_('Logo image'),
+        label=_('Header image'),
         ext_whitelist=(".png", ".jpg", ".gif", ".jpeg"),
         required=False,
-        help_text=_('If you provide a logo image, we will by default not show your events name and date '
-                    'in the page header. We will show your logo with a maximal height of 120 pixels.')
+        help_text=_('If you provide a logo image, we will by default not show your event name and date '
+                    'in the page header. By default, we show your logo with a size of up to 1140x120 pixels. You '
+                    'can increase the size with the setting below. We recommend not using small details on the picture '
+                    'as it will be resized on smaller screens.')
+    )
+    logo_image_large = forms.BooleanField(
+        label=_('Use header image in its full size'),
+        help_text=_('We recommend to upload a picture at least 1170 pixels wide.'),
+        required=False,
+    )
+    logo_show_title = forms.BooleanField(
+        label=_('Show event title even if a header image is present'),
+        help_text=_('The title will only be shown on the event front page.'),
+        required=False,
     )
     og_image = ExtFileField(
         label=_('Social media image'),
@@ -399,6 +411,20 @@ class EventSettingsForm(SettingsForm):
         ],
         widget=forms.TextInput(attrs={'class': 'colorpickerfield'})
     )
+    theme_color_background = forms.CharField(
+        label=_("Page background color"),
+        required=False,
+        validators=[
+            RegexValidator(regex='^#[0-9a-fA-F]{6}$',
+                           message=_('Please enter the hexadecimal code of a color, e.g. #990000.')),
+
+        ],
+        widget=forms.TextInput(attrs={'class': 'colorpickerfield no-contrast'})
+    )
+    theme_round_borders = forms.BooleanField(
+        label=_("Use round edges"),
+        required=False,
+    )
     primary_font = forms.ChoiceField(
         label=_('Font'),
         choices=[

src/pretix/control/forms/organizer.py

@@ -250,6 +250,20 @@ class OrganizerSettingsForm(SettingsForm):
         ],
         widget=forms.TextInput(attrs={'class': 'colorpickerfield'})
     )
+    theme_color_background = forms.CharField(
+        label=_("Page background color"),
+        required=False,
+        validators=[
+            RegexValidator(regex='^#[0-9a-fA-F]{6}$',
+                           message=_('Please enter the hexadecimal code of a color, e.g. #990000.')),
+
+        ],
+        widget=forms.TextInput(attrs={'class': 'colorpickerfield no-contrast'})
+    )
+    theme_round_borders = forms.BooleanField(
+        label=_("Use round edges"),
+        required=False,
+    )
     organizer_homepage_text = I18nFormField(
         label=_('Homepage text'),
         required=False,
@@ -257,11 +271,18 @@ class OrganizerSettingsForm(SettingsForm):
         help_text=_('This will be displayed on the organizer homepage.')
     )
     organizer_logo_image = ExtFileField(
-        label=_('Logo image'),
+        label=_('Header image'),
         ext_whitelist=(".png", ".jpg", ".gif", ".jpeg"),
         required=False,
         help_text=_('If you provide a logo image, we will by default not show your organization name '
-                    'in the page header. We will show your logo with a maximal height of 120 pixels.')
+                    'in the page header. By default, we show your logo with a size of up to 1140x120 pixels. You '
+                    'can increase the size with the setting below. We recommend not using small details on the picture '
+                    'as it will be resized on smaller screens.')
+    )
+    organizer_logo_image_large = forms.BooleanField(
+        label=_('Use header image in its full size'),
+        help_text=_('We recommend to upload a picture at least 1170 pixels wide.'),
+        required=False,
     )
     event_list_type = forms.ChoiceField(
         label=_('Default overview style'),

src/pretix/control/templates/pretixcontrol/event/settings.html

@@ -98,12 +98,16 @@
             <fieldset>
                 <legend>{% trans "Shop design" %}</legend>
                 {% bootstrap_field sform.logo_image layout="control" %}
+                {% bootstrap_field sform.logo_image_large layout="control" %}
+                {% bootstrap_field sform.logo_show_title layout="control" %}
                 {% bootstrap_field sform.og_image layout="control" %}
                 {% url "control:organizer.edit" organizer=request.organizer.slug as org_url %}
                 {% propagated request.event org_url "primary_color" "primary_font" "theme_color_success" "theme_color_danger" %}
                     {% bootstrap_field sform.primary_color layout="control" %}
                     {% bootstrap_field sform.theme_color_success layout="control" %}
                     {% bootstrap_field sform.theme_color_danger layout="control" %}
+                    {% bootstrap_field sform.theme_color_background layout="control" %}
+                    {% bootstrap_field sform.theme_round_borders layout="control" %}
                     {% bootstrap_field sform.primary_font layout="control" %}
                 {% endpropagated %}
             </fieldset>

src/pretix/control/templates/pretixcontrol/organizers/edit.html

@@ -37,6 +37,7 @@
             <fieldset>
                 <legend>{% trans "Organizer page" %}</legend>
                 {% bootstrap_field sform.organizer_logo_image layout="control" %}
+                {% bootstrap_field sform.organizer_logo_image_large layout="control" %}
                 {% bootstrap_field sform.organizer_homepage_text layout="control" %}
                 {% bootstrap_field sform.event_list_type layout="control" %}
                 {% bootstrap_field sform.event_list_availability layout="control" %}
@@ -57,6 +58,8 @@
                 {% bootstrap_field sform.primary_color layout="control" %}
                 {% bootstrap_field sform.theme_color_success layout="control" %}
                 {% bootstrap_field sform.theme_color_danger layout="control" %}
+                {% bootstrap_field sform.theme_color_background layout="control" %}
+                {% bootstrap_field sform.theme_round_borders layout="control" %}
                 {% bootstrap_field sform.primary_font layout="control" %}
                 {% bootstrap_field sform.favicon layout="control" %}
             </fieldset>

src/pretix/control/views/event.py

@@ -156,6 +156,7 @@ class EventUpdate(DecoupleMixin, EventSettingsViewMixin, EventPermissionRequired
             })
             display_properties = (
                 'primary_color', 'theme_color_success', 'theme_color_danger', 'primary_font',
+                'theme_color_background', 'theme_round_borders',
             )
             if any(p in self.sform.changed_data for p in display_properties):
                 change_css = True

src/pretix/control/views/organizer.py

@@ -278,6 +278,7 @@ class OrganizerUpdate(OrganizerPermissionRequiredMixin, UpdateView):
             )
             display_properties = (
                 'primary_color', 'theme_color_success', 'theme_color_danger', 'primary_font',
+                'theme_color_background', 'theme_round_borders'
             )
             if any(p in self.sform.changed_data for p in display_properties):
                 change_css = True