From d743c76a2c04ce99cbffb1b7fa4aaa725de27bb1 Mon Sep 17 00:00:00 2001 From: danielvanc Date: Fri, 4 Oct 2019 17:11:00 +0100 Subject: [PATCH] [refs #3] Update notes design --- src/components/Layout/header/Header.js | 2 +- src/components/Shared/ListNotes.js | 164 +++++++++++++ .../Shared/ListPostsSquareOffset.js | 228 +++++++++--------- src/components/Shared/SubMast.js | 21 +- src/components/Specifics/Notes/LatestBlock.js | 100 +++----- src/pages/notes.js | 53 +--- 6 files changed, 335 insertions(+), 233 deletions(-) create mode 100644 src/components/Shared/ListNotes.js diff --git a/src/components/Layout/header/Header.js b/src/components/Layout/header/Header.js index 9590aff..4175fcf 100644 --- a/src/components/Layout/header/Header.js +++ b/src/components/Layout/header/Header.js @@ -91,7 +91,7 @@ const SiteNav = styled.ul` display: inline-flex; font-size: 1rem; margin-top: 7px; - padding-left: 0.8em; + padding-left: 0.7em; @media screen and (min-width: 375px) { padding-left: 2em; } diff --git a/src/components/Shared/ListNotes.js b/src/components/Shared/ListNotes.js new file mode 100644 index 0000000..ff3a5b8 --- /dev/null +++ b/src/components/Shared/ListNotes.js @@ -0,0 +1,164 @@ +import React from 'react'; +import {Link} from 'gatsby'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import BlogThumb from 'gatsby-image'; +import Media from 'react-media'; + +const Notes = styled.div` + grid-column: 3 / 15; + grid-row: 3 / 4; + .heading { + font-family: var(--font-family-subheadings); + font-weight: 200 !important; + letter-spacing: 0.2em; + margin-bottom: 0.938em; + padding-top: 1.25em; + @media screen and (min-width: 48em) { + padding-top: 0; + } + @media screen and (min-width: 64em) { + margin-bottom: 0; + } + &:after { + border-bottom: 1px solid var(--color-borders); + content: ''; + position: absolute; + right: 0; + left: 150px; + top: 52%; + } + } +`; +const NotesLatestContainer = styled.div` + margin: 0 8%; + padding-bottom: 4em; + + @media screen and (min-width: 48em) { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + margin: 0 auto; + max-width: 870px; + } +`; + +const Note = styled.article` + @media screen and (min-width: 48em) { + flex-basis: 46%; + text-align: center; + } + padding: 0 0 1.5em 0; + @media screen and (min-width: 48em) { + padding: 0 0 3em 0; + } + header { + @media screen and (min-width: 48em) { + background: var(--color-grey); + border-radius: 5px; + display: flex; + padding: 0.625em 0.938em 0.4em 0.938em; + position: relative; + margin: 0 auto; + max-width: 80%; + } + } +`; + +const NoteHeading = styled.h2` + font-size: 1.125em; + font-weight: 400; + font-size: var(--font-size-medium); + @media screen and (min-width: 64em) { + font-size: 1.313em; + } + @media screen and (min-width: 90em) { + font-size: var(--font-size-medium); + } +`; + +const NoteImage = styled.div`} + img { + border-radius: 5px; + width: 100%; + max-width: 100%; + } + .img-link { + display: block; + -webkit-box-shadow: 10px 9px 10px -6px rgba(2, 2, 2, 0.56); + -moz-box-shadow: 10px 9px 10px -6px rgba(2, 2, 2, 0.56); + box-shadow: 10px 9px 10px -6px rgba(2, 2, 2, 0.56); + transition: all 0.8s ease-in-out; + &:hover { + box-shadow: none; + transform: scale(1.2); + transition: all 0.8s ease-in-out; + } + } + p { + color: var(--link-hover); + font-weight: 200; + @media screen and (min-width: 48em) { + position: relative; + } + } +`; + +const NoPosts = styled.p` + font-size: var(--font-size-medium); + grid-column: 1 / -1; + padding: 0 0 3em 0; + @media screen and (min-width: 48em) { + padding: 3em 0 0 0; + } +`; + +const ListNotes = ({notes, tot}) => { + const foundPosts = () => ( + <> + {notes.map(({node: note}, i) => ( + + + + + + + +
+ + + {note.title} + + +
+

{note.publishedAt}

+ + + ))} + + ); + + const noPosts = () => ( + No other posts have been made, yet. + ); + + return ( + <> + + + {tot >= 2 ? foundPosts() : noPosts()} + + + + ); +}; + +export default ListNotes; + +ListNotes.propTypes = { + notes: PropTypes.array, + tot: PropTypes.number, +}; diff --git a/src/components/Shared/ListPostsSquareOffset.js b/src/components/Shared/ListPostsSquareOffset.js index 3043cda..970afd9 100644 --- a/src/components/Shared/ListPostsSquareOffset.js +++ b/src/components/Shared/ListPostsSquareOffset.js @@ -1,123 +1,120 @@ -import React from 'react' -import { Link } from 'gatsby' -import styled from 'styled-components' -import BlogThumb from "gatsby-image" -import Media from "react-media" +import React from 'react'; +import {Link} from 'gatsby'; +import styled from 'styled-components'; +import BlogThumb from 'gatsby-image' +import Media from 'react-media' const NotesLatest = styled.div` - grid-column: 2 / 3; - .heading { - font-family: var(--font-family-subheadings); - font-weight: 200!important; - letter-spacing: 0.2em; - margin-bottom: 0.938em; - padding-top: 1.250em; - @media screen and (min-width: 48em) { - padding-top: 0; + grid-column: 2 / 3; + .heading { + font-family: var(--font-family-subheadings); + font-weight: 200 !important; + letter-spacing: 0.2em; + margin-bottom: 0.938em; + padding-top: 1.25em; + @media screen and (min-width: 48em) { + padding-top: 0; + } + @media screen and (min-width: 64em) { + margin-bottom: 0; + } + &:after { + border-bottom: 1px solid var(--color-borders); + content: ''; + position: absolute; + right: 0; + left: 150px; + top: 52%; + } } - @media screen and (min-width: 64em) { - margin-bottom: 0; +`; +const NotesLatestContainer = styled.div` + padding: 0 1.5em; + @media screen and (min-width: 48em) { + display: grid; + grid-gap: 25px; + grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); + padding: 0; } - &:after { - border-bottom: 1px solid var(--color-borders); - content: ''; - position: absolute; - right: 0; - left: 150px; - top: 52%; + @media screen and (min-width: 75em) { + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } - } -` -const NotesLatestContainer = styled.div` - padding: 0 1.5em; - @media screen and (min-width: 48em) { - display: grid; - grid-gap: 25px; - grid-template-columns: repeat(auto-fill, minmax(225px, 1fr) ); - padding: 0; - } - @media screen and (min-width: 75em) { - grid-template-columns: repeat(auto-fill, minmax(220px, 1fr) ); - } -` +`; const NoteImage = styled.div` - @media screen and (min-width: 48em) { - grid-column: 3 / 4; - grid-row: 1 / 2; - } - @media screen and (min-width: 64em) { - grid-column: 4 / 9; - grid-row: 1 / 2; - padding: 20px 0; - } - img { - width: 100%; - max-width: 100%; - } - .img-link { - display: block; - -webkit-box-shadow: 10px 9px 10px -6px rgba(2, 2, 2, 0.56); - -moz-box-shadow: 10px 9px 10px -6px rgba(2, 2, 2, 0.56); - box-shadow: 10px 9px 10px -6px rgba(2, 2, 2, 0.56); - } - p { - color: var(--link-hover); - font-weight: 200; @media screen and (min-width: 48em) { - text-align: center; + grid-column: 3 / 4; + grid-row: 1 / 2; + } + @media screen and (min-width: 64em) { + grid-column: 4 / 9; + grid-row: 1 / 2; + padding: 20px 0; + } + img { + width: 100%; + max-width: 100%; + } + .img-link { + display: block; + -webkit-box-shadow: 10px 9px 10px -6px rgba(2, 2, 2, 0.56); + -moz-box-shadow: 10px 9px 10px -6px rgba(2, 2, 2, 0.56); + box-shadow: 10px 9px 10px -6px rgba(2, 2, 2, 0.56); + } + p { + color: var(--link-hover); + font-weight: 200; + @media screen and (min-width: 48em) { + text-align: center; + } } - } -` +`; const Note = styled.article` - padding:0 0 1.5em 0; - @media screen and (min-width: 48em) { - padding: 0; - } - header { + padding: 0 0 1.5em 0; @media screen and (min-width: 48em) { - background: var(--color-grey); - border-radius: 10px; - display: flex; - padding: 0.625em 0.938em; - position: relative; - /* margin: 0 0.625em; */ - margin: 0 auto; - top: -25px; - max-width: 80%; + padding: 0; } - } -` + header { + @media screen and (min-width: 48em) { + background: var(--color-grey); + border-radius: 10px; + display: flex; + padding: 0.625em 0.938em; + position: relative; + /* margin: 0 0.625em; */ + margin: 0 auto; + top: -25px; + max-width: 80%; + } + } +`; const NoteHeading = styled.h2` - font-size: 1.125em; - font-weight: 400; - font-size: var(--font-size-medium); - @media screen and (min-width: 64em) { - font-size: 1.313em; - } - @media screen and (min-width: 90em) { + font-size: 1.125em; + font-weight: 400; font-size: var(--font-size-medium); - } -` + @media screen and (min-width: 64em) { + font-size: 1.313em; + } + @media screen and (min-width: 90em) { + font-size: var(--font-size-medium); + } +`; const NoPosts = styled.p` - font-size: var(--font-size-medium); - grid-column: 1 / -1; - padding: 0 0 3em 0; - @media screen and (min-width: 48em) { - /* font-size: var(--font-size-medium); */ - padding: 3em 0 0 0; - } -` - -const ListPostsSquare = (props) => { + font-size: var(--font-size-medium); + grid-column: 1 / -1; + padding: 0 0 3em 0; + @media screen and (min-width: 48em) { + /* font-size: var(--font-size-medium); */ + padding: 3em 0 0 0; + } +`; - const foundPosts = () => { - - return ( +const ListPostsSquare = props => { + const foundPosts = () => ( <> - {props.notes.slice(1).map( ({ node: note }, i) => ( + {props.notes.map( ({ node: note }, i) => ( @@ -135,20 +132,21 @@ const ListPostsSquare = (props) => { ))} ) - } - const noPosts = () => No other posts have been made, yet. + const noPosts = () => ( + No other posts have been made, yet. + ); - return ( - <> - -

Previously

- - {props.total >= 2 ? foundPosts() : noPosts()} - - - - ) -} + return ( + <> + +

Previously

+ + {props.total >= 2 ? foundPosts() : noPosts()} + + + + ); +}; -export default ListPostsSquare; \ No newline at end of file +export default ListPostsSquare; diff --git a/src/components/Shared/SubMast.js b/src/components/Shared/SubMast.js index b23081e..877db76 100644 --- a/src/components/Shared/SubMast.js +++ b/src/components/Shared/SubMast.js @@ -1,9 +1,10 @@ import React from 'react'; import styled from 'styled-components'; import BaseBlockContent from '@sanity/block-content-to-react'; -import {Content} from '../Shared/Content'; +import {Content} from './Content'; const SubHeading = styled.div` + &.standard-centered, &.standard { grid-column: 3 / 15; grid-row: 1 / 2; @@ -24,6 +25,24 @@ const SubHeading = styled.div` font-size: var(--font-size-large); } } + &-centered { + margin: 0 8%; + padding: 2em 0 3em 0; + + @media screen and (min-width: 64em) { + padding: 4em 0; + } + * { + @media screen and (min-width: 48em) { + margin: 0; + text-align: center; + } + } + h1 { + max-width: 100%; + padding: 0; + } + } } &.centered { grid-column: 5 / 14; diff --git a/src/components/Specifics/Notes/LatestBlock.js b/src/components/Specifics/Notes/LatestBlock.js index eb21a87..884959e 100644 --- a/src/components/Specifics/Notes/LatestBlock.js +++ b/src/components/Specifics/Notes/LatestBlock.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import {Link} from 'gatsby'; import styled from 'styled-components'; import BlogThumb from 'gatsby-image'; @@ -6,16 +7,13 @@ import Media from 'react-media'; import PostButton from '../../Shared/Buttons'; const NotesLatest = styled.section` - background: var(--color-dark-grey); - padding: 0 1.5em 3em 1.5em; - @media screen and (min-width: 48em) { - padding: 0; - } + padding: 1.5em 0 0 0; + @media screen and (min-width: 48em) { grid-column: 1 / -1; grid-row: 2 / 4; - display: grid; - grid-template-columns: repeat(18, 1fr); + margin: 0 auto; + max-width: 870px; } `; const NotesBlank = styled.div` @@ -25,21 +23,16 @@ const NotesBlank = styled.div` `; const NotesLatestHeading = styled.h2` font-weight: 900; - grid-column: 2 / 17; - grid-row: 1 / 2; - padding: 1.875em 0 1em 0; + margin: 0; + padding: 0; position: relative; @media screen and (min-width: 48em) { font-size: var(--font-size-large); - padding: 1.875em 0; } @media screen and (min-width: 64em) { - padding: 0.938em 0; font-size: var(--font-size-x-large); - grid-column: 5 / 16; } @media screen and (min-width: 75em) { - grid-column: 6 / 15; } @media screen and (min-width: 90em) { font-size: var(--font-size-xx-large); @@ -64,76 +57,39 @@ const LatestIcon = styled.span` right: -45px; } `; -const NotesLatestContent = styled.div` - grid-column: 11 / 18; - grid-row: 2 / 3; - @media screen and (min-width: 48em) { - padding-bottom: 2.5em; - } - @media screen and (min-width: 64em) { - padding: 1.563em 0; - /* padding:4.688em 0; */ - } - @media screen and (min-width: 75em) { - padding: 4.688em 0; - } - @media screen and (min-width: 90em) { - grid-column: 11 / 16; - } - p { - margin-bottom: 1.563em; - @media screen and (min-width: 64em) { - font-size: 1.125em; - } - @media screen and (min-width: 93.75em) { - font-size: var(--font-size-medium-alt); - } - } -`; + const BlogImage = styled.div` - grid-column: 1 / 10; - grid-row: 2 / 4; - align-self: end; - @media screen and (min-width: 48em) { - /* padding-bottom: 2.500em; */ - } - @media screen and (min-width: 90em) { - grid-column: 2 / 10; - } - img { - /* width: 90% !important; - max-width: 90% !important; */ - align-self: end; - } + /* background: var(--color-dark-grey); */ + background: #4a4a4a; `; -const LatestBlock = props => ( +const LatestBlock = ({note}) => ( <> - {props.note.map(({node: n}) => ( - + {note.map(({node: n}) => ( + + - Latest + {/* Latest */} {n.title} - -

{n.description}

- - - - - - - - + + ))} ); +LatestBlock.propTypes = { + note: PropTypes.shape({ + allMarkdownRemake: PropTypes.shape({ + edges: PropTypes.array, + }), + }), +}; export default LatestBlock; diff --git a/src/pages/notes.js b/src/pages/notes.js index ec186df..f8c04c6 100644 --- a/src/pages/notes.js +++ b/src/pages/notes.js @@ -1,19 +1,15 @@ import React from 'react'; import PropTypes from 'prop-types'; import {graphql} from 'gatsby'; -// import styled from 'styled-components' import TitleAndMetas from '../components/Layout/TitleAndMetas'; import Layout from '../components/Layout'; import SubMast from '../components/Shared/SubMast'; -import LatestBlock from '../components/Specifics/Notes/LatestBlock'; -// import ListPosts from '../components/Shared/ListPostsSquareOffset' +import ListNotes from '../components/Shared/ListNotes'; // import AllCategories from '../components/Shared/ListCategories' -import PreviousPosts from '../components/Shared/PreviousPosts'; const NotesIndexPage = ({data}) => { const page = 'sub'; - const {edges: notesLatest} = data.latest; - const notesPrevious = data.allNotes; + const {allNotes} = data; // const {group: getTags } = data.allTags return ( <> @@ -26,28 +22,24 @@ const NotesIndexPage = ({data}) => { - - {/* */} - - {/* - - */} + {/* */} ); }; NotesIndexPage.propTypes = { - page: PropTypes.string, data: PropTypes.shape({ - allMarkdownRemake: PropTypes.shape({ + allNotes: PropTypes.shape({ edges: PropTypes.array, + totalCount: PropTypes.number, }), }), }; @@ -55,33 +47,6 @@ export default NotesIndexPage; export const query = graphql` query { - latest: allSanityNote( - limit: 1 - sort: {fields: [publishedAt], order: DESC} - filter: {slug: {current: {ne: null}}} - ) { - totalCount - edges { - node { - id - title - _createdAt(formatString: "DD.MM.YYYY") - description - slug { - _type - current - } - mainImage { - asset { - fluid(maxHeight: 450) { - ...GatsbySanityImageFluid - } - } - } - } - } - } - allNotes: allSanityNote( sort: {fields: [publishedAt], order: DESC} filter: {slug: {current: {ne: null}}}