From 068dfe1b192bb3c9fcc822c153baea4a1951389c Mon Sep 17 00:00:00 2001
From: Jake Archibald <jaffathecake@gmail.com>
Date: Sat, 27 Oct 2018 11:15:12 +0100
Subject: [PATCH] Ordering of items in mobile view. Changing scrolling element.

---
 src/components/Options/index.tsx   | 50 ++++++++++++++----------------
 src/components/compress/index.tsx  |  2 +-
 src/components/compress/style.scss | 20 ++++++++++++
 3 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/src/components/Options/index.tsx b/src/components/Options/index.tsx
index 21dcb260..2f16c4a4 100644
--- a/src/components/Options/index.tsx
+++ b/src/components/Options/index.tsx
@@ -136,7 +136,7 @@ export default class Options extends Component<Props, State> {
     const EncoderOptionComponent = encoderOptionsComponentMap[encoderState.type];
 
     return (
-      <div>
+      <div class={style.optionsScroller}>
         <Expander>
           {encoderState.type === identity.type ? null :
             <div>
@@ -181,32 +181,30 @@ export default class Options extends Component<Props, State> {
 
         <h3 class={style.optionsTitle}>Compress</h3>
 
-        <div class={style.optionsScroller}>
-          <section class={`${style.optionOneCell} ${style.optionsSection}`}>
-            {encoderSupportMap ?
-              <Select value={encoderState.type} onChange={this.onEncoderTypeChange} large>
-                {encoders.filter(encoder => encoderSupportMap[encoder.type]).map(encoder => (
-                  <option value={encoder.type}>{encoder.label}</option>
-                ))}
-              </Select>
-              :
-              <Select large><option>Loading…</option></Select>
-            }
-          </section>
+        <section class={`${style.optionOneCell} ${style.optionsSection}`}>
+          {encoderSupportMap ?
+            <Select value={encoderState.type} onChange={this.onEncoderTypeChange} large>
+              {encoders.filter(encoder => encoderSupportMap[encoder.type]).map(encoder => (
+                <option value={encoder.type}>{encoder.label}</option>
+              ))}
+            </Select>
+            :
+            <Select large><option>Loading…</option></Select>
+          }
+        </section>
 
-          <Expander>
-            {EncoderOptionComponent ?
-              <EncoderOptionComponent
-                options={
-                  // Casting options, as encoderOptionsComponentMap[encodeData.type] ensures
-                  // the correct type, but typescript isn't smart enough.
-                  encoderState.options as any
-                }
-                onChange={onEncoderOptionsChange}
-              />
-            : null}
-          </Expander>
-        </div>
+        <Expander>
+          {EncoderOptionComponent ?
+            <EncoderOptionComponent
+              options={
+                // Casting options, as encoderOptionsComponentMap[encodeData.type] ensures
+                // the correct type, but typescript isn't smart enough.
+                encoderState.options as any
+              }
+              onChange={onEncoderOptionsChange}
+            />
+          : null}
+        </Expander>
 
         <div class={style.optionsCopy}>
           <button onClick={this.onCopyToOtherClick} class={style.copyButton}>
diff --git a/src/components/compress/index.tsx b/src/components/compress/index.tsx
index 53b2e497..c49b3af2 100644
--- a/src/components/compress/index.tsx
+++ b/src/components/compress/index.tsx
@@ -154,7 +154,7 @@ async function processSvg(blob: Blob): Promise<HTMLImageElement> {
 }
 
 export default class Compress extends Component<Props, State> {
-  widthQuery = window.matchMedia('(max-width: 600px)');
+  widthQuery = window.matchMedia('(max-width: 599px)');
 
   state: State = {
     source: undefined,
diff --git a/src/components/compress/style.scss b/src/components/compress/style.scss
index 5a4b847b..e8e5ee19 100644
--- a/src/components/compress/style.scss
+++ b/src/components/compress/style.scss
@@ -36,4 +36,24 @@
 
 .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;
+  }
 }