Go fullscreen for row-level errors in spreadsheets

Two bits of context:

1. As we start dealing with letters, which have more columns, it’s more
   likely that people’s spreadsheets won’t fit in our current layout.

2. We already removed the view of the template from the page that shows
   row-level errors (eg bad phone number or missing personalisation) in
   spreadsheets because you don’t need to know about the content of the
   message in order to fix the errors.

This commit goes further by removing anything that isn’t to do with
the errors, including the normal GOV.UK header and the service’s
navigation.

This means the content can go the width of the page, which means it can
be allowed to scroll horizontally without being a usability car
crash. Which means that the layout doesn’t break with a spreadsheet that
has lots of columns.

app/assets/javascripts/fullscreenTable.js

@@ -0,0 +1,43 @@
+(function(Modules) {
+  "use strict";
+
+  Modules.FullscreenTable = function() {
+
+    this.start = function(component) {
+
+      this.$component = $(component);
+      this.nativeHeight = this.$component.innerHeight();
+      this.topOffset = this.$component.offset().top;
+
+      this.insertShim();
+      this.maintainHeight();
+
+      $(window).on('scroll resize', this.maintainHeight);
+
+      if (
+        window.GOVUK.stopScrollingAtFooter &&
+        window.GOVUK.stopScrollingAtFooter.updateFooterTop
+      ) {
+        window.GOVUK.stopScrollingAtFooter.updateFooterTop();
+      }
+
+    };
+
+    this.insertShim = () => this.$component.after(
+      $("<div class='fullscreen-shim'/>").css({
+        'height': this.nativeHeight - this.topOffset,
+        'top': this.topOffset
+      })
+    );
+
+    this.maintainHeight = () => this.$component.css({
+      'max-height': Math.min(
+        $(window).height() - this.topOffset + $('html, body').scrollTop(),
+        this.nativeHeight
+      ),
+      'min-height': $(window).height() - this.topOffset
+    });
+
+  };
+
+})(window.GOVUK.Modules);

app/assets/stylesheets/components/fullscreen-table.scss

@@ -0,0 +1,85 @@
+body.with-fullscreen {
+
+  #global-header,
+  #global-header-bar {
+    display: none;
+  }
+
+  #footer {
+    height: 0;
+    overflow: hidden;
+    border-color: $white;
+  }
+
+  .shim {
+    margin-bottom: 5px;
+  }
+
+}
+
+
+.fullscreen {
+
+  &-header {
+    padding: $gutter-half $gutter-half 0 $gutter-half;
+    margin-top: -$gutter-half;
+  }
+
+  &-content {
+
+    width: 100%;
+    background: $white;
+    z-index: 10;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    box-sizing: border-box;
+    position: absolute;
+    padding-left: $gutter-half;
+
+    .banner-dangerous {
+      margin: $gutter-half $gutter-half 0 $gutter-half;
+      position: sticky;
+      left: 0;
+    }
+
+    .table {
+      border-right: $gutter-half solid $white;  // border used as padding
+    }
+
+    th,
+    .table-field-error-label {
+      white-space: nowrap;
+    }
+
+    .table-show-more-link {
+      border: none;
+      text-align: left;
+    }
+
+  }
+
+  &-shim {
+    width: 100%;
+    position: relative;
+    z-index: 9;
+    background: $white;
+  }
+
+  &-sticky-bar {
+
+    z-index: 20;
+    padding-right: 0;
+
+    .page-footer-back-link {
+      position: absolute;
+      right: $gutter-half;
+      top: 20px;
+    }
+
+    .file-upload-button {
+      margin: 0 0 0 $gutter-half;
+    }
+
+  }
+
+}

app/assets/stylesheets/main.scss

@@ -59,6 +59,7 @@ $path: '/static/images/';
 @import 'components/letter';
 @import 'components/live-search';
 @import 'components/stick-at-top-when-scrolling';
+@import 'components/fullscreen-table';
 @import 'components/vendor/breadcrumbs';
 @import 'components/vendor/responsive-embed';
 

app/templates/fullscreen_template.html

@@ -0,0 +1,23 @@
+{% extends "admin_template.html" %}
+
+{% block inside_header %}{% endblock %}
+{% block proposition_header %}{% endblock %}
+
+{% block body_classes %} with-fullscreen {% endblock %}
+
+{% block footer_top %}{% endblock %}
+{% block footer_support_links %}{% endblock %}
+
+{% block content %}
+  <main role="main">
+    <div class="fullscreen-header">
+      {% block fullscreen_pre_title %}{% endblock %}
+    </div>
+    <div class="fullscreen-sticky-bar js-stick-at-top-when-scrolling">
+      {% block fullscreen_title %}{% endblock %}
+    </div>
+    <div class="fullscreen-content" data-module='fullscreen-table'>
+      {% block fullscreen_content %}{% endblock %}
+    </div>
+  </main>
+{% endblock %}

app/templates/views/check/row-errors.html

@@ -1,4 +1,4 @@
-{% extends "withnav_template.html" %}
+{% extends "fullscreen_template.html" %}
 {% from "components/banner.html" import banner_wrapper %}
 {% from "components/radios.html" import radio_select %}
 {% from "components/table.html" import list_table, field, text_field, index_field, hidden_field_heading %}
@@ -13,13 +13,13 @@
   </p>
 {% endmacro %}
 
-{% block service_page_title %}
+{% block per_page_title %}
   Error
 {% endblock %}
 
-{% block maincolumn_content %}
+{% block fullscreen_pre_title %}
 
-  <div class="bottom-gutter">
+  <div class="bottom-gutter-1-2">
     {% call banner_wrapper(type='dangerous') %}
       {% if row_errors|length == 1 %}
         <h1 class='banner-title' data-module="track-error" data-error-type="Bad rows" data-error-label="{{ upload_id }}">
@@ -45,10 +45,16 @@
     {% endcall %}
   </div>
 
-  <div class="bottom-gutter-3-2">
+  {% endblock %}
+  {% block fullscreen_title %}
+  <div class="bottom-gutter-2-3">
     {{ file_upload(form.file, button_text='Re-upload your file') }}
+    <a href="{{ back_link }}" class="page-footer-back-link">Go back</a>
   </div>
 
+  {% endblock %}
+  {% block fullscreen_content %}
+
   {% call(item, row_number) list_table(
     recipients.initial_annotated_rows_with_errors if row_errors and not recipients.missing_column_headers else recipients.initial_annotated_rows,
     caption=original_file_name,

gulpfile.babel.js

@@ -68,6 +68,7 @@ gulp.task('javascripts', () => gulp
     paths.src + 'javascripts/liveSearch.js',
     paths.src + 'javascripts/errorTracking.js',
     paths.src + 'javascripts/preventDuplicateFormSubmissions.js',
+    paths.src + 'javascripts/fullscreenTable.js',
     paths.src + 'javascripts/main.js'
   ])
   .pipe(plugins.prettyerror())