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

fixed height of studio buttons scrolling container to fill all modal

Browse source
This commit is contained in:
Linda 2018-10-02 13:49:56 -04:00
commit 7c8fdbfcc3
15 changed files with 184 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -100,7 +100,7 @@
"redux-thunk": "2.0.1",
"sass-lint": "1.5.1",
"sass-loader": "6.0.6",
"scratch-gui": "latest",
"scratch-gui": "develop",
"scratchr2_translations": "git://github.com/LLK/scratchr2_translations.git#master",
"slick-carousel": "1.6.0",
"source-map-support": "0.3.2",

1
src/_colors.scss
View file

@ -28,6 +28,7 @@ $ui-coral-dark: hsla(350, 100, 60, 1); // #FF3355 More Blocks tertiary
$ui-white: hsla(0, 100%, 100%, 1); //#FFF
$ui-white-15percent: hsla(0, 100%, 100%, .15); //#FFF
$ui-light-primary: hsl(215, 100, 95);
$ui-light-primary-transparent: hsla(215, 100, 95, 0);
$ui-border: hsla(0, 0, 85, 1); //#D9D9D9

9
src/components/modal/addtostudio/modal.scss
View file

@ -20,12 +20,19 @@ $medium-height: "only screen and (min-height : #{$mobile} + 1) and (max-height :
.studio-list-outer-scrollbox {
position: relative;
background-color: $ui-blue-10percent;
flex: 1;
max-height: calc(100% - 8rem);
min-height: 15rem;
@media #{$small-height} {
min-height: 0;
}
}
.studio-list-inner-scrollbox {
margin-right: .5rem;
padding-right: .5rem;
height: 16.9375rem;
height: 100%;
overflow: scroll;
overflow-x: hidden;

102
src/components/modal/addtostudio/presentation.jsx
View file

@ -37,71 +37,69 @@ const AddToStudioModalPresentation = ({
return (
<Modal
standardSizes
useStandardSizes
className="mod-addToStudio"
contentLabel={contentLabel}
isOpen={isOpen}
onRequestClose={onRequestClose}
>
<div>
<div className="addToStudio-modal-header modal-header">
<div className="addToStudio-content-label content-label">
{contentLabel}
<div className="addToStudio-modal-header modal-header">
<div className="addToStudio-content-label content-label">
{contentLabel}
</div>
</div>
<div className="addToStudio-modal-content modal-content">
<div className="studio-list-outer-scrollbox">
<div className="studio-list-inner-scrollbox">
<div className="studio-list-container">
{studioButtons}
</div>
<div className="studio-list-bottom-gradient" />
</div>
</div>
<div className="addToStudio-modal-content modal-content">
<div className="studio-list-outer-scrollbox">
<div className="studio-list-inner-scrollbox">
<div className="studio-list-container">
{studioButtons}
<Form
className="add-to-studio"
onSubmit={onSubmit}
>
<FlexRow className="action-buttons">
<Button
className="action-button close-button white"
key="closeButton"
name="closeButton"
type="button"
onClick={onRequestClose}
>
<div className="action-button-text">
<FormattedMessage id="general.close" />
</div>
<div className="studio-list-bottom-gradient" />
</div>
</div>
<Form
className="add-to-studio"
onSubmit={onSubmit}
>
<FlexRow className="action-buttons">
</Button>
{waitingToClose ? [
<Button
className="action-button close-button white"
key="closeButton"
name="closeButton"
type="button"
onClick={onRequestClose}
className="action-button submit-button submit-button-waiting"
disabled="disabled"
key="submitButton"
type="submit"
>
<div className="action-button-text">
<FormattedMessage id="general.close" />
<Spinner />
<FormattedMessage id="addToStudio.finishing" />
</div>
</Button>
{waitingToClose ? [
<Button
className="action-button submit-button submit-button-waiting"
disabled="disabled"
key="submitButton"
type="submit"
>
<div className="action-button-text">
<Spinner />
<FormattedMessage id="addToStudio.finishing" />
</div>
</Button>
] : [
<Button
className="action-button submit-button"
key="submitButton"
type="submit"
>
<div className="action-button-text">
<FormattedMessage id="general.okay" />
</div>
</Button>
]}
</FlexRow>
</Form>
</div>
] : [
<Button
className="action-button submit-button"
key="submitButton"
type="submit"
>
<div className="action-button-text">
<FormattedMessage id="general.okay" />
</div>
</Button>
]}
</FlexRow>
</Form>
</div>
</Modal>
);

4
src/components/modal/base/modal.jsx
View file

@ -28,7 +28,7 @@ class Modal extends React.Component {
appElement={document.getElementById('app')}
className={{
base: classNames('modal-content', this.props.className, {
'modal-sizes': this.props.standardSizes
'modal-sizes': this.props.useStandardSizes
}),
afterOpen: classNames('modal-content', this.props.className),
beforeClose: classNames('modal-content', this.props.className)
@ -63,7 +63,7 @@ Modal.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
overlayClassName: PropTypes.string,
standardSizes: PropTypes.bool
useStandardSizes: PropTypes.bool
};
module.exports = Modal;

2
src/components/modal/report/modal.jsx
View file

@ -111,7 +111,7 @@ class ReportModal extends React.Component {
const contentLabel = intl.formatMessage({id: `report.${type}`});
return (
<Modal
standardSizes
useStandardSizes
className="mod-report"
contentLabel={contentLabel}
isOpen={isOpen}

23
src/components/registration/steps.jsx
View file

@ -444,18 +444,20 @@ class DemographicsStep extends React.Component {
handleChooseGender (name, gender) {
this.setState({otherDisabled: gender !== 'other'});
}
handleValidSubmit (formData, reset, invalidate) {
handleValidSubmit (formData) {
return this.props.onNextStep(formData);
}
isValidBirthdate (year, month) {
const birthdate = new Date(
formData.user.birth.year,
formData.user.birth.month - 1,
year,
month - 1,
1
);
if (((Date.now() - birthdate) / (24 * 3600 * 1000 * 365.25)) < this.props.birthOffset) {
return invalidate({
'user.birth.year': this.props.intl.formatMessage({id: 'teacherRegistration.validationAge'})
});
}
return this.props.onNextStep(formData);
return (((Date.now() - birthdate) / (24 * 3600 * 1000 * 365.25)) >= this.props.birthOffset);
}
birthDateValidator (values) {
const isValid = this.isValidBirthdate(values['user.birth.year'], values['user.birth.month']);
return isValid ? true : this.props.intl.formatMessage({id: 'teacherRegistration.validationAge'});
}
render () {
const countryOptions = getCountryOptions(this.props.intl, DEFAULT_COUNTRY);
@ -485,6 +487,9 @@ class DemographicsStep extends React.Component {
}
name="user.birth.month"
options={this.getMonthOptions()}
validations={{
birthDateVal: values => this.birthDateValidator(values)
}}
/>
<Select
required

1
src/components/thumbnailcolumn/thumbnailcolumn.scss
View file

@ -45,6 +45,7 @@
float: left;
max-width: 164px;
overflow: hidden;
text-align: left;
.thumbnail-creator a {
color: $type-gray;

8
src/views/jobs/jobs.jsx
View file

@ -35,14 +35,6 @@ const Jobs = () => (
MIT Media Lab, Cambridge, MA
</span>
</li>
<li>
<a href="https://scratch.mit.edu/jobs/moderator">
Community Moderator
</a>
<span>
Remote
</span>
</li>
</ul>
</div>
</div>

5
src/views/preview/comment/comment.scss
View file

@ -172,7 +172,7 @@
position: absolute;
bottom: 0;
background: linear-gradient(
transparent,
$ui-light-primary-transparent,
$ui-light-primary
);
width: 100%;
@ -188,7 +188,7 @@
margin-bottom: 24px;
width: 100%;
overflow: hidden;
text-align: center;
text-align: center;
&:before,
&:after {
@ -211,4 +211,3 @@
margin-right: -50%;
}
}

1
src/views/preview/extension-chip.scss
View file

@ -26,6 +26,7 @@
font-size: .875rem;
justify-content: center;
flex-flow: column;
align-items: flex-start;
}
.extension-status {

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

@ -2,6 +2,7 @@ const FormattedDate = require('react-intl').FormattedDate;
const injectIntl = require('react-intl').injectIntl;
const PropTypes = require('prop-types');
const intlShape = require('react-intl').intlShape;
const MediaQuery = require('react-responsive').default;
const React = require('react');
const Formsy = require('formsy-react').default;
const classNames = require('classnames');
@ -28,6 +29,8 @@ const ExtensionChip = require('./extension-chip.jsx');
const projectShape = require('./projectshape.jsx').projectShape;
require('./preview.scss');
const frameless = require('../../lib/frameless');
// disable enter key submission on formsy input fields; otherwise formsy thinks
// we meant to trigger the "See inside" button. Instead, treat these keypresses
// as a blur, which will trigger a save.
@ -155,6 +158,21 @@ const PreviewPresentation = ({
<RemixCredit projectInfo={parentInfo} />
<RemixCredit projectInfo={originalInfo} />
{/* eslint-disable max-len */}
<MediaQuery maxWidth={frameless.tablet - 1}>
<FlexRow className="preview-row">
<FlexRow className="extension-list">
{extensions && extensions.map(extension => (
<ExtensionChip
extensionL10n={extension.l10nId}
extensionName={extension.name}
hasStatus={extension.hasStatus}
iconURI={extension.icon && `/svgs/project/${extension.icon}`}
key={extension.name || extension.l10nId}
/>
))}
</FlexRow>
</FlexRow>
</MediaQuery>
<FlexRow className="description-block">
<div className="project-textlabel">
Instructions
@ -309,19 +327,21 @@ const PreviewPresentation = ({
</FlexRow>
</FlexRow>
</FlexRow>
<FlexRow className="preview-row">
<FlexRow className="extension-list">
{extensions && extensions.map(extension => (
<ExtensionChip
extensionL10n={extension.l10nId}
extensionName={extension.name}
hasStatus={extension.hasStatus}
iconURI={extension.icon && `/svgs/project/${extension.icon}`}
key={extension.name || extension.l10nId}
/>
))}
<MediaQuery minWidth={frameless.tablet}>
<FlexRow className="preview-row">
<FlexRow className="extension-list">
{extensions && extensions.map(extension => (
<ExtensionChip
extensionL10n={extension.l10nId}
extensionName={extension.name}
hasStatus={extension.hasStatus}
iconURI={extension.icon && `/svgs/project/${extension.icon}`}
key={extension.name || extension.l10nId}
/>
))}
</FlexRow>
</FlexRow>
</FlexRow>
</MediaQuery>
</div>
<div className="project-lower-container">
<div className="inner">

4
src/views/preview/preview.jsx
View file

@ -246,6 +246,9 @@ class Preview extends React.Component {
handleSeeInside () {
this.props.setPlayer(false);
}
handleShare () {
// This is just a placeholder, but enables the button in the editor
}
handleUpdate (jsonData) {
this.props.updateProject(
this.props.projectInfo.id,
@ -338,6 +341,7 @@ class Preview extends React.Component {
renderLogin={this.renderLogin}
onLogOut={this.props.handleLogOut}
onOpenRegistration={this.props.handleOpenRegistration}
onShare={this.handleShare}
onToggleLoginOpen={this.props.handleToggleLoginOpen}
onUpdateProjectTitle={this.handleUpdateProjectTitle}
/>

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

@ -11,7 +11,6 @@ $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)";
$little-height: "screen and (max-height : 460px)";
/* override view padding for share banner */
#view {
@ -154,7 +153,23 @@ $little-height: "screen and (max-height : 460px)";
}
.comments-container {
width: 65%;
padding-right: 1.5rem;
min-width: 65%;
max-width: 100%;
flex: 1;
@media #{$medium-and-small} {
padding: 0;
width: 100%;
}
.comment, .comment-top-row, .comment-bottom-row {
flex-direction: row;
}
.comment-bubble {
text-align: left;
}
}
.remix-button,
@ -201,6 +216,14 @@ $little-height: "screen and (max-height : 460px)";
.guiPlayer {
display: inline-block;
width: $player-width;
@media #{$small} {
width: 100%;
.stage-wrapper {
max-width: 100%;
}
}
}
.project-notes {
@ -210,6 +233,12 @@ $little-height: "screen and (max-height : 460px)";
flex: 1;
flex-flow: column;
@media #{$medium-and-small} {
margin-top: 1rem;
margin-left: 0;
width: 100%;
}
> .description-block:first-child {
margin-top: 1rem;
}
@ -516,6 +545,12 @@ $little-height: "screen and (max-height : 460px)";
.extension-list {
justify-content: flex-start;
flex-direction: row;
@media #{$medium-and-small} {
justify-content: center;
}
}
.remix-list,
@ -537,6 +572,21 @@ $little-height: "screen and (max-height : 460px)";
.thumbnail-column {
display: inline-block;
width: 100%;
/* TODO: the following can be transferred to
src/components/thumbnailcolumn/thumbnailcolumn.scss
after testing */
@media #{$medium-and-small} {
flex-direction: row;
.thumbnail {
display: inline-block;
}
}
}
@media #{$medium-and-small} {
margin-top: 1rem;
}
}
}

21
src/views/search/search.jsx
View file

@ -57,12 +57,21 @@ class Search extends React.Component {
}
componentDidMount () {
const query = window.location.search;
const q = query.lastIndexOf('q=');
let term = '';
if (q !== -1) {
term = query.substring(q + 2, query.length).toLowerCase();
}
const query = decodeURIComponent(window.location.search);
let term = query;
const stripQueryValue = function (queryTerm) {
const queryIndex = query.indexOf('q=');
if (queryIndex !== -1) {
queryTerm = query.substring(queryIndex + 2, query.length).toLowerCase();
}
return queryTerm;
};
// Strip off the initial "?q="
term = stripQueryValue(term);
// Strip off user entered "?q="
term = stripQueryValue(term);
while (term.indexOf('/') > -1) {
term = term.substring(0, term.indexOf('/'));
}