Merge pull request #2 from riencoertjens/showcase-column-layout-update

Showcase column layout update
pieh · Sep 8, 2018 · 64274b1 · 64274b1
2 parents 227c8f9 + d6aefa0
commit 64274b1
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 30 deletions.
diff --git a/www/src/views/shared/styles.js b/www/src/views/shared/styles.js
@@ -26,16 +26,15 @@ const styles = {
     display: `flex`,
     flexWrap: `wrap`,
     padding: rhythm(3 / 4),
-    justifyContent: `center`,
-    [presets.Desktop]: {
-      justifyContent: `flex-start`,
-    },
+    justifyContent: `space-evenly`,
   },
   showcaseItem: {
     display: `flex`,
     flexDirection: `column`,
     margin: rhythm(3 / 4),
-    width: 282,
+    minWidth: 259,//shows 3 items/row on windows > 1200px wide
+    maxWidth: 350,
+    flex: `1 0 0`,
     position: `relative`,
   },
   featuredItem: {

diff --git a/www/src/views/shared/thumbnail.js b/www/src/views/shared/thumbnail.js
@@ -10,10 +10,10 @@ const ThumbnailLink = ({ slug, image, title, children }) => {
 
   // site showcase
   if (image.screenshotFile) {
-    screenshot = image.screenshotFile.childImageSharp.fixed
+    screenshot = image.screenshotFile.childImageSharp.fluid
   } else {
     // starter showcase
-    screenshot = image.childImageSharp.fixed
+    screenshot = image.childImageSharp.fluid
   }
 
   return (
@@ -37,7 +37,7 @@ const ThumbnailLink = ({ slug, image, title, children }) => {
     >
       {screenshot ? (
         <Img
-          fixed={screenshot}
+          fluid={screenshot}
           alt={`Screenshot of ${title}`}
           css={{ ...styles.screenshot }}
         />
@@ -60,8 +60,8 @@ export default ThumbnailLink
 
 export const showcaseThumbnailFragment = graphql`
   fragment ShowcaseThumbnailFragment_item on ImageSharp {
-    fixed(width: 282, height: 211) {
-      ...GatsbyImageSharpFixed_noBase64
+    fluid(maxWidth: 350) {
+      ...GatsbyImageSharpFluid_noBase64
     }
   }
 `
diff --git a/www/src/views/showcase/showcase-list.js b/www/src/views/showcase/showcase-list.js
@@ -104,6 +104,13 @@ const ShowcaseList = ({ items, count }) => {
             </div>
           )
       )}
+      {/* makes last row items equal width and aligned left */}
+      <div css={{ ...styles.showcaseItem, marginTop: 0, marginBottom: 0 }} />
+      <div css={{ ...styles.showcaseItem, marginTop: 0, marginBottom: 0 }} />
+      <div css={{ ...styles.showcaseItem, marginTop: 0, marginBottom: 0 }} />
+      <div css={{ ...styles.showcaseItem, marginTop: 0, marginBottom: 0 }} />
+      <div css={{ ...styles.showcaseItem, marginTop: 0, marginBottom: 0 }} />
+      <div css={{ ...styles.showcaseItem, marginTop: 0, marginBottom: 0 }} />
     </div>
   )
 }

diff --git a/www/src/views/starter-showcase/filtered-showcase.js b/www/src/views/starter-showcase/filtered-showcase.js
@@ -334,15 +334,7 @@ export default class FilteredShowcase extends Component {
             <button
               css={{
                 ...styles.button,
-                display: `block`,
-                marginBottom: rhythm(options.blockMarginBottom * 5),
-                marginTop: rhythm(options.blockMarginBottom * 2),
-                marginLeft: `auto`,
-                marginRight: `auto`,
-                [presets.Desktop]: {
-                  marginLeft: rhythm(6 / 4),
-                  marginRight: rhythm(6 / 4),
-                },
+                ...styles.loadMoreButton
               }}
               onClick={() => {
                 this.setState({ sitesToShow: this.state.sitesToShow + 15 })

diff --git a/www/src/views/starter-showcase/showcase-list.js b/www/src/views/starter-showcase/showcase-list.js
@@ -49,13 +49,7 @@ const ShowcaseList = ({ urlState, items, imgs, count, sortRecent }) => {
     <div
       css={{
         fontFamily: options.headerFontFamily.join(`,`),
-        display: `flex`,
-        flexWrap: `wrap`,
-        padding: rhythm(3 / 4),
-        justifyContent: `center`,
-        [presets.Desktop]: {
-          justifyContent: `flex-start`,
-        },
+        ...styles.showcaseList
       }}
     >
       {items.map(({ node }) => {
@@ -82,8 +76,7 @@ const ShowcaseList = ({ urlState, items, imgs, count, sortRecent }) => {
             <div
               key={node.id}
               css={{
-                margin: rhythm(3 / 4),
-                width: 280,
+                ...styles.showcaseItem
               }}
               {...styles.withTitleHover}
             >
@@ -143,9 +136,9 @@ const ShowcaseList = ({ urlState, items, imgs, count, sortRecent }) => {
                   </span>
                 </div>
                 <div>
-                  <span className="title">
+                  <span>
                     <h5 css={{ margin: 0 }}>
-                      <strong>{repo.name}</strong>
+                      <strong className="title">{repo.name}</strong>
                     </h5>
                   </span>
                   {/* {isGatsbyVersionWarning ?
@@ -181,6 +174,13 @@ const ShowcaseList = ({ urlState, items, imgs, count, sortRecent }) => {
           )
         )
       })}
+      {/* makes last row items equal width and aligned left */}
+      <div css={{ ...styles.showcaseItem, marginTop: 0, marginBottom: 0 }} />
+      <div css={{ ...styles.showcaseItem, marginTop: 0, marginBottom: 0 }} />
+      <div css={{ ...styles.showcaseItem, marginTop: 0, marginBottom: 0 }} />
+      <div css={{ ...styles.showcaseItem, marginTop: 0, marginBottom: 0 }} />
+      <div css={{ ...styles.showcaseItem, marginTop: 0, marginBottom: 0 }} />
+      <div css={{ ...styles.showcaseItem, marginTop: 0, marginBottom: 0 }} />
     </div>
   )
 }