Skip to content

GitLab

S
scratch-www
Commit 285b2dbc authored by chrisgarrity's avatar chrisgarrity
Browse files
Options

Updated styles

parent db312009
Show whitespace changes
Inline Side-by-side
Showing with 54 additions and 30 deletions
src/components/forms/inplace-input.scss
View file @ 285b2dbc
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
.inplace-input { .inplace-input {
transition: all .5s ease; transition: all .5s ease;
border: 2px dashed $ui-blue; border: 2px dashed $ui-blue-25percent;
border-radius: 8px; border-radius: 8px;
background-color: transparent; background-color: transparent;
padding: 0 1rem; padding: 0 1rem;
...@@ -29,18 +29,22 @@ ...@@ -29,18 +29,22 @@
&::-ms-reveal, &::-ms-clear { &::-ms-reveal, &::-ms-clear {
display: none; display: none;
} }
&::placeholder {
font-style: italic;
}
} }
.inplace-textarea { .inplace-textarea {
transition: all 1s ease; transition: all 1s ease;
border: 2px dashed $ui-blue; border: 2px dashed $ui-blue-25percent;
border-radius: 8px; border-radius: 8px;
background-color: $ui-light-gray; background-color: $ui-light-gray;
padding: .75rem 1rem; padding: .75rem 1rem;
width: 100%; width: 100%;
line-height: 1.75em; line-height: 1.75em;
color: $type-gray; color: $type-gray;
font-size: .875rem; font-size: 1rem;
box-sizing: border-box; box-sizing: border-box;
resize: none; resize: none;
...@@ -55,8 +59,6 @@ ...@@ -55,8 +59,6 @@
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 { &::placeholder {
padding-top: 1rem; padding-top: 1rem;
text-align: center; text-align: center;
......
src/components/forms/textarea.scss
View file @ 285b2dbc
...@@ -22,4 +22,8 @@ ...@@ -22,4 +22,8 @@
&.fail { &.fail {
border: 1px solid $ui-orange; border: 1px solid $ui-orange;
} }
&::placeholder {
font-style: italic;
}
} }
src/views/preview/presentation.jsx
View file @ 285b2dbc
const bindAll = require('lodash.bindall'); const bindAll = require('lodash.bindall');
const FormattedDate = require('react-intl').FormattedDate; const FormattedDate = require('react-intl').FormattedDate;
const injectIntl = require('react-intl').injectIntl; const injectIntl = require('react-intl').injectIntl;
const intlShape = require('react-intl').intlShape;
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const React = require('react'); const React = require('react');
const Formsy = require('formsy-react').default; const Formsy = require('formsy-react').default;
...@@ -61,7 +60,6 @@ class PreviewPresentation extends React.Component { ...@@ -61,7 +60,6 @@ class PreviewPresentation extends React.Component {
editable, editable,
faved, faved,
favoriteCount, favoriteCount,
intl,
isFullScreen, isFullScreen,
loved, loved,
loveCount, loveCount,
...@@ -100,9 +98,12 @@ class PreviewPresentation extends React.Component { ...@@ -100,9 +98,12 @@ class PreviewPresentation extends React.Component {
<Formsy> <Formsy>
<FlexRow className="preview-row"> <FlexRow className="preview-row">
<FlexRow className="project-header"> <FlexRow className="project-header">
<a href={`/users/${projectInfo.author.username}`}>
<Avatar <Avatar
alt={projectInfo.author.username}
src={`https://cdn2.scratch.mit.edu/get_image/user/${projectInfo. author.id}_48x48.png`} src={`https://cdn2.scratch.mit.edu/get_image/user/${projectInfo. author.id}_48x48.png`}
/> />
</a>
<div className="title"> <div className="title">
{editable ? {editable ?
...@@ -123,10 +124,6 @@ class PreviewPresentation extends React.Component { ...@@ -123,10 +124,6 @@ class PreviewPresentation extends React.Component {
/> : /> :
<div className="project-title">{projectInfo.title}</div> <div className="project-title">{projectInfo.title}</div>
} }
{`${intl.formatMessage({id: 'thumbnail.by'})} `}
<a href={`/users/${projectInfo.author.username}`}>
{projectInfo.author.username}
</a>
</div> </div>
</FlexRow> </FlexRow>
<div className="project-buttons"> <div className="project-buttons">
...@@ -235,6 +232,7 @@ class PreviewPresentation extends React.Component { ...@@ -235,6 +232,7 @@ class PreviewPresentation extends React.Component {
<InplaceInput <InplaceInput
className={classNames( className={classNames(
'project-description-edit', 'project-description-edit',
'last',
{remixes: parentInfo && parentInfo.author} {remixes: parentInfo && parentInfo.author}
)} )}
handleUpdate={onUpdate} handleUpdate={onUpdate}
...@@ -402,7 +400,6 @@ PreviewPresentation.propTypes = { ...@@ -402,7 +400,6 @@ PreviewPresentation.propTypes = {
editable: PropTypes.bool, editable: PropTypes.bool,
faved: PropTypes.bool, faved: PropTypes.bool,
favoriteCount: PropTypes.number, favoriteCount: PropTypes.number,
intl: intlShape,
isFullScreen: PropTypes.bool, isFullScreen: PropTypes.bool,
loveCount: PropTypes.number, loveCount: PropTypes.number,
loved: PropTypes.bool, loved: PropTypes.bool,
......
src/views/preview/preview.scss
View file @ 285b2dbc
...@@ -14,7 +14,7 @@ $stage-height: 404px; ...@@ -14,7 +14,7 @@ $stage-height: 404px;
// remix credit height: 52px // remix credit height: 52px
// project text label line-height + margin-bottom .5rem: 19px + 8px = 27px // project text label line-height + margin-bottom .5rem: 19px + 8px = 27px
// Formsy wrapper adds 3px to the input height for // Formsy wrapper adds 3px to the input height for
$description-input: 172px; // $stage-height / 2 - $project-label - $wrapper $description-input: 166px; // $stage-height / 2 - $project-label - $wrapper - margin
$description-input-small: 120px; // normal $description-input - $remix-credit $description-input-small: 120px; // normal $description-input - $remix-credit
/* override view padding for share banner */ /* override view padding for share banner */
...@@ -49,6 +49,11 @@ $description-input-small: 120px; // normal $description-input - $remix-credit ...@@ -49,6 +49,11 @@ $description-input-small: 120px; // normal $description-input - $remix-credit
margin-right: 2rem; margin-right: 2rem;
flex-grow: 1; flex-grow: 1;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start;
.inplace-input {
height: calc(3rem - 4px);
}
} }
img { img {
...@@ -57,10 +62,12 @@ $description-input-small: 120px; // normal $description-input - $remix-credit ...@@ -57,10 +62,12 @@ $description-input-small: 120px; // normal $description-input - $remix-credit
border: 0; border: 0;
border-radius: 5px; border-radius: 5px;
width: 3rem; width: 3rem;
height: 3rem;
&.remix { &.remix {
margin-right: .5em; margin-right: .5em;
width: 1.5rem; width: 2rem;
height: 2rem;
} }
} }
} }
...@@ -144,8 +151,8 @@ $description-input-small: 120px; // normal $description-input - $remix-credit ...@@ -144,8 +151,8 @@ $description-input-small: 120px; // normal $description-input - $remix-credit
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
background-size: contain; background-size: contain;
width: 1.5rem; width: 1.25rem;
height: 1.5rem; height: 1.25rem;
vertical-align: middle; vertical-align: middle;
content: ""; content: "";
} }
...@@ -200,7 +207,7 @@ $description-input-small: 120px; // normal $description-input - $remix-credit ...@@ -200,7 +207,7 @@ $description-input-small: 120px; // normal $description-input - $remix-credit
} }
.share-date { .share-date {
margin-right: 2rem; margin-right: .75rem;
vertical-align: middle; vertical-align: middle;
line-height: 2rem; line-height: 2rem;
color: $type-gray; color: $type-gray;
...@@ -238,6 +245,7 @@ $description-input-small: 120px; // normal $description-input - $remix-credit ...@@ -238,6 +245,7 @@ $description-input-small: 120px; // normal $description-input - $remix-credit
.project-textlabel { .project-textlabel {
margin: 0 0 .5rem 0; margin: 0 0 .5rem 0;
font-size: 1rem;
font-weight: bold; font-weight: bold;
} }
...@@ -249,6 +257,7 @@ $description-input-small: 120px; // normal $description-input - $remix-credit ...@@ -249,6 +257,7 @@ $description-input-small: 120px; // normal $description-input - $remix-credit
padding: .5rem; padding: .5rem;
width: calc(100% - (1rem + 2px)); width: calc(100% - (1rem + 2px));
white-space: pre-line; white-space: pre-line;
font-size: 1rem;
// flex-grow // flex-grow
flex: 1; flex: 1;
} }
...@@ -258,6 +267,7 @@ $description-input-small: 120px; // normal $description-input - $remix-credit ...@@ -258,6 +267,7 @@ $description-input-small: 120px; // normal $description-input - $remix-credit
} }
.project-description-edit { .project-description-edit {
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;
...@@ -267,6 +277,10 @@ $description-input-small: 120px; // normal $description-input - $remix-credit ...@@ -267,6 +277,10 @@ $description-input-small: 120px; // normal $description-input - $remix-credit
// flex-grow // flex-grow
flex: 1; flex: 1;
&.last {
margin-bottom: 0;
}
&.textarea-row { &.textarea-row {
border: 0; border: 0;
background-color: inherit; background-color: inherit;
...@@ -307,17 +321,18 @@ $description-input-small: 120px; // normal $description-input - $remix-credit ...@@ -307,17 +321,18 @@ $description-input-small: 120px; // normal $description-input - $remix-credit
display: inline; display: inline;
padding-right: 2rem; padding-right: 2rem;
font-size: 1.25rem; font-size: 1rem;
font-weight: bold;
&:before { &:before {
display: inline-block; display: inline-block;
margin-right: .1rem; margin-right: .5rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
background-size: contain; background-size: contain;
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
vertical-align: text-bottom; vertical-align: -.25rem;
content: ""; content: "";
} }
} }
...@@ -327,6 +342,7 @@ $description-input-small: 120px; // normal $description-input - $remix-credit ...@@ -327,6 +342,7 @@ $description-input-small: 120px; // normal $description-input - $remix-credit
cursor: pointer; cursor: pointer;
&:before { &:before {
opacity: .5;
background-image: url("/svgs/project/love-gray.svg"); background-image: url("/svgs/project/love-gray.svg");
} }
} }
...@@ -334,6 +350,7 @@ $description-input-small: 120px; // normal $description-input - $remix-credit ...@@ -334,6 +350,7 @@ $description-input-small: 120px; // normal $description-input - $remix-credit
.project-loves.loved { .project-loves.loved {
&:before { &:before {
opacity: 1;
background-image: url("/svgs/project/love-red.svg"); background-image: url("/svgs/project/love-red.svg");
} }
} }
...@@ -343,6 +360,7 @@ $description-input-small: 120px; // normal $description-input - $remix-credit ...@@ -343,6 +360,7 @@ $description-input-small: 120px; // normal $description-input - $remix-credit
cursor: pointer; cursor: pointer;
&:before { &:before {
opacity: .5;
background-image: url("/svgs/project/fav-gray.svg"); background-image: url("/svgs/project/fav-gray.svg");
} }
} }
...@@ -350,6 +368,7 @@ $description-input-small: 120px; // normal $description-input - $remix-credit ...@@ -350,6 +368,7 @@ $description-input-small: 120px; // normal $description-input - $remix-credit
.project-favorites.favorited { .project-favorites.favorited {
&:before { &:before {
opacity: 1;
background-image: url("/svgs/project/fav-yellow.svg"); background-image: url("/svgs/project/fav-yellow.svg");
} }
} }
...@@ -357,6 +376,7 @@ $description-input-small: 120px; // normal $description-input - $remix-credit ...@@ -357,6 +376,7 @@ $description-input-small: 120px; // normal $description-input - $remix-credit
.project-remixes { .project-remixes {
&:before { &:before {
opacity: .5;
background-image: url("/svgs/project/remix-gray.svg"); background-image: url("/svgs/project/remix-gray.svg");
} }
} }
...@@ -364,6 +384,7 @@ $description-input-small: 120px; // normal $description-input - $remix-credit ...@@ -364,6 +384,7 @@ $description-input-small: 120px; // normal $description-input - $remix-credit
.project-views { .project-views {
&:before { &:before {
opacity: .5;
background-image: url("/svgs/project/views-gray.svg"); background-image: url("/svgs/project/views-gray.svg");
} }
} }
...@@ -381,7 +402,7 @@ $description-input-small: 120px; // normal $description-input - $remix-credit ...@@ -381,7 +402,7 @@ $description-input-small: 120px; // normal $description-input - $remix-credit
margin: 0 0 0 .5rem; margin: 0 0 0 .5rem;
border-radius: 19px; border-radius: 19px;
background-color: $ui-blue; background-color: $ui-blue;
padding: 0 .5rem; padding: 0 .75rem;
height: 2rem; height: 2rem;
text-decoration: none; text-decoration: none;
line-height: .875rem; line-height: .875rem;
...@@ -425,12 +446,12 @@ $description-input-small: 120px; // normal $description-input - $remix-credit ...@@ -425,12 +446,12 @@ $description-input-small: 120px; // normal $description-input - $remix-credit
.report-button { .report-button {
&:before { &:before {
display: inline-block; display: inline-block;
margin-right: .125rem; margin-right: .25rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
background-size: contain; background-size: contain;
width: 1rem; width: .875rem;
height: 1rem; height: .875rem;
vertical-align: bottom; vertical-align: bottom;
content: ""; content: "";
} }
......
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