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

Merge pull request #2017 from benjiwheeler/stage_header_padding

Browse source 
project page stage margin, width adjustments to match gui css changes
This commit is contained in:
Benjamin Wheeler 2018-08-15 00:20:44 -04:00 committed by GitHub
commit b52fb3951e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 50 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,14 +1,10 @@
@import "../../colors"; @import "../../colors";
@import "../../frameless"; @import "../../frameless";
/* stage size constants /* stage size constants */
* this is a hack right now - stage includes padding of .5rem (8px) for alignment in gui $player-width: 482px;
* in www the player is placed with margin -.5rem to align the edge. $player-height: 406px;
* the height is calculated from the actual height on the page (404)
*/
$gui-width: 496px;
$stage-width: 480px; $stage-width: 480px;
$stage-height: 404px;
/* override view padding for share banner */ /* override view padding for share banner */
#view { #view {
@ -29,34 +25,34 @@ $stage-height: 404px;
.project-title { .project-title {
font-size: 1.75rem; font-size: 1.75rem;
font-weight: 500; font-weight: 500;
&.has-error { &.has-error {
.validation-message { .validation-message {
transform: translate(22rem, 0); transform: translate(22rem, 0);
} }
} }
} }
.project-header { .project-header {
margin-right: 2rem; margin-right: 2rem;
flex-grow: 1; flex-grow: 1;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
.inplace-input { .inplace-input {
height: calc(3rem - 4px); height: calc(3rem - 4px);
} }
} }
img { img {
&.avatar { &.avatar {
border: 0; border: 0;
border-radius: 5px; border-radius: 5px;
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
&.remix { &.remix {
margin-right: .5em; margin-right: .5em;
width: 2rem; width: 2rem;
@ -64,14 +60,14 @@ $stage-height: 404px;
} }
} }
} }
.title { .title {
margin-left: 1rem; margin-left: 1rem;
text-align: left; text-align: left;
font-size: .8rem; font-size: .8rem;
flex-grow: 1; flex-grow: 1;
} }
.validation-message { .validation-message {
$arrow-border-width: 1rem; $arrow-border-width: 1rem;
display: block; display: block;
@ -108,8 +104,8 @@ $stage-height: 404px;
content: ""; content: "";
} }
} }
.row { .row {
&.has-error { &.has-error {
.inplace-input, .inplace-input,
@ -122,21 +118,21 @@ $stage-height: 404px;
position: relative; position: relative;
} }
} }
.button { .button {
margin-left: 1rem; margin-left: 1rem;
} }
.comments-container { .comments-container {
width: 60%; width: 60%;
} }
.remix-button, .remix-button,
.see-inside-button { .see-inside-button {
margin-top: 0; margin-top: 0;
font-size: .875rem; font-size: .875rem;
font-weight: normal; font-weight: normal;
&:before { &:before {
display: inline-block; display: inline-block;
margin-right: .5rem; margin-right: .5rem;
@ -152,19 +148,19 @@ $stage-height: 404px;
.remix-button { .remix-button {
background-color: $ui-aqua; background-color: $ui-aqua;
&:before { &:before {
background-image: url("/svgs/project/remix-white.svg"); background-image: url("/svgs/project/remix-white.svg");
} }
} }
.see-inside-button { .see-inside-button {
&:before { &:before {
background-image: url("/svgs/project/see-inside-white.svg"); background-image: url("/svgs/project/see-inside-white.svg");
} }
} }
.preview-row { .preview-row {
margin-top: 1rem; margin-top: 1rem;
justify-content: space-between; justify-content: space-between;
@ -174,14 +170,13 @@ $stage-height: 404px;
.guiPlayer { .guiPlayer {
display: inline-block; display: inline-block;
margin-left: -.5rem; width: $player-width;
width: $gui-width;
} }
.project-notes { .project-notes {
// not 1.5rem because of stage padding // not 1.5rem because of stage padding
margin-left: 1rem; margin-left: 1rem;
height: $stage-height; height: $player-height;
align-items: flex-start; align-items: flex-start;
flex: 1; flex: 1;
flex-flow: column; flex-flow: column;
@ -194,7 +189,7 @@ $stage-height: 404px;
color: $type-gray; color: $type-gray;
font-size: .875rem; font-size: .875rem;
} }
.subactions { .subactions {
margin-left: 1.5rem; margin-left: 1.5rem;
justify-content: flex-end; justify-content: flex-end;
@ -216,7 +211,7 @@ $stage-height: 404px;
font-size: .875rem; font-size: .875rem;
flex-shrink: 1; flex-shrink: 1;
} }
.description-block { .description-block {
display: flex; display: flex;
width: 100%; width: 100%;
@ -225,7 +220,7 @@ $stage-height: 404px;
align-items: flex-start; align-items: flex-start;
flex: 1; flex: 1;
} }
.project-textlabel { .project-textlabel {
margin: 0 0 .5rem 0; margin: 0 0 .5rem 0;
font-size: 1rem; font-size: 1rem;
@ -240,12 +235,12 @@ $stage-height: 404px;
padding: .5rem; padding: .5rem;
width: calc(100% - (1rem + 2px)); width: calc(100% - (1rem + 2px));
overflow: auto; overflow: auto;
white-space: pre-line; white-space: pre-line;
font-size: 1rem; font-size: 1rem;
// flex-grow // flex-grow
flex: 1; flex: 1;
} }
.project-description.last { .project-description.last {
margin-bottom: 0; margin-bottom: 0;
} }
@ -261,29 +256,29 @@ $stage-height: 404px;
white-space: pre-line; white-space: pre-line;
// flex-grow // flex-grow
flex: 1; flex: 1;
&.last { &.last {
margin-bottom: 0; margin-bottom: 0;
} }
&.textarea-row { &.textarea-row {
border: 0; border: 0;
background-color: inherit; background-color: inherit;
padding: 0; padding: 0;
} }
&.has-error { &.has-error {
.validation-message { .validation-message {
transform: translate(26rem, 0); transform: translate(26rem, 0);
} }
} }
& > .grow { & > .grow {
display: flex; display: flex;
flex: 1; flex: 1;
} }
} }
.copyleft { .copyleft {
display: inline-block; display: inline-block;
transform: scale(-1, 1); transform: scale(-1, 1);
@ -320,9 +315,9 @@ $stage-height: 404px;
} }
.project-loves { .project-loves {
cursor: pointer; cursor: pointer;
&:before { &:before {
opacity: .5; opacity: .5;
background-image: url("/svgs/project/love-gray.svg"); background-image: url("/svgs/project/love-gray.svg");
@ -330,7 +325,7 @@ $stage-height: 404px;
} }
.project-loves.loved { .project-loves.loved {
&:before { &:before {
opacity: 1; opacity: 1;
background-image: url("/svgs/project/love-red.svg"); background-image: url("/svgs/project/love-red.svg");
@ -338,9 +333,9 @@ $stage-height: 404px;
} }
.project-favorites { .project-favorites {
cursor: pointer; cursor: pointer;
&:before { &:before {
opacity: .5; opacity: .5;
background-image: url("/svgs/project/fav-gray.svg"); background-image: url("/svgs/project/fav-gray.svg");
@ -348,7 +343,7 @@ $stage-height: 404px;
} }
.project-favorites.favorited { .project-favorites.favorited {
&:before { &:before {
opacity: 1; opacity: 1;
background-image: url("/svgs/project/fav-yellow.svg"); background-image: url("/svgs/project/fav-yellow.svg");
@ -356,7 +351,7 @@ $stage-height: 404px;
} }
.project-remixes { .project-remixes {
&:before { &:before {
opacity: .5; opacity: .5;
background-image: url("/svgs/project/remix-gray.svg"); background-image: url("/svgs/project/remix-gray.svg");
@ -364,7 +359,7 @@ $stage-height: 404px;
} }
.project-views { .project-views {
&:before { &:before {
opacity: .5; opacity: .5;
background-image: url("/svgs/project/views-gray.svg"); background-image: url("/svgs/project/views-gray.svg");
@ -396,24 +391,24 @@ $stage-height: 404px;
// border-color: transparent; // border-color: transparent;
// background-color: $active-gray; // background-color: $active-gray;
// } // }
// //
// &:active { // &:active {
// border: 0 solid transparent; // border: 0 solid transparent;
// box-shadow: inset 0 0 5px $box-shadow-gray; // box-shadow: inset 0 0 5px $box-shadow-gray;
// background-color: $active-dark-gray; // background-color: $active-dark-gray;
// padding: calc(.75em + 1px) calc(1.5em + 1px); // padding: calc(.75em + 1px) calc(1.5em + 1px);
// } // }
// //
// &.report { // &.report {
// border: 1px solid $ui-coral; // border: 1px solid $ui-coral;
// background-color: $ui-coral; // background-color: $ui-coral;
// //
// &:hover { // &:hover {
// transition: background-color .25s ease; // transition: background-color .25s ease;
// border-color: transparent; // border-color: transparent;
// background-color: $active-gray; // background-color: $active-gray;
// } // }
// //
// &:active { // &:active {
// border: 0 solid transparent; // border: 0 solid transparent;
// box-shadow: inset 0 0 5px $box-shadow-gray; // box-shadow: inset 0 0 5px $box-shadow-gray;
@ -431,7 +426,7 @@ $stage-height: 404px;
font-size: 1.25rem; font-size: 1.25rem;
} }
} }
.studio-button, .studio-button,
.copy-link-button, .copy-link-button,
.report-button { .report-button {
@ -461,7 +456,7 @@ $stage-height: 404px;
.report-button { .report-button {
background-color: $ui-coral; background-color: $ui-coral;
&:before { &:before {
background-image: url("/svgs/project/report-white.svg"); background-image: url("/svgs/project/report-white.svg");
} }
@ -490,16 +485,16 @@ $stage-height: 404px;
.remix-list, .remix-list,
.studio-list { .studio-list {
flex-direction: column; flex-direction: column;
.project { .project {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.creator-image img { .creator-image img {
max-width: 2rem; max-width: 2rem;
max-height: 2rem; max-height: 2rem;
} }
.thumbnail-column { .thumbnail-column {
display: inline-block; display: inline-block;
width: 100%; width: 100%;