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 problem where sometimes there would be two scrollbars

Browse source
This commit is contained in:
Linda 2018-10-02 15:33:15 -04:00
parent b03bd51f79
commit 06bb9c60c4
3 changed files with 15 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,6 +6,14 @@ $medium: "only screen and (min-width : #{$mobile}+1) and (max-width : #{$tablet}
$small-height: "only screen and (max-height : #{$mobile})"; $small-height: "only screen and (max-height : #{$mobile})";
$medium-height: "only screen and (min-height : #{$mobile} + 1) and (max-height : #{$tablet} - 1)"; $medium-height: "only screen and (min-height : #{$mobile} + 1) and (max-height : #{$tablet} - 1)";
.mod-addToStudio {
overflow: hidden;
@media #{$small}, #{$small-height} {
overflow: hidden;
}
}
.addToStudio-modal-header { .addToStudio-modal-header {
box-shadow: inset 0 -1px 0 0 $ui-blue-dark; box-shadow: inset 0 -1px 0 0 $ui-blue-dark;
background-color: $ui-blue; background-color: $ui-blue;

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

@ -26,6 +26,7 @@ class Modal extends React.Component {
return ( return (
<ReactModal <ReactModal
appElement={document.getElementById('app')} appElement={document.getElementById('app')}
bodyOpenClassName={this.props.useStandardSizes ? classNames('overflow-hidden') : null}
className={{ className={{
base: classNames('modal-content', this.props.className, { base: classNames('modal-content', this.props.className, {
'modal-sizes': this.props.useStandardSizes 'modal-sizes': this.props.useStandardSizes

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

@ -7,6 +7,12 @@ $big: "only screen and (min-width : #{$tablet}) and (max-width : #{$desktop}-1)"
$small-height: "only screen and (max-height : #{$mobile})"; $small-height: "only screen and (max-height : #{$mobile})";
$medium-height: "only screen and (min-height : #{$mobile} + 1) and (max-height : #{$tablet} - 1)"; $medium-height: "only screen and (min-height : #{$mobile} + 1) and (max-height : #{$tablet} - 1)";
.overflow-hidden {
/* to avoid double scroll bars this
gets added to body while modal is open */
overflow: hidden;
}
.modal-content { .modal-content {
position: relative; position: relative;
margin: 3.75rem auto; margin: 3.75rem auto;
@ -130,7 +136,6 @@ row to appear to contain overflow. */
outline: none; outline: none;
padding: 0; padding: 0;
max-width: 36.25rem; /* 580px; */ max-width: 36.25rem; /* 580px; */
overflow: hidden;
user-select: none; user-select: none;
@media #{$medium}, #{$medium-height} { @media #{$medium}, #{$medium-height} {
@ -140,7 +145,6 @@ row to appear to contain overflow. */
@media #{$small}, #{$small-height} { @media #{$small}, #{$small-height} {
margin: 0 auto; margin: 0 auto;
width: auto; width: auto;
overflow: hidden scroll;
} }
.modal-header { .modal-header {