Basic grid setup

src/components/Options/index.tsx

@@ -60,7 +60,7 @@ const encoderOptionsComponentMap = {
 };
 
 interface Props {
-  orientation: 'horizontal' | 'vertical';
+  mobileView: boolean;
   loading: boolean;
   source?: SourceImage;
   imageIndex: number;
@@ -155,7 +155,6 @@ export default class Options extends Component<Props, State> {
       imageIndex,
       imageFile,
       downloadUrl,
-      orientation,
       encoderState,
       preprocessorState,
       onEncoderOptionsChange,

src/components/Options/style.scss

@@ -2,12 +2,19 @@ $horizontalPadding: 15px;
 
 .options {
   color: #fff;
-  width: 300px;
   opacity: 0.9;
   font-size: 1.2rem;
   max-height: 100%;
   display: flex;
   flex-flow: column;
+  max-width: 400px;
+  margin: 0 auto;
+  width: 100%;
+
+  @media (min-width: 600px) {
+    width: 300px;
+    margin: 0;
+  }
 }
 
 .options-title {

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/compress/index.tsx

@@ -35,8 +35,6 @@ import { cleanMerge, cleanSet } from '../../lib/clean-modify';
 import Processor from '../../codecs/processor';
 import { VectorResizeOptions, BitmapResizeOptions } from '../../codecs/resize/processor-meta';
 
-type Orientation = 'horizontal' | 'vertical';
-
 export interface SourceImage {
   file: File | Fileish;
   data: ImageData;
@@ -69,7 +67,7 @@ interface State {
   loading: boolean;
   loadingCounter: number;
   error?: string;
-  orientation: Orientation;
+  mobileView: boolean;
 }
 
 interface UpdateImageOptions {
@@ -156,7 +154,7 @@ async function processSvg(blob: Blob): Promise<HTMLImageElement> {
 }
 
 export default class Compress extends Component<Props, State> {
-  widthQuery = window.matchMedia('(min-width: 500px)');
+  widthQuery = window.matchMedia('(max-width: 600px)');
 
   state: State = {
     source: undefined,
@@ -178,7 +176,7 @@ export default class Compress extends Component<Props, State> {
         loading: false,
       },
     ],
-    orientation: this.widthQuery.matches ? 'horizontal' : 'vertical',
+    mobileView: this.widthQuery.matches,
   };
 
   private readonly encodeCache = new ResultCache();
@@ -193,7 +191,7 @@ export default class Compress extends Component<Props, State> {
 
   @bind
   private onMobileWidthChange() {
-    this.setState({ orientation: this.widthQuery.matches ? 'horizontal' : 'vertical' });
+    this.setState({ mobileView: this.widthQuery.matches });
   }
 
   private onEncoderTypeChange(index: 0 | 1, newType: EncoderType): void {
@@ -395,15 +393,15 @@ export default class Compress extends Component<Props, State> {
     this.setState({ images });
   }
 
-  render({ }: Props, { loading, images, source, orientation }: State) {
+  render({ }: Props, { loading, images, source, mobileView }: State) {
     const [leftImage, rightImage] = images;
     const [leftImageData, rightImageData] = images.map(i => i.data);
 
     return (
-      <div class={`${style.compress} ${style[orientation]}`}>
+      <div class={style.compress}>
         <Output
           originalImage={source && source.data}
-          orientation={orientation}
+          mobileView={mobileView}
           leftCompressed={leftImageData}
           rightCompressed={rightImageData}
           leftImgContain={leftImage.preprocessorState.resize.fitMethod === 'cover'}
@@ -413,7 +411,7 @@ export default class Compress extends Component<Props, State> {
           <Options
             loading={loading || image.loading}
             source={source}
-            orientation={orientation}
+            mobileView={mobileView}
             imageIndex={index}
             imageFile={image.file}
             downloadUrl={image.downloadUrl}

src/components/compress/style.scss

@@ -3,20 +3,16 @@
   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;
+  @media (min-width: 860px) {
+    grid-template-rows: 100%;
   }
 }