[FEAT] Add Bootstrap theming through admin dashboard

breccia_mapper/fixtures/bootstrap_customizer_sitetheme.json

@@ -0,0 +1,7 @@
+[
+  {
+    "model": "bootstrap_customizer.sitebootstraptheme",
+    "pk": 1,
+    "fields": { "site": 1, "bootstrap_theme": 1, "updated": "2023-02-23T14:41:48.620Z" }
+  }
+]

breccia_mapper/fixtures/bootstrap_customizer_theme.json

@@ -0,0 +1 @@
+[{"model": "bootstrap_customizer.bootstraptheme", "pk": 1, "fields": {"name": "Default Theme", "primary": "#007bff", "secondary": "#6c757d", "success": "#28a745", "info": "#17a2b8", "warning": "#ffc107", "danger": "#dc3545", "white": "#ffffff", "black": "#000000", "light": "#f8f9fa", "dark": "#343a40", "component_active_color": "#ffffff", "component_active_bg": "#007bff", "enable_rounded": true, "enable_shadows": false, "enable_gradients": false, "font_family_base": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"", "font_size_base": "1rem", "line_height_base": "1.5", "body_bg": "#ffffff", "body_color": "#212529", "headings_font_family": "inherit", "headings_font_weight": "500", "headings_line_height": "1.2", "css_above_the_fold": ":root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace}*,*::before,*::after{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex=\"-1\"]:focus{outline:0 !important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[title],abbr[data-original-title]{text-decoration:underline;text-decoration:underline dotted;cursor:help;border-bottom:0;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul,dl{margin-top:0;margin-bottom:1rem}ol ol,ul ul,ol ul,ul ol{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):hover,a:not([href]):not([tabindex]):focus{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}pre,code,kbd,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}input,button,select,optgroup,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button:not(:disabled),[type=\"button\"]:not(:disabled),[type=\"reset\"]:not(:disabled),[type=\"submit\"]:not(:disabled){cursor:pointer}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{padding:0;border-style:none}input[type=\"radio\"],input[type=\"checkbox\"]{box-sizing:border-box;padding:0}input[type=\"date\"],input[type=\"time\"],input[type=\"datetime-local\"],input[type=\"month\"]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{outline-offsLine truncated

breccia_mapper/settings.py

@@ -206,6 +206,7 @@ THIRD_PARTY_APPS = [
     'allauth.socialaccount.providers.google',
     'allauth.socialaccount.providers.microsoft',
     'django_inlinecss',
+    'bootstrap_customizer',
 ]
 
 FIRST_PARTY_APPS = [
@@ -227,6 +228,7 @@ MIDDLEWARE = [
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
     'hijack.middleware.HijackUserMiddleware',
     'django.contrib.sites.middleware.CurrentSiteMiddleware',
+    'bootstrap_customizer.middleware.BootstrapThemeMiddleware',
 ]
 
 FIXTURE_DIRS = [

breccia_mapper/templates/base.html

@@ -4,6 +4,7 @@
     {% load i18n %}
     {% get_current_language as LANGUAGE_CODE %}
 {% endif %}
+{% load bootstrap_customizer %}
 <html lang="{{ LANGUAGE_CODE|default:'en_us' }}">
 
 {% load pwa %}
@@ -19,6 +20,9 @@
 
     <!-- Bootstrap CSS -->
     {% bootstrap_css %}
+    <style lang="css">
+        {% bootstrap_theme_css_above_the_fold %}
+    </style>
 
     <link rel="stylesheet"
         href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/fontawesome.min.css"
@@ -61,6 +65,7 @@
 </head>
 
 <body>
+    <link rel="stylesheet" type="text/css" href="{% bootstrap_theme_css_below_the_fold_url %}" />
     <div class="content" style="display: flex; flex-direction: column">
         {% block navbar %}
             <nav class="navbar navbar-expand-lg navbar-dark bg-dark">

breccia_mapper/urls.py

@@ -17,6 +17,7 @@ from django.contrib import admin
 from django.conf import settings
 from django.urls import include, path
 from django.conf.urls.static import static
+from bootstrap_customizer import urls as bootstrap_customizer_urls
 
 from . import views
 
@@ -55,4 +56,7 @@ urlpatterns = [
 
     path('accounts/',
          include('allauth.urls')),
+
+    path('bootstrap_customizer',
+         include(bootstrap_customizer_urls)),
 ]  # yapf: disable

entrypoint.sh

@@ -4,6 +4,8 @@ set -eo pipefail
 
 python manage.py migrate
 echo "[{\"model\": \"sites.site\",\"pk\": 1,\"fields\": { \"domain\": \"${SITE_URL}\", \"name\": \"${PROJECT_SHORT_NAME}\" }}]" | python manage.py loaddata --format=json -
+python manage.py selectiveloaddata breccia_mapper/fixtures/bootstrap_customizer_theme.json
+python manage.py loaddata --format=json bootstrap_customizer_sitetheme
 python manage.py collectstatic --no-input
 
 exec "$@"

requirements.txt

@@ -46,4 +46,5 @@ typed-ast
 wrapt==1.14.1
 Pillow==9.4.0
 django-allauth
-django-inlinecss-redux
+django-inlinecss-redux
+django-bootstrap-customizer