diff --git a/src/client/components/Article.js b/src/client/components/Article.js index a3748a74..918bc7c6 100644 --- a/src/client/components/Article.js +++ b/src/client/components/Article.js @@ -8,8 +8,31 @@ export default function (app) { template: template, controllerAs: '$', controller: function ($sce) { - this.message = $sce.trustAsHtml(this.post.post); + //this.message = $sce.trustAsHtml(this.post.post); this.url = `/article/${this.post.id}`; + + const isVertical = ({width, height}) => width < height; + + const temp = document.createElement('div'); + temp.innerHTML = this.post.post; + + const vs = [...temp.querySelectorAll('img')] + .filter(isVertical) + .filter(i => i.parentNode) + .map(i => [i.parentNode, i]) + .map(([container, img]) => { + const url = img.src; + + const elem = document.createElement('div'); + elem.innerHTML = `
+
+ +
`; + + return container.replaceChild(elem, img); + }); + + this.message = $sce.trustAsHtml(temp.innerHTML); } }); }; \ No newline at end of file diff --git a/src/client/main.js b/src/client/main.js new file mode 100644 index 00000000..55a77e41 --- /dev/null +++ b/src/client/main.js @@ -0,0 +1,6 @@ +import ReactDOM from 'react-dom' +import {Copyright} from './components/Copyright' + +ReactDOM.render(, document.querySelector('.body-wrapper')) + +// \ No newline at end of file diff --git a/src/routes/gallery.js b/src/routes/gallery.js index 4d44638b..0b8be74c 100644 --- a/src/routes/gallery.js +++ b/src/routes/gallery.js @@ -45,7 +45,8 @@ function album() { const processAlbum = async album => { album.url = `/album/${album.id}`; - const previewImageId = album.images.length ? album.images[0] : null; + const previewFromImage = imgs => imgs.length ? imgs[0] : null; + const previewImageId = album.preview ? album.preview : previewFromImage(album.images); if (previewImageId) { const image = await c('images').findOne({_id: previewImageId}); album.preview = image.data.medium; diff --git a/src/routes/news.js b/src/routes/news.js index ca55852e..0b9045f1 100644 --- a/src/routes/news.js +++ b/src/routes/news.js @@ -26,11 +26,8 @@ function news() { const limit = parseInt(ctx.query['limit']) || 20; const skip = parseInt(ctx.query['skip']) || 0; - const query = {}; - if (ctx.query.type) query.type = ctx.query.type; - const now = new Date(); - const pinned = skip != 0 ? [] : await c('timeline') + const pinned = skip !== 0 ? [] : await c('timeline') .find({until: {$gte: now}}) .toArray(); @@ -38,18 +35,18 @@ function news() { const pinnedIds = pinned.map(id); let posts = await c('timeline') - .find(query) + .find({ + _id: {$nin: pinnedIds} + }) .sort({date: -1}) .skip(skip) .limit(limit) .toArray(); - ctx.body = [ - ...pinned.sort(sortNewsByDate), - ...posts.filter( - i => !pinnedIds.includes(id(i)) - ) - ]; + ctx.body = [ + ...pinned.sort(sortNewsByDate), + ...posts + ]; } })); } diff --git a/src/style/body-wrapper.scss b/src/style/body-wrapper.scss index a61f0073..a3e1de1c 100644 --- a/src/style/body-wrapper.scss +++ b/src/style/body-wrapper.scss @@ -9,6 +9,24 @@ .body-wrapper__content { margin: 0 auto 0; + + a { + color: $dark-color; + text-decoration: none; + border-bottom: 1px solid lighten($dark-color, 10%); + + &:hover { + border-bottom: 1px solid lighten($dark-color, 25%); + } + + &:active { + border-bottom: 1px solid $dark-color; + } + + &.invisible { + border-bottom: none; + } + } } @media (max-width: $mobile-width) { diff --git a/src/style/components/cloud-page.scss b/src/style/components/cloud-page.scss index e3b49649..967b60ad 100644 --- a/src/style/components/cloud-page.scss +++ b/src/style/components/cloud-page.scss @@ -4,21 +4,6 @@ margin-bottom: $post-margin; &__body{ - - a { - color: $dark-color; - text-decoration: none; - border-bottom: 1px solid lighten($dark-color, 10%); - - &:hover { - border-bottom: 1px solid lighten($dark-color, 25%); - } - - &:active { - border-bottom: 1px solid $dark-color; - } - } - h1{ text-align: center; margin-bottom: $single-margin; diff --git a/src/style/components/navigation.scss b/src/style/components/navigation.scss index de320247..246b9354 100644 --- a/src/style/components/navigation.scss +++ b/src/style/components/navigation.scss @@ -19,6 +19,7 @@ .navigation__right { color: $dark-color; + font-size: $smaller-font-size; margin-right: 1em; z-index: 1000; diff --git a/src/style/page.scss b/src/style/page.scss index 8e2fcda6..eb20c68c 100644 --- a/src/style/page.scss +++ b/src/style/page.scss @@ -1,6 +1,10 @@ .page { width: 100%; + & img{ + width: 100%; + } + &.ng-leave {} &.ng-enter {} } \ No newline at end of file diff --git a/src/style/style.scss b/src/style/style.scss index 9ded95b8..11ff318b 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -27,6 +27,7 @@ @import "page-animation"; @import "main-image"; @import "hudozka-title"; +@import "vertical-image"; @import "schedule-selector"; @import "schedule-mobile"; diff --git a/src/style/vertical-image.scss b/src/style/vertical-image.scss new file mode 100644 index 00000000..98c2f10b --- /dev/null +++ b/src/style/vertical-image.scss @@ -0,0 +1,28 @@ +@import "variables"; + +.vertical-image { + position: relative; + width: 100%; + overflow: hidden; + + & > img { + position: relative; + z-index: 1; + width: 100%; + display: block; + margin: 0 auto; + } + + &__back { + position: absolute; + filter: blur(15px) grayscale(0) opacity(.75); + + top: -50%; + + & > img { + width: 105%; + display: block; + margin: 0 auto; + } + } +} \ No newline at end of file diff --git a/src/templates/main.html b/src/templates/main.html index 23ea8d98..3bda62ee 100644 --- a/src/templates/main.html +++ b/src/templates/main.html @@ -23,12 +23,8 @@ - - - - + + + + + +