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/Output/custom-els/TwoUp/styles.css

@@ -56,7 +56,7 @@ two-up[legacy-clip-compat] > :not(.two-up-handle) {
   box-shadow: 0 1px 4px rgba(0,0,0,0.1);
   color: var(--thumb-color);
   box-sizing: border-box;
-  padding: 0 48%;
+  padding: 0 calc(var(--thumb-size) * 0.24);
 }
 
 .scrubber svg {

src/components/Output/index.tsx

@@ -10,7 +10,7 @@ import { twoUpHandle } from './custom-els/TwoUp/styles.css';
 
 interface Props {
   originalImage?: ImageData;
-  orientation: 'horizontal' | 'vertical';
+  mobileView: boolean;
   leftCompressed?: ImageData;
   rightCompressed?: ImageData;
   leftImgContain: boolean;
@@ -180,10 +180,7 @@ export default class Output extends Component<Props, State> {
   }
 
   render(
-    {
-      orientation, leftCompressed, rightCompressed, leftImgContain, rightImgContain,
-      originalImage,
-    }: Props,
+    { mobileView, leftImgContain, rightImgContain, originalImage }: Props,
     { scale, editingScale, altBackground }: State,
   ) {
     const leftDraw = this.leftDrawable();
@@ -194,7 +191,7 @@ export default class Output extends Component<Props, State> {
         <two-up
           legacy-clip-compat
           class={style.twoUp}
-          orientation={orientation}
+          orientation={mobileView ? 'vertical' : 'horizontal'}
           // Event redirecting. See onRetargetableEvent.
           onTouchStartCapture={this.onRetargetableEvent}
           onTouchEndCapture={this.onRetargetableEvent}

src/components/Output/style.scss

@@ -1,7 +1,3 @@
-/*
-Note: These styles are temporary. They will be replaced before going live.
-*/
-
 .output {
   composes: abs-fill from '../../lib/util.scss';
 
@@ -47,6 +43,12 @@ Note: These styles are temporary. They will be replaced before going live.
   flex-wrap: wrap;
   contain: content;
 
+  // Allow clicks to fall through to the pinch zoom area
+  pointer-events: none;
+  & > * {
+    pointer-events: auto;
+  }
+
   @media (min-width: 860px) {
     top: auto;
     left: 320px;