Mobile ui (#227)

* Basic grid setup

* Fixing thumb on two-up

* Adding margin so you can still access the two-up

* Allow multi-panel to keep one open only

* Edge cases for one-open

* Abstracting results so it can be used as a heading.

* Ordering of items in mobile view. Changing scrolling element.

* Adding labels to collapsed view

* Adding height animation to multi-panel

* Fixing animation bugs

* Expand/collapse icon

* Allow two-up and pinch-zoom to work beneath controls

* Range bubble now behaves properly on mobile

* No longer need this.

* Prevent options overflow at larger widths

src/components/results/index.tsx

@@ -0,0 +1,78 @@
+import { h, Component, ComponentChildren, ComponentChild } from 'preact';
+
+import * as style from './style.scss';
+import FileSize from './FileSize';
+import { DownloadIcon } from '../../lib/icons';
+import '../custom-els/LoadingSpinner';
+import { SourceImage } from '../compress';
+import { Fileish } from '../../lib/initial-util';
+
+interface Props {
+  loading: boolean;
+  source?: SourceImage;
+  imageFile?: Fileish;
+  downloadUrl?: string;
+  children: ComponentChildren;
+}
+
+interface State {
+  showLoadingState: boolean;
+}
+
+const loadingReactionDelay = 500;
+
+export default class Results extends Component<Props, State> {
+  state: State = {
+    showLoadingState: false,
+  };
+
+  /** The timeout ID between entering the loading state, and changing UI */
+  private loadingTimeoutId: number = 0;
+
+  componentDidUpdate(prevProps: Props, prevState: State) {
+    if (prevProps.loading && !this.props.loading) {
+      // Just stopped loading
+      clearTimeout(this.loadingTimeoutId);
+      this.setState({ showLoadingState: false });
+    } else if (!prevProps.loading && this.props.loading) {
+      // Just started loading
+      this.loadingTimeoutId = self.setTimeout(
+        () => this.setState({ showLoadingState: true }),
+        loadingReactionDelay,
+      );
+    }
+  }
+
+  render({ source, imageFile, downloadUrl, children }: Props, { showLoadingState }: State) {
+    return (
+      <div class={style.results}>
+        <div class={style.resultData}>
+          {(children as ComponentChild[])[0]
+            ? <div class={style.resultTitle}>{children}</div>
+            : null
+          }
+          {!imageFile || showLoadingState ? 'Working…' :
+            <FileSize
+              blob={imageFile}
+              compareTo={(source && imageFile !== source.file) ? source.file : undefined}
+            />
+          }
+        </div>
+
+        <div class={style.download}>
+          {(downloadUrl && imageFile) && (
+            <a
+              class={`${style.downloadLink} ${showLoadingState ? style.downloadLinkDisable : ''}`}
+              href={downloadUrl}
+              download={imageFile.name}
+              title="Download"
+            >
+              <DownloadIcon class={style.downloadIcon} />
+            </a>
+          )}
+          {showLoadingState && <loading-spinner class={style.spinner} />}
+        </div>
+      </div>
+    );
+  }
+}