diff --git a/src/components/compress/custom-els/MultiPanel/index.ts b/src/components/compress/custom-els/MultiPanel/index.ts index 30e1596f..10922bad 100644 --- a/src/components/compress/custom-els/MultiPanel/index.ts +++ b/src/components/compress/custom-els/MultiPanel/index.ts @@ -7,7 +7,8 @@ interface CloseAllOptions { const openOneOnlyAttr = 'open-one-only'; function getClosestHeading(el: Element) { - const closestEl = el.closest('multi-panel > *'); + // Look for the child of multi-panel, but stop at interactive elements like links & buttons + const closestEl = el.closest('multi-panel > *, a, button'); if (closestEl && closestEl.classList.contains(style.panelHeading)) { return closestEl; } @@ -66,7 +67,8 @@ export default class MultiPanel extends HTMLElement { // don’t handle modifier shortcuts used by assistive technology. if (event.altKey) return; - let newHeading:HTMLElement | undefined; + let newHeading: HTMLElement | undefined; + switch (event.key) { case 'ArrowLeft': case 'ArrowUp': diff --git a/src/components/compress/index.tsx b/src/components/compress/index.tsx index c49b3af2..66ed86d0 100644 --- a/src/components/compress/index.tsx +++ b/src/components/compress/index.tsx @@ -153,6 +153,9 @@ async function processSvg(blob: Blob): Promise { return blobToImg(new Blob([newSource], { type: 'image/svg+xml' })); } +// These are only used in the mobile view +const resultTitles = ['Top', 'Bottom']; + export default class Compress extends Component { widthQuery = window.matchMedia('(max-width: 599px)'); @@ -411,13 +414,15 @@ export default class Compress extends Component { /> )); - const results = images.map(image => ( + const results = images.map((image, i) => ( + > + {mobileView ? `${resultTitles[i]} (${encoderMap[image.encoderState.type].label})` : null} + )); return ( diff --git a/src/components/compress/style.scss b/src/components/compress/style.scss index e8e5ee19..2232720e 100644 --- a/src/components/compress/style.scss +++ b/src/components/compress/style.scss @@ -27,8 +27,10 @@ max-width: 400px; margin: 0 auto; width: calc(100% - 60px); + max-height: calc(100% - 143px); @media (min-width: 600px) { + max-height: none; width: 300px; margin: 0; } diff --git a/src/components/results/index.tsx b/src/components/results/index.tsx index c3ee0571..f3f865cb 100644 --- a/src/components/results/index.tsx +++ b/src/components/results/index.tsx @@ -1,4 +1,4 @@ -import { h, Component } from 'preact'; +import { h, Component, ComponentChildren, ComponentChild } from 'preact'; import * as style from './style.scss'; import FileSize from './FileSize'; @@ -12,6 +12,7 @@ interface Props { source?: SourceImage; imageFile?: Fileish; downloadUrl?: string; + children: ComponentChildren; } interface State { @@ -42,10 +43,14 @@ export default class Results extends Component { } } - render({ source, imageFile, downloadUrl }: Props, { showLoadingState }: State) { + render({ source, imageFile, downloadUrl, children }: Props, { showLoadingState }: State) { return (
+ {(children as ComponentChild[])[0] + ?
{children}
+ : null + } {!imageFile || showLoadingState ? 'Working…' :