Merge branch 'preloadFonts' of github.com:fsih/scratch-gui into preloadFonts

Author: fsih

README.md

@@ -29,6 +29,11 @@ npm start
 Then go to [http://localhost:8601/](http://localhost:8601/) - the playground outputs the default GUI component
 
 ## Developing alongside other Scratch repositories
+
+### Linking this code to another project's `node_modules/scratch-gui`
+
+#### Configuration
+
 If you wish to develop scratch-gui alongside other scratch repositories that depend on it, you may wish
 to have the other repositories use your local scratch-gui build instead of fetching the current production
 version of the scratch-gui that is found by default using `npm install`.
@@ -43,7 +48,7 @@ To do this:
 
 Instead of `BUILD_MODE=dist npm run build` you can also use `BUILD_MODE=dist npm run watch`, however this may be unreliable.
 
-### Oh no! It didn't work!
+#### Oh no! It didn't work!
 * Follow the recipe above step by step and don't change the order. It is especially important to run npm first because installing after the linking will reset the linking.
 * Make sure the repositories are siblings on your machine's file tree.
 * If you have multiple Terminal tabs or windows open for the different Scratch repositories, make sure to use the same node version in all of them.

package.json

@@ -41,7 +41,7 @@
     "babel-preset-react": "^6.22.0",
     "base64-loader": "1.0.0",
     "bowser": "1.9.4",
-    "chromedriver": "2.42.0",
+    "chromedriver": "2.42.1",
     "classnames": "2.2.6",
     "copy-webpack-plugin": "^4.5.1",
     "core-js": "2.5.7",
@@ -74,6 +74,7 @@
     "postcss-loader": "^3.0.0",
     "postcss-simple-vars": "^5.0.1",
     "prop-types": "^15.5.10",
+    "query-string": "^5.1.1",
     "raf": "^3.4.0",
     "raw-loader": "^0.5.1",
     "react": "16.2.0",
@@ -96,13 +97,13 @@
     "redux-throttle": "0.1.1",
     "rimraf": "^2.6.1",
     "scratch-audio": "0.1.0-prerelease.20180625202813",
-    "scratch-blocks": "0.1.0-prerelease.1539092006",
-    "scratch-l10n": "3.0.20181004141631",
+    "scratch-blocks": "0.1.0-prerelease.1539267627",
+    "scratch-l10n": "3.0.20181010220115",
     "scratch-paint": "0.2.0-prerelease.20181010194950",
     "scratch-render": "0.1.0-prerelease.20181002192350",
     "scratch-storage": "1.0.4",
     "scratch-svg-renderer": "0.2.0-prerelease.20180926143036",
-    "scratch-vm": "0.2.0-prerelease.20181010193639",
+    "scratch-vm": "0.2.0-prerelease.20181011142759",
     "selenium-webdriver": "3.6.0",
     "startaudiocontext": "1.2.1",
     "style-loader": "^0.23.0",

src/components/cards/cards.jsx

@@ -64,12 +64,18 @@ const VideoStep = ({video, dragging}) => (
         ) : null}
         <iframe
             allowFullScreen
-            allow="autoplay; encrypted-media"
+            allowTransparency="true"
             frameBorder="0"
-            height="337"
-            src={`${video}?rel=0&amp;showinfo=0`}
+            height="338"
+            scrolling="no"
+            src={`https://fast.wistia.net/embed/iframe/${video}?seo=false&videoFoam=true`}
+            title="📹"
             width="600"
         />
+        <script
+            async
+            src="https://fast.wistia.net/assets/external/E-v1.js"
+        />
     </div>
 );
 

src/components/gui/gui.css

@@ -279,6 +279,12 @@ $fade-out-distance: 15px;
     margin-top: 0;
 }
 
+/* Menu */
+
+.menu-bar-position {
+    position: relative;
+    z-index: $z-index-menu-bar;
+}
 /* Alerts */
 
 .alerts-container {

src/components/gui/gui.jsx

@@ -164,6 +164,7 @@ const GUIComponent = props => {
                 ) : null}
                 <MenuBar
                     accountNavOpen={accountNavOpen}
+                    className={styles.menuBarPosition}
                     enableCommunity={enableCommunity}
                     renderLogin={renderLogin}
                     onClickAccountNav={onClickAccountNav}

src/components/language-selector/language-selector.css

@@ -1,10 +1,6 @@
 @import "../../css/colors.css";
 @import "../../css/units.css";
 
-.language-icon {
-    height:  1.5rem;
-}
-
 /* Position the language select over the language icon, and make it transparent */
 .language-select {
     position: absolute;

src/components/menu-bar/menu-bar.css

@@ -47,10 +47,11 @@
 
 .language-icon {
     height:  1.5rem;
+    vertical-align: middle;
 }
 
 .language-caret {
-    margin-bottom: .625rem;
+    margin: 0 .125rem;
 }
 
 .language-menu {
@@ -100,6 +101,10 @@
     padding: 0 0.75rem;
 }
 
+.menu-bar-item.language-menu {
+    padding: 0 0.5rem;
+}
+
 .menu-bar-menu {
     margin-top: $menu-bar-height;
     z-index: $z-index-menu-bar;