diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css index 8e5d562..fab305b 100644 --- a/src/components/alerts/alert.css +++ b/src/components/alerts/alert.css @@ -15,6 +15,7 @@ padding-right: 1rem; margin-bottom: 7px; min-height: 1.5rem; + pointer-events: all; } .alert.warn { diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css index 888316c..eeb3989 100644 --- a/src/components/gui/gui.css +++ b/src/components/gui/gui.css @@ -34,7 +34,17 @@ } .editor-wrapper { - flex-basis: 600px; + /* + This is carefully balanced-- the minimum width at which the GUI will be displayed is 1024px. + At that size, the stage pane is 408px wide, with $space of padding to each side. + However, we must also add the border width to the stage pane. All-in-all, the stage pane's final width is + 408px + ($space + $stage-standard-border-width * 2) (one border & padding per left/right side). + + @todo This is in place to prevent "doubling up" of horizontal scrollbars in narrow windows, but there are likely + much better ways to solve that (e.g. undo #2124, remove this flex-basis entirely). However, they run their own + risks of breaking things, so let's just leave this as-is for the time being. + */ + flex-basis: calc(1024px - 408px - (($space + $stage-standard-border-width) * 2)); flex-grow: 1; flex-shrink: 0; position: relative; @@ -197,21 +207,9 @@ /* pad entire wrapper to the left and right; allow children to fill width */ padding-left: $space; padding-right: $space; -} - -.stage-and-target-wrapper.large { - /* Fix the max width to max large stage size (defined in layout_constants.js) + gutter size */ - max-width: calc(480px + calc($space * 2)); -} -.stage-and-target-wrapper.large-constrained { - /* Fix the max width to max largeConstrained stage size (defined in layout_constants.js) + gutter size */ - max-width: calc(408px + calc($space * 2)); -} - -.stage-and-target-wrapper.small { - /* Fix the max width to max small stage size (defined in layout_constants.js) + gutter size */ - max-width: calc(240px + calc($space * 2)); + /* this will only ever be as wide as the stage */ + flex-basis: 0; } .target-wrapper { @@ -309,6 +307,7 @@ $fade-out-distance: 15px; z-index: $z-index-alerts; position: absolute; margin-top: 53px; + pointer-events: none; } /* diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx index 9846eed..d315c52 100644 --- a/src/components/gui/gui.jsx +++ b/src/components/gui/gui.jsx @@ -89,6 +89,7 @@ const GUIComponent = props => { loading, logo, renderLogin, + onClickAbout, onClickAccountNav, onCloseAccountNav, onLogOut, @@ -105,6 +106,7 @@ const GUIComponent = props => { onRequestCloseTelemetryModal, onSeeCommunity, onShare, + onShowPrivacyPolicy, onTelemetryModalCancel, onTelemetryModalOptIn, onTelemetryModalOptOut, @@ -162,6 +164,7 @@ const GUIComponent = props => { onOptIn={onTelemetryModalOptIn} onOptOut={onTelemetryModalOptOut} onRequestClose={onRequestCloseTelemetryModal} + onShowPrivacyPolicy={onShowPrivacyPolicy} /> ) : null} {loading ? ( @@ -218,6 +221,7 @@ const GUIComponent = props => { logo={logo} renderLogin={renderLogin} showComingSoon={showComingSoon} + onClickAbout={onClickAbout} onClickAccountNav={onClickAccountNav} onClickLogo={onClickLogo} onCloseAccountNav={onCloseAccountNav} @@ -332,6 +336,7 @@ const GUIComponent = props => { \ No newline at end of file diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css index aa893a0..78c639c 100644 --- a/src/components/menu-bar/menu-bar.css +++ b/src/components/menu-bar/menu-bar.css @@ -218,3 +218,9 @@ .mystuff > a { background-image: url("/images/mystuff.png"); } + +.about-icon { + height: 1.25rem; + margin: 0.5rem; + vertical-align: middle; +} diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx index 485af20..a0116de 100644 --- a/src/components/menu-bar/menu-bar.jsx +++ b/src/components/menu-bar/menu-bar.jsx @@ -70,6 +70,7 @@ import profileIcon from './icon--profile.png'; import remixIcon from './icon--remix.svg'; import dropdownCaret from './dropdown-caret.svg'; import languageIcon from '../language-selector/language-icon.svg'; +import aboutIcon from './icon--about.svg'; import scratchLogo from './scratch-logo.svg'; @@ -142,6 +143,19 @@ MenuItemTooltip.propTypes = { isRtl: PropTypes.bool }; +const AboutButton = props => ( +