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/compress/style.scss

@@ -3,20 +3,72 @@
   height: 100%;
   contain: strict;
   display: grid;
+  align-items: end;
+  align-content: end;
+  grid-template-rows: 1fr auto;
 
-  &.horizontal {
+  @media (min-width: 600px) {
     grid-template-columns: 1fr auto;
-    grid-template-rows: calc(100% - 75px);
-
-    @media (min-width: 860px) {
-      grid-template-rows: 100%;
-    }
-    align-items: end;
-    align-content: end;
-  }
-
-  &.vertical {
-    // TODO: make the mobile view work
-    background: red;
+    grid-template-rows: 100%;
   }
 }
+
+.options {
+  color: #fff;
+  opacity: 0.9;
+  font-size: 1.2rem;
+  display: flex;
+  flex-flow: column;
+  max-width: 400px;
+  margin: 0 auto;
+  width: calc(100% - 60px);
+  max-height: calc(100% - 143px);
+  overflow: hidden;
+
+  @media (min-width: 600px) {
+    max-height: calc(100% - 75px);
+    width: 300px;
+    margin: 0;
+  }
+
+  @media (min-width: 860px) {
+    max-height: 100%;
+  }
+}
+
+.multi-panel {
+  position: relative;
+  display: flex;
+  flex-flow: column;
+
+  // Reorder so headings appear after content:
+  & > :nth-child(1) {
+    order: 2;
+    margin-bottom: 10px;
+  }
+
+  & > :nth-child(2) {
+    order: 1;
+  }
+
+  & > :nth-child(3) {
+    order: 4;
+  }
+
+  & > :nth-child(4) {
+    order: 3;
+  }
+}
+
+.expand-icon {
+  transform: rotate(180deg);
+  margin-left: -12px;
+}
+
+[content-expanded] .expand-icon {
+  transform: none;
+}
+
+:focus .expand-icon {
+  fill: #34B9EB;
+}