Skip to content

GitLab

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

Updated styles

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