Add footer background and update carousel (#4236)

kartoza · Sep 10, 2024 · cebd2b7 · cebd2b7
1 parent 2c5eb32
commit cebd2b7
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 10 deletions.
diff --git a/bims/static/css/custom_landing_page.css b/bims/static/css/custom_landing_page.css
@@ -58,12 +58,14 @@ header.masthead {
 
 .header-image {
     background-position: center center;
-    background-size: cover;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
+    background-size: contain;
+    -webkit-background-size: contain;
+    -moz-background-size: contain;
+    -o-background-size: contain;
     background-attachment: scroll;
     height: 100%;
+    width: 100%;
+    background-repeat: no-repeat;
 }
 
 header.masthead hr {

diff --git a/bims/static/css/landing_page.css b/bims/static/css/landing_page.css
@@ -80,13 +80,19 @@ header.masthead {
 }
 
 .header-image {
-    background-position: center top;
-    background-size: cover;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
+    background-position: center center;
+    background-size: contain;
+    -webkit-background-size: contain;
+    -moz-background-size: contain;
+    -o-background-size: contain;
     background-attachment: scroll;
     height: 100%;
+    width: 100%;
+    background-repeat: no-repeat;
+}
+
+#header {
+    margin-top: 55px;
 }
 
 header.masthead hr {

diff --git a/bims/templates/carousel.html b/bims/templates/carousel.html
@@ -17,7 +17,7 @@
                 <div class="carousel-overlay" style="background-color: {{ header.overlay }}; opacity: {{ header.overlay_opacity }}"></div>
                 <div class="carousel-title" style="color: {{ header.color }}">
                     <div>
-                        <p style="font-size: {{ header.title_font_size }}px; font-weight: {{ header.text_style }}; text-align: {{ header.text_alignment }}">
+                        <p class="carousel-title-text" style="font-weight: {{ header.text_style }}; text-align: {{ header.text_alignment }};">
                             {{ header.title | linebreaksbr }}
                         </p>
                     </div>
@@ -45,6 +45,30 @@ <h5><p style="font-size: {{ header.description_font_size }}px; font-weight: {{ h
                         .header-{{ header.id }} {
                             background-image: url("uploaded/{{ header.file }}");
                         }
+                        .carousel-title-text {
+                            font-size: {{ header.title_font_size }}px !important;
+                            line-height: {{ header.title_font_size|add:5 }}px;
+                        }
+
+                        @media (min-width: 1200px) {
+                            .carousel-title-text {
+                                font-size: {{ header.title_font_size|add:5 }}px !important;
+                            }
+                        }
+
+                        @media (min-width: 768px) and (max-width: 1199px) {
+                            .carousel-title-text {
+                                font-size: {{ header.title_font_size|add:-30 }}px !important;
+                                line-height: {{ header.title_font_size|add:-30 }}px !important;
+                            }
+                        }
+
+                        @media (max-width: 767px) {
+                            .carousel-title-text {
+                                font-size: {{ header.title_font_size|add:-40 }}px !important;
+                                line-height: {{ header.title_font_size|add:-40 }}px !important;
+                            }
+                        }
                     </style>
                 </div>
             </div>

diff --git a/bims/templates/footer.html b/bims/templates/footer.html
@@ -4,6 +4,22 @@
         padding: 50px 0 65px;
         font-family: 'Roboto', 'Times New Roman', serif;
         font-weight: 300;
+        position: relative;
+        z-index: 1;
+        width: 100%;
+    }
+
+    .footer-background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-position: center center;
+        background-size: cover;
+        width: 100%;
+        height: auto;
+        background-repeat: no-repeat;
+        z-index: -1;
+        overflow: hidden;
     }
 
     footer .list-inline {
@@ -26,6 +42,9 @@
 <hr class="footer-hr" style="border-color: #c6c6c6"/>
 <!-- Footer -->
 <footer>
+    {% if custom_theme.footer_background %}
+        <img src="uploaded/{{ custom_theme.footer_background }}" alt="Footer background" class="footer-background">
+    {% endif %}
     <p class="copyright text-muted">{{ preferences.SiteSetting.copyright_text }} {% now 'Y' %}</p>
     <p class="copyright text-muted"> Version : {% current_version %} </p>
 </footer>
diff --git a/bims_theme/migrations/0015_customtheme_footer_background.py b/bims_theme/migrations/0015_customtheme_footer_background.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.15 on 2024-09-10 12:05
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('bims_theme', '0014_customtheme_login_modal_logo_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='customtheme',
+            name='footer_background',
+            field=models.ImageField(blank=True, help_text='Background image for footer in landing page.', null=True, upload_to=''),
+        ),
+    ]
diff --git a/bims_theme/models/theme.py b/bims_theme/models/theme.py
@@ -185,6 +185,11 @@ class CustomTheme(models.Model):
         null=True,
         help_text='Background image for login/logout page.'
     )
+    footer_background = models.ImageField(
+        blank=True,
+        null=True,
+        help_text='Background image for footer in landing page.'
+    )
     hide_site_visit = models.BooleanField(
         default=False,
         help_text='Hide site visit in the landing page'