mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 07:38:07 -05:00
First pass at correcting project input styles
* 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
parent
08cf4f4f3d
commit
71dfe690be
7 changed files with 54 additions and 37 deletions
|
|
@ -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-dark: hsla(350, 100, 60, 1); // #FF3355 More tertiary
|
||||
$ui-blue-10percent: hsla(215, 100, 65, .1);
|
||||
$ui-blue-25percent: hsla(215, 100, 65, .25);
|
||||
$ui-orange-25percent: hsla(35, 90, 55, .25);
|
||||
|
||||
/* Overlay UI Gray Colors */
|
||||
|
|
|
|||
|
|
@ -7,12 +7,14 @@
|
|||
border-radius: 8px;
|
||||
background-color: transparent;
|
||||
padding: 0 1rem;
|
||||
width: calc(100% - 2.25rem);
|
||||
color: $type-gray;
|
||||
|
||||
&:focus {
|
||||
transition: all .5s ease;
|
||||
outline: none;
|
||||
border: 1px solid $ui-blue;
|
||||
border: 2px solid $ui-blue;
|
||||
box-shadow: 0 0 0 4px $ui-blue-25percent;
|
||||
}
|
||||
|
||||
&.fail {
|
||||
|
|
@ -31,7 +33,6 @@
|
|||
|
||||
.inplace-textarea {
|
||||
transition: all 1s ease;
|
||||
box-sizing: border-box;
|
||||
border: 2px dashed $ui-blue;
|
||||
border-radius: 8px;
|
||||
background-color: $ui-light-gray;
|
||||
|
|
@ -40,18 +41,27 @@
|
|||
line-height: 1.75em;
|
||||
color: $type-gray;
|
||||
font-size: .875rem;
|
||||
box-sizing: border-box;
|
||||
resize: none;
|
||||
|
||||
&:focus {
|
||||
transition: all 1s ease;
|
||||
outline: none;
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -7,35 +7,33 @@
|
|||
|
||||
.mod-report {
|
||||
margin: 100px auto;
|
||||
width: 30rem;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
user-select: none;
|
||||
|
||||
width: 30rem;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
background-color: $ui-coral;
|
||||
padding-top: .75rem;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.report-content-label {
|
||||
text-align: center;
|
||||
color: $type-white;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: $type-white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.report-modal-content {
|
||||
width: 80%;
|
||||
margin: 1rem auto;
|
||||
font-size: .875rem;
|
||||
width: 80%;
|
||||
line-height: 1.5rem;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ class PreviewPresentation extends React.Component {
|
|||
id: this.props.projectId,
|
||||
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.
|
||||
callback();
|
||||
this.setState({reportOpen: false});
|
||||
|
|
@ -193,7 +193,7 @@ class PreviewPresentation extends React.Component {
|
|||
</div>
|
||||
</FlexRow>
|
||||
)}
|
||||
|
||||
{/* eslint-disable max-len */}
|
||||
<FlexRow className="description-block">
|
||||
<div className="project-textlabel">
|
||||
Instructions
|
||||
|
|
@ -206,6 +206,7 @@ class PreviewPresentation extends React.Component {
|
|||
)}
|
||||
handleUpdate={onUpdate}
|
||||
name="instructions"
|
||||
placeholder="Tell people how to use your project (such as which keys to press)."
|
||||
type="textarea"
|
||||
validationErrors={{
|
||||
maxLength: 'Sorry description is too long'
|
||||
|
|
@ -236,6 +237,7 @@ class PreviewPresentation extends React.Component {
|
|||
)}
|
||||
handleUpdate={onUpdate}
|
||||
name="description"
|
||||
placeholder="How did you make this project? Did you use ideas scripts or artwork from other people? Thank them here."
|
||||
type="textarea"
|
||||
validationErrors={{
|
||||
maxLength: 'Sorry description is too long'
|
||||
|
|
@ -254,6 +256,7 @@ class PreviewPresentation extends React.Component {
|
|||
</div>
|
||||
}
|
||||
</FlexRow>
|
||||
{/* eslint-enable max-len */}
|
||||
</FlexRow>
|
||||
</FlexRow>
|
||||
<FlexRow className="preview-row">
|
||||
|
|
|
|||
|
|
@ -217,6 +217,7 @@ class Preview extends React.Component {
|
|||
Preview.propTypes = {
|
||||
comments: PropTypes.arrayOf(PropTypes.object),
|
||||
faved: PropTypes.bool,
|
||||
fullScreen: PropTypes.bool,
|
||||
getFavedStatus: PropTypes.func.isRequired,
|
||||
getLovedStatus: PropTypes.func.isRequired,
|
||||
getOriginalInfo: PropTypes.func.isRequired,
|
||||
|
|
|
|||
|
|
@ -38,6 +38,12 @@ $stage-height: 406px;
|
|||
}
|
||||
}
|
||||
|
||||
.project-header {
|
||||
margin-right: 2rem;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
img {
|
||||
|
||||
&.avatar {
|
||||
|
|
@ -56,6 +62,7 @@ $stage-height: 406px;
|
|||
margin-left: 1rem;
|
||||
text-align: left;
|
||||
font-size: .8rem;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.validation-message {
|
||||
|
|
@ -120,6 +127,7 @@ $stage-height: 406px;
|
|||
.share-button,
|
||||
.remix-button,
|
||||
.see-inside-button {
|
||||
margin-top: 0;
|
||||
font-size: .875rem;
|
||||
font-weight: normal;
|
||||
|
||||
|
|
@ -171,30 +179,30 @@ $stage-height: 406px;
|
|||
|
||||
.guiPlayer {
|
||||
display: inline-block;
|
||||
width: $gui-width;
|
||||
margin-left: -.5rem;
|
||||
width: $gui-width;
|
||||
}
|
||||
|
||||
.project-notes {
|
||||
height: $stage-height;
|
||||
flex: 1;
|
||||
margin-bottom: .75rem;
|
||||
// not 1.5rem because of stage padding
|
||||
margin-left: 1rem;
|
||||
margin-bottom: .75rem;
|
||||
flex-flow: column;
|
||||
height: $stage-height;
|
||||
align-items: flex-start;
|
||||
flex: 1;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.share-date {
|
||||
vertical-align: middle;
|
||||
font-size: .875rem;
|
||||
color: $type-gray;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.subactions {
|
||||
margin-left: 1.5rem;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.remix-credit {
|
||||
|
|
@ -214,26 +222,25 @@ $stage-height: 406px;
|
|||
}
|
||||
|
||||
.description-block {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.project-textlabel {
|
||||
font-weight: bold;
|
||||
margin: 0 0 .5rem 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.project-description {
|
||||
margin-bottom: .75rem;
|
||||
border: 1px solid $ui-blue-10percent;
|
||||
border-radius: 8px;
|
||||
background-color: $ui-blue-10percent;
|
||||
padding: .5rem;
|
||||
width: calc(100% - (1rem + 2px));
|
||||
margin-bottom: .75rem;
|
||||
white-space: pre-line;
|
||||
overflow-y: auto;
|
||||
// flex-grow
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -249,7 +256,6 @@ $stage-height: 406px;
|
|||
padding: .5rem;
|
||||
width: 100%;
|
||||
white-space: pre-line;
|
||||
overflow-y: scroll;
|
||||
// flex-grow
|
||||
flex: 1;
|
||||
|
||||
|
|
@ -257,7 +263,6 @@ $stage-height: 406px;
|
|||
border: 0;
|
||||
background-color: inherit;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&.has-error {
|
||||
|
|
@ -267,7 +272,7 @@ $stage-height: 406px;
|
|||
}
|
||||
|
||||
.inplace-textarea {
|
||||
height: 172px;
|
||||
height: 173px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -366,16 +371,15 @@ $stage-height: 406px;
|
|||
|
||||
.action-button {
|
||||
margin-left: .5rem;
|
||||
height: 2rem;
|
||||
border-radius: 19px;
|
||||
background-color: $ui-blue;
|
||||
padding: 0 .5rem;
|
||||
height: 2rem;
|
||||
text-decoration: none;
|
||||
font-size: .75rem;
|
||||
line-height: .875rem;
|
||||
font-size: .75rem;
|
||||
font-weight: normal;
|
||||
|
||||
|
||||
// &:hover {
|
||||
// transition: background-color .25s ease;
|
||||
// border-color: transparent;
|
||||
|
|
|
|||
Loading…
Reference in a new issue