scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 07:38:07 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

made project stats and action buttons responsive

Browse source
This commit is contained in:
Linda 2018-09-14 13:52:29 -04:00 committed by Ray Schamp
parent d0257ae43d
commit 8b10f3cba4
2 changed files with 40 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -87,7 +87,7 @@ const PreviewPresentation = ({
{ projectInfo && projectInfo.author && projectInfo.author.id && (
<Formsy onKeyPress={onKeyPress}>
<div className="inner">
<FlexRow className="preview-row">
<FlexRow className="preview-row wrap-to-col">
<FlexRow className="project-header">
<a href={`/users/${projectInfo.author.username}`}>
<Avatar

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

@ -6,10 +6,6 @@ $player-width: 482px;
$player-height: 406px;
$stage-width: 480px;
/* screen sizes */
$small: "screen and (max-width : #{$mobile}-1)";
$medium: "screen and (min-width : #{$mobile}) and (max-width : #{$tablet}-1)";
$big: "screen and (min-width : #{$tablet})";
$medium-and-small: "screen and (max-width : #{$tablet}-1)";
/* override view padding for share banner */
@ -211,6 +207,15 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
justify-content: space-between;
align-items: flex-start;
flex-wrap: nowrap;
&.wrap-to-col {
@media #{$medium-and-small} {
width: 100%;
flex-wrap: wrap-reverse;
flex-direction: column;
justify-content: center;
}
}
}
.guiPlayer {
@ -347,6 +352,10 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
transform: scale(-1, 1);
margin: 0;
text-align: right;
@media #{$medium-and-small} {
padding: 0;
}
}
.stats {
@ -354,6 +363,32 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
justify-content: flex-start;
}
.stats, .subactions, .action-buttons {
@media #{$medium-and-small} {
margin: 0;
justify-content: center;
flex-direction: row;
}
& > div, .action-button {
@media #{$medium-and-small} {
padding: 0 1rem;
}
}
}
.stats, .subactions {
@media #{$medium-and-small} {
width: 100%;
}
}
.subactions {
@media #{$medium-and-small} {
margin-top: 1rem;
}
}
.project-loves,
.project-favorites,
.project-remixes,