snipette/snipette-gatsby-site
snipette/snipette-gatsby-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Restyle feature image to make full-width

Browse source
This commit is contained in:
Hippo 2019-09-19 18:35:26 +05:30
parent 3cafb57c40
commit 94229ca110
3 changed files with 16 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/common/Layout.js
View file

@ -18,7 +18,7 @@ import '../../styles/app.css'
* styles, and meta data for each page. * styles, and meta data for each page.
* *
*/ */
const DefaultLayout = ({ data, children, bodyClass, isHome }) => { const DefaultLayout = ({ data, children, bodyClass, isHome, hasFeatureImage }) => {
const site = data.allGhostSettings.edges[0].node const site = data.allGhostSettings.edges[0].node
const twitterUrl = site.twitter ? `https://twitter.com/${site.twitter.replace(/^@/, ``)}` : null const twitterUrl = site.twitter ? `https://twitter.com/${site.twitter.replace(/^@/, ``)}` : null
const facebookUrl = site.facebook ? `https://www.facebook.com/${site.facebook.replace(/^\//, ``)}` : null const facebookUrl = site.facebook ? `https://www.facebook.com/${site.facebook.replace(/^\//, ``)}` : null
@ -70,7 +70,9 @@ const DefaultLayout = ({ data, children, bodyClass, isHome }) => {
</div> </div>
</header> </header>
<main className="site-main"> <main className={
hasFeatureImage ? "site-main has-feature-image" : "site-main"
}>
{/* All the main content gets inserted here, index.js, post.js */} {/* All the main content gets inserted here, index.js, post.js */}
{children} {children}
</main> </main>
@ -101,6 +103,7 @@ DefaultLayout.propTypes = {
children: PropTypes.node.isRequired, children: PropTypes.node.isRequired,
bodyClass: PropTypes.string, bodyClass: PropTypes.string,
isHome: PropTypes.bool, isHome: PropTypes.bool,
hasFeatureImage: PropTypes.bool,
data: PropTypes.shape({ data: PropTypes.shape({
file: PropTypes.object, file: PropTypes.object,
allGhostSettings: PropTypes.object.isRequired, allGhostSettings: PropTypes.object.isRequired,

7
src/styles/app.css
View file

@ -551,7 +551,8 @@ h6 {
.post-feature-image img { .post-feature-image img {
margin: 0 0 3vw; margin: 0 0 3vw;
width: 100%; width: 100%;
height: 500px; height: auto;
max-height: calc(100vh - 123px); /* leave space for header */
object-fit: cover; object-fit: cover;
} }
@ -762,6 +763,10 @@ h6 {
padding: 4vw 0; padding: 4vw 0;
} }
.site-main.has-feature-image {
padding: 0 0 4vw 0; /* Leave space for pic */
}
/* Index /* Index
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */

10
src/templates/post.js
View file

@ -25,13 +25,13 @@ const Post = ({ data, location }) => {
<Helmet> <Helmet>
<style type="text/css">{`${post.codeinjection_styles}`}</style> <style type="text/css">{`${post.codeinjection_styles}`}</style>
</Helmet> </Helmet>
<Layout> <Layout hasFeatureImage={ post.feature_image }>
{ post.feature_image ?
<figure className="post-feature-image">
<img src={ post.feature_image } alt={ post.title } />
</figure> : null }
<div className="container"> <div className="container">
<article className="content"> <article className="content">
{ post.feature_image ?
<figure className="post-feature-image">
<img src={ post.feature_image } alt={ post.title } />
</figure> : null }
<section className="post-full-content"> <section className="post-full-content">
<h1 className="content-title">{post.title}</h1> <h1 className="content-title">{post.title}</h1>