scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #2973 from benjiwheeler/align-remix-credit

Browse source 
fix alignment of remix credit avatar, text
This commit is contained in:
Benjamin Wheeler 2019-05-22 10:21:18 -04:00 committed by GitHub
commit 1af1eec9c0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,7 +3,8 @@
/* stage size constants */ /* stage size constants */
$player-width: 482px; $player-width: 482px;
$player-height: 406px; $player-height: 362px;
$player-header: 44px;
$stage-width: 480px; $stage-width: 480px;
/* override view padding for share banner */ /* override view padding for share banner */
@ -129,9 +130,10 @@ $stage-width: 480px;
height: 3rem; height: 3rem;
&.remix { &.remix {
margin-right: .5em; margin-right: .75em;
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
align-self: flex-start;
} }
} }
} }
@ -392,10 +394,11 @@ $stage-width: 480px;
.project-notes { .project-notes {
margin-left: 1rem; margin-left: 1rem;
height: $player-height; height: calc(#{$player-height} + #{$player-header} - .3125rem);
align-items: flex-start; align-items: flex-start;
flex: 1; flex: 1;
flex-flow: column; flex-flow: column;
margin-top: .3125rem;
@media #{$medium-and-smaller} { @media #{$medium-and-smaller} {
margin-top: .5rem; margin-top: .5rem;
@ -403,8 +406,12 @@ $stage-width: 480px;
width: 100%; width: 100%;
} }
> .description-block:first-child { > * {
margin-top: 1rem; margin-bottom: .75rem;
}
> .description-block:last-child {
margin-bottom: 0;
} }
} }
@ -413,10 +420,11 @@ $stage-width: 480px;
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;
padding: .5rem; padding: .75rem;
width: calc(100% - 1rem); width: calc(100% - 1.5rem);
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center; align-items: center;
justify-content: flex-start;
@media #{$medium-and-smaller} { @media #{$medium-and-smaller} {
flex-direction: row; flex-direction: row;
@ -427,15 +435,15 @@ $stage-width: 480px;
.credit-text { .credit-text {
font-size: .875rem; font-size: .875rem;
flex-shrink: 1; flex-shrink: 1;
text-align: left;
} }
.description-block { .description-block {
display: flex; display: flex;
width: 100%; width: 100%;
min-height: 0; height: 100%;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
flex: 1;
} }
.project-textlabel { .project-textlabel {
@ -465,12 +473,19 @@ $stage-width: 480px;
.project-description-form { .project-description-form {
display: flex; display: flex;
width: 100%; width: 100%;
// surprisingly, without setting height: 100% here, flex-grow causes the
// height to be too large
height: 100%;
// surprisingly, just having some min-height actually reduces the height
// of the element when it is being vertically crowded by other elements
min-height: 2rem;
// necessary to cause the element to take up the maximum height
// available
flex-grow: 1; flex-grow: 1;
} }
.project-description-edit { .project-description-edit {
display: flex; display: flex;
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;