diff options
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/index.vue | 4 | ||||
| -rw-r--r-- | pages/kronika/_year/_month/_day/_title/index.vue | 30 | ||||
| -rw-r--r-- | pages/oboz/2020.vue | 203 |
3 files changed, 227 insertions, 10 deletions
diff --git a/pages/index.vue b/pages/index.vue index 045025d..8cf6327 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -5,6 +5,7 @@ <h1>Ostatnie wpisy z kroniki</h1> <post-list :posts="posts" :max="4" /> </div> + <oboz-widget /> <facebook-feed /> </div> </template> @@ -13,11 +14,12 @@ import JoinUs from '~/components/JoinUs.vue' import FacebookFeed from '~/components/Facebook/FacebookFeed.vue' import PostList from '~/components/Posts/PostList' +import ObozWidget from '~/components/ObozWidget' import postListParentMixin from '~/components/Posts/PostList/parentMixin' export default { name: 'HomeView', - components: { JoinUs, FacebookFeed, PostList }, + components: { JoinUs, FacebookFeed, PostList, ObozWidget }, mixins: [postListParentMixin] } </script> diff --git a/pages/kronika/_year/_month/_day/_title/index.vue b/pages/kronika/_year/_month/_day/_title/index.vue index 9fab1d0..331ed7a 100644 --- a/pages/kronika/_year/_month/_day/_title/index.vue +++ b/pages/kronika/_year/_month/_day/_title/index.vue @@ -5,6 +5,12 @@ <p>Nie znaleziono wpisu</p> </div> <section v-else class="article"> + <img + v-if="attributes.image" + :src="attributes.image" + :alt="attributes.title" + :title="attributes.title" + /> <article class="content" v-html="content"></article> </section> </div> @@ -22,19 +28,24 @@ export default { { hid: 'og:title', property: 'og:title', - content: this.attributes.title + content: this.attributes.title, }, { hid: 'og:type', property: 'og:type', - content: 'article' + content: 'article', }, { hid: 'og:article:author', property: 'og:article:author', - content: this.attributes.author - } - ] + content: this.attributes.author, + }, + { + hid: 'og:image', + property: 'og:image', + content: this.attributes.image, + }, + ], } }, async asyncData({ params }) { @@ -46,14 +57,14 @@ export default { return { params, attributes: post.content.meta, - content: post.content.html + content: post.content.html, } }, data() { return { - notFound: false + notFound: false, } - } + }, } </script> @@ -69,7 +80,8 @@ export default { } .article img { width: 100%; - border-radius: 5px; + /*border-radius: 5px;*/ + box-shadow: inset 0px 0px 100px rgba(0, 0, 0, 0.25); } .article h1 { diff --git a/pages/oboz/2020.vue b/pages/oboz/2020.vue new file mode 100644 index 0000000..119220d --- /dev/null +++ b/pages/oboz/2020.vue @@ -0,0 +1,203 @@ +<template> + <section class="oboz"> + <div class="header"> + <div class="logo"> + <img style="z-index: 1" src="/assets/2020.svg" alt="" /> + <h1 style="z-index: 9">Obóz 2020</h1> + </div> + <div class="troops"> + <h3>19 PDH Puszcza</h3> + <h3>7 PDH Binduga</h3> + <h3>7 PDH Watra</h3> + </div> + </div> + <day-countdown + v-if="awaiting" + text="Do obozu zostało:" + :end-date="endDate" + /> + <google-drive-link + v-else-if="photos" + text="Zobacz zdjęcia z obozu" + :link="photos" + /> + <camp-map + src="https://maps.google.com/maps?q=Jezioro%20Spore&t=&z=13&ie=UTF8&iwloc=&output=embed" + /> + <div v-if="posts" style="width: 100%"> + <h3 class="story" style="margin: 10vh 10vmin"> + To się działo na obozie + </h3> + <pure-post-list :posts="posts" style="margin-bottom: 30px" /> + </div> + <empty-camp-story v-else /> + </section> +</template> + +<script> +import axios from 'axios' + +import PurePostList from '~/components/Posts/PostList/PurePostList' +import DayCountdown from '~/components/DayCountdown' +import CampMap from '~/components/CampMap' +import EmptyCampStory from '~/components/Posts/EmptyCampStory' +import GoogleDriveLink from '~/components/GoogleDriveLink' + +import { parsePosts } from '~/components/Posts/PostList' + +export default { + components: { + PurePostList, + DayCountdown, + CampMap, + GoogleDriveLink, + EmptyCampStory, + PurePostList, + }, + head() { + return { + meta: [ + { + hid: 'og:title', + property: 'og:title', + content: 'Obóz 2020', + }, + ], + } + }, + async asyncData() { + try { + let posts = await axios.get( + `https://puszcza.netlify.com/api/category/oboz2020.json` + ) + console.log(posts) + return { + posts: parsePosts(posts.data), + } + } catch (err) { + console.log(err) + } + }, + data() { + return { + posts: null, + endDate: new Date(2020, 6, 7), + } + }, + computed: { + days() { + let now = new Date(Date.now()) + return Math.round((this.endDate.getTime() - now.getTime()) / 86400000) + }, + awaiting() { + return this.days > 0 + }, + }, +} +</script> + +<style scoped> +.oboz { + position: relative; +} +.header { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 10vmax 0 5vmax 0; +} + +h1 { + font-size: 3em; + background: black; + color: white; + padding: 0.25em 0.75em; + width: max-content; + margin-top: -4px; +} + +.troops { + display: flex; + flex-direction: row; +} + +.troops h3 { + margin: 10px; +} + +@media (max-width: 480px) { + .troops { + flex-direction: column; + } + + .logo img { + width: 100px; + } + + h1 { + font-size: 2em; + } +} + +.oboz::after { + width: 100px; + height: 200px; + background: url('/assets/feather.svg'); + background-repeat: no-repeat; + background-size: contain; + position: absolute; + bottom: 0; + right: 5%; +} + +@media (min-width: 750px) { + .oboz::after { + content: ''; + } +} + +@media (min-width: 910px) { + .oboz::after { + content: none; + } +} + +@media (min-width: 1210px) { + .oboz::after { + content: ''; + } +} + +.story::before, +.story::after { + content: ''; + background-image: url('/assets/tomahawk.svg'); + background-size: contain; + width: 70px; + height: 70px; + display: block; + top: 30px; + margin: auto; + margin-bottom: 20px; +} + +.story::after { + display: none; + -moz-transform: scaleX(-1); + -o-transform: scaleX(-1); + -webkit-transform: scaleX(-1); + transform: scaleX(-1); + filter: FlipX; + -ms-filter: 'FlipX'; +} + +@media (min-width: 510px) { + .story::before, + .story::after { + display: inline-block; + position: relative; + margin: 0 10px; + } +} +</style> |