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

Revert "add ModalInnerContent component, use it in modals"

Browse source
This commit is contained in:
Benjamin Wheeler 2019-07-11 11:06:02 -04:00 committed by GitHub
parent 4cdab756aa
commit 86261ec1ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 12 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,7 +11,6 @@ const Spinner = require('../../spinner/spinner.jsx');
const FlexRow = require('../../flex-row/flex-row.jsx');
const StudioButton = require('./studio-button.jsx');
const ModalTitle = require('../base/modal-title.jsx');
const ModalInnerContent = require('../base/modal-inner-content.jsx');
require('../../forms/button.scss');
require('./modal.scss');
@ -50,7 +49,7 @@ const AddToStudioModalPresentation = ({
<div className="addToStudio-modal-header modal-header">
<ModalTitle title={contentLabel} />
</div>
<ModalInnerContent className="addToStudio-modal-content">
<div className="addToStudio-modal-content modal-content">
<div className="studio-list-outer-scrollbox">
<div className="studio-list-inner-scrollbox">
<div className="studio-list-container">
@ -102,7 +101,7 @@ const AddToStudioModalPresentation = ({
]}
</FlexRow>
</Form>
</ModalInnerContent>
</div>
</Modal>
);
};

28
src/components/modal/base/modal-inner-content.jsx
View file

@ -1,28 +0,0 @@
const classNames = require('classnames');
const PropTypes = require('prop-types');
const React = require('react');
require('./modal-inner-content.scss');
const ModalInnerContent = ({
children,
className
}) => (
<div className="modal-inner-clear">
<div
className={classNames(
'modal-inner-content',
className
)}
>
{children}
</div>
</div>
);
ModalInnerContent.propTypes = {
children: PropTypes.node,
className: PropTypes.string
};
module.exports = ModalInnerContent;

17
src/components/modal/base/modal-inner-content.scss
View file

@ -1,17 +0,0 @@
@import "../../../colors";
@import "../../../frameless";
/*
necessary to prevent modal-inner-content's margins from
unexpectedly collapsing with a parent
*/
.modal-inner-clear {
overflow: auto;
}
.modal-inner-content {
box-sizing: border-box;
display: flex;
border-radius: 0;
flex-direction: column;
}

6
src/components/modal/base/modal.scss
View file

@ -16,6 +16,12 @@
padding: 0;
width: 48.75rem;
.modal-content { /* content inside of content */
display: flex;
border-radius: 0;
flex-direction: column;
}
&:focus {
outline: none;
}

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

@ -9,7 +9,6 @@ const Modal = require('../base/modal.jsx');
const classNames = require('classnames');
const ModalTitle = require('../base/modal-title.jsx');
const ModalInnerContent = require('../base/modal-inner-content.jsx');
const Form = require('../../forms/form.jsx');
const Button = require('../../forms/button.jsx');
const Select = require('../../forms/select.jsx');
@ -131,7 +130,7 @@ class ReportModal extends React.Component {
onValid={this.handleValid}
onValidSubmit={onReport}
>
<ModalInnerContent className="report-modal-content">
<div className="report-modal-content modal-content">
{isConfirmed ? (
<div className="received">
<div className="received-header">
@ -199,7 +198,7 @@ class ReportModal extends React.Component {
<FormattedMessage id="report.error" />
</div>
)}
</ModalInnerContent>
</div>
<FlexRow className="action-buttons">
<div className="action-buttons-overflow-fix">
{isConfirmed ? (

6
src/components/modal/social/presentation.jsx
View file

@ -6,8 +6,6 @@ const classNames = require('classnames');
const Modal = require('../base/modal.jsx');
const ModalTitle = require('../base/modal-title.jsx');
const ModalInnerContent = require('../base/modal-inner-content.jsx');
const FlexRow = require('../../flex-row/flex-row.jsx');
require('../../forms/button.scss');
@ -39,7 +37,7 @@ const SocialModalPresentation = ({
<div className="social-modal-header modal-header">
<ModalTitle title={intl.formatMessage({id: 'general.copyLink'})} />
</div>
<ModalInnerContent className="social-modal-content">
<div className="modal-content social-modal-content">
{/* top row: link */}
<div className="link-section">
@ -113,7 +111,7 @@ const SocialModalPresentation = ({
</FlexRow>
</div>
</ModalInnerContent>
</div>
</Modal>
);
};