Merge pull request #529 from uktrade/develop

FE Release 1.4.16

assets/javascripts/modules/auto-submit.js

@@ -4,6 +4,7 @@ const XHR = require('../lib/xhr')
 
 const AutoSubmit = {
   selector: '.js-AutoSubmit',
+  isSubmitting: false,
 
   init () {
     this.bindEvents()
@@ -28,11 +29,13 @@ const AutoSubmit = {
   },
 
   submitForm (form) {
-    if (!form) { return }
+    if (this.isSubmitting) { return }
+    this.isSubmitting = true
 
     const query = pickBy(getFormData(form))
 
     XHR.request(form.action, query)
+      .then(() => { this.isSubmitting = false })
   },
 }
 

assets/stylesheets/_components.scss

@@ -9,10 +9,10 @@
 @import "components/collection";
 @import "components/collection-filters";
 @import "components/form";
+@import "components/global-nav";
 @import "components/local-header";
 @import "components/local-nav";
 @import "components/messages";
-@import "components/meta-item";
 @import "components/meta-list";
 @import "components/metadata-list";
 @import "components/pagination";

assets/stylesheets/_deprecated/components/_button.scss

@@ -23,6 +23,7 @@
   margin: 30px 0;
 }
 
+// modifiers
 .button--link {
   background: transparent;
   border: 0;
@@ -45,3 +46,12 @@
     color: $link-hover-colour;
   }
 }
+
+.button--compact {
+  padding: 0;
+}
+
+.button--small {
+  @include bold-font(16);
+  padding: .3em .6em .15em;
+}

assets/stylesheets/_deprecated/components/_infostrip.scss

@@ -6,4 +6,8 @@ p.infostrip,
   border-left: 8px solid $border-colour;
   background: $panel-colour;
   padding: 15px 20px;
+
+  * + & {
+    margin-top: $default-spacing-unit * 2;
+  }
 }

assets/stylesheets/application.scss

@@ -2,9 +2,6 @@ $images-dir: "/images/";
 
 @import "_deprecated/trade-elements";
 
-$fa-font-path: "~font-awesome/fonts";
-@import "~font-awesome/scss/font-awesome";
-
 @import "settings";
 @import "tools";
 @import "generic";

assets/stylesheets/components/_answers-summary.scss

@@ -71,7 +71,7 @@
     text-align: right;
   }
 
-  .button {
+  .button--secondary {
     @include core-font(16);
     margin-bottom: $default-spacing-unit / 2;
 

assets/stylesheets/components/_badge.scss

@@ -37,6 +37,10 @@
   text-decoration: none;
   font-weight: 600;
 
+  .c-answers-summary & {
+    font-size: 14px;
+  }
+
   &:link,
   &:visited {
     background-color: $white;

assets/stylesheets/components/_collection.scss

@@ -93,20 +93,6 @@
   line-height: $default-spacing-unit * 2;
 }
 
-// Sorting
-
-.c-results__sort {
-  @include clearfix;
-  margin-top: $default-spacing-unit / 2;
-  margin-bottom: $default-spacing-unit / 2;
-
-  .button {
-    padding: 0 ($default-spacing-unit / 2);
-    line-height: 30px;
-    width: auto;
-  }
-}
-
 .c-collection__sort-form {
   margin-top: $default-spacing-unit / 2;
   display: flex;

assets/stylesheets/components/_entity.scss

@@ -26,17 +26,6 @@
   .c-entity__badges {
     float: right;
   }
-
-  .c-entity__content {
-    .c-meta-item:nth-child(odd) {
-      float: left;
-      clear: both;
-    }
-
-    .c-meta-item:nth-child(even) {
-      float: right;
-    }
-  }
 }
 
 .c-entity__code,
@@ -45,21 +34,10 @@
   @include core-font(14);
 }
 
-.c-entity__content .c-meta-item {
-  display: block;
-}
-
 .c-entity__badges {
   margin: 20 - 14px 0;
 }
 
 .c-entity__code {
   color: $grey-1;
 }
-
-
-// Assemblies
-
-.c-entity__header + .c-entity__content {
-  margin-top: $baseline-grid-unit;
-}

assets/stylesheets/components/_global-nav.scss

@@ -0,0 +1,44 @@
+.c-global-nav {
+  @include bold-font(16);
+  background: $grey-3;
+  padding: $default-spacing-unit / 4 0;
+
+  @include media(tablet) {
+    padding: 0;
+  }
+}
+
+.c-global-nav__link {
+  display: block;
+  padding: $default-spacing-unit / 4 0;
+  text-decoration: none;
+
+  &:hover,
+  &:link,
+  &:visited,
+  &:active {
+    color: $black;
+  }
+
+  &.is-active {
+    color: $govuk-blue;
+  }
+
+  @include media(tablet) {
+    border-bottom: 5px solid transparent;
+    display: inline-block;
+    padding: ($default-spacing-unit / 2) 0 3px;
+
+    & + & {
+      margin-left: $default-spacing-unit;
+    }
+
+    &:hover {
+      border-bottom-color: $light-blue;
+    }
+
+    &.is-active {
+      border-bottom-color: $govuk-blue;
+    }
+  }
+}

assets/stylesheets/components/_local-header.scss

@@ -1,32 +1,54 @@
 @import "../tools/mixins";
 
 .c-local-header {
-  padding-top: $default-spacing-unit * 4;
-  position: relative;
+  @include clearfix;
+
+  .l-container {
+    border-top: 1px solid transparent;
+  }
 
   &[class*="c-local-header--"] {
     padding-bottom: $default-spacing-unit * 2;
   }
 
+  .c-entity-search {
+    margin-top: $baseline-grid-unit * 20.5;
+    padding-bottom: $baseline-grid-unit * 6.25;
+  }
+
   .c-breadcrumb {
-    position: absolute;
-    top: $default-spacing-unit;
+    margin-top: $default-spacing-unit / 2;
+
+    & + * {
+      margin-top: $default-spacing-unit * 3;
+    }
+
+    & + .c-entity-search {
+      padding-bottom: 0;
+    }
   }
 
   .c-messages {
-    margin-top: -$default-spacing-unit / 2;
     margin-bottom: $default-spacing-unit;
   }
 
   .c-entity-search__aggregations {
     margin-bottom: -$default-spacing-unit * 2;
   }
 
+  .c-progress {
+    margin-top: $default-spacing-unit;
+  }
+
   .c-progress__stage {
     &::before {
       outline-color: $grey-4;
     }
   }
+
+  .c-meta-list {
+    @include core-font(16);
+  }
 }
 
 .c-local-header__heading-before {
@@ -36,7 +58,6 @@
 
 .c-local-header__heading {
   @include bold-font(36);
-  margin-top: 0;
   margin-bottom: 0;
 }
 
@@ -45,13 +66,57 @@
   margin-bottom: 0;
 }
 
+.c-local-header__content {
+  @include media(tablet) {
+    float: left;
+    width: 70%;
+  }
+}
+
+.c-local-header__actions {
+  * + & {
+    margin-top: $default-spacing-unit;
+  }
+
+  a {
+    text-decoration: none;
+
+    &:not(.button):hover {
+      text-decoration: underline;
+    }
+  }
+
+  @include media(tablet) {
+    float: right;
+    width: 30%;
+
+    * + & {
+      margin-top: $default-spacing-unit * 3;
+    }
+  }
+}
+
+.c-local-header__action {
+  @include bold-font(16);
+  display: block;
+  margin: 0;
+
+  & + & {
+    margin-top: $default-spacing-unit / 2;
+  }
+}
+
 .c-local-header--light-banner {
   background-color: $grey-4;
 }
 
 .c-local-header--dark-banner {
   background-color: $grey-3;
 
+  .l-container {
+    border-top-color: $grey-2;
+  }
+
   &.c-local-header--keyline {
     border-bottom: 1px solid $grey-2;
   }