Merge pull request #995 from nationalarchives/chore/tidy-editor-conta…

…iners Tidy up (some) container behaviour
nationalarchives · Jun 15, 2023 · e402c09 · e402c09
2 parents 27214d4 + b7f7701
commit e402c09
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 41 deletions.
diff --git a/ds_caselaw_editor_ui/sass/includes/_edit.scss b/ds_caselaw_editor_ui/sass/includes/_edit.scss
@@ -3,13 +3,6 @@
 .judgment-info-component {
   padding: 0 $spacer__unit;
 
-  &__container {
-    @include container;
-    text-align: left;
-    margin: 0 auto;
-    padding: 0 calc(#{$spacer__unit} * 2);
-  }
-
   &__header {
     font-size: 1rem;
     line-height: 2.8rem;

diff --git a/ds_caselaw_editor_ui/sass/includes/_global.scss b/ds_caselaw_editor_ui/sass/includes/_global.scss
@@ -3,6 +3,10 @@ body {
   font-family: $font__open-sans;
 }
 
+.container {
+  @include container;
+}
+
 textarea {
   font-family: inherit;
   font-size: inherit;

diff --git a/ds_caselaw_editor_ui/sass/includes/_judgment_component.scss b/ds_caselaw_editor_ui/sass/includes/_judgment_component.scss
@@ -3,12 +3,6 @@
   margin: 0 auto;
   padding: 0 calc(#{$spacer__unit} * 2);
 
-  &__container {
-    @include container;
-    text-align: left;
-    padding: 1rem;
-  }
-
   &__panel {
     padding: calc(#{$spacer__unit} / 2) 0;
   }

diff --git a/ds_caselaw_editor_ui/sass/includes/_mixins.scss b/ds_caselaw_editor_ui/sass/includes/_mixins.scss
@@ -36,11 +36,21 @@
 }
 
 @mixin container {
-  padding: 0 $spacer__unit;
+  padding: 0 $gutter_unit;
   margin: auto;
 
+  max-width: $grid__breakpoint-small - ($gutter_unit * 1);
+
   @media (min-width: $grid__breakpoint-medium) {
-    max-width: 90%;
+    max-width: $grid__breakpoint-medium - ($gutter_unit * 1.5);
+  }
+
+  @media (min-width: $grid__breakpoint-large) {
+    max-width: $grid__breakpoint-large - ($gutter_unit * 2);
+  }
+
+  @media (min-width: $grid__breakpoint-extra-large) {
+    max-width: $grid__breakpoint-extra-large - ($gutter_unit * 2);
   }
 }
 

diff --git a/ds_caselaw_editor_ui/sass/includes/_notification_message.scss b/ds_caselaw_editor_ui/sass/includes/_notification_message.scss
@@ -3,23 +3,36 @@
   padding: 0.5rem 1rem;
 }
 
-@mixin page-notification {
-  @include notification;
-  margin: $spacer__unit 15% calc(0.5 * $spacer__unit) 15%;
+.page-notification__container {
+  @include container;
+}
+
+.page-notification {
+  &--success {
+    @include notification;
+    background-color: $color__success;
+  }
 
-  @media (max-width: $grid__breakpoint-medium) {
-    margin: auto 0;
+  &--failure {
+    @include notification;
+    background-color: $color__failure;
   }
 }
 
-.page-notification {
+.inline-notification {
   &--success {
-    @include page-notification;
+    @include notification;
     background-color: $color__success;
   }
 
+  &--warning {
+    @include notification;
+    color: $color__black;
+    background-color: $color__warning;
+  }
+
   &--failure {
-    @include page-notification;
+    @include notification;
     background-color: $color__failure;
   }
 }

diff --git a/ds_caselaw_editor_ui/sass/includes/_variables.scss b/ds_caselaw_editor_ui/sass/includes/_variables.scss
@@ -13,6 +13,7 @@ $color__aqua-blue: #037091;
 
 /* STARTS – Validation variables */
 $color__success: #336600;
+$color__warning: #f0c560;
 $color__failure: #cc3300;
 
 $color__green: #3bb300;
@@ -37,6 +38,8 @@ $color__focus-blue-outline: #1d70b8;
 $color__cta-background: $color__aqua-blue;
 $color__cta-background-hover: $color__dark-blue;
 
+$gutter_unit: 25px;
+
 $grid__breakpoint-small: 576px;
 $grid__breakpoint-medium: 768px;
 $grid__breakpoint-large: 992px;

diff --git a/ds_caselaw_editor_ui/templates/includes/notifications.html b/ds_caselaw_editor_ui/templates/includes/notifications.html
@@ -1,7 +1,9 @@
 {% if messages %}
   {% for message in messages %}
     {% spaceless %}
-      <div class="page-notification--{% if message.tags %}{{ message.tags }}{% else %}success{% endif %}">{{ message }}</div>
+      <div class="page-notification--{% if message.tags %}{{ message.tags }}{% else %}success{% endif %}">
+        <div class="page-notification__container">{{ message }}</div>
+      </div>
     {% endspaceless %}
   {% endfor %}
 {% endif %}
diff --git a/ds_caselaw_editor_ui/templates/layouts/judgment_with_sidebar.html b/ds_caselaw_editor_ui/templates/layouts/judgment_with_sidebar.html
@@ -1,24 +1,20 @@
 {% extends "layouts/judgment.html" %}
 {% load i18n %}
 {% block content %}
-  <div class="edit-component">
-    <div class="edit-component__container">
-      <div class="judgment-component">
-        <div class="judgment-component__container">
-          {% block judgment_header %}
-          {% endblock judgment_header %}
-          <div class="judgment-component__two-column-container">
-            <div class="judgment-component__left-panel">
-              {% block judgment_content %}
-              {% endblock judgment_content %}
-            </div>
-            <aside class="judgment-sidebar">
-              {% include "includes/judgment/sidebar.html" %}
-              {% block extra_sidebar_content %}
-              {% endblock extra_sidebar_content %}
-            </aside>
-          </div>
+  <div class="container edit-component">
+    <div class="judgment-component">
+      {% block judgment_header %}
+      {% endblock judgment_header %}
+      <div class="judgment-component__two-column-container">
+        <div class="judgment-component__left-panel">
+          {% block judgment_content %}
+          {% endblock judgment_content %}
         </div>
+        <aside class="judgment-sidebar">
+          {% include "includes/judgment/sidebar.html" %}
+          {% block extra_sidebar_content %}
+          {% endblock extra_sidebar_content %}
+        </aside>
       </div>
     </div>
   </div>