scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 15:47:53 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

First pass at correcting project input styles

Browse source 
* Add placeholders to description input text-areas
* fix styling to show box shadow highlight on focus
* adjust height for non-remix project
* fix lint errors
This commit is contained in:
chrisgarrity 2018-05-28 13:12:26 -04:00
parent 08cf4f4f3d
commit 71dfe690be
7 changed files with 54 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/_colors.scss
View file

@ -22,6 +22,7 @@ $ui-green: hsla(163, 83, 40, 1); // #0fbd8c Pen Primary
$ui-coral: hsla(350, 100, 70, 1); // #FF6680 More Primary $ui-coral: hsla(350, 100, 70, 1); // #FF6680 More Primary
$ui-coral-dark: hsla(350, 100, 60, 1); // #FF3355 More tertiary $ui-coral-dark: hsla(350, 100, 60, 1); // #FF3355 More tertiary
$ui-blue-10percent: hsla(215, 100, 65, .1); $ui-blue-10percent: hsla(215, 100, 65, .1);
$ui-blue-25percent: hsla(215, 100, 65, .25);
$ui-orange-25percent: hsla(35, 90, 55, .25); $ui-orange-25percent: hsla(35, 90, 55, .25);
/* Overlay UI Gray Colors */ /* Overlay UI Gray Colors */

16
src/components/forms/inplace-input.scss
View file

@ -7,12 +7,14 @@
border-radius: 8px; border-radius: 8px;
background-color: transparent; background-color: transparent;
padding: 0 1rem; padding: 0 1rem;
width: calc(100% - 2.25rem);
color: $type-gray; color: $type-gray;
&:focus { &:focus {
transition: all .5s ease; transition: all .5s ease;
outline: none; outline: none;
border: 1px solid $ui-blue; border: 2px solid $ui-blue;
box-shadow: 0 0 0 4px $ui-blue-25percent;
} }
&.fail { &.fail {
@ -31,7 +33,6 @@
.inplace-textarea { .inplace-textarea {
transition: all 1s ease; transition: all 1s ease;
box-sizing: border-box;
border: 2px dashed $ui-blue; border: 2px dashed $ui-blue;
border-radius: 8px; border-radius: 8px;
background-color: $ui-light-gray; background-color: $ui-light-gray;
@ -40,18 +41,27 @@
line-height: 1.75em; line-height: 1.75em;
color: $type-gray; color: $type-gray;
font-size: .875rem; font-size: .875rem;
box-sizing: border-box;
resize: none; resize: none;
&:focus { &:focus {
transition: all 1s ease; transition: all 1s ease;
outline: none; outline: none;
border: 2px solid $ui-blue; border: 2px solid $ui-blue;
box-shadow: 0 0 0 4px rgba(76,151,255,0.25); box-shadow: 0 0 0 4px $ui-blue-25percent;
} }
&.fail { &.fail {
border: 1px solid $ui-orange; border: 1px solid $ui-orange;
} }
/* styling placeholder text for project page, move this into project view
* stylesheet if it shouldn't be the default for all input-textareas */
&::placeholder {
padding-top: 1rem;
text-align: center;
font-style: italic;
}
} }

24
src/components/modal/report/modal.scss
View file

@ -7,35 +7,33 @@
.mod-report { .mod-report {
margin: 100px auto; margin: 100px auto;
width: 30rem;
outline: none; outline: none;
padding: 0; padding: 0;
user-select: none; width: 30rem;
overflow: hidden; overflow: hidden;
user-select: none;
} }
.report-modal-header { .report-modal-header {
height: 3rem;
padding-top: .75rem;
box-sizing: border-box;
width: 100%;
background-color: $ui-coral;
box-shadow: inset 0 -1px 0 0 $ui-coral-dark; box-shadow: inset 0 -1px 0 0 $ui-coral-dark;
background-color: $ui-coral;
padding-top: .75rem;
width: 100%;
height: 3rem;
box-sizing: border-box;
} }
.report-content-label { .report-content-label {
text-align: center;
color: $type-white;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1rem; font-size: 1rem;
font-weight: bold; font-weight: bold;
color: $type-white;
text-align: center;
} }
.report-modal-content { .report-modal-content {
width: 80%;
margin: 1rem auto; margin: 1rem auto;
font-size: .875rem; width: 80%;
line-height: 1.5rem; line-height: 1.5rem;
font-size: .875rem;
} }

7
src/views/preview/presentation.jsx
View file

@ -49,7 +49,7 @@ class PreviewPresentation extends React.Component {
id: this.props.projectId, id: this.props.projectId,
username: this.props.user.username username: this.props.user.username
}; };
console.log('submit report data', data); console.log('submit report data', data); // eslint-disable-line no-console
// TODO: pass error to modal via callback. // TODO: pass error to modal via callback.
callback(); callback();
this.setState({reportOpen: false}); this.setState({reportOpen: false});
@ -193,7 +193,7 @@ class PreviewPresentation extends React.Component {
</div> </div>
</FlexRow> </FlexRow>
)} )}
{/* eslint-disable max-len */}
<FlexRow className="description-block"> <FlexRow className="description-block">
<div className="project-textlabel"> <div className="project-textlabel">
Instructions Instructions
@ -206,6 +206,7 @@ class PreviewPresentation extends React.Component {
)} )}
handleUpdate={onUpdate} handleUpdate={onUpdate}
name="instructions" name="instructions"
placeholder="Tell people how to use your project (such as which keys to press)."
type="textarea" type="textarea"
validationErrors={{ validationErrors={{
maxLength: 'Sorry description is too long' maxLength: 'Sorry description is too long'
@ -236,6 +237,7 @@ class PreviewPresentation extends React.Component {
)} )}
handleUpdate={onUpdate} handleUpdate={onUpdate}
name="description" name="description"
placeholder="How did you make this project? Did you use ideas scripts or artwork from other people? Thank them here."
type="textarea" type="textarea"
validationErrors={{ validationErrors={{
maxLength: 'Sorry description is too long' maxLength: 'Sorry description is too long'
@ -254,6 +256,7 @@ class PreviewPresentation extends React.Component {
</div> </div>
} }
</FlexRow> </FlexRow>
{/* eslint-enable max-len */}
</FlexRow> </FlexRow>
</FlexRow> </FlexRow>
<FlexRow className="preview-row"> <FlexRow className="preview-row">

1
src/views/preview/preview.jsx
View file

@ -217,6 +217,7 @@ class Preview extends React.Component {
Preview.propTypes = { Preview.propTypes = {
comments: PropTypes.arrayOf(PropTypes.object), comments: PropTypes.arrayOf(PropTypes.object),
faved: PropTypes.bool, faved: PropTypes.bool,
fullScreen: PropTypes.bool,
getFavedStatus: PropTypes.func.isRequired, getFavedStatus: PropTypes.func.isRequired,
getLovedStatus: PropTypes.func.isRequired, getLovedStatus: PropTypes.func.isRequired,
getOriginalInfo: PropTypes.func.isRequired, getOriginalInfo: PropTypes.func.isRequired,

38
src/views/preview/preview.scss
View file

@ -38,6 +38,12 @@ $stage-height: 406px;
} }
} }
.project-header {
margin-right: 2rem;
flex-grow: 1;
justify-content: flex-start;
}
img { img {
&.avatar { &.avatar {
@ -56,6 +62,7 @@ $stage-height: 406px;
margin-left: 1rem; margin-left: 1rem;
text-align: left; text-align: left;
font-size: .8rem; font-size: .8rem;
flex-grow: 1;
} }
.validation-message { .validation-message {
@ -120,6 +127,7 @@ $stage-height: 406px;
.share-button, .share-button,
.remix-button, .remix-button,
.see-inside-button { .see-inside-button {
margin-top: 0;
font-size: .875rem; font-size: .875rem;
font-weight: normal; font-weight: normal;
@ -171,30 +179,30 @@ $stage-height: 406px;
.guiPlayer { .guiPlayer {
display: inline-block; display: inline-block;
width: $gui-width;
margin-left: -.5rem; margin-left: -.5rem;
width: $gui-width;
} }
.project-notes { .project-notes {
height: $stage-height; margin-bottom: .75rem;
flex: 1;
// not 1.5rem because of stage padding // not 1.5rem because of stage padding
margin-left: 1rem; margin-left: 1rem;
margin-bottom: .75rem; height: $stage-height;
flex-flow: column;
align-items: flex-start; align-items: flex-start;
flex: 1;
flex-flow: column;
} }
.share-date { .share-date {
vertical-align: middle; vertical-align: middle;
font-size: .875rem;
color: $type-gray; color: $type-gray;
font-size: .875rem;
} }
.subactions { .subactions {
margin-left: 1.5rem;
justify-content: space-between; justify-content: space-between;
flex: 1; flex: 1;
margin-left: 1.5rem;
} }
.remix-credit { .remix-credit {
@ -214,26 +222,25 @@ $stage-height: 406px;
} }
.description-block { .description-block {
width: 100%;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
width: 100%;
flex-grow: 1; flex-grow: 1;
} }
.project-textlabel { .project-textlabel {
font-weight: bold;
margin: 0 0 .5rem 0; margin: 0 0 .5rem 0;
font-weight: bold;
} }
.project-description { .project-description {
margin-bottom: .75rem;
border: 1px solid $ui-blue-10percent; border: 1px solid $ui-blue-10percent;
border-radius: 8px; border-radius: 8px;
background-color: $ui-blue-10percent; background-color: $ui-blue-10percent;
padding: .5rem; padding: .5rem;
width: calc(100% - (1rem + 2px)); width: calc(100% - (1rem + 2px));
margin-bottom: .75rem;
white-space: pre-line; white-space: pre-line;
overflow-y: auto;
// flex-grow // flex-grow
flex: 1; flex: 1;
} }
@ -249,7 +256,6 @@ $stage-height: 406px;
padding: .5rem; padding: .5rem;
width: 100%; width: 100%;
white-space: pre-line; white-space: pre-line;
overflow-y: scroll;
// flex-grow // flex-grow
flex: 1; flex: 1;
@ -257,7 +263,6 @@ $stage-height: 406px;
border: 0; border: 0;
background-color: inherit; background-color: inherit;
padding: 0; padding: 0;
overflow: hidden;
} }
&.has-error { &.has-error {
@ -267,7 +272,7 @@ $stage-height: 406px;
} }
.inplace-textarea { .inplace-textarea {
height: 172px; height: 173px;
} }
} }
@ -366,16 +371,15 @@ $stage-height: 406px;
.action-button { .action-button {
margin-left: .5rem; margin-left: .5rem;
height: 2rem;
border-radius: 19px; border-radius: 19px;
background-color: $ui-blue; background-color: $ui-blue;
padding: 0 .5rem; padding: 0 .5rem;
height: 2rem;
text-decoration: none; text-decoration: none;
font-size: .75rem;
line-height: .875rem; line-height: .875rem;
font-size: .75rem;
font-weight: normal; font-weight: normal;
// &:hover { // &:hover {
// transition: background-color .25s ease; // transition: background-color .25s ease;
// border-color: transparent; // border-color: transparent;