3922 Joplin UI: Create Plan of Attack

joplin/css/admin.scss

@@ -1,4 +1,6 @@
 @import './variables';
+@import './application_banner.scss';
+// -----
 @import './utilities/border-box-reset';
 @import './layouts/headers';
 @import './layouts/left_sidebar_nav';
@@ -92,7 +94,7 @@
 }
 
 .header.coa-header > .dropdown > .dropdown-toggle {
-    background-color: $coa-color-darkest-gray;
+    // background-color: $coa-color-darkest-gray;
     border-left: none;
     color: #fff;
     text-transform: none;

joplin/css/application_banner.scss

@@ -0,0 +1,14 @@
+.coa-header { // Change me to coa-application_banner
+  display: flex;
+  padding: 0.75rem;
+  // background: $coa-color-darkest-gray;
+  position: fixed;
+  z-index: 4;
+  width: 100%;
+  border-bottom: solid $coa-border-color 2px;
+}
+
+.coa-seal {
+  width: 50px;
+  padding: 20px;
+}

joplin/css/layouts/headers.scss

@@ -1,16 +1,37 @@
 // COA Global Header
 
-.coa-header {
-    display: flex;
-    padding: 0.75rem;
-    background: $coa-color-darkest-gray;
-    position: fixed;
-    z-index: 4;
-    width: 100%;
+// .coa-seal {
+//   width: 50px;
+//   padding: 20px;
+//   background-color: red;
+// }
+
+.coa-user { // 👀👇Look, there's more below from og styles for this
+  color: $coa-text-color;
+  background-color: $coa-background-color-secondary;
+  font-size: $coa-fontSize-md !important; // figure-out why...?
+  margin-top: 8px;
+  padding-left: 20px !important;
+  padding-right: 20px;
+  line-height: 50px;
+  height: 50px;
 }
 
+// 🔥 NOTES...
+// ---- sperate as header and... whatever else is used in here....
+// ... it's confused with nav header👆 and individual headers👇
+
+// .coa-header {
+//     display: flex;
+//     padding: 0.75rem;
+//     // background: $coa-color-darkest-gray;
+//     position: fixed;
+//     z-index: 4;
+//     width: 100%;
+// }
+
 .coa-user {
-    color: $coa-color-lightest-blue;
+    // color: $coa-color-lightest-blue;
     padding-left: 10px;
     font-size: 14px;
 }

joplin/css/layouts/left_sidebar_nav.scss

@@ -1,63 +1,83 @@
 // COA Global Nav (left sidebar)
+.wrapper {
+  padding-top: $header-height;
+  padding-left: $nav-wrapper-width;
+  height: inherit;
+}
+.nav-wrapper,
+.nav-wrapper .inner {
+  width: $nav-wrapper-width;
+  background-color: $coa-background-color-secondary;
+  padding-top: 1px;
+  // border-top: solid $coa-border-color 2px;
+  border-right: solid $coa-border-color 2px;
+}
 
-.nav-main .menu-item a::before {
-    font-size: 2rem;
+.nav-main {
+  position: static;
+  overflow: hidden;
+  // background-color: $coa-background-color-secondary;
 }
+// .nav-wrapper {
+//   width: $nav-wrapper-width;
+// }
 
-.nav-main .menu-active > a {
-    border-left-color: $coa-color-lightest-blue;
-    color: $coa-color-lightest-blue;
+.nav-main * {
+  color: $coa-text-color;
+  font-size: $coa-fontSize-md;
 }
 
-.wrapper {
-    padding-top: $header-height;
-    padding-left: $nav-wrapper-width;
-    height: inherit;
+.nav-main .menu-item a::before {
+  // font-size: 2rem;
+  color: $coa-text-color;
+  font-size: $coa-fontSize-sm-icon;
 }
-.nav-wrapper,
-.nav-wrapper .inner {
-    width: $nav-wrapper-width;
+
+.nav-main .menu-item > a {
+  border-left: solid $coa-background-color-secondary $coa-active-left-boarder-width;
 }
 
-.nav-main {
-    position: static;
-    overflow: hidden;
+.nav-main .menu-active > a {
+  border-left: solid $coa-blue $coa-active-left-boarder-width;
+  background-color: $coa-background-color-secondary;
+  text-shadow: none;
 }
+
 .nav-main a {
-    padding-left: 10px;
+  padding-left: 10px;
 }
+
 .nav-main .footer {
-    display: none;
+  display: none;
 }
 
 .nav-main .menu-item {
-    .icon-home:before {
-        content: 'create';
-    }
-
-    .icon-maps:before {
-        content: 'map';
-    }
-    .icon-locations:before {
-        content: 'location_on';
-    }
-    .icon-image:before {
-        content: 'photo';
-    }
-    .icon-contacts:before {
-        content: 'perm_contact_calendar';
-    }
-    .icon-users:before {
-        content: 'account_circle';
-    }
-    .icon-doc-full-inverse:before {
-        content: 'description';
-    }
-    .icon-settings:before {
-        content: 'settings_applications';
-    }
+  .icon-home:before {
+      content: 'description';
+  }
+  .icon-maps:before {
+      content: 'map';
+  }
+  .icon-locations:before {
+      content: 'location_on';
+  }
+  .icon-image:before {
+      content: 'photo';
+  }
+  .icon-contacts:before {
+      content: 'perm_contact_calendar';
+  }
+  .icon-users:before {
+      content: 'account_circle';
+  }
+  .icon-doc-full-inverse:before {
+      content: 'description';
+  }
+  .icon-settings:before {
+      content: 'settings_applications';
+  }
 }
 
 .nav-main .menu-item .material-icons span {
-    font-family: 'Open Sans';
+  font-family: $coa-fontFamily;
 }

joplin/css/theme-override.scss

@@ -1,20 +1,55 @@
 @import './variables';
 
-.header.coa-header {
-  background-color: $coa-color-primary;
+body {
+  font-family: $coa-fontFamily;
 }
 
-.menu-active.menu-active {
-  background-color: $coa-color-primary-active;
+// - - - - - - - - - - - - Find a better home  - - - - - - - - - - - - - - - - -
+
+.avatar.circle {
+  width: 40px;
+  height: 40px;
+  margin-top: 10px;
+  border: solid 3px $coa-blue;
 }
-.inner {
-  background-color: $coa-color-primary !important;
+.avatar.circle > img {
+  padding: 5px;
+  padding-top: 2px;
+  width: 32px;
 }
 
 .dropdown-toggle {
-  background-color: $coa-color-primary !important;
+  background-color: $coa-background-color !important; // * wagtail forced (See: Notes)
 }
 
-#wagtail > div.wrapper, #wagtail > div.wrapper > main {
-  background-color: $coa-color-primary;
+/* * * * * Notes * * * * *
+
+* wagtail forced
+  - This css attribute is being built in the wagtail pre-process.
+  - It won't work without "!important"
+
+*/
+
+
+// - - - - - - - - - - - - - - - - - old - - - - - - - - - - - - - - - - - - -
+
+
+.header.coa-header {
+  background-color: $coa-background-color;
+}
+
+.menu-active.menu-active {
+  background-color: $coa-color-primary-active;
 }
+// .inner {
+//   background-color: $coa-color-primary !important;
+// }
+
+// .dropdown-toggle {
+//   background-color: $coa-color-primary !important;
+// }
+
+// 🔥Staging vs Prod ???? how to handle.
+// #wagtail > div.wrapper, #wagtail > div.wrapper > main {
+//   background-color: $coa-color-primary;
+// }

joplin/css/variables.scss

@@ -1,3 +1,26 @@
+// Joplin UI 2020~
+
+// Types
+$coa-fontFamily: 'IBM Plex Sans', sans-serif;
+$coa-fontSize-md: 1rem;
+$coa-fontSize-sm-icon: 1.25rem;
+
+// Colors
+$coa-blue: #0050D8;
+$coa-text-color: #2D2E2F; // coa-font-dark
+$coa-border-color: #DCDEE0; // just make "coa-light-gray"
+$coa-background-color: #FFFFFF; // just make "coa-white"
+$coa-background-color-secondary: #F6F6F6; // just make "coa-off-white"
+
+// Sizes
+$coa-active-left-boarder-width: 7px;
+
+// Left sidebar nav
+$nav-wrapper-width: 180px;
+
+
+// - - - - - - - - - - - - - - - - - old - - - - - - - - - - - - - - - - - - -
+
 // COLORS
 $coa-color-dark-blue: #023654;
 $coa-color-light-blue: #3282AF;
@@ -18,12 +41,10 @@ $coa-color-white: #FFFFFF;
 $coa-color-primary: #244a63;
 $coa-color-primary-active: #183243;
 
-
-
 // LAYOUT
 
-$nav-wrapper-width: 140px;
-$header-height: 89px;
+// $nav-wrapper-width: 140px; // 🌙 Changed with Joplin UI 2020~
+$header-height: 114px; // OG: 89
 $secondary-header-height: 112px;
 
 $edit-page-tab-bar-top: 200px;

joplin/templates/wagtailadmin/base.html

@@ -20,12 +20,12 @@
 {% if ISPRODUCTION == False %}
   {% render_bundle 'theme' %}
 {% endif %}
-<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-      rel="stylesheet">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
 {% include 'session_security/all.html' %}
 <div class="header coa-header">
     <div>
-        <img class="wagtail-logo wagtail-logo__full" src="{% static 'images/coa_seal_transparent_white.png' %}" alt="Welcome to City of Austin CMS" width="60" />
+        <img class="coa-seal" src="{% static 'images/coa_seal_transparent_full_color.png' %}" alt="Welcome to City of Austin CMS" width="60" />
     </div>
     <div class="dropdown user-account">
         <div class="dropdown-toggle">