fix(www): Fix showcase visit site link overlap (#10249)

* Fix showcase visit site link overlap It fixes this issue #10242 - Only moved the top position so it’s not blocking the github button - Kept the original layout when it goes back to desktop * added trailing comma to comply with prettier * moar trailing comma * cleanup css to hide or show visit button
gatsbyjs · Feb 15, 2019 · 5d6f13f · 5d6f13f
1 parent 42f509e
commit 5d6f13f
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 48 deletions.
diff --git a/www/src/components/share-menu.js b/www/src/components/share-menu.js
@@ -63,7 +63,7 @@ class ShareMenu extends React.Component {
   }
 
   render() {
-    const { url, title, image, theme = `gatsby` } = this.props
+    const { url, title, image, className, theme = `gatsby` } = this.props
     const { open } = this.state
     return (
       <Fragment>
@@ -76,6 +76,7 @@ class ShareMenu extends React.Component {
             color: styles[theme].textColor,
             cursor: `pointer`,
           }}
+          className={className}
           ref={this.setShareBtnRef}
         >
           <MdShare />

diff --git a/www/src/components/showcase-details.js b/www/src/components/showcase-details.js
@@ -135,6 +135,7 @@ const ShowcaseDetails = ({ parent, data, isModal, categories }) => (
       const allSitesYaml = staticData.allSitesYaml
       const nextSite = parent.getNext(allSitesYaml)
       const previousSite = parent.getPrevious(allSitesYaml)
+      const shouldShowVisitButtonOnMobile = !!data.sitesYaml.source_url
       const { filters } = parent.props.location.state || {}
 
       return (
@@ -432,63 +433,71 @@ const ShowcaseDetails = ({ parent, data, isModal, categories }) => (
                     <a href={data.sitesYaml.source_url}> Case Study </a>
                   </div>
                 )}
-              </div>
-              <div
-                css={{
-                  borderTop: `1px solid ${colors.ui.light}`,
-                  position: `relative`,
-                }}
-              >
                 <div
                   css={{
-                    position: `absolute`,
-                    right: rhythm(3 / 4),
-                    top: rhythm(-15 / 8),
-                    left: `auto`,
-                    zIndex: 1,
-                    display: `flex`,
+                    alignSelf: `center`,
+                    marginLeft: `auto`,
                   }}
                 >
-                  <a
-                    href={data.sitesYaml.main_url}
+                  <div
                     css={{
-                      border: 0,
-                      borderRadius: presets.radius,
-                      color: colors.gatsby,
-                      fontFamily: options.headerFontFamily.join(`,`),
-                      fontWeight: `bold`,
-                      marginRight: rhythm(1.5 / 4),
-                      padding: `${rhythm(1 / 5)} ${rhythm(2 / 3)}`,
-                      textDecoration: `none`,
-                      WebkitFontSmoothing: `antialiased`,
-                      "&&": {
-                        backgroundColor: colors.gatsby,
-                        borderBottom: `none`,
-                        boxShadow: `none`,
-                        color: `white`,
-                        "&:hover": {
-                          backgroundColor: colors.gatsby,
-                        },
-                      },
+                      position: `relative`,
+                      zIndex: 1,
+                      display: `flex`,
                     }}
                   >
-                    <MdLaunch
-                      style={{
-                        verticalAlign: `sub`,
+                    <a
+                      href={data.sitesYaml.main_url}
+                      css={{
+                        border: 0,
+                        borderRadius: presets.radius,
+                        color: colors.gatsby,
+                        display: shouldShowVisitButtonOnMobile ? `none` : null,
+                        fontFamily: options.headerFontFamily.join(`,`),
+                        fontWeight: `bold`,
+                        marginRight: rhythm(1.5 / 4),
+                        padding: `${rhythm(1 / 5)} ${rhythm(2 / 3)}`,
+                        textDecoration: `none`,
+                        WebkitFontSmoothing: `antialiased`,
+                        "&&": {
+                          backgroundColor: colors.gatsby,
+                          borderBottom: `none`,
+                          boxShadow: `none`,
+                          color: `white`,
+                          "&:hover": {
+                            backgroundColor: colors.gatsby,
+                          },
+                        },
+                        [shouldShowVisitButtonOnMobile && presets.Phablet]: {
+                          display: `block`,
+                        },
                       }}
+                    >
+                      <MdLaunch
+                        style={{
+                          verticalAlign: `sub`,
+                        }}
+                      />
+                      Visit site
+                      {` `}
+                    </a>
+                    <ShareMenu
+                      css={{ display: `flex`, minWidth: 32, minHeight: 32 }}
+                      url={data.sitesYaml.main_url}
+                      title={data.sitesYaml.title}
+                      image={`https://www.gatsbyjs.org${
+                        data.sitesYaml.childScreenshot.screenshotFile
+                          .childImageSharp.resize.src
+                      }`}
                     />
-                    Visit site
-                    {` `}
-                  </a>
-                  <ShareMenu
-                    url={data.sitesYaml.main_url}
-                    title={data.sitesYaml.title}
-                    image={`https://www.gatsbyjs.org${
-                      data.sitesYaml.childScreenshot.screenshotFile
-                        .childImageSharp.resize.src
-                    }`}
-                  />
+                  </div>
                 </div>
+              </div>
+              <div
+                css={{
+                  borderTop: `1px solid ${colors.ui.light}`,
+                }}
+              >
                 <Img
                   key={data.sitesYaml.id}
                   fluid={