external-repos/squoosh
1
0
Fork 1
mirror of https://github.com/GoogleChromeLabs/squoosh.git synced 2025-11-14 17:49:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Ordering of items in mobile view. Changing scrolling element.

Browse Source
This commit is contained in:
Jake Archibald
2018-10-27 11:15:12 +01:00
parent 637e859a1e
commit 068dfe1b19
3 changed files with 45 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/Options/index.tsx
View File

@@ -136,7 +136,7 @@ export default class Options extends Component<Props, State> {
const EncoderOptionComponent = encoderOptionsComponentMap[encoderState.type]; const EncoderOptionComponent = encoderOptionsComponentMap[encoderState.type];
return ( return (
<div> <div class={style.optionsScroller}>
<Expander> <Expander>
{encoderState.type === identity.type ? null : {encoderState.type === identity.type ? null :
<div> <div>
@@ -181,32 +181,30 @@ export default class Options extends Component<Props, State> {
<h3 class={style.optionsTitle}>Compress</h3> <h3 class={style.optionsTitle}>Compress</h3>
<div class={style.optionsScroller}> <section class={`${style.optionOneCell} ${style.optionsSection}`}>
<section class={`${style.optionOneCell} ${style.optionsSection}`}> {encoderSupportMap ?
{encoderSupportMap ? <Select value={encoderState.type} onChange={this.onEncoderTypeChange} large>
<Select value={encoderState.type} onChange={this.onEncoderTypeChange} large> {encoders.filter(encoder => encoderSupportMap[encoder.type]).map(encoder => (
{encoders.filter(encoder => encoderSupportMap[encoder.type]).map(encoder => ( <option value={encoder.type}>{encoder.label}</option>
<option value={encoder.type}>{encoder.label}</option> ))}
))} </Select>
</Select> :
: <Select large><option>Loading…</option></Select>
<Select large><option>Loading…</option></Select> }
} </section>
</section>
<Expander> <Expander>
{EncoderOptionComponent ? {EncoderOptionComponent ?
<EncoderOptionComponent <EncoderOptionComponent
options={ options={
// Casting options, as encoderOptionsComponentMap[encodeData.type] ensures // Casting options, as encoderOptionsComponentMap[encodeData.type] ensures
// the correct type, but typescript isn't smart enough. // the correct type, but typescript isn't smart enough.
encoderState.options as any encoderState.options as any
} }
onChange={onEncoderOptionsChange} onChange={onEncoderOptionsChange}
/> />
: null} : null}
</Expander> </Expander>
</div>
<div class={style.optionsCopy}> <div class={style.optionsCopy}>
<button onClick={this.onCopyToOtherClick} class={style.copyButton}> <button onClick={this.onCopyToOtherClick} class={style.copyButton}>

2
src/components/compress/index.tsx
View File

@@ -154,7 +154,7 @@ async function processSvg(blob: Blob): Promise<HTMLImageElement> {
} }
export default class Compress extends Component<Props, State> { export default class Compress extends Component<Props, State> {
widthQuery = window.matchMedia('(max-width: 600px)'); widthQuery = window.matchMedia('(max-width: 599px)');
state: State = { state: State = {
source: undefined, source: undefined,

20
src/components/compress/style.scss
View File

@@ -36,4 +36,24 @@
.multi-panel { .multi-panel {
position: relative; 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;
}
} }