Merge pull request gatsbyjs#3 from sw-yx/topics/showcase-rebase-v2

make Site Showcase responsive
fk · Jun 8, 2018 · 7614b04 · 7614b04
2 parents c043296 + 4068c28
commit 7614b04
Show file tree

Hide file tree

Showing 6 changed files with 286 additions and 239 deletions.
diff --git a/www/src/assets/mobile-nav-icons.js b/www/src/assets/mobile-nav-icons.js
@@ -2,5 +2,6 @@ import BlogIcon from "./blog.svg"
 import DocsIcon from "./docs.svg"
 import TutorialIcon from "./tutorial.svg"
 import PluginsIcon from "./plugins.svg"
+import ShowcaseIcon from "./showcase-magic.svg"
 
-export { BlogIcon, DocsIcon, TutorialIcon, PluginsIcon }
+export { BlogIcon, DocsIcon, TutorialIcon, PluginsIcon, ShowcaseIcon }
diff --git a/www/src/assets/showcase-magic.svg b/www/src/assets/showcase-magic.svg
diff --git a/www/src/components/layout.js b/www/src/components/layout.js
@@ -58,7 +58,7 @@ class DefaultLayout extends React.Component {
       isModal = true
     }
 
-    if (isModal) {
+    if (isModal && window.innerWidth > 750) {
       return (
         <React.Fragment>
           <PageRenderer
@@ -100,9 +100,9 @@ class DefaultLayout extends React.Component {
               backgroundColor: `#ffffff`,
               boxShadow: `0px 0px 90px -24px ${colors.gatsby}`
             }}>
-            {this.props.children}
-            {this.props.modalPreviousLink}
-            {this.props.modalNextLink}
+              {this.props.children}
+              {this.props.modalPreviousLink}
+              {this.props.modalNextLink}
             </div>
           </Modal>
         </React.Fragment>

diff --git a/www/src/components/navigation-mobile.js b/www/src/components/navigation-mobile.js
@@ -6,6 +6,7 @@ import {
   DocsIcon,
   TutorialIcon,
   PluginsIcon,
+  ShowcaseIcon,
 } from "../assets/mobile-nav-icons"
 import presets, { colors } from "../utils/presets"
 import typography, { rhythm, scale, options } from "../utils/typography"
@@ -54,8 +55,7 @@ const MobileNavigation = () => (
     <MobileNavItem linkTo="/tutorial/" label="Tutorial" icon={TutorialIcon} />
     <MobileNavItem linkTo="/plugins/" label="Plugins" icon={PluginsIcon} />
     <MobileNavItem linkTo="/blog/" label="Blog" icon={BlogIcon} />
-    {/* TODO: change to showcase icon */}
-    <MobileNavItem linkTo="/showcase/" label="Showcase" icon={BlogIcon} />
+    <MobileNavItem linkTo="/showcase/" label="Showcase" icon={ShowcaseIcon} />
   </div>
 )