From d918d98b17d47491650436d9d4c04615578c8136 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Sun, 15 Oct 2017 02:16:57 +0300 Subject: [PATCH] [www] added ArticleCard on Home --- src/components/ArticleCard.js | 39 +++++++++++++ src/components/ArticleCardList.js | 26 +++++++++ src/render/articles.js | 68 +++++++++++++++++++++++ src/render/home.js | 4 +- src/style/components/ArticleCard.scss | 64 +++++++++++++++++++++ src/style/components/ArticleCardList.scss | 5 ++ src/style/style.scss | 3 + src/style/variables.scss | 13 +++++ 8 files changed, 220 insertions(+), 2 deletions(-) create mode 100644 src/components/ArticleCard.js create mode 100644 src/components/ArticleCardList.js create mode 100644 src/render/articles.js create mode 100644 src/style/components/ArticleCard.scss create mode 100644 src/style/components/ArticleCardList.scss diff --git a/src/components/ArticleCard.js b/src/components/ArticleCard.js new file mode 100644 index 00000000..d0b52fe0 --- /dev/null +++ b/src/components/ArticleCard.js @@ -0,0 +1,39 @@ +const React = require('react') +const dateFormat = require('../lib/date').dateFormat + +const Date = ({children}) => ( +

{dateFormat(children)}

+) + +const Image = ({data, alt}) => ( + + {alt} `${url} ${density}x`)} + /> + +) + +const ArticleCard = ({article}) => ( +
+ +
+ {!article.preview ? null : ( + {article.title}/ + )} +
+ +
+ {article.title} + + {!article.date ? null : ( + {article.date} + )} +
+ +
+) + +module.exports = ArticleCard diff --git a/src/components/ArticleCardList.js b/src/components/ArticleCardList.js new file mode 100644 index 00000000..68c8f310 --- /dev/null +++ b/src/components/ArticleCardList.js @@ -0,0 +1,26 @@ +const React = require('react') +const Paginator = require('./Paginator') +const ArticleCard = require('./ArticleCard') + +const ArticleCardList = ({articles, nextPage, prevPage}) => ( +
+ {!prevPage ? null : ( + + )} + +
+ {articles.map((article, i) => ( + + ))} +
+ + {!nextPage ? null : ( + + )} +
+) + +module.exports = ArticleCardList diff --git a/src/render/articles.js b/src/render/articles.js new file mode 100644 index 00000000..bfd5a658 --- /dev/null +++ b/src/render/articles.js @@ -0,0 +1,68 @@ +const React = require('react') +const Article = require('../core/Article') +const ArticleCardList = require('../components/ArticleCardList') +const timestamp = require('../lib/date').timestamp +const ImageArtifactType = require('../core/ImageArtifactType') +const {sortBy} = require('../utils/sort') + +const sortArticleByDate = sortBy( + x => timestamp(new Date(x.date)) +) + +async function findArticlesNin(nin, skip, limit, sort) { + const query = { + _id: {$nin: nin} + } + + return Article.find(query, { + sort, + skip, + limit, + }) +} + +async function createArticleCardList(page, pageSize) { + const limit = pageSize + const skip = (page - 1) * pageSize + + const pinnedArticles = page === 1 + ? await Article.findPinned() + : [] + + const total = await Article.total() + const totalPages = total / pageSize + + const id = i => i._id + const pinnedIds = pinnedArticles.map(id) + const articles = await findArticlesNin(pinnedIds, skip, limit, {date: -1}) + + const prevPage = page > 1 + ? page - 1 + : null + + const nextPage = page < totalPages + ? page + 1 + : null + + const content = [ + ...pinnedArticles.sort(sortArticleByDate), + ...articles + ] + .map(x => x.plain()) + .map(x => ({ + ...x, + preview: !x.preview ? null : ( + x.preview.getPicture(ImageArtifactType.MEDIUM) + ) + })) + + return ( + + ) +} + +exports.createArticleCardList = createArticleCardList diff --git a/src/render/home.js b/src/render/home.js index 99241d78..d0cdc12a 100644 --- a/src/render/home.js +++ b/src/render/home.js @@ -1,5 +1,5 @@ const React = require('react') -const getArticleListComponent = require('../routes/articles').getArticleListComponent +const {createArticleCardList} = require('../render/articles') const {render} = require('../lib/render') function getMeta(article) { @@ -8,8 +8,8 @@ function getMeta(article) { } } - const articles = await getArticleListComponent(path, 1, pageSize) async function renderHome(path, pageSize) { + const articles = await createArticleCardList(path, 1, pageSize) const Component = (
diff --git a/src/style/components/ArticleCard.scss b/src/style/components/ArticleCard.scss new file mode 100644 index 00000000..255195de --- /dev/null +++ b/src/style/components/ArticleCard.scss @@ -0,0 +1,64 @@ +.ArticleCard { + display: flex; + flex-direction: column; + + margin: .25em; + + border: 1px solid #ccc; + border-radius: 3px; +} + +.ArticleCard-image { + border-radius: 2px 2px 0 0; + + width: 100%; + height: 15em; + + img { + max-width: 30em; + + width: 100%; + height: 15em; + + object-fit: cover; + } +} + +.ArticleCard-body { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + + height: 5em; + + padding: .25em .5em; +} + + +//Styling + +.ArticleCard .date { + color: #ccc; + font-size: small; +} + + +//Animation + +.ArticleCard-image { + overflow: hidden; + + img{ + transition: transform 150ms ease-out; + } +} + +.ArticleCard { + &:hover{ + img{ + transform: scale(1.05); + } + } +} + diff --git a/src/style/components/ArticleCardList.scss b/src/style/components/ArticleCardList.scss new file mode 100644 index 00000000..c77ade41 --- /dev/null +++ b/src/style/components/ArticleCardList.scss @@ -0,0 +1,5 @@ +.ArticleCardList-body { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} diff --git a/src/style/style.scss b/src/style/style.scss index d5aec3b8..a3f84c9a 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -22,6 +22,9 @@ @import "components/page-schedule"; @import "components/page-collective"; +@import "components/ArticleCard"; +@import "components/ArticleCardList"; + @import "main"; @import "body-wrapper"; @import "page"; diff --git a/src/style/variables.scss b/src/style/variables.scss index ca5a0238..45c1793f 100644 --- a/src/style/variables.scss +++ b/src/style/variables.scss @@ -78,6 +78,19 @@ $short-duration: 0.3s; --font-size-h1: 2.0rem; --font-size-h2: 1.3rem; --font-size-h3: 1.1rem; + + //COLOR + --dark-color: $dark-color; + --darker-color: $darker-color; + --light-color: $light-color; + --lighter-color: $lighter-color; + + //MARGINS + --small-margin: $small-margin; + --half-margin: $half-margin; + --single-margin: $single-margin; + --double-margin: $double-margin; + --post-margin: $post-margin; } @media (max-width: $mobile-width) {