From f0f03c1175c0f8d89bf01599b164303efc1e6766 Mon Sep 17 00:00:00 2001
From: Matthew Grove <me@mgrove.uk>
Date: Thu, 19 Jan 2023 23:28:36 +0000
Subject: [PATCH] [FEAT] Allow changing header image scaling on home page

---
 breccia_mapper/settings.py             | 6 +++++-
 breccia_mapper/static/css/masthead.css | 7 +++++++
 breccia_mapper/templates/index.html    | 2 +-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/breccia_mapper/settings.py b/breccia_mapper/settings.py
index 3a3d8fe..3c55ead 100644
--- a/breccia_mapper/settings.py
+++ b/breccia_mapper/settings.py
@@ -350,7 +350,7 @@ CONSTANCE_CONFIG = {
         'Help text to display at the top of relationship forms.'),
     'DEPLOYMENT_URL': (
       'http://localhost',
-      'URL at which this mapper tool is accessible'),
+      'URL at which this mapper tool is accessible - do NOT include a trailing forward slash'),
     'PARENT_PROJECT_NAME': (
       '',
       'Parent project name'),
@@ -370,6 +370,9 @@ CONSTANCE_CONFIG = {
       '800x500.png',
       'Homepage header image',
       'image_field'),
+    'HOMEPAGE_HEADER_IMAGE_SHRINK': (
+      False,
+      'Shrink the homepage header image to display the whole image at all times'),
     'HOMEPAGE_CARD_1_TITLE': (
       'Step 1',
       'Homepage card #1 title'),
@@ -418,6 +421,7 @@ CONSTANCE_CONFIG_FIELDSETS = {
         'PROJECT_TAGLINE',
     ),
     'Homepage configuration': (
+        'HOMEPAGE_HEADER_IMAGE_SHRINK',
         'HOMEPAGE_HEADER_IMAGE',
         'HOMEPAGE_CARD_1_TITLE',
         'HOMEPAGE_CARD_1_DESCRIPTION',
diff --git a/breccia_mapper/static/css/masthead.css b/breccia_mapper/static/css/masthead.css
index e4364db..da2a357 100644
--- a/breccia_mapper/static/css/masthead.css
+++ b/breccia_mapper/static/css/masthead.css
@@ -12,6 +12,13 @@ header.masthead {
     z-index: -2;
 }
 
+header.masthead.masthead-shrink {
+    -webkit-background-size: contain;
+    -moz-background-size: contain;
+    -o-background-size: contain;
+    background-size: contain;
+}
+
 header.masthead .overlay {
     position: absolute;
     background-color: #212529;
diff --git a/breccia_mapper/templates/index.html b/breccia_mapper/templates/index.html
index 5ab3ad7..c6125d9 100644
--- a/breccia_mapper/templates/index.html
+++ b/breccia_mapper/templates/index.html
@@ -10,7 +10,7 @@
 {% block before_content %}
 
     {% get_media_prefix as MEDIA_URL %}
-    <header class="container-fluid masthead text-white text-left"
+    <header class="container-fluid masthead text-white text-left {% if config.HOMEPAGE_HEADER_IMAGE_SHRINK %}masthead-shrink{% endif %}"
             style="background-image: url('{{ MEDIA_URL }}{{ config.HOMEPAGE_HEADER_IMAGE }}')">
         <div class="overlay"></div>