Merge pull request #973 from 18F/lkb-admin-css-all

Add css in admin override and provide organized CSS structure

api/ereqs_admin/static/admin/base/_variables.scss

@@ -0,0 +1,4 @@
+$nav-menu-active: false;
+
+$banner-height: 60px;
+$nav-menu-width: if($nav-menu-active, 200px, 0);

api/ereqs_admin/static/admin/layout/_header.scss

@@ -0,0 +1,22 @@
+.title-bar {
+  color: $color-white;
+  background: $color-gray;
+  margin-top: $banner-height;
+  padding: 0 $space;
+  width: 100%;
+
+  @if not($nav-menu-active) {
+    display: none;
+  }
+
+}
+
+// Add the padding back to *other* elements in the header
+#branding,
+#user-tools {
+  padding: $space-sm 40px;
+}
+
+.admin-interface {
+  background: $color-very-lt-gray;
+}

api/ereqs_admin/static/admin/layout/_navigation.scss

@@ -0,0 +1,24 @@
+.breadcrumbs,
+ul.messagelist,
+#content {
+  margin-left: $nav-menu-width;
+
+  // we don't display the nav-menu when we're in a popup/ on the login screen
+  .popup &,
+  .login & {
+    margin-left: 0;
+  }
+}
+
+.nav-menu {
+  background: $color-black;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  width: $nav-menu-width;
+
+  @if not($nav-menu-active) {
+    display: none;
+  }
+}

api/ereqs_admin/static/admin/override.scss

@@ -1,6 +1,7 @@
 @import '~codemirror/addon/dialog/dialog.css';
 @import '~codemirror/lib/codemirror.css';
 @import '~codemirror/theme/eclipse.css';
+@import '~normalize.css/normalize.css';
 @import '~prosemirror-view/style/prosemirror.css';
 @import '~prosemirror-menu/style/menu.css';
 
@@ -14,59 +15,16 @@
 @import '../shared-styles/module/heading';
 @import '../shared-styles/module/list';
 @import '../shared-styles/module/paragraph';
-@import './layout/typography';
-@import './module/editor';
-
-$nav-menu-active: false;
-
-$banner-height: 60px;
-$nav-menu-width: if($nav-menu-active, 200px, 0);
-
-#header {
-  // Remove padding so our nav-menu can start at left:0
-  padding: 0;
-}
-
-// Add the padding back to *other* elements in the header
-#branding,
-#user-tools {
-  padding: 10px 40px;
-}
 
-.breadcrumbs,
-.messagelist,
-#content {
-  margin-left: $nav-menu-width;
+@import './base/variables';
+@import './overrides/django/base';
+@import './overrides/django/changelists';
+@import './overrides/django/forms';
+@import './overrides/django/widgets';
+@import './overrides/admin_interface/admin-interface-fix';
 
-  // we don't display the nav-menu when we're in a popup/ on the login screen
-  .popup &,
-  .login & {
-    margin-left: 0;
-  }
-}
+@import './layout/header';
+@import './layout/navigation';
 
-.title-bar {
-  color: $color-white;
-  background: $color-gray;
-  margin-top: $banner-height;
-  padding: 0 $space;
-  width: 100%;
-
-  @if not($nav-menu-active) {
-    display: none;
-  }
-
-}
-
-.nav-menu {
-  background: $color-black;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  position: absolute;
-  width: $nav-menu-width;
+@import './module/editor';
 
-  @if not($nav-menu-active) {
-    display: none;
-  }
-}

api/ereqs_admin/static/admin/overrides/admin_interface/_admin-interface-fix.scss

@@ -0,0 +1,13 @@
+.admin-interface .inline-group .tabular thead th:last-child:not([class]):not([style]) {
+  // admin_interface incorrectly assumes the last column will be an "action",
+  // so it overrides Django to right-align that heading. This reverts
+  text-align: left;
+}
+
+// e.g. the headings for sub-sections on a form
+.admin-interface .module h2,
+.admin-interface.dashboard .module caption,
+.admin-interface .module.filtered h2,
+.admin-interface .inline-group h2 {
+  padding: $space;
+}

api/ereqs_admin/static/admin/overrides/django/_base.scss

@@ -0,0 +1,91 @@
+input[type=text],
+input[type=password],
+input[type=email],
+input[type=url],
+input[type=number],
+textarea,
+select,
+.vTextField {
+  // Remove Django's default rounded corners and swap border color
+  border-radius: 0;
+  border: 1px solid $color-gray;
+
+  // extension
+  @include size-regular();
+}
+
+td,
+th {
+  // Django shrinks the size of table headers and sets a different font face.
+  // Reset both here.
+  padding: $space;
+  @include size-regular();
+  @include font-san-serif();
+}
+
+thead th,
+tfoot td {
+  // Similar to td/th
+  padding: $space;
+  @include size-regular();
+}
+
+#header {
+  // Remove padding so our nav-menu can start at left:0
+  padding: 0;
+}
+
+h1 {
+  // Override Django's title color and Normalize/Django's font sizes
+  color: $color-black;
+  @include size-xxlarge();
+
+  // extending
+  padding: $space-sm;
+}
+
+.button,
+input[type=submit],
+input[type=button],
+.submit-row input,
+a.button {
+  // Override Django's default padding to better approximate our UI
+  padding: $space-xs $space;
+}
+
+// These are the links at the top of the page, e.g. "Add Policy" and "History"
+.object-tools a {
+  // Django's default is more rounded that we'd like
+  border-radius: 3px;
+
+  // extensions
+  border: 1px solid $color-gray;
+}
+
+.module h2,
+.module caption,
+.inline-group h2 {
+  // Override Django's custom font size
+  @include size-regular();
+}
+
+body {
+  // Override Django's default page font
+  @include font-san-serif();
+  @include size-regular();
+}
+
+input,
+textarea,
+select,
+.form-row p,
+form .button {
+  // Django also has specific fonts and sized for most inputs; reset them.
+  @include font-san-serif();
+  @include size-small();
+}
+
+#branding h1 {
+  // Django sets a font size for this specific element
+  @include size-large();
+}

api/ereqs_admin/static/admin/overrides/django/_changelists.scss

@@ -0,0 +1,6 @@
+// e.g. listing pages, like /admin/reqs/policy/
+#changelist {
+  // The content of this div already has background colors; this color only
+  // fills in the gaps, which looks strange.
+  background: none;
+}

api/ereqs_admin/static/admin/overrides/django/_forms.scss

@@ -0,0 +1,94 @@
+// e.g. "Save" at the bottom of a profile
+.submit-row input.default {
+  // Django up-cases this button
+  text-transform: none;
+}
+
+.inline-group thead th {
+  // Django sets this padding to smaller values than we'd like
+  padding: $space;
+}
+
+.form-row {
+  // Django sets a smaller padding and font-size than we want
+  padding: $space $space-lg;
+  @include size-regular();
+}
+
+// Help text adjacent to a form control
+form .aligned input + p.help,
+form .aligned textarea + p.help,
+form .aligned select + p.help,
+form .aligned input + div.help,
+form .aligned textarea + div.help,
+form .aligned select + div.help {
+  // We're stacking labels over inputs, so we _don't_ want these indented
+  margin-left: 0;
+  padding-left: 0;
+}
+
+// Other help text, e.g. after datetime fields
+form .aligned p.help,
+form .aligned div.help {
+  // Same issue around stacking labels
+  margin-left: 0;
+  padding-left: 0;
+}
+
+// Buttons at the bottom of a page
+.submit-row {
+  // Django gives this row a background and padding; we instead align
+  // everything to the edges
+  padding: 0;
+  background: none;
+}
+
+// More help text and inactive controls
+.aligned label + p,
+.aligned label + div.help,
+.aligned label + div.readonly {
+  // Same issue around stacking label
+  margin-left: 0;
+  // extension: Ensure they take up the whole line
+  clear: both;
+}
+
+// We want our form labels to "stack" over the input elements. To do that,
+// we'll make sure the label takes up the whole line
+.aligned label {
+  // extensions
+  width: 100%;
+  padding-left: 0;
+  padding-bottom: $space-xs;
+}
+
+label {
+  // Django sets these as gray and gives them a small font size
+  @include size-regular();
+  color: $color-black;
+}
+
+.aligned .vCheckboxLabel {
+  // Django gives these no left padding
+  padding-left: $space-sm;
+}
+
+.submit-row a.deletelink,
+.submit-row input {
+  // Django gives these a fixed height; we'll style it to look closer to
+  // right-side "save" buttons
+  height: auto;
+  line-height: $space-xl;
+  padding: 0 $space-sm;
+}
+
+.inline-related fieldset {
+  // Django's default of 100% doesn't play well with our normalized box model
+  width: auto;
+}
+
+.vTextField {
+  // Django's default is smaller, assuming we're only taking up a portion of
+  // the line
+  width: 40rem;
+}

api/ereqs_admin/static/admin/overrides/django/_widgets.scss

@@ -0,0 +1,9 @@
+.timezonewarning {
+  // Django makes this text smaller and a different color
+  @include size-regular();
+  color: $color-gray;
+
+  // extension
+  padding-top: $space-xs;
+  display: inline-block;
+}

api/ereqs_admin/templates/admin/base_site.html

@@ -1,7 +1,8 @@
 {% extends 'admin_interface:admin/base_site.html' %}
 {% load nav_menu static %}
 
-{% block extrastyle %}
+{# We don't override extrastyles because other pages will also override it #}
+{% block extrahead %}
   {{ block.super }}
   <link
     rel="stylesheet"