Change tables to scroll in-page, not full screen

There were three problems with showing tables fullscreen:
- it was over-optimised for very big spreadsheets, whereas most users
  will only have a few columns in their files
- it was jarring to go from full screen and back to the normal layout
- it was a bit change for existing users, where we prefer incremental
  changes that make things better without disrupting people’s work
  (where possible)

So this commit changes the big table to scroll horizontally in the page,
not take up the full width of the page.

From the fullscreen table it keeps:
- the shimming method to keep the horizontal scrollbar at the bottom of
  the screen at all times

It introduces some more refinements to make it nicer to use:
- fixing the first column, so you always know what row you’re on
- adding shadows indicate where there is content that’s scrolled outside
  the edges of the container

app/assets/javascripts/fullscreenTable.js

@@ -6,13 +6,22 @@
     this.start = function(component) {
 
       this.$component = $(component);
-      this.nativeHeight = this.$component.innerHeight();
+      this.$table = this.$component.find('table');
+      this.nativeHeight = this.$component.innerHeight() + 20; // 20px to allow room for scrollbar
       this.topOffset = this.$component.offset().top;
 
-      this.insertShim();
+      this.insertShims();
+      this.maintainWidth();
       this.maintainHeight();
+      this.toggleShadows();
 
-      $(window).on('scroll resize', this.maintainHeight);
+      $(window)
+        .on('scroll resize', this.maintainHeight)
+        .on('resize', this.maintainWidth);
+
+      this.$scrollableTable
+        .on('scroll', this.toggleShadows)
+        .on('scroll', this.maintainHeight);
 
       if (
         window.GOVUK.stopScrollingAtFooter &&
@@ -23,20 +32,75 @@
 
     };
 
-    this.insertShim = () => this.$component.after(
-      $("<div class='fullscreen-shim'/>").css({
-        'height': this.nativeHeight - this.topOffset,
-        'top': this.topOffset
-      })
-    );
+    this.insertShims = () => {
 
-    this.maintainHeight = () => this.$component.css({
-      'max-height': Math.min(
-        $(window).height() - this.topOffset + $('html, body').scrollTop(),
+      this.$table.wrap('<div class="fullscreen-scrollable-table"/>');
+
+      this.$component
+        .append(
+          this.$component.find('.fullscreen-scrollable-table')
+            .clone()
+            .addClass('fullscreen-fixed-table')
+            .removeClass('fullscreen-scrollable-table')
+            .attr('role', 'presentation')
+        )
+        .append(
+          '<div class="fullscreen-right-shadow" />'
+        )
+        .after(
+          $("<div class='fullscreen-shim'/>").css({
+            'height': this.nativeHeight,
+            'top': this.topOffset
+          })
+        );
+
+      this.$scrollableTable = this.$component.find('.fullscreen-scrollable-table');
+      this.$fixedTable = this.$component.find('.fullscreen-fixed-table');
+
+    };
+
+    this.maintainHeight = () => {
+
+      let height = Math.min(
+        $(window).height() - this.topOffset + $('html, body').scrollTop() + 5,
         this.nativeHeight
-      ),
-      'min-height': $(window).height() - this.topOffset
-    });
+      );
+
+      this.$scrollableTable.outerHeight(height);
+      this.$fixedTable.outerHeight(height);
+
+    };
+
+    this.maintainWidth = () => {
+
+      let indexColumnWidth = this.$fixedTable.find('.table-field-index').outerWidth();
+
+      this.$scrollableTable
+        .css({
+            'width': this.$component.parent('main').width() - indexColumnWidth,
+            'margin-left': indexColumnWidth
+        });
+
+      this.$fixedTable
+        .width(indexColumnWidth + 4);
+
+    };
+
+    this.toggleShadows = () => {
+
+      this.$fixedTable
+        .toggleClass(
+          'fullscreen-scrolled-table',
+          this.$scrollableTable.scrollLeft() > 0
+        );
+
+      this.$component.find('.fullscreen-right-shadow')
+        .toggleClass(
+          'visible',
+          this.$scrollableTable.scrollLeft() < (this.$table.width() - this.$scrollableTable.width())
+        );
+
+    };
 
   };