mirror of
https://github.com/scratchfoundation/scratch-paint.git
synced 2024-12-22 21:42:30 -05:00
fine-tune the responsive design
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
parent
b48da92b9d
commit
27c0684e1c
9 changed files with 70 additions and 49 deletions
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
@ -110,16 +110,16 @@ $border-radius: 0.25rem;
|
|||
}
|
||||
|
||||
.menu-item-icon {
|
||||
margin-right: calc(2* $grid-unit);
|
||||
margin-right: calc(2 * $grid-unit);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -122,13 +122,22 @@ class PaintEditorComponent extends React.Component {
|
|||
<div className={styles.row}>
|
||||
{/* Name field */}
|
||||
<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
|
||||
type="text"
|
||||
value={this.props.name}
|
||||
onSubmit={this.props.onUpdateName}
|
||||
/>
|
||||
</Label>
|
||||
</MediaQuery>
|
||||
</InputGroup>
|
||||
|
||||
{/* Undo/Redo */}
|
||||
|
|
@ -205,20 +214,22 @@ class PaintEditorComponent extends React.Component {
|
|||
/>
|
||||
</InputGroup>
|
||||
|
||||
<InputGroup>
|
||||
<MediaQuery minWidth={layout.fullSizeMinWidth}>
|
||||
<LabeledIconButton
|
||||
disabled={!shouldShowBringForward()}
|
||||
imgSrc={sendFrontIcon}
|
||||
title={this.props.intl.formatMessage(messages.front)}
|
||||
onClick={this.props.onSendToFront}
|
||||
/>
|
||||
<LabeledIconButton
|
||||
disabled={!shouldShowSendBackward()}
|
||||
imgSrc={sendBackIcon}
|
||||
title={this.props.intl.formatMessage(messages.back)}
|
||||
onClick={this.props.onSendToBack}
|
||||
/>
|
||||
<MediaQuery minWidth={layout.fullSizeEditorMinWidth}>
|
||||
<div className={styles.row}>
|
||||
<InputGroup>
|
||||
<LabeledIconButton
|
||||
disabled={!shouldShowBringForward()}
|
||||
imgSrc={sendFrontIcon}
|
||||
title={this.props.intl.formatMessage(messages.front)}
|
||||
onClick={this.props.onSendToFront}
|
||||
/>
|
||||
<LabeledIconButton
|
||||
disabled={!shouldShowSendBackward()}
|
||||
imgSrc={sendBackIcon}
|
||||
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> */}
|
||||
</MediaQuery>
|
||||
<MediaQuery maxWidth={layout.fullSizeMinWidth - 1}>
|
||||
</div>
|
||||
</MediaQuery>
|
||||
<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>
|
||||
</InputGroup>
|
||||
</MediaQuery>
|
||||
</div>
|
||||
|
||||
{/* Second Row */}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.paper-canvas {
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
width: 480px;
|
||||
height: 360px;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
export default {
|
||||
fullSizeMinWidth: 1096
|
||||
fullSizeEditorMinWidth: 1250
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue