scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2024-12-23 05:52:42 -05: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';
.input-group + .input-group {
margin-left: calc(3 * $grid-unit);
margin-left: calc(2 * $grid-unit);
}
.disabled {
@ -9,9 +9,3 @@
/* Prevent any user actions */
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 {
width: 1.5rem;
height: 1.5rem;
width: 1.25rem;
height: 1.25rem;
flex-grow: 1;
vertical-align: middle;
}

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

@ -4,7 +4,7 @@
.editor-container {
display: flex;
flex-direction: column;
padding: calc(4 * $grid-unit);
padding: calc(3 * $grid-unit);
}
.row {
@ -30,7 +30,7 @@
.mod-dashed-border {
border-right: 1px dashed $ui-pane-border;
padding-right: calc(3 * $grid-unit);
padding-right: calc(2 * $grid-unit);
}
.mod-unselect {
@ -48,7 +48,7 @@ $border-radius: 0.25rem;
border: 1px solid $ui-pane-border;
border-radius: 0;
border-left: none;
padding: calc(2 * $grid-unit);
padding: .35rem;
}
.button-group-button:last-of-type {
@ -114,12 +114,12 @@ $border-radius: 0.25rem;
}
.mod-mode-tools {
margin-left: calc(3 * $grid-unit);
margin-left: calc(2 * $grid-unit);
}
.canvas-container {
width: 500px;
height: 400px;
width: 480px;
height: 360px;
box-sizing: content-box;
border: 1px solid #e8edf1;
border-radius: .25rem;
@ -143,13 +143,14 @@ $border-radius: 0.25rem;
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 {
margin-right: $grid-unit;
flex-direction: column;
justify-content: flex-start;
}
.mod-dashed-border {
padding-right: calc(2 * $grid-unit);
}
}

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

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

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

@ -1,15 +1,16 @@
@import '../../css/colors.css';
@import "../../css/units.css";
$border-radius: .25rem;
.mod-tool-select {
display: inline-block;
margin: .25rem;
margin: $grid-unit;
border: none;
border-radius: $border-radius;
outline: none;
background: none;
padding: 0.25rem;
padding: $grid-unit;
font-size: 0.85rem;
transition: 0.2s;
}
@ -28,3 +29,9 @@ img.tool-select-icon {
flex-grow: 1;
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 {
width: 500px;
height: 400px;
width: 480px;
height: 360px;
margin: auto;
position: relative;
background-color: #fff;

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

@ -150,9 +150,9 @@ class PaperCanvas extends React.Component {
return (
<canvas
className={styles.paperCanvas}
height="400px"
height="360px"
ref={this.setCanvas}
width="500px"
width="480px"
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 ;)
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;
$grid-unit: .25rem;
@ -18,3 +20,7 @@ $stage-menu-height: 2.75rem;
$library-header-height: 4.375rem;
$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 {
fullSizeMinWidth: 1096
fullSizeEditorMinWidth: 1250
};