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

Adjust share-date to give action buttons more room

Browse source
This commit is contained in:
chrisgarrity 2018-05-28 16:00:09 -04:00
parent 0bc5bf745d
commit c6f197f576
2 changed files with 17 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -306,7 +306,6 @@ class PreviewPresentation extends React.Component {
} }
{/* eslint-enable react/jsx-sort-props */} {/* eslint-enable react/jsx-sort-props */}
</div> </div>
<FlexRow className="action-buttons"> <FlexRow className="action-buttons">
<Button className="action-button studio-button"> <Button className="action-button studio-button">
Add to Studio Add to Studio

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

@ -4,11 +4,18 @@
/* stage size contants /* stage size contants
* this is a hack right now - stage includes padding of .5rem (8px) for alignment in gui * this is a hack right now - stage includes padding of .5rem (8px) for alignment in gui
* in www the player is placed with margin -.5rem to align the edge. * in www the player is placed with margin -.5rem to align the edge.
* the height is calculated from the actual height on the page (404) - .5rem * the height is calculated from the actual height on the page (404)
*/ */
$gui-width: 496px; $gui-width: 496px;
$stage-width: 480px; $stage-width: 480px;
$stage-height: 406px; $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-small: 120px; // normal $description-input - $remix-credit
/* override view padding for share banner */ /* override view padding for share banner */
#view { #view {
@ -184,7 +191,6 @@ $stage-height: 406px;
} }
.project-notes { .project-notes {
margin-bottom: .75rem;
// not 1.5rem because of stage padding // not 1.5rem because of stage padding
margin-left: 1rem; margin-left: 1rem;
height: $stage-height; height: $stage-height;
@ -194,14 +200,16 @@ $stage-height: 406px;
} }
.share-date { .share-date {
margin-right: 2rem;
vertical-align: middle; vertical-align: middle;
line-height: 2rem;
color: $type-gray; color: $type-gray;
font-size: .875rem; font-size: .875rem;
} }
.subactions { .subactions {
margin-left: 1.5rem; margin-left: 1.5rem;
justify-content: space-between; justify-content: flex-end;
flex: 1; flex: 1;
} }
@ -272,12 +280,12 @@ $stage-height: 406px;
} }
.inplace-textarea { .inplace-textarea {
height: 173px; height: $description-input;
} }
} }
.project-description-edit.remixes .inplace-textarea { .project-description-edit.remixes .inplace-textarea {
height: 130px; height: $description-input-small;
} }
.copyleft { .copyleft {
@ -288,8 +296,9 @@ $stage-height: 406px;
} }
.stats { .stats {
width: $stage-width; // width: $stage-width;
justify-content: flex-start; justify-content: flex-start;
line-height: 2rem;
} }
.project-loves, .project-loves,
@ -370,7 +379,7 @@ $stage-height: 406px;
} }
.action-button { .action-button {
margin-left: .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 .5rem;