scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 01:25:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

extract css for new components and make some fixes to validation in report modal

Browse source
This commit is contained in:
Linda 2018-09-24 15:28:10 -04:00 committed by Ray Schamp
parent 5832969912
commit 6f5b5c3278
6 changed files with 268 additions and 243 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/components/modal/report/modal.scss
View file

@ -1,6 +1,8 @@
@import "../../../colors";
@import "../../../frameless";
$medium-and-small: "screen and (max-width : #{$tablet}-1)";
.mod-report * {
box-sizing: border-box;
}
@ -58,28 +60,33 @@
.validation-message {
$arrow-border-width: 1rem;
display: block;
position: absolute;
top: 0;
left: 100%; /* position to the right of parent */
margin-left: $arrow-border-width;
position: relative;
z-index: 1;
margin-top: $arrow-border-width;
border: 1px solid $active-gray;
border-radius: 5px;
background-color: $ui-orange;
padding: 1rem;
min-width: 12rem;
max-width: 18.75rem;
min-height: 1rem;
overflow: visible;
color: $type-white;
@media #{$medium-and-small} {
position: relative;
margin-top: calc($arrow-border-width / 2);
max-width: 100%;
}
/* arrow on box that points to the left */
&:before {
display: block;
position: absolute;
top: 1rem;
left: -$arrow-border-width / 2;
top: -.5rem;
left: calc(50% - calc(#{$arrow-border-width} / 2));
transform: rotate(45deg);
transform: rotate(135deg);
border-bottom: 1px solid $active-gray;
border-left: 1px solid $active-gray;
@ -90,6 +97,10 @@
height: $arrow-border-width;
content: "";
@media #{$medium-and-small} {
display: none;
}
}
}
}
@ -101,9 +112,12 @@
.form-group.has-error {
.textarea, select {
border: 1px solid $ui-orange;
margin: 0;
}
margin-bottom: 1rem;
}
.report-text .textarea {
margin-bottom: 0;
min-height: 8rem;
}

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

@ -30,7 +30,6 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
font-weight: 500;
&.has-error {
.validation-message {
right: 0;
}
@ -83,10 +82,10 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
}
.validation-message {
$arrow-border-width: 1rem;
display: block;
position: absolute;
z-index: 1;
$arrow-border-width: 1rem;
margin-top: $arrow-border-width;
border: 1px solid $active-gray;
border-radius: 5px;
@ -256,28 +255,6 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
}
}
.share-date {
margin-right: .75rem;
vertical-align: middle;
line-height: 2rem;
color: $type-gray;
font-size: .875rem;
@media #{$small} {
margin-top: 1rem;
width: 100%;
order: 100;
}
}
.subactions {
margin-left: 1.5rem;
justify-content: flex-end;
align-items: flex-start;
flex: 1;
}
.remix-credit {
margin-bottom: 1rem;
border: 1px solid $ui-blue-10percent;
@ -361,176 +338,6 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
}
}
.copyleft {
display: inline-block;
transform: scale(-1, 1);
margin: 0;
text-align: right;
@media #{$medium-and-small} {
padding: 0;
}
}
.stats {
line-height: 2rem;
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,
.project-views {
display: inline;
padding-right: 2rem;
font-size: 1rem;
font-weight: bold;
&:before {
display: inline-block;
margin-right: .5rem;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 1.5rem;
height: 1.5rem;
vertical-align: -.25rem;
content: "";
}
}
.project-loves {
cursor: pointer;
&:before {
opacity: .5;
background-image: url("/svgs/project/love-gray.svg");
}
}
.project-loves.loved {
&:before {
opacity: 1;
background-image: url("/svgs/project/love-red.svg");
}
}
.project-favorites {
cursor: pointer;
&:before {
opacity: .5;
background-image: url("/svgs/project/fav-gray.svg");
}
}
.project-favorites.favorited {
&:before {
opacity: 1;
background-image: url("/svgs/project/fav-yellow.svg");
}
}
.project-remixes {
&:before {
opacity: .5;
background-image: url("/svgs/project/remix-gray.svg");
}
}
.project-views {
&:before {
opacity: .5;
background-image: url("/svgs/project/views-gray.svg");
}
}
.action-buttons {
display: flex;
margin-top: 0;
color: $type-white;
font-size: .8rem;
font-weight: 500;
justify-content: flex-end;
flex-wrap: wrap;
}
.action-button {
margin: 0 0 0 .5rem;
border-radius: 19px;
background-color: $ui-blue;
padding: 0 .75rem;
height: 2rem;
text-decoration: none;
line-height: .875rem;
font-size: .75rem;
font-weight: normal;
// &:hover {
// transition: background-color .25s ease;
// border-color: transparent;
// background-color: $active-gray;
// }
//
// &:active {
// border: 0 solid transparent;
// box-shadow: inset 0 0 5px $box-shadow-gray;
// background-color: $active-dark-gray;
// padding: calc(.75em + 1px) calc(1.5em + 1px);
// }
//
// &.report {
// border: 1px solid $ui-coral;
// background-color: $ui-coral;
//
// &:hover {
// transition: background-color .25s ease;
// border-color: transparent;
// background-color: $active-gray;
// }
//
// &:active {
// border: 0 solid transparent;
// box-shadow: inset 0 0 5px $box-shadow-gray;
// background-color: $active-dark-gray;
// padding: calc(.75em + 1px) calc(1.5em + 1px);
// }
// }
}
.comments-header {
padding: 0 0 1rem 0;
justify-content: space-between;
@ -540,42 +347,6 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
}
}
.studio-button,
.copy-link-button,
.report-button {
&:before {
display: inline-block;
margin-right: .25rem;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: .875rem;
height: .875rem;
vertical-align: bottom;
content: "";
}
}
.studio-button {
&:before {
background-image: url("/svgs/project/studio-add-white.svg");
}
}
.copy-link-button {
&:before {
background-image: url("/svgs/project/copy-link-white.svg");
}
}
.report-button {
background-color: $ui-coral;
&:before {
background-image: url("/svgs/project/report-white.svg");
}
}
.project-lower-container {
margin-top: 1rem;
background-color: $ui-blue-10percent;
@ -639,8 +410,3 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
}
}
}
.report-text textarea {
// override min-height from default settings (for teacher registration)
min-height: 8rem;
}

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

@ -7,6 +7,8 @@ const approx = require('approximate-number');
const CappedNumber = require('../../components/cappednumber/cappednumber.jsx');
const projectShape = require('./projectshape.jsx').projectShape;
require('./stats.scss');
const Stats = props => (
<FlexRow className="stats">
<div

96
src/views/preview/stats.scss Normal file
View file

@ -0,0 +1,96 @@
@import "../../frameless";
$medium-and-small: "screen and (max-width : #{$tablet}-1)";
.stats {
line-height: 2rem;
justify-content: flex-start;
@media #{$medium-and-small} {
width: 100%;
margin: 0;
justify-content: center;
flex-direction: row;
}
& > div {
@media #{$medium-and-small} {
padding: 0 1rem;
}
}
}
.project-loves,
.project-favorites,
.project-remixes,
.project-views {
display: inline;
padding-right: 2rem;
font-size: 1rem;
font-weight: bold;
&:before {
display: inline-block;
margin-right: .5rem;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 1.5rem;
height: 1.5rem;
vertical-align: -.25rem;
content: "";
}
}
.project-loves {
cursor: pointer;
&:before {
opacity: .5;
background-image: url("/svgs/project/love-gray.svg");
}
}
.project-loves.loved {
&:before {
opacity: 1;
background-image: url("/svgs/project/love-red.svg");
}
}
.project-favorites {
cursor: pointer;
&:before {
opacity: .5;
background-image: url("/svgs/project/fav-gray.svg");
}
}
.project-favorites.favorited {
&:before {
opacity: 1;
background-image: url("/svgs/project/fav-yellow.svg");
}
}
.project-remixes {
&:before {
opacity: .5;
background-image: url("/svgs/project/remix-gray.svg");
}
}
.project-views {
&:before {
opacity: .5;
background-image: url("/svgs/project/views-gray.svg");
}
}

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

@ -9,6 +9,8 @@ const ReportModal = require('../../components/modal/report/modal.jsx');
const projectShape = require('./projectshape.jsx').projectShape;
require('./subactions.scss');
const Subactions = props => {
const shareDate = ((props.projectInfo.history && props.projectInfo.history.shared)) ?
props.projectInfo.history.shared : '';

145
src/views/preview/subactions.scss Normal file
View file

@ -0,0 +1,145 @@
@import "../../colors";
@import "../../frameless";
$small: "screen and (max-width : #{$mobile}-1)";
$medium: "screen and (min-width : #{$mobile}) and (max-width : #{$tablet}-1)";
$intermediate: "screen and (min-width : #{$tablet}) and (max-width : 941px)"; /* 941 because currently breakpoint of .inner in www is 941 */
$medium-and-small: "screen and (max-width : #{$tablet}-1)";
.subactions {
margin-left: 1.5rem;
justify-content: flex-end;
align-items: flex-start;
flex: 1;
@media #{$medium-and-small} {
width: 100%;
margin-top: 1rem;
}
.share-date {
margin-right: .75rem;
vertical-align: middle;
line-height: 2rem;
color: $type-gray;
font-size: .875rem;
@media #{$small} {
margin-top: 1rem;
width: 100%;
order: 100;
}
.copyleft {
display: inline-block;
transform: scale(-1, 1);
margin: 0;
text-align: right;
@media #{$medium-and-small} {
padding: 0;
}
}
}
.action-buttons {
display: flex;
margin-top: 0;
color: $type-white;
font-size: .8rem;
font-weight: 500;
justify-content: flex-end;
flex-wrap: wrap;
.action-button {
margin: 0 0 0 .5rem;
border-radius: 19px;
background-color: $ui-blue;
padding: 0 .75rem;
height: 2rem;
text-decoration: none;
line-height: .875rem;
font-size: .75rem;
font-weight: normal;
// &:hover {
// transition: background-color .25s ease;
// border-color: transparent;
// background-color: $active-gray;
// }
//
// &:active {
// border: 0 solid transparent;
// box-shadow: inset 0 0 5px $box-shadow-gray;
// background-color: $active-dark-gray;
// padding: calc(.75em + 1px) calc(1.5em + 1px);
// }
//
// &.report {
// border: 1px solid $ui-coral;
// background-color: $ui-coral;
//
// &:hover {
// transition: background-color .25s ease;
// border-color: transparent;
// background-color: $active-gray;
// }
//
// &:active {
// border: 0 solid transparent;
// box-shadow: inset 0 0 5px $box-shadow-gray;
// background-color: $active-dark-gray;
// padding: calc(.75em + 1px) calc(1.5em + 1px);
// }
// }
&.studio-button,
&.copy-link-button,
&.report-button {
&:before {
display: inline-block;
margin-right: .25rem;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: .875rem;
height: .875rem;
vertical-align: bottom;
content: "";
}
}
&.studio-button {
&:before {
background-image: url("/svgs/project/studio-add-white.svg");
}
}
&.copy-link-button {
&:before {
background-image: url("/svgs/project/copy-link-white.svg");
}
}
&.report-button {
background-color: $ui-coral;
&:before {
background-image: url("/svgs/project/report-white.svg");
}
}
}
}
}
.subactions, .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;
}
}
}