scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2025-03-23 03:15:55 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

fine-tune the responsive design

Browse source 
squish some things together a bit more, including in desktop mode (in order to fit the coming “rotation point” button). Also turn canvas into 480x360, as it is in the mocks
This commit is contained in:
Matthew Taylor 2017-11-13 15:13:20 -05:00
parent b48da92b9d
commit 27c0684e1c
9 changed files with 70 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/input-group/input-group.css
View file

@ -1,7 +1,7 @@
@import '../../css/units.css'; @import '../../css/units.css';
.input-group + .input-group { .input-group + .input-group {
margin-left: calc(3 * $grid-unit); margin-left: calc(2 * $grid-unit);
} }
.disabled { .disabled {
@ -9,9 +9,3 @@
/* Prevent any user actions */ /* Prevent any user actions */
pointer-events: none; pointer-events: none;
} }
@media only screen and (max-width: 1095px) {
.input-group + .input-group {
margin-left: calc(2 * $grid-unit);
}
}

4
src/components/labeled-icon-button/labeled-icon-button.css
View file

@ -15,8 +15,8 @@ $border-radius: 0.25rem;
} }
.edit-field-icon { .edit-field-icon {
width: 1.5rem; width: 1.25rem;
height: 1.5rem; height: 1.25rem;
flex-grow: 1; flex-grow: 1;
vertical-align: middle; vertical-align: middle;
} }

25
src/components/paint-editor/paint-editor.css
View file

@ -4,7 +4,7 @@
.editor-container { .editor-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: calc(4 * $grid-unit); padding: calc(3 * $grid-unit);
} }
.row { .row {
@ -30,7 +30,7 @@
.mod-dashed-border { .mod-dashed-border {
border-right: 1px dashed $ui-pane-border; border-right: 1px dashed $ui-pane-border;
padding-right: calc(3 * $grid-unit); padding-right: calc(2 * $grid-unit);
} }
.mod-unselect { .mod-unselect {
@ -48,7 +48,7 @@ $border-radius: 0.25rem;
border: 1px solid $ui-pane-border; border: 1px solid $ui-pane-border;
border-radius: 0; border-radius: 0;
border-left: none; border-left: none;
padding: calc(2 * $grid-unit); padding: .35rem;
} }
.button-group-button:last-of-type { .button-group-button:last-of-type {
@ -110,16 +110,16 @@ $border-radius: 0.25rem;
} }
.menu-item-icon { .menu-item-icon {
margin-right: calc(2* $grid-unit); margin-right: calc(2 * $grid-unit);
} }
.mod-mode-tools { .mod-mode-tools {
margin-left: calc(3 * $grid-unit); margin-left: calc(2 * $grid-unit);
} }
.canvas-container { .canvas-container {
width: 500px; width: 480px;
height: 400px; height: 360px;
box-sizing: content-box; box-sizing: content-box;
border: 1px solid #e8edf1; border: 1px solid #e8edf1;
border-radius: .25rem; border-radius: .25rem;
@ -143,13 +143,14 @@ $border-radius: 0.25rem;
flex-direction: row-reverse; flex-direction: row-reverse;
} }
@media only screen and (max-width: 1095px) { @media only screen and (max-width: $full-size-paint) {
.editor-container {
padding: calc(3 * $grid-unit) $grid-unit;
}
.mode-selector { .mode-selector {
margin-right: $grid-unit;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
} }
.mod-dashed-border {
padding-right: calc(2 * $grid-unit);
}
} }

53
src/components/paint-editor/paint-editor.jsx
View file

@ -122,13 +122,22 @@ class PaintEditorComponent extends React.Component {
<div className={styles.row}> <div className={styles.row}>
{/* Name field */} {/* Name field */}
<InputGroup> <InputGroup>
<Label text={this.props.intl.formatMessage(messages.costume)}> <MediaQuery minWidth={layout.fullSizeEditorMinWidth}>
<Label text={this.props.intl.formatMessage(messages.costume)}>
<BufferedInput
type="text"
value={this.props.name}
onSubmit={this.props.onUpdateName}
/>
</Label>
</MediaQuery>
<MediaQuery maxWidth={layout.fullSizeEditorMinWidth - 1}>
<BufferedInput <BufferedInput
type="text" type="text"
value={this.props.name} value={this.props.name}
onSubmit={this.props.onUpdateName} onSubmit={this.props.onUpdateName}
/> />
</Label> </MediaQuery>
</InputGroup> </InputGroup>
{/* Undo/Redo */} {/* Undo/Redo */}
@ -205,20 +214,22 @@ class PaintEditorComponent extends React.Component {
/> />
</InputGroup> </InputGroup>
<InputGroup> <MediaQuery minWidth={layout.fullSizeEditorMinWidth}>
<MediaQuery minWidth={layout.fullSizeMinWidth}> <div className={styles.row}>
<LabeledIconButton <InputGroup>
disabled={!shouldShowBringForward()} <LabeledIconButton
imgSrc={sendFrontIcon} disabled={!shouldShowBringForward()}
title={this.props.intl.formatMessage(messages.front)} imgSrc={sendFrontIcon}
onClick={this.props.onSendToFront} title={this.props.intl.formatMessage(messages.front)}
/> onClick={this.props.onSendToFront}
<LabeledIconButton />
disabled={!shouldShowSendBackward()} <LabeledIconButton
imgSrc={sendBackIcon} disabled={!shouldShowSendBackward()}
title={this.props.intl.formatMessage(messages.back)} imgSrc={sendBackIcon}
onClick={this.props.onSendToBack} title={this.props.intl.formatMessage(messages.back)}
/> onClick={this.props.onSendToBack}
/>
</InputGroup>
{/* To be rotation point */} {/* To be rotation point */}
{/* <InputGroup> {/* <InputGroup>
@ -229,8 +240,10 @@ class PaintEditorComponent extends React.Component {
onClick={function () {}} onClick={function () {}}
/> />
</InputGroup> */} </InputGroup> */}
</MediaQuery> </div>
<MediaQuery maxWidth={layout.fullSizeMinWidth - 1}> </MediaQuery>
<MediaQuery maxWidth={layout.fullSizeEditorMinWidth - 1}>
<InputGroup>
<Dropdown <Dropdown
className={styles.modUnselect} className={styles.modUnselect}
enterExitTransitionDurationMs={0} enterExitTransitionDurationMs={0}
@ -280,8 +293,8 @@ class PaintEditorComponent extends React.Component {
> >
{this.props.intl.formatMessage(messages.more)} {this.props.intl.formatMessage(messages.more)}
</Dropdown> </Dropdown>
</MediaQuery> </InputGroup>
</InputGroup> </MediaQuery>
</div> </div>
{/* Second Row */} {/* Second Row */}

11
src/components/tool-select-base/tool-select-base.css
View file

@ -1,15 +1,16 @@
@import '../../css/colors.css'; @import '../../css/colors.css';
@import "../../css/units.css";
$border-radius: .25rem; $border-radius: .25rem;
.mod-tool-select { .mod-tool-select {
display: inline-block; display: inline-block;
margin: .25rem; margin: $grid-unit;
border: none; border: none;
border-radius: $border-radius; border-radius: $border-radius;
outline: none; outline: none;
background: none; background: none;
padding: 0.25rem; padding: $grid-unit;
font-size: 0.85rem; font-size: 0.85rem;
transition: 0.2s; transition: 0.2s;
} }
@ -28,3 +29,9 @@ img.tool-select-icon {
flex-grow: 1; flex-grow: 1;
vertical-align: middle; vertical-align: middle;
} }
@media only screen and (max-width: $full-size-paint) {
.mod-tool-select {
margin: 0;
}
}

4
src/containers/paper-canvas.css
View file

@ -1,6 +1,6 @@
.paper-canvas { .paper-canvas {
width: 500px; width: 480px;
height: 400px; height: 360px;
margin: auto; margin: auto;
position: relative; position: relative;
background-color: #fff; background-color: #fff;

4
src/containers/paper-canvas.jsx
View file

@ -150,9 +150,9 @@ class PaperCanvas extends React.Component {
return ( return (
<canvas <canvas
className={styles.paperCanvas} className={styles.paperCanvas}
height="400px" height="360px"
ref={this.setCanvas} ref={this.setCanvas}
width="500px" width="480px"
onWheel={this.handleWheel} onWheel={this.handleWheel}
/> />
); );

8
src/css/units.css
View file

@ -4,7 +4,9 @@ See https://github.com/LLK/scratch-paint/issues/13 */
/* ACTUALLY, THIS IS EDITED ;) /* ACTUALLY, THIS IS EDITED ;)
THIS WAS CHANGED ON 10/25/2017 BY @mewtaylor TO ADD A VARIABLE FOR THE SMALLEST THIS WAS CHANGED ON 10/25/2017 BY @mewtaylor TO ADD A VARIABLE FOR THE SMALLEST
GRID UNITS.*/ GRID UNITS.
ALSO EDITED ON 11/13/2017 TO ADD IN CONTANTS FOR LAYOUT FROM `layout-contents.js`*/
$space: 0.5rem; $space: 0.5rem;
$grid-unit: .25rem; $grid-unit: .25rem;
@ -18,3 +20,7 @@ $stage-menu-height: 2.75rem;
$library-header-height: 4.375rem; $library-header-height: 4.375rem;
$form-radius: calc($space / 2); $form-radius: calc($space / 2);
/* layout contants from `layout-constants.js`, minus 1px */
$full-size: 1095px;
$full-size-paint: 1249px;

2
src/lib/layout-constants.js
View file

@ -1,3 +1,3 @@
export default { export default {
fullSizeMinWidth: 1096 fullSizeEditorMinWidth: 1250
}; };