From 39ce95746f033e80d555cc09d39491f9c24c3235 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Mon, 23 Oct 2017 23:15:36 +0300 Subject: [PATCH] [www] Collective/Person pages updated --- src/components/CollectiveImage.js | 9 ++ src/components/Image.js | 12 ++ src/components/TeacherCard.js | 37 ++++++ src/components/TeacherProfile.js | 11 -- src/core/Config.js | 1 + src/core/Image.js | 14 ++- src/core/ImageArtifactType.js | 3 +- src/core/Teacher.js | 2 +- src/render/persons.js | 107 ++++++++++++++++++ src/routes/teachers.js | 80 ++----------- src/style/components/CollectiveImage.scss | 3 + ...teacher-proifile.scss => TeacherCard.scss} | 40 ++----- src/style/hmenu.scss | 1 - src/style/style.scss | 3 +- 14 files changed, 200 insertions(+), 123 deletions(-) create mode 100644 src/components/CollectiveImage.js create mode 100644 src/components/Image.js create mode 100644 src/components/TeacherCard.js create mode 100644 src/render/persons.js create mode 100644 src/style/components/CollectiveImage.scss rename src/style/components/{teacher-proifile.scss => TeacherCard.scss} (50%) diff --git a/src/components/CollectiveImage.js b/src/components/CollectiveImage.js new file mode 100644 index 00000000..c29b8077 --- /dev/null +++ b/src/components/CollectiveImage.js @@ -0,0 +1,9 @@ +const React = require('react') + +module.exports = ({data}) => ( + +) diff --git a/src/components/Image.js b/src/components/Image.js new file mode 100644 index 00000000..f2b71b24 --- /dev/null +++ b/src/components/Image.js @@ -0,0 +1,12 @@ +const React = require('react') + +module.exports = ({data, alt, opa = true}) => ( + + {alt} `${url} ${density}x`)} + /> + +) diff --git a/src/components/TeacherCard.js b/src/components/TeacherCard.js new file mode 100644 index 00000000..7a9ce22a --- /dev/null +++ b/src/components/TeacherCard.js @@ -0,0 +1,37 @@ +const React = require('react') +const Image = require('./Image') + +const Head = ({url, children}) => ( +

+ {children} +

+) + +const Info = ({children}) => ( +
+
+ {children} +
+
+) + +module.exports = ({picture, name, url, profile}) => ( +
+
+ +
+ +
+ + {name[0]} {name[1]} {name[2]} + + + +

{profile.position}

+

{profile.status}

+

Образование: {profile.edu}

+

Диплом: {profile.diploma}

+ +
+
+) diff --git a/src/components/TeacherProfile.js b/src/components/TeacherProfile.js index 9080847c..41e6304b 100644 --- a/src/components/TeacherProfile.js +++ b/src/components/TeacherProfile.js @@ -15,17 +15,6 @@ const TeacherProfile = ({picture, name, url, profile, biography, shareable}) =>
- - {name[0]} {name[1]} {name[2]} - - -
-

{profile.position}

-

{profile.status}

-

Образование: {profile.edu}

-

Диплом: {profile.diploma}

-
-
{getHtml(biography)}
diff --git a/src/core/Config.js b/src/core/Config.js index 39b07c80..64f3352d 100644 --- a/src/core/Config.js +++ b/src/core/Config.js @@ -24,6 +24,7 @@ class Config { this.articlesPerPage = data.articlesPerPage || 5 this.collectiveOrder = data.collectiveOrder || [] this.articleCardDefaultPreview = data.articleCardDefaultPreview + this.collectiveImage = data.collectiveImage this.redirect = new Map(Object .entries(data.redirect) diff --git a/src/core/Image.js b/src/core/Image.js index 1fa0965c..dc096a3f 100644 --- a/src/core/Image.js +++ b/src/core/Image.js @@ -47,16 +47,18 @@ class Image { const a = this.getArtifact(size) const a2 = this.getArtifact(retinaSize) + const srcset = !a2 + ? null + : [{ + url: a2.url, + density: ImageArtifactType.RETINA_DENSITY, + }] + return { src: a.url, width: a.width, height: a.height, - set: [ - { - url: a2.url, - density: ImageArtifactType.RETINA_DENSITY, - } - ] + set: srcset, } } } diff --git a/src/core/ImageArtifactType.js b/src/core/ImageArtifactType.js index 5a8722c4..9c85b01f 100644 --- a/src/core/ImageArtifactType.js +++ b/src/core/ImageArtifactType.js @@ -7,7 +7,8 @@ class ImageArtifactType { ImageArtifactType.SMALL = 'small' ImageArtifactType.MEDIUM = 'medium' ImageArtifactType.BIG = 'big' -ImageArtifactType.ORIGIN = 'origin' +ImageArtifactType.ORIGIN = 'original' +ImageArtifactType.ORIGINAL = 'original' ImageArtifactType.FACEBOOK = 'fb' diff --git a/src/core/Teacher.js b/src/core/Teacher.js index cdb5b652..bcc09306 100644 --- a/src/core/Teacher.js +++ b/src/core/Teacher.js @@ -20,7 +20,7 @@ class Teacher { constructor(data) { this.id = data.id - this.biography = data.biography + this.post = data.post this.file = data.file this.edu = data.edu this.picture = data.picture diff --git a/src/render/persons.js b/src/render/persons.js new file mode 100644 index 00000000..52ee7f01 --- /dev/null +++ b/src/render/persons.js @@ -0,0 +1,107 @@ +const React = require('react') +const Picture = require('../components/Image') +const CollectiveImage = require('../components/CollectiveImage') +const Page = require('../components/Page') +const TeacherCard = require('../components/TeacherCard') +const {render} = require('../lib/render') +const timestamp = require('../lib/date').timestamp +const ImageArtifactType = require('../core/ImageArtifactType') +const Teacher = require('../core/Teacher') +const Image = require('../core/Image') +const Config = require('../core/Config') +const {sortBy} = require('../utils/sort') +const {prioritySort} = require('../lib/sort') + +function getMeta(teacher) { + return { + title: teacher.name, + description: teacher.name, + } +} + +function getCollectiveMeta() { + return { + title: 'Преподаватели', + description: 'Преподаватели Шлиссельбургской ДХШ', + } +} + +// function getMeta(article) { +// const types = [ +// ImageArtifactType.FACEBOOK, +// ImageArtifactType.MEDIUM, +// ImageArtifactType.BIG, +// ImageArtifactType.ORIGIN, +// ] +// const meta = { +// title: article.title, +// } +// +// if (article.preview) { +// try { +// const artifact = article.preview.findArtifact(types) +// meta.image = artifact.url +// meta.imageWidth = artifact.width +// meta.imageHeight = artifact.height +// } catch (error) { +// meta.image = 'https://art.shlisselburg.org/entrance.jpg' +// meta.imageWidth = 1200 +// meta.imageHeight = 630 +// } +// } +// return meta +// } + +async function renderPerson(id) { + const teacher = await Teacher.findById(id) + if (!teacher) return null + + const Component = ( +
+ {teacher.post} +
+ ) + + return render(teacher.url, Component, getMeta(teacher), {commentsEnabled: true, menuPadding: true}) +} + +const profilePicture = profile => profile.picture.getPicture(ImageArtifactType.BIG) + +async function renderCollective(path, order) { + const config = await Config.findConfig() + if (!config) return null + + const preview = await Image.findByFile(config.collectiveImage) + if (!preview) return null + + let teachers = await Teacher.find({}) + if (!teachers) return null + + const teachersSorted = prioritySort.bind(null, [...order], t => t.id) + teachers = teachersSorted(teachers) + + const image = preview.getPicture(ImageArtifactType.ORIGINAL) + + const Component = ( +
+ + +
+ {teachers.map((teacher, index) => ( + + ))} +
+
+ ) + + return render(path, Component, getCollectiveMeta()) +} + +exports.renderPerson = renderPerson +exports.renderCollective = renderCollective diff --git a/src/routes/teachers.js b/src/routes/teachers.js index 394f3c44..c25b81fd 100644 --- a/src/routes/teachers.js +++ b/src/routes/teachers.js @@ -1,69 +1,15 @@ -const React = require('react') -const Article = require('../components/Article') -const TeacherProfile = require('../components/TeacherProfile') -const Teacher = require('../core/Teacher') -const ImageArtifactType = require('../core/ImageArtifactType') -const {render} = require('../lib/render') -const {prioritySort} = require('../lib/sort') const getPathWithNoTrailingSlash = require('../lib/url').getPathWithNoTrailingSlash - +const {renderPerson, renderCollective} = require('../render/persons') const {get} = require('koa-route') -function getCollectiveMeta() { - return { - title: 'Преподаватели', - description: 'Преподаватели Шлиссельбургской ДХШ', - } -} - -function getMeta(teacher) { - return { - title: teacher.name, - description: teacher.name, - } -} - -const pictureTypes = [ - ImageArtifactType.BIG, - ImageArtifactType.MEDIUM, - ImageArtifactType.ORIGIN, -] - -const profilePicture = profile => profile.picture.findArtifact(pictureTypes) - function getCollective(order) { - const teachersSorted = prioritySort.bind(null, order, t => t.id) - return get('/collective', async ctx => { const path = getPathWithNoTrailingSlash(ctx.path) - let teachers = await Teacher.find({}) - - if (teachers) { - teachers = teachersSorted(teachers) - - const Component = ( -
- - -
- {teachers.map((teacher, index) => ( - - ))} -
-
- ) + const body = await renderCollective(path, order) + if (body) { ctx.type = 'text/html' - ctx.body = await render(path, Component, getCollectiveMeta(), {menuPadding: false}) + ctx.body = body } else { ctx.status = 404 } @@ -72,23 +18,11 @@ function getCollective(order) { function getTeacher() { return get('/teacher/:id', async (ctx, id) => { - const path = getPathWithNoTrailingSlash(ctx.path) - const teacher = await Teacher.findById(id) - - if (teacher) { - const Component = ( -
- -
- ) + const body = await renderPerson(id) + if (body) { ctx.type = 'text/html' - ctx.body = await render(path, Component, getMeta(teacher), {commentsEnabled: true}) + ctx.body = body } else { ctx.status = 404 } diff --git a/src/style/components/CollectiveImage.scss b/src/style/components/CollectiveImage.scss new file mode 100644 index 00000000..496deab4 --- /dev/null +++ b/src/style/components/CollectiveImage.scss @@ -0,0 +1,3 @@ +.CollectiveImage { + margin-bottom: var(--double-margin); +} \ No newline at end of file diff --git a/src/style/components/teacher-proifile.scss b/src/style/components/TeacherCard.scss similarity index 50% rename from src/style/components/teacher-proifile.scss rename to src/style/components/TeacherCard.scss index ae4b6d9a..ffbe95dd 100644 --- a/src/style/components/teacher-proifile.scss +++ b/src/style/components/TeacherCard.scss @@ -3,13 +3,13 @@ $picture-width: 30%; $info-width: 100% - $picture-width; -.teacher-profile { +.TeacherCard { display: flex; justify-content: space-between; flex-wrap: wrap; - &__picture { - margin: 0 0 $double-margin; + &-Picture { + margin-bottom: var(--double-margin); width: $picture-width; max-width: 15em; min-width: 12em; @@ -19,47 +19,29 @@ $info-width: 100% - $picture-width; } } - &__info { + &-Info { width: $info-width; - padding-left: $double-margin; - margin: 0 0 $double-margin; + padding-left: var(--double-margin); + margin-bottom: var(--double-margin); box-sizing: border-box; - - h2 { - font-size: $big-font-size; - font-weight: 200; - text-align: left; - - strong { - font-weight: 600; - } - } } - &__position { + &-Position { font-size: $bigger-font-size; } - - &__biography { - margin-top: $double-margin; - - p { - margin-bottom: $single-margin; - } - } } @media (max-width: $mobile-width) { - .teacher-profile { - margin: 0 auto $double-margin; + .TeacherCard { + margin: 0 auto var(--double-margin); - &__picture { + &-Picture { width: 100%; max-width: $mobile-width; } - &__info { + &-Info { width: 100%; padding-left: 0; } diff --git a/src/style/hmenu.scss b/src/style/hmenu.scss index 04d657c0..d866afbf 100644 --- a/src/style/hmenu.scss +++ b/src/style/hmenu.scss @@ -15,7 +15,6 @@ $hmenu-icon-height: 32px; width: 100%; height: 100%; - padding: 0 0 $half-margin; position: relative; diff --git a/src/style/style.scss b/src/style/style.scss index 7d1ad62a..8ac38a70 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -3,7 +3,6 @@ @import "components/document"; @import "components/document-row"; @import "components/documents-container"; -@import "components/teacher-proifile"; @import "components/main-menu"; @import "components/navigation"; @import "components/breadcrumbs"; @@ -23,6 +22,8 @@ @import "components/ArticleCard"; @import "components/ArticleCardList"; +@import "components/CollectiveImage"; +@import "components/TeacherCard"; @import "main"; @import "body-wrapper";