瀏覽代碼

Tweaks to banner color and position (#520)

Vince Salvino 2 年之前
父節點
當前提交
2b76731a57

+ 1 - 1
coderedcms/bin/coderedcms.py

@@ -86,7 +86,7 @@ class CreateProject(TemplateCommand):
 
 
         if options.get("domain"):
         if options.get("domain"):
             message += " (%(domain)s)"
             message += " (%(domain)s)"
-            # Stip protocol out of domain if it is present.
+            # Strip protocol out of domain if it is present.
             options["domain"] = options["domain"].split("://")[-1]
             options["domain"] = options["domain"].split("://")[-1]
             # Figure out www logic.
             # Figure out www logic.
             if options["domain"].startswith("www."):
             if options["domain"].startswith("www."):

+ 2 - 2
coderedcms/settings.py

@@ -253,8 +253,8 @@ class _DefaultSettings:
     }
     }
 
 
     CRX_BANNER = None
     CRX_BANNER = None
-    CRX_BANNER_BACKGROUND = "#f00"
-    CRX_BANNER_TEXT_COLOR = "#fff"
+    CRX_BANNER_BACKGROUND = "#ff0"
+    CRX_BANNER_TEXT_COLOR = "#000"
 
 
     def __getattribute__(self, attr: str):
     def __getattribute__(self, attr: str):
         # First load from Django settings.
         # First load from Django settings.

+ 15 - 13
coderedcms/static/coderedcms/css/crx-admin.css

@@ -16,39 +16,41 @@ textarea.monospace,
 }
 }
 
 
 .input input[type='color']{
 .input input[type='color']{
-    height: 40px;
-    padding: 5px;
+  height: 40px;
+  padding: 5px;
 }
 }
 
 
 
 
 /* Show the site's custom logo in the wagtail admin */
 /* Show the site's custom logo in the wagtail admin */
 
 
 .crx-logo-custom {
 .crx-logo-custom {
-    width:auto;
-    height:auto;
-    max-height:80px;
-    max-width:100%;
-    display: block;
+  width: auto;
+  height: auto;
+  max-height: 80px;
+  max-width: 100%;
+  display: block;
 }
 }
 .crx-logo-container {
 .crx-logo-container {
   box-sizing: border-box;
   box-sizing: border-box;
   margin: 0 15px;
   margin: 0 15px;
 }
 }
 .crx-logo-container.navbar-light {
 .crx-logo-container.navbar-light {
-    background-color: #fff;
-    border-radius: 6px;
-    padding: 0.25em;
+  background-color: #fff;
+  border-radius: 6px;
+  padding: 0.25em;
 }
 }
 .crx-logo-container.navbar-dark {
 .crx-logo-container.navbar-dark {
-    background-color: transparent;
+  background-color: transparent;
 }
 }
 
 
 
 
 /* Display the optional banner above main content */
 /* Display the optional banner above main content */
 
 
 .crx-banner {
 .crx-banner {
-    position: absolute;
-    z-index: 1;
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 1;
 }
 }
 .crx-banner ~ .content-wrapper {
 .crx-banner ~ .content-wrapper {
     padding-top: calc(1.5em + 8px);
     padding-top: calc(1.5em + 8px);

+ 1 - 1
coderedcms/templates/coderedcms/includes/codered_banner.html → coderedcms/templates/coderedcms/includes/crx_banner.html

@@ -1,6 +1,6 @@
 {% load coderedcms_tags %}
 {% load coderedcms_tags %}
 {% if "CRX_BANNER"|crx_settings %}
 {% if "CRX_BANNER"|crx_settings %}
-<div class="crx-banner" style="background-color:{{ 'CRX_BANNER_BACKGROUND'|crx_settings }}; color:{{ 'CRX_BANNER_TEXT_COLOR'|crx_settings }}; width:100%; padding:4px;">
+<div class="crx-banner" style="background-color:{{ 'CRX_BANNER_BACKGROUND'|crx_settings }}; color:{{ 'CRX_BANNER_TEXT_COLOR'|crx_settings }}; text-align:center; padding:4px;">
   {{ "CRX_BANNER"|crx_settings|safe }}
   {{ "CRX_BANNER"|crx_settings|safe }}
 </div>
 </div>
 {% endif %}
 {% endif %}

+ 1 - 1
coderedcms/templates/coderedcms/pages/base.html

@@ -94,7 +94,7 @@
 </head>
 </head>
 
 
 <body class="crx-{{page.content_type.model}} {% if page.get_parent %}parent-page-{{page.get_parent.id}}{% endif %} {% block body_class %}{% endblock %}" id="page-{{page.id}}">
 <body class="crx-{{page.content_type.model}} {% if page.get_parent %}parent-page-{{page.get_parent.id}}{% endif %} {% block body_class %}{% endblock %}" id="page-{{page.id}}">
-  {% include "coderedcms/includes/codered_banner.html" %}
+  {% include "coderedcms/includes/crx_banner.html" %}
 
 
   {% block ada_skip %}
   {% block ada_skip %}
   <a class="visually-hidden-focusable" href="#content">Skip navigation</a>
   <a class="visually-hidden-focusable" href="#content">Skip navigation</a>

+ 1 - 1
coderedcms/templates/wagtailadmin/base.html

@@ -2,7 +2,7 @@
 {% load wagtailimages_tags wagtailsettings_tags %}
 {% load wagtailimages_tags wagtailsettings_tags %}
 
 
 {% block furniture %}
 {% block furniture %}
-    {% include "coderedcms/includes/codered_banner.html" %}
+    {% include "coderedcms/includes/crx_banner.html" %}
     {{ block.super }}
     {{ block.super }}
 {% endblock %}
 {% endblock %}
 
 

+ 1 - 1
coderedcms/tests/test_templates.py

@@ -4,7 +4,7 @@ from django.test import override_settings, TestCase
 
 
 
 
 EXPECTED_BANNER_HTML = """
 EXPECTED_BANNER_HTML = """
-<div class="crx-banner" style="background-color:#f00; color:#fff; width:100%; padding:4px;">
+<div class="crx-banner" style="background-color:#ff0; color:#000; text-align:center; padding:4px;">
   Test
   Test
 </div>
 </div>
 """
 """

+ 5 - 2
docs/reference/django_settings.rst

@@ -16,12 +16,15 @@ flagging non-production environments like staging. For example::
 
 
 You can include basic HTML code, such as a link, in the banner.
 You can include basic HTML code, such as a link, in the banner.
 
 
-The banner defaults to a background color of red and a text color of white. If
-you want to customize this for a particular environment, you can; for example::
+The banner defaults to yellow background and black text. If you want to
+customize the color, you can specify any HTML color name or code. For example::
 
 
     CRX_BANNER_BACKGROUND = '#FFFFE0'	# light yellow background
     CRX_BANNER_BACKGROUND = '#FFFFE0'	# light yellow background
     CRX_BANNER_TEXT_COLOR = '#000'		# black text color
     CRX_BANNER_TEXT_COLOR = '#000'		# black text color
 
 
+For greater customization, you can fully override the banner's HTML template:
+``coderedcms/includes/crx_banner.html``.
+
 
 
 CRX_BANNER_BACKGROUND
 CRX_BANNER_BACKGROUND
 ---------------------
 ---------------------

+ 10 - 4
docs/releases/v1.0.0.rst

@@ -23,7 +23,10 @@ New features
 * Added hidden "skip navigation" link for accessibility.
 * Added hidden "skip navigation" link for accessibility.
 
 
 * Most settings have been consolidated in the Wagtail admin under
 * Most settings have been consolidated in the Wagtail admin under
-  **Settings > CRX Settings**
+  **Settings > CRX Settings**.
+
+* Banner color has been changed from red to yellow, and appearance is slightly
+  improved in the Wagtail admin.
 
 
 * Codebase has been formatted with ``black`` to improve readability and
 * Codebase has been formatted with ``black`` to improve readability and
   maintainability.
   maintainability.
@@ -40,8 +43,8 @@ Upgrade instructions
    It is highly recommended to first upgrade and deploy your site in production
    It is highly recommended to first upgrade and deploy your site in production
    with version 0.25 before performing the upgrade to 1.0.
    with version 0.25 before performing the upgrade to 1.0.
 
 
-Updating Python code
-''''''''''''''''''''
+Updating Python code & Django templates
+'''''''''''''''''''''''''''''''''''''''
 
 
 #. Run ``pip install coderedcms==1.0.*`` and update your ``requirements.txt``
 #. Run ``pip install coderedcms==1.0.*`` and update your ``requirements.txt``
    with ``coderedcms==1.0.*``.
    with ``coderedcms==1.0.*``.
@@ -75,7 +78,7 @@ Updating Python code
 #. Find and delete any references to ``ADASettings`` in your Python and HTML
 #. Find and delete any references to ``ADASettings`` in your Python and HTML
    code.
    code.
 
 
-#. Find and replace the following references in both Python and HTML code:
+#. Find and replace the following references in your Python and HTML code:
 
 
    * ``GeneralSettings``
    * ``GeneralSettings``
    * ``GoogleApiSettings``
    * ``GoogleApiSettings``
@@ -85,6 +88,9 @@ Updating Python code
 
 
    * ``LayoutSettings``
    * ``LayoutSettings``
 
 
+#. Find and replace ``codered_banner.html`` with ``crx_banner.html`` in your
+   Python and HTML code.
+
 #. Make and run migrations:
 #. Make and run migrations:
 
 
    .. code-block:: text
    .. code-block:: text