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/presale/management/commands/updatestyles.py

@@ -1,9 +1,11 @@
 import hashlib
 
 from django.conf import settings
+from django.core.cache import cache
 from django.core.files.base import ContentFile, File
 from django.core.files.storage import default_storage
 from django.core.management.base import BaseCommand
+from django.utils.timezone import now
 from django_scopes import scopes_disabled
 
 from pretix.base.models import Event_SettingsStore, Organizer_SettingsStore
@@ -16,12 +18,27 @@ from ...style import regenerate_css, regenerate_organizer_css
 class Command(BaseCommand):
     help = "Re-generate all custom stylesheets and scripts"
 
+    def add_arguments(self, parser):
+        parser.add_argument('--organizer', action='store', type=str)
+        parser.add_argument('--event', action='store', type=str)
+
     @scopes_disabled()
     def handle(self, *args, **options):
-        for es in Organizer_SettingsStore.objects.filter(key="presale_css_file"):
+        # Reset compile cache
+        cache.set('sass_compile_prefix', now().isoformat())
+
+        ostore = Organizer_SettingsStore.objects.filter(key="presale_css_file")
+        if options.get('organizer'):
+            ostore = ostore.filter(object__slug=options['organizer'])
+        for es in ostore:
             regenerate_organizer_css.apply_async(args=(es.object_id,))
 
-        for es in Event_SettingsStore.objects.filter(key="presale_css_file").order_by('-object__date_from'):
+        estore = Event_SettingsStore.objects.filter(key="presale_css_file").order_by('-object__date_from')
+        if options.get('event'):
+            estore = estore.filter(object__slug=options['event'])
+        if options.get('organizer'):
+            estore = estore.filter(object__organizer__slug=options['event'])
+        for es in estore:
             regenerate_css.apply_async(args=(es.object_id,))
 
         gs = GlobalSettingsObject()

src/pretix/presale/style.py

@@ -12,6 +12,7 @@ from django.core.files.base import ContentFile
 from django.core.files.storage import default_storage
 from django.dispatch import Signal
 from django.templatetags.static import static as _static
+from django.utils.timezone import now
 from django_scopes import scope
 
 from pretix.base.models import Event, Event_SettingsStore, Organizer
@@ -49,6 +50,12 @@ def compile_scss(object, file="main.scss", fonts=True):
         sassrules.append('$brand-success: {};'.format(object.settings.get('theme_color_success')))
     if object.settings.get('theme_color_danger'):
         sassrules.append('$brand-danger: {};'.format(object.settings.get('theme_color_danger')))
+    if object.settings.get('theme_color_background'):
+        sassrules.append('$body-bg: {};'.format(object.settings.get('theme_color_background')))
+    if not object.settings.get('theme_round_borders'):
+        sassrules.append('$border-radius-base: 0;')
+        sassrules.append('$border-radius-large: 0;')
+        sassrules.append('$border-radius-small: 0;')
 
     font = object.settings.get('primary_font')
     if font != 'Open Sans' and fonts:
@@ -72,7 +79,8 @@ def compile_scss(object, file="main.scss", fonts=True):
     sasssrc = "\n".join(sassrules)
     srcchecksum = hashlib.sha1(sasssrc.encode('utf-8')).hexdigest()
 
-    css = cache.get('sass_compile_{}'.format(srcchecksum))
+    cp = cache.get_or_set('sass_compile_prefix', now().isoformat())
+    css = cache.get('sass_compile_{}_{}'.format(cp, srcchecksum))
     if not css:
         cf = dict(django_libsass.CUSTOM_FUNCTIONS)
         cf['static'] = static

src/pretix/presale/templates/pretixpresale/base.html

@@ -51,7 +51,7 @@
 {{ html_page_header|safe }}
 {% block above %}
 {% endblock %}
-<div class="container">
+<div class="container main-box">
     {% block page %}
     {% endblock %}
     <footer>

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

@@ -30,20 +30,40 @@
             </div>
         </div>
     {% endif %}
-{% endblock %}
-{% block page %}
-    <div class="page-header">
+    <div class="container page-header-links">
+        {% if event.settings.locales|length > 1 %}
+            {% if event.settings.theme_color_background|upper != "#FFFFFF" or event.settings.logo_image_large %}
+                <div class="pull-right header-part flip">
+                    <div class="locales">
+                        {% for l in languages %}
+                            <a href="{% url "presale:locale.set" %}?locale={{ l.code }}&next={{ request.path }}%3F{{ request.META.QUERY_STRING|urlencode }}" class="{% if l.code == request.LANGUAGE_CODE %}active{% endif %}" rel="nofollow">
+                                {{ l.name_local }}</a>
+                        {% endfor %}
+                    </div>
+                </div>
+            {% endif %}
+        {% endif %}
         {% if request.event.settings.organizer_link_back %}
-            <p>
+            <div class="pull-left header-part flip">
                 <a href="{% eventurl request.organizer "presale:organizer.index" %}">
                     &laquo; {% blocktrans trimmed with name=request.organizer.name %}
-                        Show all events of {{ name }}
-                    {% endblocktrans %}
+                    Show all events of {{ name }}
+                {% endblocktrans %}
                 </a>
-            </p>
+            </div>
         {% endif %}
-        <div class="pull-left flip">
-            {% if event_logo %}
+        <div class="clearfix"></div>
+    </div>
+{% endblock %}
+{% block page %}
+    <div class="page-header {% if event_logo and event.settings.logo_image_large %}logo-large{% endif %}">
+        <div class="{% if not event_logo or not event.settings.logo_image_large %}pull-left flip{% endif %}">
+            {% if event_logo and event.settings.logo_image_large %}
+                <a href="{% eventurl event "presale:event.index" cart_namespace=cart_namespace|default_if_none:"" %}"
+                   title="{{ event.name }}">
+                    <img src="{{ event_logo|thumb:'1170x5000' }}" alt="{{ event.name }}" class="event-logo" />
+                </a>
+            {% elif event_logo %}
                 <a href="{% eventurl event "presale:event.index" cart_namespace=cart_namespace|default_if_none:"" %}"
                         title="{{ event.name }}">
                     <img src="{{ event_logo|thumb:'5000x120' }}" alt="{{ event.name }}" class="event-logo" />
@@ -57,16 +77,18 @@
                 </h1>
             {% endif %}
         </div>
-        <div class="pull-right flip loginbox">
-            {% if request.event.settings.locales|length > 1 %}
-                <div class="locales">
-                    {% for l in languages %}
-                        <a href="{% url "presale:locale.set" %}?locale={{ l.code }}&next={{ request.path }}%3F{{ request.META.QUERY_STRING|urlencode }}" class="{% if l.code == request.LANGUAGE_CODE %}active{% endif %}" rel="nofollow">
-                            {{ l.name_local }}</a>
-                    {% endfor %}
+        {% if event.settings.locales|length > 1 %}
+            {% if event.settings.theme_color_background|upper == "#FFFFFF" and not event.settings.logo_image_large %}
+                <div class="{% if not event_logo or not event.settings.logo_image_large %}pull-right flip{% endif %} loginbox">
+                    <div class="locales">
+                        {% for l in languages %}
+                            <a href="{% url "presale:locale.set" %}?locale={{ l.code }}&next={{ request.path }}%3F{{ request.META.QUERY_STRING|urlencode }}" class="{% if l.code == request.LANGUAGE_CODE %}active{% endif %}" rel="nofollow">
+                                {{ l.name_local }}</a>
+                        {% endfor %}
+                    </div>
                 </div>
             {% endif %}
-        </div>
+        {% endif %}
         <div class="clearfix"></div>
     </div>
     {% if request.event.testmode %}

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

@@ -25,6 +25,7 @@
             {{ ev.event_microdata }}
         </script>
     {% endautoescape %}
+
     {% if show_cart %}
         <details class="panel panel-primary cart" open>
             <summary class="panel-heading">
@@ -126,6 +127,14 @@
             <h2 class="subevent-head">{{ subevent.name }}</h2>
         {% endif %}
     {% endif %}
+    {% if event_logo and request.event.settings.logo_show_title and not subevent %}
+        <h2 class="content-header">
+            {{ event.name }}
+            {% if not event.has_subevents %}
+                <small>{{ event.get_date_range_display }}</small>
+            {% endif %}
+        </h2>
+    {% endif %}
 
     {% if frontpage_text and not cart_namespace %}
         <div>

src/pretix/presale/templates/pretixpresale/organizers/base.html

@@ -6,10 +6,31 @@
 {% block thetitle %}
     {% block title %}{% endblock %}{% if url_name != "organizer.index" %} :: {% endif %}{{ organizer.name }}
 {% endblock %}
+{% block above %}
+    {% if organizer.settings.locales|length > 1 %}
+        {% if organizer.settings.theme_color_background|upper != "#FFFFFF" or organizer.settings.organizer_logo_image_large %}
+            <div class="container page-header-links">
+                <div class="pull-right header-part flip">
+                    <div class="locales">
+                        {% for l in languages %}
+                            <a href="{% url "presale:locale.set" %}?locale={{ l.code }}&next={{ request.path }}%3F{{ request.META.QUERY_STRING|urlencode }}" class="{% if l.code == request.LANGUAGE_CODE %}active{% endif %}" rel="nofollow">
+                                {{ l.name_local }}</a>
+                        {% endfor %}
+                    </div>
+                </div>
+            </div>
+        {% endif %}
+    {% endif %}
+{% endblock %}
 {% block page %}
-    <div class="page-header">
-        <div class="pull-left flip">
-            {% if organizer_logo %}
+    <div class="page-header {% if organizer_logo and organizer.settings.organizer_logo_image_large %}logo-large{% endif %}">
+        <div class="{% if not organizer_logo or not organizer.settings.organizer_logo_image_large %}pull-left flip{% endif %}">
+            {% if organizer_logo and organizer.settings.organizer_logo_image_large %}
+                <a href="{% eventurl organizer "presale:organizer.index" %}" title="{{ organizer.name }}">
+                    <img src="{{ organizer_logo|thumb:'1170x5000' }}" alt="{{ organizer.name }}"
+                         class="organizer-logo" />
+                </a>
+            {% elif organizer_logo %}
                 <a href="{% eventurl organizer "presale:organizer.index" %}" title="{{ organizer.name }}">
                     <img src="{{ organizer_logo|thumb:'5000x120' }}" alt="{{ organizer.name }}"
                             class="organizer-logo" />
@@ -18,16 +39,18 @@
                 <h1><a href="{% eventurl organizer "presale:organizer.index" %}">{{ organizer.name }}</a></h1>
             {% endif %}
         </div>
-        <div class="pull-right flip loginbox">
-            {% if organizer.settings.locales|length > 1 %}
-                <div class="locales">
-                    {% for l in languages %}
-                        <a href="{% url "presale:locale.set" %}?locale={{ l.code }}&next={{ request.path }}%3F{{ request.META.QUERY_STRING|urlencode }}" class="{% if l.code == request.LANGUAGE_CODE %}active{% endif %}" rel="nofollow">
-                            {{ l.name_local }}</a>
-                    {% endfor %}
+        {% if organizer.settings.locales|length > 1 %}
+            {% if organizer.settings.theme_color_background|upper == "#FFFFFF" and not organizer.settings.organizer_logo_image_large %}
+                <div class="{% if not organizer_logo or not organizer.settings.organizer_logo_image_large %}pull-right flip{% endif %} loginbox">
+                    <div class="locales">
+                        {% for l in languages %}
+                            <a href="{% url "presale:locale.set" %}?locale={{ l.code }}&next={{ request.path }}%3F{{ request.META.QUERY_STRING|urlencode }}" class="{% if l.code == request.LANGUAGE_CODE %}active{% endif %}" rel="nofollow">
+                                {{ l.name_local }}</a>
+                        {% endfor %}
+                    </div>
                 </div>
             {% endif %}
-        </div>
+        {% endif %}
         <div class="clearfix"></div>
     </div>
     {% if messages %}