diff options
author | Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com> | 2020-01-28 19:42:12 +0100 |
---|---|---|
committer | Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com> | 2020-01-28 19:42:12 +0100 |
commit | 4ffad967152136c69f1ef904dcfb02270a7e57a1 (patch) | |
tree | 567077e1a50d4e46d714b55b153f4aeb32974663 /components | |
parent | 0ed99e6c969119440b333cc961f4c312ee62731b (diff) | |
parent | 5305c18b05803bf0d032027e645c71ac59627621 (diff) | |
download | puszcza-4ffad967152136c69f1ef904dcfb02270a7e57a1.tar.gz puszcza-4ffad967152136c69f1ef904dcfb02270a7e57a1.zip |
Merge remote-tracking branch 'origin/develop' into feature/json-api
Diffstat (limited to 'components')
-rw-r--r-- | components/GoogleDriveLink.vue | 10 | ||||
-rw-r--r-- | components/Posts/PostLink.stories.js | 13 | ||||
-rw-r--r-- | components/Posts/PostLink.vue | 37 | ||||
-rw-r--r-- | components/Posts/PostList/PurePostList.stories.js | 14 | ||||
-rw-r--r-- | components/Posts/PostList/PurePostList.vue | 9 | ||||
-rw-r--r-- | components/Posts/PostList/index.js | 7 | ||||
-rw-r--r-- | components/Posts/PostList/parentMixin.js | 4 |
7 files changed, 64 insertions, 30 deletions
diff --git a/components/GoogleDriveLink.vue b/components/GoogleDriveLink.vue index c54c630..ada6eff 100644 --- a/components/GoogleDriveLink.vue +++ b/components/GoogleDriveLink.vue @@ -6,7 +6,7 @@ <div class="text"> <p v-html="text"></p> </div> - <a :href="link"> + <a :href="link" target="_blank" rel="noopener"> <plain-button text="Przejdź" /> </a> </div> @@ -21,13 +21,13 @@ export default { props: { text: { type: String, - required: true + required: true, }, link: { type: String, - required: true - } - } + required: true, + }, + }, } </script> diff --git a/components/Posts/PostLink.stories.js b/components/Posts/PostLink.stories.js index 9b12c29..5fdfb6f 100644 --- a/components/Posts/PostLink.stories.js +++ b/components/Posts/PostLink.stories.js @@ -7,7 +7,9 @@ export const postLink = { title: 'Test PostLink', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec.', - route: '/kronika/2019/20/11/test' + route: '/kronika/2019/20/11/test', + image: + 'https://images.unsplash.com/photo-1573145881456-0708c72340ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80', } storiesOf('Posts/PostLink', module) @@ -16,6 +18,13 @@ storiesOf('Posts/PostLink', module) return { components: { PostLink }, template: `<post-link :title="title" :description="description" :route="route"/>`, - data: () => postLink + data: () => postLink, + } + }) + .add('with image', () => { + return { + components: { PostLink }, + template: `<post-link :title="title" :description="description" :route="route" :image="image"/>`, + data: () => postLink, } }) diff --git a/components/Posts/PostLink.vue b/components/Posts/PostLink.vue index d3b34fc..0361b80 100644 --- a/components/Posts/PostLink.vue +++ b/components/Posts/PostLink.vue @@ -1,9 +1,12 @@ <template> <div class="post-link"> <nuxt-link :to="route"> - <div class="post-container"> - <h4 class="post-title">{{ title }}</h4> - <p class="post-description">{{ shortenedDescription }}...</p> + <div> + <div class="image" :style="`background-image: url('${image}')`" /> + <div class="post-container"> + <h4 class="post-title">{{ title }}</h4> + <p class="post-description">{{ shortenedDescription }}...</p> + </div> </div> </nuxt-link> </div> @@ -15,23 +18,28 @@ export default { props: { title: { type: String, - required: true + required: true, }, description: { type: String, - default: '' + default: '', }, route: { type: String, - required: true - } + required: true, + }, + image: { + type: String, + required: false, + default: () => '/assets/og/default.jpg', + }, }, computed: { shortenedDescription() { const first30Words = this.description.split(' ').slice(0, 30) return first30Words.join(' ') - } - } + }, + }, } </script> @@ -44,7 +52,7 @@ export default { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25); background: #ffffff; text-align: left; - transition: transform 300ms ease-in-out; + transition: all 300ms ease-in-out; } .post-link:hover { @@ -60,6 +68,7 @@ export default { .post-link .post-container { padding: 20px; height: 100%; + padding-top: 0; } .post-link .post-title { @@ -71,4 +80,12 @@ export default { color: #484848; font-size: 0.9em; } + +.post-link .image { + height: 300px; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + box-shadow: inset 0px 0px 100px rgba(0, 0, 0, 0.25); +} </style> diff --git a/components/Posts/PostList/PurePostList.stories.js b/components/Posts/PostList/PurePostList.stories.js index e2c39de..a159982 100644 --- a/components/Posts/PostList/PurePostList.stories.js +++ b/components/Posts/PostList/PurePostList.stories.js @@ -4,27 +4,33 @@ import { postLink } from '../PostLink.stories' import PurePostList from './PurePostList' -export const posts = Array(5).fill(postLink) +const postLinkNoImage = { ...postLink } +delete postLinkNoImage['image'] + +export const posts = [ + ...Array(3).fill(postLinkNoImage), + ...Array(5).fill(postLink), +] storiesOf('Posts/PurePostList', module) .add('default', () => { return { components: { PurePostList }, template: `<pure-post-list :posts="posts"/>`, - data: () => ({ posts }) + data: () => ({ posts }), } }) .add('loading', () => { return { components: { PurePostList }, template: `<pure-post-list :posts="posts" loading/>`, - data: () => ({ posts: [] }) + data: () => ({ posts: [] }), } }) .add('no posts', () => { return { components: { PurePostList }, template: `<pure-post-list :posts="posts"/>`, - data: () => ({ posts: [] }) + data: () => ({ posts: [] }), } }) diff --git a/components/Posts/PostList/PurePostList.vue b/components/Posts/PostList/PurePostList.vue index ace069f..c87b9dc 100644 --- a/components/Posts/PostList/PurePostList.vue +++ b/components/Posts/PostList/PurePostList.vue @@ -12,6 +12,7 @@ :route="post.route" :title="post.title" :description="post.description" + :image="post.image" /> </div> </transition> @@ -27,14 +28,14 @@ export default { props: { posts: { type: Array, - required: true + required: true, }, loading: { type: Boolean, required: false, - default: () => false - } - } + default: () => false, + }, + }, } </script> diff --git a/components/Posts/PostList/index.js b/components/Posts/PostList/index.js index 11d44ff..7e0b1f4 100644 --- a/components/Posts/PostList/index.js +++ b/components/Posts/PostList/index.js @@ -12,11 +12,12 @@ export const getPosts = async () => { } } -export const parsePosts = posts => - posts.map(post => ({ +export const parsePosts = (posts) => + posts.map((post) => ({ title: post.content.meta.title, + image: post.content.meta.image, description: post.content.description, - route: post.route + route: post.route, })) export default PostList diff --git a/components/Posts/PostList/parentMixin.js b/components/Posts/PostList/parentMixin.js index e5b06ed..801d51c 100644 --- a/components/Posts/PostList/parentMixin.js +++ b/components/Posts/PostList/parentMixin.js @@ -3,7 +3,7 @@ import { getPosts } from './index' export default { async asyncData() { return { - posts: await getPosts() + posts: await getPosts(), } - } + }, } |