diff --git a/src/components/compress/index.tsx b/src/components/compress/index.tsx index b7f31aca..0e54ad09 100644 --- a/src/components/compress/index.tsx +++ b/src/components/compress/index.tsx @@ -156,6 +156,9 @@ async function processSvg(blob: Blob): Promise { // These are only used in the mobile view const resultTitles = ['Top', 'Bottom']; +// These are only used in the desktop view +const buttonPositions = + ['download-left', 'download-right'] as ('download-left' | 'download-right')[]; export default class Compress extends Component { widthQuery = window.matchMedia('(max-width: 599px)'); @@ -424,6 +427,7 @@ export default class Compress extends Component { loading={loading || image.loading} copyDirection={copyDirections[index]} onCopyToOtherClick={this.onCopyToOtherClick.bind(this, index)} + buttonPosition={mobileView ? 'stack-right' : buttonPositions[index]} > {!mobileView ? null : [ , diff --git a/src/components/results/index.tsx b/src/components/results/index.tsx index 845e3c5e..8825fd67 100644 --- a/src/components/results/index.tsx +++ b/src/components/results/index.tsx @@ -6,6 +6,7 @@ import { DownloadIcon, CopyAcrossIcon, CopyAcrossIconProps } from '../../lib/ico import '../custom-els/LoadingSpinner'; import { SourceImage } from '../compress'; import { Fileish, bind } from '../../lib/initial-util'; +import { button } from '../output/style.scss.d'; interface Props { loading: boolean; @@ -14,6 +15,7 @@ interface Props { downloadUrl?: string; children: ComponentChildren; copyDirection: CopyAcrossIconProps['copyDirection']; + buttonPosition: keyof typeof buttonPositionClass; onCopyToOtherClick(): void; } @@ -21,6 +23,12 @@ interface State { showLoadingState: boolean; } +const buttonPositionClass = { + 'stack-right': style.stackRight, + 'download-right': style.downloadRight, + 'download-left': style.downloadLeft, +}; + const loadingReactionDelay = 500; export default class Results extends Component { @@ -52,11 +60,12 @@ export default class Results extends Component { } render( - { source, imageFile, downloadUrl, children, copyDirection }: Props, + { source, imageFile, downloadUrl, children, copyDirection, buttonPosition }: Props, { showLoadingState }: State, ) { + return ( -
+
{(children as ComponentChild[])[0] ?
{children}
diff --git a/src/components/results/style.scss b/src/components/results/style.scss index 4311d6df..43acc732 100644 --- a/src/components/results/style.scss +++ b/src/components/results/style.scss @@ -16,7 +16,7 @@ .results { display: grid; - grid-template-columns: 1fr auto auto; + grid-template-columns: [text] 1fr [copy-button] auto [download-button] auto; background: rgba(0, 0, 0, 0.9); font-size: 1rem; @@ -34,13 +34,29 @@ } .result-data { + grid-row: 1; + grid-column: text; display: flex; align-items: center; - padding: 0 15px; + padding: 0 10px; white-space: nowrap; overflow: hidden; } +.download-right { + grid-template-columns: [copy-button] auto [text] 1fr [download-button] auto; +} + +.download-left { + grid-template-columns: [download-button] auto [text] 1fr [copy-button] auto; +} + +.stack-right { + & .result-data { + padding: 0 15px; + } +} + .result-title { display: flex; align-items: center; @@ -64,6 +80,8 @@ } .download { + grid-row: 1; + grid-column: download-button; background: #34B9EB; --size: 38px; width: var(--size); @@ -104,6 +122,8 @@ } .copy-to-other { + grid-row: 1; + grid-column: copy-button; composes: unbutton from '../../lib/util.scss'; composes: download;