Remove as much custom CSS as possible from the Wagtail admin (#483)

* Remove as much custom css as possible from the wagtail admin. Fix logo for wagtail 2.16
* Remove powered by CodeRed logo

coderedcms/static/coderedcms/css/codered-admin.css

@@ -1,16 +1,11 @@
 /*!
 Wagtail CRX (https://www.coderedcorp.com/cms/)
-Copyright 2018-2021 CodeRed LLC
+Copyright 2018-2022 CodeRed LLC
 License: https://github.com/coderedcorp/coderedcms/blob/dev/LICENSE
 */
 
 /* Font sizes and inputs */
 
-html, body {
-    color: #000;
-    background-color:#fff;
-    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif !important;
-}
 code, pre, textarea.monospace,
 .monospace textarea {
     font-family: SFMono-Regular,Menlo,Monaco,Consolas,monospace;
@@ -21,47 +16,16 @@ code, pre, textarea.monospace,
     border:unset;
 }
 
-.summary ul.stats,
-.summary ul.stats span {
-    font-family:inherit !important;
-    font-weight:600 !important;
-}
-
-h1, h2, h3, h4, h5, h6,
-.button, .halloeditor, .tagit, input, select, textarea {
-    font-family:inherit;
-}
-
-body.ready input[type='checkbox'], body.ready input[type='radio'] {
-    background-color:unset;
-    border:none;
-}
-
 .halloeditor, .tagit, input:not([type="submit"]), select, textarea {
-    border:1.5px solid #ddd;
     padding-top:0.5em;
     padding-bottom:0.5em;
     font-weight:normal;
 }
 
-.halloeditor:hover, .tagit:hover, input:hover, select:hover, textarea:hover {
-    border:1.5px solid #ddd;
-}
-
-.nav-search button::before {
-    line-height: 2.5em;
-}
-
 input[type='checkbox'], input[type='radio'] {
-    height:unset;
     margin-right: 0.5em;
     padding-top: 0;
 }
-input[type='checkbox']::before, input[type='radio']::before {
-    border:1.5px solid #ccc;
-    position: relative;
-    top:unset;
-}
 .date_field .input::after,
 .date_field .input::before,
 .date_time_field .input::after,
@@ -75,14 +39,6 @@ input[type='checkbox']::before, input[type='radio']::before {
     font-size:1.7em;
     top:0.35em;
 }
-.full input {
-    background-color:white;
-}
-.full input:focus, .halloeditor:focus, .tagit:focus, input:focus, select:focus, textarea:focus,
-.tag_field.focused .tagit {
-    border-color:#00b0b1;
-    background-color:#f2fcfc;
-}
 .choice_field .input select,
 .model_choice_field .input select,
 .typed_choice_field .input select {
@@ -175,9 +131,6 @@ input[type='checkbox']::before, input[type='radio']::before {
     .input {
         width:100%;
     }
-    label, .boolean_field, .widget-checkbox_input {
-        padding-top: 0.5em;
-    }
 }
 
 
@@ -194,10 +147,6 @@ input[type='checkbox']::before, input[type='radio']::before {
     margin-right: auto;
 }
 
-.tab-nav a {
-    font-size: 1em;
-}
-
 .tab-nav li.seo a::before,
 .tab-nav li.integrations a::before {
     -webkit-font-smoothing: antialiased;
@@ -216,78 +165,25 @@ input[type='checkbox']::before, input[type='radio']::before {
 
 /* Show the site's custom logo in the wagtail admin */
 
-.logo {
-    margin: 0 auto;
-    padding: 1em;
-    margin-bottom: 1em;
-}
-.logo img.codered-logo-custom {
+.codered-logo-custom {
     width:auto;
     height:auto;
     max-height:80px;
     max-width:100%;
+    display: block;
 }
 .codered-logo-container {
     box-sizing: border-box;
-    padding-top: 1em;
-    padding-bottom: 1em;
 }
 .codered-logo-container.navbar-light {
     background-color: #f1f1f1;
     border-radius: 6px;
-    padding-left: 1em;
-    padding-right: 1em;
+    padding: 0.25em;
 }
 .codered-logo-container.navbar-dark {
     background-color: transparent;
 }
 
-/* Fix side menu to be able to fit more links without breaking */
-
-.nav-main a {
-    padding: 0.6em 0.8em;
-    font-size: 1.1em;
-}
-.nav-submenu .menu-item a {
-    padding: 0.6em 0 0.6em 3.5em;
-}
-
-.nav-main .account:hover, .nav-main .account:focus {
-  outline: none;
-  background-color: #0a0a0a;
-  color: #fff;
-}
-
-.submenu-active * {
-    box-sizing: border-box;
-}
-
-@media screen and (min-width:50em) {
-    li.submenu-active .nav-submenu {
-        width: 220px;
-    }
-    li.submenu-active .nav-submenu a {
-        width:100%;
-    }
-    .nav-submenu h2, .nav-submenu ul {
-        width:100%;
-    }
-    .nav-main {
-        margin-bottom: 0px;
-    }
-    .nav-main .account em {
-        margin-top:0.9em;
-        font-size: 0.9em;
-    }
-    .nav-main .nav-footer-submenu {
-        overflow: hidden;
-        display: block;
-    }
-    .nav-footer .avatar {
-        width: 40px;
-        height: 40px;
-    }
-}
 
 /* Display the optional banner above main content */
 
@@ -303,28 +199,6 @@ input[type='checkbox']::before, input[type='radio']::before {
 .button-advanced-settings {
     display:block;
     font-size:0.8em;
-    font-weight:600;
     margin-top: -20px;
     align-self: flex-start;
 }
-
-.power-by {
-    background-color:#1a1a1a;
-    border-top:1px solid #333;
-    font-size:10px;
-    text-align: center;
-}
-
-.power-by a {
-    color:#fff;
-    padding: 2px;
-}
-.power-by a:hover {
-    background-color:#f00;
-}
-
-.power-by img {
-    width:75px;
-    height:auto;
-    padding-left:2px;
-}

coderedcms/static/coderedcms/css/codered-editor.css

@@ -1,69 +1,23 @@
 /*!
 Wagtail CRX (https://www.coderedcorp.com/cms/)
-Copyright 2018-2021 CodeRed LLC
+Copyright 2018-2022 CodeRed LLC
 License: https://github.com/coderedcorp/coderedcms/blob/dev/LICENSE
 */
 
-/* Reset fonts to system */
-
-.title .halloeditor, .title input, .title textarea,
-.Draftail-Editor .DraftEditor-root {
-    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" !important;
-}
-
-
 /* Inputs and form fields */
 
-.title .halloeditor, .title input, .title textarea {
-    font-size:2.5em;
-}
-.full .halloeditor, .full input, .full textarea {
-    padding-top:1em;
-    padding-bottom:1em;
-    background-color:transparent;
-}
-
-.c-sf-block input[type='text'],
-.c-sf-block input[type='email'],
-.c-sf-block input[type='url'],
-.c-sf-block input[type='number'],
-.c-sf-block input[type='date'],
-.c-sf-block input[type='time'],
-.c-sf-block input[type='datetime'],
-.c-sf-block input[type='datetime-local'],
-.c-sf-block textarea,
-.c-sf-block select,
-.c-sf-block .richtext,
-.c-sf-block .tagit {
-    background-color:white;
-    border:1.5px solid #ddd;
-}
-
-.c-sf-block input:focus,
-.c-sf-block textarea:focus,
-.c-sf-block select:focus,
-.c-sf-block .richtext:focus,
-.c-sf-block .tagit:focus {
-    border-color:#00b0b1;
-    background-color:#f2fcfc;
-}
-
 .c-sf-button {
     max-width: 200px;
 }
 
 .input input,
 .input select {
-    width: 300px;
-    max-width: 100%;
-}
-.input input[type='radio'],
-.input input[type='checkbox'] {
-    width: auto;
+    max-width: 300px;
 }
 .input textarea,
 .full .input input {
-    width:100%;
+    width: 100%;
+    max-width: 100%;
 }
 .input input[type='color']{
     height: 40px;
@@ -73,10 +27,6 @@ License: https://github.com/coderedcorp/coderedcms/blob/dev/LICENSE
 
 /* Override and enhance the streamfield editor to support our deeply nested streamfields. */
 
-.chooser .unchosen::before, .chooser .chosen::before {
-    color:rgba(0,0,0,0.2)
-}
-
 .c-sf-block {
     display: block;
 }
@@ -116,11 +66,6 @@ License: https://github.com/coderedcorp/coderedcms/blob/dev/LICENSE
     background-color: inherit;;
 }
 
-.object > h2,
-.object > .title-wrapper label {
-    font-weight: 600;
-}
-
 .object .multiple {
     width:100%;
     max-width:100%;
@@ -137,65 +82,10 @@ License: https://github.com/coderedcorp/coderedcms/blob/dev/LICENSE
     padding-top:0;
 }
 
-.stream-menu.stream-menu-closed .toggle {
-    color:#888;
-}
-
 .fields > li, .field-col {
     padding-bottom:0.5em;
 }
 
-.tagit, input, select, textarea {
-    color:#000;
-}
-.tagit, input, select, textarea {
-    font-weight:normal;
-}
-
-.stream-menu-inner h3 {
-    color: #ccc;
-    text-transform: uppercase;
-    font-weight: 700;
-    border-bottom: 2px solid rgba(255,255,255,0.1);
-    padding: 0.5em;
-}
-
-
-/* Draftail */
-
-.Draftail-Toolbar {
-    border: none !important;
-    border-radius:0 !important;
-    color:rgba(0,0,0,0.2) !important;
-    padding: 0 !important;
-    transition: all ease .25s;
-}
-.Draftail-Toolbar:hover {
-    color:rgba(0,0,0,0.7) !important;
-    transition: all ease .25s;
-}
-.Draftail-Toolbar .Draftail-ToolbarButton--active {
-    background-color:rgba(0,0,0,0.05) !important;
-    border:none;
-    transition: all ease .25s;
-}
-.Draftail-Toolbar:hover .Draftail-ToolbarButton--active {
-    background-color:rgba(0,0,0,0.2) !important;
-    transition: all ease .25s;
-}
-.Draftail-Toolbar .Draftail-ToolbarGroup + .Draftail-ToolbarGroup::before {
-    content: none;
-}
-.Draftail-Toolbar .Draftail-ToolbarGroup + .Draftail-ToolbarGroup {
-    margin-left: 1em;
-}
-
-.Draftail-Editor .DraftEditor-root {
-    color:#000 !important;
-}
-.Draftail-DividerBlock {
-    background-color:#ccc !important;
-}
 
 
 /* Custom */
@@ -239,10 +129,3 @@ License: https://github.com/coderedcorp/coderedcms/blob/dev/LICENSE
 .codered-callout p {
     font-size: 1rem;
 }
-.codered-callout .codered-new {
-    border-radius: 4px;
-    background-color: rgba(0,0,0,0.1);
-    font-size: 0.6em;
-    padding: 0.3em 0.6em;
-    text-transform: uppercase;
-}

coderedcms/templates/coderedcms/widgets/checkbox_classifiers.html

@@ -26,7 +26,6 @@
     <div class="codered-callout">
         <div class="codered-big-icon icon icon-snippet"></div>
         <h3>
-            <span class="codered-new">{% trans "New!" %}</span>
             {% trans "Organize Pages with Classifiers" %}
         </h3>
         <p>
@@ -36,4 +35,4 @@
             <a class="button bicolor icon icon-plus" href="{% url 'wagtailsnippets:add' 'coderedcms' 'classifier' %}">{% trans "Add Classifier" %}</a>
         </div>
     </div>
-{% endif %}
+{% endif %}

coderedcms/templates/wagtailadmin/base.html

@@ -6,13 +6,6 @@
     {{ block.super }}
 {% endblock %}
 
-{% block branding_logo %}
-    {% if settings.coderedcms.LayoutSettings.logo %}
-        <div class="codered-logo-container {{settings.coderedcms.LayoutSettings.navbar_color_scheme}}">
-            {% image settings.coderedcms.LayoutSettings.logo max-300x300 as logo_image %}
-            <img src="{{ logo_image.url }}" class="codered-logo-custom" alt="Dashboard"/>
-        </div>
-    {% else %}
-        {{block.super}}
-    {% endif %}
-{% endblock %}
+{# NOTE: this must be on a single line, otherwise Django templates will create
+  whitespace, and wagtail will think the whitespace is the custom logo! #}
+{% block branding_logo %}{% if settings.coderedcms.LayoutSettings.logo %}<div class="codered-logo-container {{settings.coderedcms.LayoutSettings.navbar_color_scheme}}">{% image settings.coderedcms.LayoutSettings.logo max-300x300 as logo_image %}<img src="{{ logo_image.url }}" class="codered-logo-custom" alt="Dashboard"/></div>{% endif %}{% endblock %}

coderedcms/templates/wagtailadmin/shared/main_nav.html

@@ -1,27 +0,0 @@
-{% load wagtailadmin_tags static coderedcms_tags i18n %}
-<nav class="nav-main">
-    <ul>
-        {{ menu_html }}
-
-        <li class="nav-footer" id="footer">
-            <div class="account" id="account-settings" title="{% trans 'Edit your account' %}">
-                <span class="avatar square avatar-on-dark">
-                    <img src="{% avatar_url request.user size=50 %}" alt="" />
-                </span>
-                <em class="icon icon-arrow-up-after">{{ request.user.first_name|default:request.user.get_username }}</em>
-            </div>
-
-            <ul class="nav-footer-submenu">
-                <li><a href="{% url 'wagtailadmin_account' %}" class="icon icon-user">{% trans "Account settings" %}</a></li>
-                <li><a href="{% url 'wagtailadmin_logout' %}" class="icon icon-logout">{% trans "Log out" %}</a></li>
-            </ul>
-
-            <div class="power-by">
-              <a href="https://github.com/coderedcorp/coderedcms" target="_blank" title="Wagtail CRX (CodeRed Extensions) v {% coderedcms_version %}">
-                powered by <img src="{% static 'coderedcms/img/codered.png' %}" alt="CodeRed" />
-              </a>
-            </div>
-
-        </li>
-    </ul>
-</nav>