Skip to content

GitLab

S
scratch-www
Commit 71dfe690 authored by chrisgarrity's avatar chrisgarrity
Browse files
Options

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
parent 08cf4f4f
Hide whitespace changes
Inline Side-by-side
Showing with 53 additions and 36 deletions
src/_colors.scss
View file @ 71dfe690
......@@ -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 */
......
src/components/forms/inplace-input.scss
View file @ 71dfe690
......@@ -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;
}
}
src/components/modal/report/modal.scss
View file @ 71dfe690
......@@ -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;
box-shadow: inset 0 -1px 0 0 $ui-coral-dark;
background-color: $ui-coral;
padding-top: .75rem;
box-sizing: border-box;
width: 100%;
background-color: $ui-coral;
box-shadow: inset 0 -1px 0 0 $ui-coral-dark;
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;
}
src/redux/preview.js
View file @ 71dfe690
......@@ -48,7 +48,7 @@ module.exports.previewReducer = (state, action) => {
case 'SET_ORIGINAL':
return Object.assign({}, state, {
original: action.info
});
});
case 'SET_PARENT':
return Object.assign({}, state, {
parent: action.info
......
src/views/preview/presentation.jsx
View file @ 71dfe690
......@@ -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">
......
src/views/preview/preview.jsx
View file @ 71dfe690
......@@ -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,
......
src/views/preview/preview.scss
View file @ 71dfe690
......@@ -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;
......@@ -466,4 +470,4 @@ $stage-height: 406px;
.report-text textarea {
// override min-height from default settings (for teacher registration)
min-height: 8rem;
}
\ No newline at end of file
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment