colors, icons, and meta tags for mobile devices

src/c3nav/settings.py

@@ -298,6 +298,7 @@ TEMPLATES = [
                 'django.contrib.auth.context_processors.auth',
                 'django.contrib.messages.context_processors.messages',
                 'c3nav.site.context_processors.logos',
+                'c3nav.site.context_processors.colors',
                 'c3nav.site.context_processors.user_data_json',
             ],
             'loaders': template_loaders
@@ -334,11 +335,14 @@ COMPRESS_CSS_FILTERS = (
 
 HEADER_LOGO = config.get('c3nav', 'header_logo', fallback=None)
 FAVICON = config.get('c3nav', 'favicon', fallback=None)
+FAVICON_PACKAGE = config.get('c3nav', 'favicon_package', fallback=None)
 
 PRIMARY_COLOR = config.get('c3nav', 'primary_color', fallback='')
 HEADER_BACKGROUND_COLOR = config.get('c3nav', 'header_background_color', fallback='')
 HEADER_TEXT_COLOR = config.get('c3nav', 'header_text_color', fallback='')
 HEADER_TEXT_HOVER_COLOR = config.get('c3nav', 'header_text_hover_color', fallback='')
+SAFARI_MASK_ICON_COLOR = config.get('c3nav', 'safari_mask_icon_color', fallback=PRIMARY_COLOR)
+MSAPPLICATION_TILE_COLOR = config.get('c3nav', 'msapplication_tile_color', fallback='')
 
 WIFI_SSIDS = [n for n in config.get('c3nav', 'wifi_ssids', fallback='').split(',') if n]
 

src/c3nav/site/context_processors.py

@@ -1,15 +1,24 @@
 import json
 import os
 
+from django.conf import settings
 from django.core.serializers.json import DjangoJSONEncoder
 
-from c3nav.site.finders import logo_paths
+from c3nav.site.finders import favicon_package_files, logo_paths
 
 logos_result = {
     prefix: os.path.join(prefix, os.path.basename(path)) if path else None
     for prefix, path in logo_paths.items()
 }
 
+if settings.FAVICON_PACKAGE:
+    logos_result['favicon_package'] = {
+        '.'.join(file.split('.')[:-1]): os.path.join('favicon_package', file)
+        for file in favicon_package_files
+    }
+else:
+    logos_result['favicon_package'] = None
+
 
 def logos(request):
     return logos_result
@@ -19,3 +28,14 @@ def user_data_json(request):
     return {
         'user_data_json': lambda: json.dumps(dict(request.user_data), separators=(',', ':'), cls=DjangoJSONEncoder),
     }
+
+
+def colors(request):
+    return {'colors': {
+        'primary_color': settings.PRIMARY_COLOR,
+        'header_background_color': settings.HEADER_BACKGROUND_COLOR,
+        'header_text_color': settings.HEADER_TEXT_COLOR,
+        'header_text_hover_color': settings.HEADER_TEXT_HOVER_COLOR,
+        'safari_mask_icon_color': settings.SAFARI_MASK_ICON_COLOR,
+        'msapplication_tile_color': settings.MSAPPLICATION_TILE_COLOR,
+    }}

src/c3nav/site/finders.py

@@ -15,6 +15,23 @@ logofinder_results = {
     if path
 }
 
+favicon_package_files = {
+        'android-chrome-192x192.png',
+        'android-chrome-512x512.png',
+        'apple-touch-icon.png',
+        'browserconfig.xml',
+        'mstile-150x150.png',
+        'mstile-310x310.png',
+        'safari-pinned-tab.svg',
+        'site.webmanifest',
+    }
+
+if settings.FAVICON_PACKAGE and os.path.isdir(settings.FAVICON_PACKAGE):
+    logofinder_results.update({
+        os.path.join('favicon_package', file): os.path.join(settings.FAVICON_PACKAGE, file)
+        for file in favicon_package_files
+    })
+
 
 class LogoFinder(BaseFinder):
     def find(self, path, all=False):
@@ -34,4 +51,8 @@ class LogoFinder(BaseFinder):
             storage = FileSystemStorage(location=basedir)
             storage.prefix = prefix
             result.append((filename, storage))
+        if settings.FAVICON_PACKAGE and os.path.isdir(settings.FAVICON_PACKAGE):
+            storage = FileSystemStorage(location=settings.FAVICON_PACKAGE)
+            storage.prefix = 'favicon_package'
+            result += [(filename, storage) for filename in favicon_package_files]
         return result

src/c3nav/site/templates/site/base.html

@@ -10,6 +10,17 @@
     {% if favicon %}
         <link href="{% static favicon %}" rel="icon">
     {% endif %}
+    {% if favicon_package %}
+    <link rel="apple-touch-icon" sizes="180x180" href="{% static 'favicon_package/apple-touch-icon.png' %}">
+    <link rel="manifest" href="{% static 'favicon_package/site.webmanifest' %}">
+    <link rel="mask-icon" href="{% static 'favicon_package/safari-pinned-tab.svg' %}" color="{{ colors.safari_mask_icon_color }}">
+    <meta name="apple-mobile-web-app-title" content="c3nav">
+    <meta name="application-name" content="c3nav">
+    <meta name="msapplication-TileColor" content="{{ colors.msapplication_tile_color }}">
+    <meta name="msapplication-config" content="{% static 'favicon_package/browserconfig.xml' %}">
+    {% endif %}
+    <meta name="theme-color" content="{{ colors.header_background_color }}">
+
     {% compress css %}
         <link href="{% static 'fonts/fonts.css' %}" rel="stylesheet">
         <link href="{% static 'normalize/normalize.css' %}" rel="stylesheet">