diff options
| -rw-r--r-- | components/Posts/EmptyCampStory.vue | 19 | ||||
| -rw-r--r-- | components/TheHeader.vue | 18 | ||||
| -rw-r--r-- | pages/oboz/2020.vue | 90 | ||||
| -rw-r--r-- | static/_headers | 1 | ||||
| -rw-r--r-- | static/assets/tomahawk.svg | 31 |
5 files changed, 148 insertions, 11 deletions
diff --git a/components/Posts/EmptyCampStory.vue b/components/Posts/EmptyCampStory.vue new file mode 100644 index 0000000..57bea40 --- /dev/null +++ b/components/Posts/EmptyCampStory.vue @@ -0,0 +1,19 @@ +<template> + <div> + <h3 style="margin: 10vh 10vmin 0 10vmin"> + Tutaj niedługo znajdziesz relację z obozu + </h3> + <pure-post-list loading :posts="[]" style="margin-bottom: 30px" /> + </div> +</template> + +<script> +import PurePostList from '~/components/Posts/PostList/PurePostList' + +export default { + name: 'EmptyCampStory', + components: { + PurePostList, + }, +} +</script> diff --git a/components/TheHeader.vue b/components/TheHeader.vue index 4d17616..8724fa7 100644 --- a/components/TheHeader.vue +++ b/components/TheHeader.vue @@ -26,33 +26,33 @@ import NavLink from './NavLink' export default { name: 'TheHeader', components: { - NavLink + NavLink, }, props: { routes: { type: Array, - required: true + required: true, }, title: { type: String, - required: true + required: true, }, logo: { type: String, required: false, - default: () => '' - } + default: () => '', + }, }, data: function() { return { - showMenu: false + showMenu: false, } }, methods: { toggleMenu() { this.showMenu = !this.showMenu - } - } + }, + }, } </script> @@ -83,6 +83,7 @@ export default { } .title { + z-index: 99; font-size: 30px; flex-shrink: 0; @@ -100,6 +101,7 @@ export default { } .links { + z-index: 98; display: flex; flex-direction: row; padding: 0; diff --git a/pages/oboz/2020.vue b/pages/oboz/2020.vue index e80259d..68a00d9 100644 --- a/pages/oboz/2020.vue +++ b/pages/oboz/2020.vue @@ -11,24 +11,76 @@ <h3>7 PDH Watra</h3> </div> </div> - <day-countdown text="Do obozu zostało:" :end-date="new Date(2020, 6, 7)" /> + <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" /> - <h3 style="margin-top: 10vh">Tutaj niedługo znajdziesz relacje z obozu</h3> - <pure-post-list loading :posts="[]" style="margin-bottom: 30px" /> + <div v-if="posts"> + <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, + }, + 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> @@ -105,4 +157,36 @@ h1 { 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> diff --git a/static/_headers b/static/_headers new file mode 100644 index 0000000..cb762ef --- /dev/null +++ b/static/_headers @@ -0,0 +1 @@ +Access-Control-Allow-Origin: * diff --git a/static/assets/tomahawk.svg b/static/assets/tomahawk.svg new file mode 100644 index 0000000..7e49c2c --- /dev/null +++ b/static/assets/tomahawk.svg @@ -0,0 +1,31 @@ +<svg width="79" height="78" viewBox="0 0 79 78" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g filter="url(#filter0_d)"> +<g clip-path="url(#clip0)"> +<path d="M37.9704 13.992C35.399 14.6342 33.8356 17.2408 34.4778 19.8122C35.1225 22.3836 37.7267 23.9471 40.2993 23.3049C42.8709 22.6602 56.8507 16.9502 56.2072 14.3788C55.5648 11.8074 40.5419 13.3497 37.9704 13.992Z" fill="#C44141"/> +<path d="M40.3028 15.1008C37.7442 14.4047 35.1086 15.9142 34.4099 18.4715C33.7136 21.0288 35.2211 23.6659 37.7796 24.362C40.3381 25.0606 55.3247 26.9147 56.021 24.3574C56.7183 21.8001 42.8603 15.797 40.3028 15.1008Z" fill="#F85A5A"/> +<path d="M20.8144 10.5863C22.72 8.74385 25.7603 8.79306 27.6026 10.6988L76.6506 61.3935C78.4931 63.297 78.4426 66.3372 76.5369 68.1793C74.6325 70.0218 71.5933 69.9703 69.751 68.0668H69.7498C69.7498 68.0647 69.7498 68.0647 69.7498 68.0647H69.7485L20.7018 17.3723C18.8594 15.4667 18.9109 12.4289 20.8144 10.5863Z" fill="#764242"/> +<path d="M33.2378 11.9249C33.8518 12.5601 34.8645 12.5766 35.5021 11.9624C36.135 11.3482 36.1538 10.3357 35.5396 9.70039C34.9256 9.06519 33.9129 9.04868 33.2753 9.66288C32.6422 10.2771 32.6236 11.2897 33.2378 11.9249Z" fill="#94A1B1"/> +<path d="M39.9161 18.8283C40.5303 19.4635 41.5441 19.4798 42.1781 18.8658C42.8133 18.2516 42.831 17.2389 42.2169 16.6037C41.6015 15.9685 40.5888 15.952 39.9548 16.5662C39.3193 17.1804 39.3019 18.1931 39.9161 18.8283Z" fill="#94A1B1"/> +<path d="M1.19 34.0177L30.9383 14.1496L35.5397 9.70068L42.2122 16.5992L37.612 21.0482L39.8364 23.3477L30.636 32.2458L18.9863 52.4186C5.07186 47.2358 1.19 34.0177 1.19 34.0177Z" fill="#94A1B1"/> +<path d="M20.458 49.8698L18.9858 52.4175C5.07158 47.2349 1.18987 34.0168 1.18987 34.0168L3.67936 32.355C4.57711 34.8679 8.88308 45.1606 20.458 49.8698Z" fill="#D0D5DB"/> +<path d="M32.9378 30.0231L39.8362 23.3472L28.7462 11.8794L21.8452 18.5529L32.9378 30.0231Z" fill="#D0D5DB"/> +<path d="M29.6749 22.0486C30.2893 22.6838 31.3019 22.7001 31.9394 22.0861C32.5723 21.4719 32.5911 20.457 31.9769 19.8216C31.3627 19.1887 30.35 19.1699 29.7124 19.7841C29.0796 20.4006 29.0607 21.4132 29.6749 22.0486Z" fill="#424953"/> +<path d="M50.9928 39.4672L71.0134 60.1673L73.314 57.9431L53.2923 37.2427L50.9928 39.4672Z" fill="#E8563F"/> +<path d="M46.3927 43.9159L66.4144 64.6162L73.3113 57.9425L53.2908 37.2422L46.3927 43.9159Z" fill="#B36053"/> +</g> +</g> +<defs> +<filter id="filter0_d" x="0.893968" y="0.965332" width="77.402" height="78.2899" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> +<feFlood flood-opacity="0" result="BackgroundImageFix"/> +<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> +<feOffset dy="1.18389"/> +<feGaussianBlur stdDeviation="0.147987"/> +<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/> +<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/> +<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/> +</filter> +<clipPath id="clip0"> +<path d="M78 0.965332H1.18999V77.7753H78V0.965332Z" fill="white"/> +</clipPath> +</defs> +</svg> |
