diff options
Diffstat (limited to 'components')
20 files changed, 447 insertions, 71 deletions
diff --git a/components/Buttons/PlainButton.stories.js b/components/Buttons/PlainButton.stories.js new file mode 100644 index 0000000..67a657d --- /dev/null +++ b/components/Buttons/PlainButton.stories.js @@ -0,0 +1,18 @@ +import { storiesOf } from '@storybook/vue' +import { center } from '../../.storybook/decorators' + +import PlainButton from './PlainButton' + +const plainButton = { + text: 'Plain Button' +} + +storiesOf('PlainButton', module) + .addDecorator(center) + .add('default', () => { + return { + components: { PlainButton }, + template: `<plain-button :text="text" />`, + data: () => plainButton + } + }) diff --git a/components/Buttons/PlainButton.vue b/components/Buttons/PlainButton.vue new file mode 100644 index 0000000..6e0cde2 --- /dev/null +++ b/components/Buttons/PlainButton.vue @@ -0,0 +1,30 @@ +<template> + <button class="button" @click="$emit('click')">{{text}}</button> +</template> + +<script> +export default { + name: 'PlainButton', + props: { + text: { + type: String, + required: true + } + } +} +</script> + +<style scoped> +.button { + background-color: #507b34; + padding: 10px; + max-width: 150px; + border: none; + + cursor: pointer; + + color: #ffffff; + text-align: center; + font: 16px 'Roboto Slab'; +} +</style> \ No newline at end of file diff --git a/components/Facebook/FacebookFeed.stories.js b/components/Facebook/FacebookFeed.stories.js new file mode 100644 index 0000000..4eced7f --- /dev/null +++ b/components/Facebook/FacebookFeed.stories.js @@ -0,0 +1,13 @@ +import { storiesOf } from '@storybook/vue' +import { center } from '../../.storybook/decorators' + +import FacebookFeed from './FacebookFeed' + +storiesOf('FacebookFeed', module) + .addDecorator(center) + .add('default', () => { + return { + components: { FacebookFeed }, + template: `<facebook-feed />` + } + }) diff --git a/components/FacebookFeed.vue b/components/Facebook/FacebookFeed.vue index 9d2d251..56172f4 100644 --- a/components/FacebookFeed.vue +++ b/components/Facebook/FacebookFeed.vue @@ -1,12 +1,12 @@ <template> <section class="feed"> <h1>Zobacz co się dzieje!</h1> - <FacebookFindUsButton /> + <facebook-find-us-button /> </section> </template> <script> -import FacebookFindUsButton from "./FacebookFindUsButton.vue"; +import FacebookFindUsButton from './FacebookFindUsButton.vue' export default { components: { @@ -15,11 +15,15 @@ export default { props: { pageId: String } -}; +} </script> <style scoped> .feed { margin: 50px 0; } + +.feed > h1 { + text-align: center; +} </style> \ No newline at end of file diff --git a/components/Facebook/FacebookFindUsButton.stories.js b/components/Facebook/FacebookFindUsButton.stories.js new file mode 100644 index 0000000..e76f8f9 --- /dev/null +++ b/components/Facebook/FacebookFindUsButton.stories.js @@ -0,0 +1,13 @@ +import { storiesOf } from '@storybook/vue' +import { center } from '../../.storybook/decorators' + +import FacebookFindUsButton from './FacebookFindUsButton' + +storiesOf('FacebookFindUsButton', module) + .addDecorator(center) + .add('default', () => { + return { + components: { FacebookFindUsButton }, + template: `<facebook-find-us-button />` + } + }) diff --git a/components/FacebookFindUsButton.vue b/components/Facebook/FacebookFindUsButton.vue index 9a27c11..9a27c11 100644 --- a/components/FacebookFindUsButton.vue +++ b/components/Facebook/FacebookFindUsButton.vue diff --git a/components/JoinUs.stories.js b/components/JoinUs.stories.js new file mode 100644 index 0000000..81bf934 --- /dev/null +++ b/components/JoinUs.stories.js @@ -0,0 +1,16 @@ +import { storiesOf } from '@storybook/vue' +import { center } from '../.storybook/decorators' + +import JoinUs from './JoinUs' + +const joinUs = {} + +storiesOf('JoinUs', module) + .addDecorator(center) + .add('default', () => { + return { + components: { JoinUs }, + template: `<join-us />`, + data: () => joinUs + } + }) diff --git a/components/JoinUs.vue b/components/JoinUs.vue index f534d22..d8bfadf 100644 --- a/components/JoinUs.vue +++ b/components/JoinUs.vue @@ -4,13 +4,22 @@ <div class="title"> <div class="text">Rozpocznij swoją harcerską przygodę!</div> </div> - <div class="button"> - <router-link to="/kontakt">Dołącz do nas!</router-link> - </div> + <plain-button @click="$router.push('/kontakt')" text="Dołącz do nas" /> </div> </section> </template> +<script> +import PlainButton from './Buttons/PlainButton' + +export default { + name: 'JoinUs', + components: { + PlainButton + } +} +</script> + <style scoped> .joinus { width: 100%; @@ -53,10 +62,11 @@ background-color: #507b34; padding: 10px; max-width: 150px; + color: #ffffff; + text-align: center; } .button a { - color: #ffffff; text-decoration: none; } diff --git a/components/NavLink.stories.js b/components/NavLink.stories.js new file mode 100644 index 0000000..44fe6ae --- /dev/null +++ b/components/NavLink.stories.js @@ -0,0 +1,19 @@ +import { storiesOf } from '@storybook/vue' +import { center } from '../.storybook/decorators' + +import NavLink from './NavLink' + +const navLink = { + name: 'Test', + link: '/test' +} + +storiesOf('NavLink', module) + .addDecorator(center) + .add('default', () => { + return { + components: { NavLink }, + template: `<nav-link :name="name" :link="link" />`, + data: () => navLink + } + }) diff --git a/components/NavLink.vue b/components/NavLink.vue index bb86ef8..0418172 100644 --- a/components/NavLink.vue +++ b/components/NavLink.vue @@ -9,10 +9,22 @@ <script> export default { props: { - link: String, - name: String, - external: { type: Boolean, default: false }, - pure: { type: Boolean, default: false } + link: { + type: String, + required: true + }, + name: { + type: String, + required: true + }, + external: { + type: Boolean, + default: false + }, + pure: { + type: Boolean, + default: false + } } } </script> diff --git a/components/PostLink.stories.js b/components/PostLink.stories.js new file mode 100644 index 0000000..a824b35 --- /dev/null +++ b/components/PostLink.stories.js @@ -0,0 +1,21 @@ +import { storiesOf } from '@storybook/vue' +import { center } from '../.storybook/decorators' + +import PostLink from './PostLink' + +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' +} + +storiesOf('PostLink', module) + .addDecorator(center) + .add('default', () => { + return { + components: { PostLink }, + template: `<post-link :title="title" :description="description" :route="route"/>`, + data: () => postLink + } + }) diff --git a/components/ChroniclePost.vue b/components/PostLink.vue index 7b2c527..9ee24b7 100644 --- a/components/ChroniclePost.vue +++ b/components/PostLink.vue @@ -1,15 +1,17 @@ <template> - <a :href="route" class="post"> - <div> - <h4 class="post-title">{{title}}</h4> - <p class="post-description">{{shortenedDescription}}...</p> - </div> - </a> + <div class="post-link"> + <a :href="route"> + <div class="post-container"> + <h4 class="post-title">{{title}}</h4> + <p class="post-description">{{shortenedDescription}}...</p> + </div> + </a> + </div> </template> <script> export default { - name: 'ChroniclePost', + name: 'PostLink', props: { title: { type: String, @@ -34,26 +36,36 @@ export default { </script> <style scoped> -.post { +.post-link { margin: 20px; flex-basis: 410px; + max-width: 410px; + height: 250px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25); + background: #ffffff; + text-align: left; + transition: transform 300ms ease-in-out; +} + +.post-link:hover { + box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); + transform: scale(1.02); +} + +.post-link > a { text-decoration: none; } -.post > div { - background: #ffffff; - box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25); +.post-link .post-container { padding: 20px; - - text-align: left; } -.post-title { +.post-link .post-title { color: #181818; font-size: 1.3em; } -.post-description { +.post-link .post-description { color: #484848; font-size: 0.9em; } diff --git a/components/PostList/PostList.vue b/components/PostList/PostList.vue new file mode 100644 index 0000000..2d1bb2d --- /dev/null +++ b/components/PostList/PostList.vue @@ -0,0 +1,58 @@ +<template> + <pure-post-list v-if="rawPosts" :posts="posts" :loading="loading" /> +</template> + +<script> +import k from '~/api' +import PurePostList from './PurePostList' + +export default { + name: 'PostList', + components: { PurePostList }, + props: { + max: { + type: Number, + required: false + } + }, + async asyncData() { + return { + loading: process.client, + rawPosts: process.client ? undefined : k.getPosts() + } + }, + data() { + return { + loading: true, + rawPosts: [] + } + }, + mounted() { + if (process.client && this.rawPosts === undefined) { + this.loadPostsClient() + } + }, + computed: { + posts() { + if (this.max) { + return this.rawPosts.slice(0, this.max) + } + return this.rawPosts + } + }, + methods: { + async loadPostsClient() { + let posts = await this.$axios.get( + `${window.location.origin}/api/posts.json` + ) + this.rawPosts = posts.data + this.rawPosts = this.rawPosts.map(post => ({ + title: post.content.meta.title, + description: post.content.description, + route: post.route + })) + this.loading = false + } + } +} +</script> diff --git a/components/PostList/PurePostList.stories.js b/components/PostList/PurePostList.stories.js new file mode 100644 index 0000000..3cb07f8 --- /dev/null +++ b/components/PostList/PurePostList.stories.js @@ -0,0 +1,30 @@ +import { storiesOf } from '@storybook/vue' + +import { postLink } from '../PostLink.stories' + +import PurePostList from './PurePostList' + +export const posts = Array(5).fill(postLink) + +storiesOf('PurePostList', module) + .add('default', () => { + return { + components: { PurePostList }, + template: `<pure-post-list :posts="posts"/>`, + data: () => ({ posts }) + } + }) + .add('loading', () => { + return { + components: { PurePostList }, + template: `<pure-post-list :posts="posts" loading/>`, + data: () => ({ posts: [] }) + } + }) + .add('no posts', () => { + return { + components: { PurePostList }, + template: `<pure-post-list :posts="posts"/>`, + data: () => ({ posts: [] }) + } + }) diff --git a/components/PostList/PurePostList.vue b/components/PostList/PurePostList.vue new file mode 100644 index 0000000..07883ad --- /dev/null +++ b/components/PostList/PurePostList.vue @@ -0,0 +1,91 @@ +<template> + <div class="post-list"> + <div v-if="loading" class="post-list-container"> + <div class="loading-post" v-for="(_, index) in 4" :key="index"></div> + </div> + <div v-else-if="!posts" class="no-posts">Brak wpisów</div> + <transition name="fade-in"> + <div v-if="posts && !loading" class="post-list-container"> + <post-link + v-for="(post, index) in posts" + :key="index" + :route="post.route" + :title="post.title" + :description="post.description" + /> + </div> + </transition> + </div> +</template> + +<script> +import PostLink from '../PostLink' + +export default { + name: 'PurePostList', + components: { PostLink }, + props: { + posts: { + type: Array, + required: true + }, + loading: { + type: Boolean, + required: false, + default: () => false + } + } +} +</script> + +<style scoped> +.post-list { + width: 100%; + max-width: 900px; + justify-content: center; + margin: 0 auto; +} + +.post-list-container { + display: flex; + flex-wrap: wrap; + justify-content: initial; +} + +@keyframes loading { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} + +.loading-post { + background: #efefef; + animation: loading 1.5s ease-in-out infinite; + margin: 20px; + flex-basis: 410px; + width: 410px; + height: 250px; + text-align: left; +} + +.no-posts { + text-align: center; +} + +@keyframes fade-in { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +.fade-in-enter-active { + animation: fade-in 0.3s reverse; +} +</style> \ No newline at end of file diff --git a/components/PostList/index.js b/components/PostList/index.js new file mode 100644 index 0000000..dbb515e --- /dev/null +++ b/components/PostList/index.js @@ -0,0 +1,3 @@ +import PostList from './PostList' + +export default PostList diff --git a/components/TheFooter.stories.js b/components/TheFooter.stories.js new file mode 100644 index 0000000..ceb5015 --- /dev/null +++ b/components/TheFooter.stories.js @@ -0,0 +1,29 @@ +import { storiesOf } from '@storybook/vue' +import { action } from '@storybook/addon-actions' + +import TheFooter from './TheFooter' + +export const routes = [ + { path: '/', name: 'Strona główna' }, + { path: '/download', name: 'Do pobrania' }, + { path: '/kontakt', name: 'Kontakt' }, + { path: '/kronika', name: 'Kronika' } +] + +const footer = { + routes +} + +const alwaysBottom = () => ({ + template: `<div style="display:flex;flex-direction:column;min-height:100vh"><div style="flex:1"></div><story/></div>` +}) + +storiesOf('TheFooter', module) + .addDecorator(alwaysBottom) + .add('default', () => { + return { + components: { TheFooter }, + template: `<the-footer :routes="routes" />`, + data: () => footer + } + }) diff --git a/components/Footer.vue b/components/TheFooter.vue index 69ea76a..e19c86a 100644 --- a/components/Footer.vue +++ b/components/TheFooter.vue @@ -25,6 +25,7 @@ <script> export default { + name: 'TheFooter', props: { routes: Array, specialRoutes: Array, diff --git a/components/TheHeader.stories.js b/components/TheHeader.stories.js new file mode 100644 index 0000000..ee320b7 --- /dev/null +++ b/components/TheHeader.stories.js @@ -0,0 +1,24 @@ +import { storiesOf } from '@storybook/vue' +import { routes } from './TheFooter.stories' + +import TheHeader from './TheHeader' + +const header = { + routes, + title: '19 PDH Puszcza', + logo: '/assets/krajka-logo.svg' +} + +const alwaysTop = () => ({ + template: `<div style="display:flex;flex-direction:column;min-height:100vh"><story/><div style="flex:1"></div></div>` +}) + +storiesOf('TheHeader', module) + .addDecorator(alwaysTop) + .add('default', () => { + return { + components: { TheHeader }, + template: `<the-header :routes="routes" :title="title" :logo="logo"/>`, + data: () => header + } + }) diff --git a/components/NavBar.vue b/components/TheHeader.vue index 4bbae72..431b945 100644 --- a/components/NavBar.vue +++ b/components/TheHeader.vue @@ -1,28 +1,14 @@ <template> - <nav :class="navbarClass"> + <nav class="navbar" :class="{'menu-open': isMenuCollapsed}"> <div class="title"> <img v-if="logo" class="logo" :src="logo" alt="ZHR" /> - <nuxt-link :class="titleClass" to="/">{{ title }}</nuxt-link> + <nuxt-link class="title-name" :class="{margin: logo}" to="/">{{ title }}</nuxt-link> </div> <div class="space"></div> <button @click="toggleMenu" class="menu-toggler">Menu</button> - <ul :class="linksClass" @click="toggleMenu"> + <ul class="links" :class="{show: this.isMenuCollapsed}" @click="toggleMenu"> <!-- Loop for generating links --> - <NavLink v-for="route in routes" :key="route.path" :link="route.path" :name="route.name" /> - <NavLink - v-for="route in staticRoutes" - :key="route.path" - :link="route.path" - :name="route.name" - pure - /> - <NavLink - v-for="route in externalRoutes" - :key="route.path" - :link="route.path" - :name="route.name" - external - /> + <nav-link v-for="route in routes" :key="route.path" :link="route.path" :name="route.name" /> </ul> </nav> </template> @@ -31,47 +17,33 @@ import NavLink from './NavLink' export default { + name: 'TheHeader', components: { NavLink }, props: { - routes: Array, - externalRoutes: Array, - staticRoutes: Array, - title: String, - logo: String - }, - computed: { - titleClass() { - if (this.logo) { - return 'title-name margin' - } - return 'title-name' + routes: { + type: Array, + required: true }, - navbarClass() { - if (this.menuCollapsed) { - return 'navbar' - } - return 'navbar menu-open' + title: { + type: String, + required: true }, - linksClass() { - if (this.menuCollapsed) { - return 'links' - } - return 'links show' + logo: { + type: String, + required: false, + default: () => '' } }, data: function() { return { - menuCollapsed: true + isMenuCollapsed: true } }, methods: { toggleMenu() { - this.menuCollapsed = !this.menuCollapsed - }, - linksClick() { - this.toggleMenu() + this.isMenuCollapsed = !this.isMenuCollapsed } } } |