wagtail-cjkcms 24.3.1__py2.py3-none-any.whl → 25.1.6__py2.py3-none-any.whl

cjkcms/templates/404.html

@@ -1,94 +1,56 @@
 {% extends "cjkcms/pages/web_page_notitle.html" %}
 
 {% block custom_assets %}
-    <style>
-        body {
-            background-color: #FFFFFF;
-          }
-          svg {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            margin-top: -250px;
-            margin-left: -400px;
-          }
-          .message-box {
-            height: 200px;
-            width: 380px;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            margin-top: -100px;
-            margin-left: 50px;
-            color: #333;
-            font-family: Roboto;
-            font-weight: 300;
-          }
-          .message-box h1 {
-            font-size: 60px;
-            line-height: 46px;
-            margin-bottom: 40px;
-          }
-          .buttons-con .action-link-wrap {
-            margin-top: 40px;
-          }
-          .buttons-con .action-link-wrap a {
-            background: #68c950;
-            padding: 8px 25px;
-            border-radius: 4px;
-            color: #333;
-            font-weight: bold;
-            font-size: 14px;
-            transition: all 0.3s linear;
-            cursor: pointer;
-            text-decoration: none;
-            margin-right: 10px
-          }
-          .buttons-con .action-link-wrap a:hover {
-            background: #5A5C6C;
-            color: #333;
-          }
-          
-          #Polygon-1 , #Polygon-2 , #Polygon-3 , #Polygon-4 , #Polygon-4, #Polygon-5 {
-            animation: float 1s infinite ease-in-out alternate;
-          }
-          #Polygon-2 {
-            animation-delay: .2s; 
-          }
-          #Polygon-3 {
-            animation-delay: .4s; 
-          }
-          #Polygon-4 {
-            animation-delay: .6s; 
-          }
-          #Polygon-5 {
-            animation-delay: .8s; 
-          }
-          
-          @keyframes float {
-              100% {
-              transform: translateY(20px);
-            }
-          }
-          @media (max-width: 450px) {
-            svg {
-              position: absolute;
-              top: 50%;
-              left: 50%;
-              margin-top: -250px;
-              margin-left: -190px;
-              width: 190px;
-              height: 250px;
-            }
-            .message-box {
-              top: 50%;
-              left: 50%;
-              margin-top: -100px;
-              margin-left: -190px;
-              text-align: center;
-            }
-          }
-    </style>
+<style>
+    body {
+        background-color: #FFFFFF;
+    }
+    .message-box h1 {
+        font-size: 60px;
+        line-height: 46px;
+        margin-bottom: 40px;
+    }
+    .buttons-con .action-link-wrap {
+        margin-top: 40px;
+    }
+    .buttons-con .action-link-wrap a {
+        background: #68c950;
+        padding: 8px 25px;
+        border-radius: 4px;
+        color: #333;
+        font-weight: bold;
+        font-size: 14px;
+        transition: all 0.3s linear;
+        cursor: pointer;
+        text-decoration: none;
+        margin-right: 10px
+    }
+    .buttons-con .action-link-wrap a:hover {
+        background: #5A5C6C;
+        color: #333;
+    }
+    #Polygon-1 , #Polygon-2 , #Polygon-3 , #Polygon-4 , #Polygon-4, #Polygon-5 {
+        animation: float 1s infinite ease-in-out alternate;
+    }
+    #Polygon-2 {
+        animation-delay: .2s;
+    }
+    #Polygon-3 {
+        animation-delay: .4s;
+    }
+    #Polygon-4 {
+        animation-delay: .6s;
+    }
+    #Polygon-5 {
+        animation-delay: .8s;
+    }
+    @keyframes float {
+        100% {
+            transform: translateY(20px);
+        }
+    }
+
+</style>
 {% endblock %}
 
 {% block title %}Page not found{% endblock %}
@@ -96,22 +58,28 @@
 {% block body_class %}404{% endblock %}
 
 {% block content_body %}
-<svg width="380px" height="500px" viewBox="0 0 837 1045" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <path d="M353,9 L626.664028,170 L626.664028,487 L353,642 L79.3359724,487 L79.3359724,170 L353,9 Z" id="Polygon-1" stroke="#007FB2" stroke-width="6" sketch:type="MSShapeGroup"></path>
-        <path d="M78.5,529 L147,569.186414 L147,648.311216 L78.5,687 L10,648.311216 L10,569.186414 L78.5,529 Z" id="Polygon-2" stroke="#EF4A5B" stroke-width="6" sketch:type="MSShapeGroup"></path>
-        <path d="M773,186 L827,217.538705 L827,279.636651 L773,310 L719,279.636651 L719,217.538705 L773,186 Z" id="Polygon-3" stroke="#795D9C" stroke-width="6" sketch:type="MSShapeGroup"></path>
-        <path d="M639,529 L773,607.846761 L773,763.091627 L639,839 L505,763.091627 L505,607.846761 L639,529 Z" id="Polygon-4" stroke="#F2773F" stroke-width="6" sketch:type="MSShapeGroup"></path>
-        <path d="M281,801 L383,861.025276 L383,979.21169 L281,1037 L179,979.21169 L179,861.025276 L281,801 Z" id="Polygon-5" stroke="#36B455" stroke-width="6" sketch:type="MSShapeGroup"></path>
-    </g>
-</svg>
-<div class="message-box">
-  <h1>404</h1>
-  <p>Page not found</p>
-  <div class="buttons-con">
-    <div class="action-link-wrap">
-      <a onclick="history.back(-1)" class="link-button link-back-button">Go Back</a>
-      <a href="/" class="link-button">Go to Home Page</a>
+<div class="container d-flex justify-content-center align-items-center">
+  <div class="row">
+    <div class="col-md-6 d-flex justify-content-center">
+      <svg width="380px" height="500px" viewBox="0 0 837 1045" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+          <path d="M353,9 L626.664028,170 L626.664028,487 L353,642 L79.3359724,487 L79.3359724,170 L353,9 Z" id="Polygon-1" stroke="#007FB2" stroke-width="6" sketch:type="MSShapeGroup"></path>
+          <path d="M78.5,529 L147,569.186414 L147,648.311216 L78.5,687 L10,648.311216 L10,569.186414 L78.5,529 Z" id="Polygon-2" stroke="#EF4A5B" stroke-width="6" sketch:type="MSShapeGroup"></path>
+          <path d="M773,186 L827,217.538705 L827,279.636651 L773,310 L719,279.636651 L719,217.538705 L773,186 Z" id="Polygon-3" stroke="#795D9C" stroke-width="6" sketch:type="MSShapeGroup"></path>
+          <path d="M639,529 L773,607.846761 L773,763.091627 L639,839 L505,763.091627 L505,607.846761 L639,529 Z" id="Polygon-4" stroke="#F2773F" stroke-width="6" sketch:type="MSShapeGroup"></path>
+          <path d="M281,801 L383,861.025276 L383,979.21169 L281,1037 L179,979.21169 L179,861.025276 L281,801 Z" id="Polygon-5" stroke="#36B455" stroke-width="6" sketch:type="MSShapeGroup"></path>
+        </g>
+      </svg>
+    </div>
+    <div class="col-md-6 d-flex flex-column justify-content-center align-items-start">
+      <h1>404</h1>
+      <p>Page not found</p>
+      <div class="buttons-con">
+        <div class="action-link-wrap">
+          <a onclick="history.back(-1)" class="link-button link-back-button">Go Back</a>
+          <a href="/" class="link-button">Go to Home Page</a>
+        </div>
+      </div>
     </div>
   </div>
 </div>

cjkcms/templates/cjkcms/blocks/base_link_block.html

@@ -1,59 +1,56 @@
 {% load cjkcms_tags wagtailcore_tags wagtailimages_tags %}
 
 {% block menu_item %}
-    {% can_show_item value.visible_for as csi %}
-    {% if csi %}
-        {% if value.page.live or value.link or value.document %}
-        {% is_menu_item_dropdown value as has_dropdown %}
-        <li class="{{liclass}} {% if has_dropdown %}dropdown{% endif %}">
-            {% is_active_page page value.page as is_active_url %}
-            <a href="{% block url %}#{% endblock %}"
-            {% if value.settings.custom_id %}id="{{value.settings.custom_id}}"{% endif %}
-            class="{{aclass}} {% if has_dropdown %}dropdown-toggle{% endif %}
-                    {% if is_active_url %}active{% endif %}
-                    {{value.settings.custom_css_class}}"
-            {% if has_dropdown %}data-bs-toggle="dropdown" data-mdb-toggle="dropdown"
-            role="button"
-            aria-haspopup="true"
-            aria-expanded="false"
+    {% if value.page.live or value.link or value.document %}
+    {% is_menu_item_dropdown value as has_dropdown %}
+    <li class="{{liclass}} {% if has_dropdown %}dropdown{% endif %}">
+        {% is_active_page page value.page as is_active_url %}
+        <a href="{% block url %}#{% endblock %}"
+        {% if value.settings.custom_id %}id="{{value.settings.custom_id}}"{% endif %}
+        class="{{aclass}} {% if has_dropdown %}dropdown-toggle{% endif %}
+                {% if is_active_url %}active{% endif %}
+                {{value.settings.custom_css_class}}"
+        {% if has_dropdown %}data-bs-toggle="dropdown"
+        data-mdb-dropdown-init
+        data-mdb-ripple-init
+        role="button"
+        aria-haspopup="true"
+        aria-expanded="false"
+        {% endif %}
+        {% if ga_event_label %}
+        data-ga-event-label="{{ ga_event_label }}"
+        {% endif %}
+        {% if ga_event_category %}
+        data-ga-event-category="{{ ga_event_category }}"
+        {% endif %}
+        >
+            {% if value.image %}
+                {% image value.image max-200x200 as img %}
+                <img src="{{img.url}}" class="w-100" alt="{{img.image.title}}"/>
+            {% elif value.display_text %}
+                {% link_display value.display_text as dt %}
+                {{dt|safe}}
+            {% elif value.page %}
+                {{value.page.title}}
+            {% elif value.document %}
+                {{value.document.title}}
             {% endif %}
-            {% if ga_event_label %}
-            data-ga-event-label="{{ ga_event_label }}"
-            {% endif %}
-            {% if ga_event_category %}
-            data-ga-event-category="{{ ga_event_category }}"
-            {% endif %}
-            >
-                {% if value.image %}
-                    {% image value.image max-200x200 as img %}
-                    <img src="{{img.url}}" class="w-100" alt="{{img.image.title}}"/>
-                {% elif value.display_text %}
-                    {% link_display value.display_text as dt %}
-                    {{dt|safe}}
-                {% elif value.page %}
-                    {{value.page.title}}
-                {% elif value.document %}
-                    {{value.document.title}}
-                {% endif %}
-            </a>
+        </a>
 
 
-            {% if has_dropdown %}
-            <ul class="dropdown-menu">
-                {% for sub_link in value.sub_links %}
-                    {% include_block sub_link with liclass="" aclass="dropdown-item" %}
+        {% if has_dropdown %}
+        <ul class="dropdown-menu">
+            {% for sub_link in value.sub_links %}
+                {% include_block sub_link with liclass="" aclass="dropdown-item" %}
+            {% endfor %}
+            {% if value.show_child_links %}
+                {% for child in value.page.specific.get_index_children %}
+                    {% is_active_page page child as is_active_child %}
+                    <li><a class="dropdown-item {% if is_active_child %}active{% endif %}" href="{% pageurl child %}">{{child.title}}</a></li>
                 {% endfor %}
-                {% if value.show_child_links %}
-                    {% for child in value.page.specific.get_index_children %}
-                        {% is_active_page page child as is_active_child %}
-                        <li><a class="dropdown-item {% if is_active_child %}active{% endif %}" href="{% pageurl child %}">{{child.title}}</a></li>
-                    {% endfor %}
-                {% endif %}
-            </ul>
-            {% endif %} {# has_dropdown #}
-        </li>
-        {% endif %} {# value.page.live or value.link or value.document #}
-    {% else %} {# csi #}
-        {# NO SHOW #}
-    {% endif %} {# csi #}
+            {% endif %}
+        </ul>
+        {% endif %} {# has_dropdown #}
+    </li>
+    {% endif %} {# value.page.live or value.link or value.document #}
 {% endblock %}

cjkcms/templates/cjkcms/blocks/button_block.html

@@ -1,8 +1,8 @@
-{% load cjkcms_tags %}
+{% load cjkcms_tags wagtailcore_tags %}
 
 {% can_show_item value.visible_for as csi %}
 {% if csi %}
-<a href="{{self.url}}"
+<a href="{% if request.LANGUAGE_CODE and request.LANGUAGE_CODE|not_starts_with:'en' %}/{{ request.LANGUAGE_CODE }}{% endif %}{{ self.url }}"
     {% if settings.cjkcms.AnalyticsSettings.ga_track_button_clicks %}
         data-ga-event-category='{{self.settings.ga_tracking_event_category|default:"Button"}}'
         data-ga-event-label='{{self.settings.ga_tracking_event_label|default:self.button_title}}'

cjkcms/templates/cjkcms/blocks/card_landing1.html

@@ -1,7 +1,7 @@
 {% load wagtailcore_tags wagtailimages_tags static txtutils_tags %}
 
   <!-- Section: Landing 1 Card -->
-  <section class="mb-8">
+  <section>
 
     <style>
       .page-header {
@@ -32,7 +32,7 @@
       }
     </style>
 
-    <div class="page-header {{self.settings.custom_css_class}}" style="min-height: 45vh;" {% if self.settings.custom_id %}id="{{self.settings.custom_id}}"{% endif %}>
+    <div class="mb-2 pb-2 page-header {{self.settings.custom_css_class}}" style="min-height: 45vh;" {% if self.settings.custom_id %}id="{{self.settings.custom_id}}"{% endif %}>
       <div class="oblique position-absolute top-0 h-100 d-md-block d-none gradient-custom-10">
         {% if self.image %}
             {% image self.image fill-900x600 as card_img %}

cjkcms/templates/cjkcms/blocks/card_landing2.html

@@ -1,7 +1,7 @@
 {% load wagtailcore_tags wagtailimages_tags static txtutils_tags %}
 
   <!-- Section: Landing Card Type 2 -->
-  <section class="mb-10 text-center text-md-start {{self.settings.custom_css_class}}" {% if self.settings.custom_id %}id="{{self.settings.custom_id}}"{% endif %}>
+  <section class="mb-2 pb-2 text-center text-md-start {{self.settings.custom_css_class}}" {% if self.settings.custom_id %}id="{{self.settings.custom_id}}"{% endif %}>
     {% if page.cover_image %}
     {% image page.cover_image width-1920 as card_img %}
     {% assign card_img.url as img_url %}
@@ -43,7 +43,7 @@
           </div>
           <div class="col-8 col-lg-9 col-xl-10 text-center text-md-start">
             {% if self.title %}
-            <h1 class="fw-bold" style="color:#FF7600;">
+            <h1 class="fw-bold" style="color:#FFFFFF; position: relative; z-index: 1; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">
             {{self.title}}
             </h1>
             {% endif %}
@@ -56,7 +56,7 @@
         </div>
         <div class="row d-flex justify-content-center align-items-center">
           <div class="col-12" style="z-index:1">
-            <div class="fs-5">
+            <div>
               {{self.description | richtext}}
             </div>
             {% if self.links %}

cjkcms/templates/cjkcms/blocks/countdown.html

@@ -0,0 +1,24 @@
+{% load wagtailcore_tags static %}
+
+{% block block_render %}
+{% with 'vendor/simplycountdown/css/'|add:self.theme|add:'.css' as theme_css %}
+<link rel="stylesheet" href="{% static theme_css %}">
+{% endwith %}
+{% if self.url %}<a href="{{self.url}}" class="text-decoration-none">{% endif %}
+<div class="simply-countdown-{{self.theme}} {%if self.settings.custom_css_class%}{{self.settings.custom_css_class}}{% endif %}" id="mycountdown">
+    {% if self.title %}<h3 class="w-100 text-center">{{ self.title }}</h3>{% endif %}
+</div>
+{% if self.url %}</a>{% endif %}
+<script src="{% static 'vendor/simplycountdown/js/simplyCountdown.umd.js' %}"></script>
+<script>
+    simplyCountdown("#mycountdown", {
+        year: {{ year }},
+        month: {{ month }},
+        day: {{ day }},
+        hours: {{ hour }},
+        minutes: {{ minute }},
+        seconds: {{ second }},
+        enableUtc: true,
+    });
+</script>
+{% endblock %}

cjkcms/templates/cjkcms/blocks/highlight_block.html

@@ -0,0 +1,21 @@
+{% load wagtailadmin_tags wagtailcore_tags wagtailimages_tags %}
+
+<div class="card mb-3 {% if self.border_color %} border border-2 border-{{ self.border_color }}{% endif %}  text-bg-{{ self.background_color }}
+    text-{{ self.text_color }}
+    {{self.settings.custom_css_class}}"
+    {% if self.settings.custom_id %}id="{{self.settings.custom_id}}"{% endif %}>
+    <div class="card-body">
+       <div class="d-flex justify-content-between p-md-1">
+          <div class="d-flex flex-row">
+             {% if self.icon %}
+             <div class="align-self-start">
+                <i class="{{self.icon}} fa-5x me-4"></i>
+             </div>
+             {% endif %}
+             <div>
+                {{ self.text }}
+             </div>
+          </div>
+       </div>
+    </div>
+</div>

cjkcms/templates/cjkcms/blocks/pricelistitem_block.html

@@ -1,16 +1,20 @@
 {% load wagtailimages_tags %}
 
-<div class="row">
+<div class="row {%if self.settings.custom_css_class%}{{self.settings.custom_css_class}}{% endif %}">
 {% if self.image %}
     <div class="col-md-4">
     {% image self.image original as imagedata %}
     <img src="{{imagedata.url}}" alt="Photo of {{self.name}}" class="w-100" />
     </div>
-    <div class="col-md-8" style="overflow-x: hidden;">
+    <div class="col-md-8">
 {% else %}
-    <div class="col-md-12" style="overflow-x: hidden;">
+    <div class="col-md-12">
 {% endif %}
-    <strong class="leaders"><span>{{self.name}}</span><span>{{self.price}}</span></strong>
-    <div>{{self.description}}</div>
+        <div class="d-flex">
+            <span class="flex-shrink-1 fs-5">{{self.name}}</span>
+            <span class="leaders-dots flex-grow-1"></span>
+            <span class="flex-shrink-1 fs-5  text-end">{{self.price}}</span>
+        </div>
+        <div><em>{{self.description}}</em></div>
     </div>
 </div>

cjkcms/templates/cjkcms/pages/base.html

@@ -1,11 +1,11 @@
 {% spaceless %}
 {% load i18n static friendly_loader cjkcms_tags wagtailcore_tags wagtailimages_tags wagtailsettings_tags wagtailuserbar %}
 {% get_settings %}{% get_current_language as LANGUAGE_CODE %}
-{% if settings.cjkcms.LayoutSettings.frontend_theme %}{% friendly_load webpack_loader static %}{% endif %}
+{% if settings.cjkcms.LayoutSettings.frontend_theme == 'python-webpack' %}{% friendly_load webpack_loader static %}{% endif %}
 {% wagtail_site as site %}
 <!doctype html>
 {% endspaceless %}
-<html prefix="og: http://ogp.me/ns#" lang="{{ LANGUAGE_CODE }}" >
+<html prefix="og: http://ogp.me/ns#" lang="{{ LANGUAGE_CODE }}" data-mdb-theme="{{ settings.cjkcms.LayoutSettings.color_scheme }}">
 {% block base_head %}
   <head>
         <script>{# Pass in CMS variables to JavaScript #}
@@ -92,7 +92,7 @@
                     {% endif %}
                 {% endblock %}
 
-                {% if settings.cjkcms.LayoutSettings.breadcrumbs %}
+                {% if settings.cjkcms.LayoutSettings.breadcrumbs and page.breadcrumbs_visible %}
                 {% block breadcrumbs %}{% endblock %}
                 {% endif %}
 

cjkcms/templates/cjkcms/pages/page.mini.html

@@ -7,6 +7,6 @@
   <div class="card-body">
     <h5 class="card-title">{{page.title}}</h5>
     <p class="card-text">{{page.body_preview}}</p>
-    <a class="card-link" href="{% pageurl page %}" title="{{page.title}}">Read more</a>
+    <a class="card-link stretched-link" href="{% pageurl page %}" title="{{page.title}}">Read more</a>
   </div>
 </div>

cjkcms/templates/cjkcms/pages/search.html

@@ -59,9 +59,18 @@
         {% if results_paginated.object_list %}
             {% for page in results_paginated %}
             <div class="mb-5">
+                {% if results_paginated.object_list %}
+                {% if page|is_not_page %}
+                {% include page.search_template %}
+                {% endif %}
                 {% with page=page.specific %}
-                    {% include page.search_template %}
+                    {% if page.search_template %}
+                        {% include page.search_template %}
+                    {% else %}
+                        {% include "cjkcms/pages/search_result.html" %}
+                    {% endif %}
                 {% endwith %}
+                {% endif %}
             </div>
             {% endfor %}
             {% include "cjkcms/includes/pagination.html" with items=results_paginated %}

cjkcms/templates/cjkcms/robots.txt

@@ -1,10 +1,6 @@
 User-agent: *
 Disallow: /backend/
-
-User-agent: *
 Disallow: /django-backend/
-
-User-agent: *
 Allow: /
 
 Sitemap: /sitemap.xml

cjkcms/templates/cjkcms/snippets/breadcrumbs.html

@@ -10,7 +10,7 @@
             <li class="none">
                 <object type="image/svg+xml" data="{% static 'cjkcms/images/icons/'|add:settings.cjkcms.LayoutSettings.breadcrumb_icon|add:'.svg' %}" 
                 class="opacity-75" style="margin-bottom:-2px;"></object> 
-                <a href="{{ p.url }}">{{ p.title }}</a>
+                <a href="{{ p.url }}">{{ p.specific.breadcrumb_title }}</a>
             </li>
             
             {% endif %}
@@ -18,7 +18,7 @@
         <li class="breadcrumb-item active ms-1" aria-current="page">
             <object type="image/svg+xml" data="{% static 'cjkcms/images/icons/'|add:settings.cjkcms.LayoutSettings.breadcrumb_icon|add:'.svg' %}" 
             class="opacity-75" style="margin-bottom:-2px;"></object> 
-            {{ page.title }}</li>
+            {{ page.breadcrumb_title }}</li>
         {% endblock %}
         </ol>
     </nav>

cjkcms/templates/cjkcms/snippets/frontend_assets.html

@@ -9,6 +9,14 @@
             rel="stylesheet" 
             crossorigin="anonymous">
     {% endif %}
+
+    {% if settings.cjkcms.LayoutSettings.color_scheme == 'custom' %}
+        <!-- Load local css variables sheet to override default colors etc -->
+        <link
+            href="{% static 'cjkcms/css/cjkcms-custom-theme.css' %}"
+            rel="stylesheet">
+    {% endif %}
+
     {% if settings.cjkcms.LayoutSettings.bootstrap_icons %}
         <!-- Bootstrap icons (local) -->
         <link

cjkcms/templates/cjkcms/snippets/navbar.html

@@ -24,7 +24,14 @@
       {% endif %}
     </a>
 
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-mdb-target="#navbar" data-mdb-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
+    <button 
+        class="navbar-toggler" 
+        type="button" 
+        data-mdb-collapse-init
+        data-bs-toggle="collapse" 
+        data-mdb-target="#navbar" 
+        data-bs-target="#navbar" 
+        aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
           <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
     </button>
 
@@ -62,11 +69,7 @@
 </div><!-- /.container -->
 {% endif %}
 
-{# Navbar offset #}
-{% if settings.cjkcms.LayoutSettings.navbar_fixed %}
-    {% if settings.cjkcms.LayoutSettings.logo %}
-      <div class="{{settings.cjkcms.LayoutSettings.navbar_format}}-fixed-img-offset {{settings.cjkcms.LayoutSettings.navbar_collapse_mode}}"></div>
-    {% else %}
-      <div class="{{settings.cjkcms.LayoutSettings.navbar_format}}-fixed-offset {{settings.cjkcms.LayoutSettings.navbar_collapse_mode}}"></div>
-    {% endif %}
-{% endif %}
+{# Search Modal must be injected outside of the nav, because if the nav is fixed/sticky it breaks the modal #}
+{% if settings.cjkcms.LayoutSettings.navbar_search and "popup" in settings.cjkcms.LayoutSettings.search_format %}
+  {% include "cjkcms/snippets/navbar_search_modal.html" %}
+{% endif %}

cjkcms/templates/cjkcms/snippets/navbar_search.html

@@ -1,47 +1,18 @@
 {% load wagtailcore_tags cjkcms_tags django_bootstrap5 i18n %}
-      <form action="{% url 'cjkcms_search' %}" method="GET" class="row row-cols-lg-auto g-3 align-items-center">
-        {% csrf_token %}
-        {% get_searchform request as form %}
-        {% bootstrap_form_errors form type='non_fields' %}
+    <form action="{% url 'cjkcms_search' %}" method="GET" class="row row-cols-lg-auto g-3 align-items-center">
+      {% csrf_token %}
+      {% get_searchform request as form %}
+      {% bootstrap_form_errors form type='non_fields' %}        
         {% if settings.cjkcms.LayoutSettings.search_format == "" or settings.cjkcms.LayoutSettings.search_format|slice:":3" == "box" %}
           {% bootstrap_field form.s layout='inline' show_label=False %}
         {% endif %}
         {% if "button" in settings.cjkcms.LayoutSettings.search_format %}
         <button type="button" class="{{ settings.cjkcms.LayoutSettings.searchbutton_class }}"
           {% if 'popup' in settings.cjkcms.LayoutSettings.search_format %}
-            data-mdb-toggle="modal" data-bs-toggle="modal" 
-            data-bs-target="#search-modal" data-mdb-target="#search-modal"
-            onclick="focusInputField()"          
+           data-mdb-ripple-init data-mdb-modal-init data-mdb-target="#searchModal"
+            data-bs-toggle="modal" data-bs-target="#searchModal"    
           {% endif %}
         >{{ settings.cjkcms.LayoutSettings.searchbutton_label | richtext }}</button>
         {% endif %}
       
-        {% if "popup" in settings.cjkcms.LayoutSettings.search_format %}
-        <div id="search-modal" class="modal" style="display: none;">
-          <div class="modal-dialog">
-            <div class="modal-content">
-              <div class="modal-header">
-                <h5 class="modal-title">Search</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" data-mdb-dismiss="modal" aria-label="Close"></button>
-              </div>
-              <div class="modal-body">
-                {% bootstrap_form form layout='inline' %}
-              </div>
-              <div class="modal-footer">
-                <button type="submit" class="{{ settings.cjkcms.LayoutSettings.searchbutton_class }}">
-                  {{ settings.cjkcms.LayoutSettings.searchbutton_label | richtext }}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-        <script>
-          function focusInputField() {
-            var inputField = document.querySelector('#search-modal input[type="text"]');
-            if (inputField) {
-              inputField.focus();
-            }
-          }
-        </script>
-        {% endif %}
       </form>