diff options
| -rw-r--r-- | components/CampMap.vue | 36 | ||||
| -rw-r--r-- | components/DayCountdown.vue | 47 | ||||
| -rw-r--r-- | pages/oboz/2020.vue | 54 |
3 files changed, 92 insertions, 45 deletions
diff --git a/components/CampMap.vue b/components/CampMap.vue new file mode 100644 index 0000000..eae1fc0 --- /dev/null +++ b/components/CampMap.vue @@ -0,0 +1,36 @@ +<template> + <div class="mapouter"> + <div class="gmap_canvas"> + <iframe + id="gmap_canvas" + :src="src" + frameborder="0" + scrolling="no" + marginheight="0" + marginwidth="0" + /> + </div> + </div> +</template> + +<script> +export default { + name: 'CampMap', + props: { + src: { + type: String, + required: true, + }, + }, +} +</script> + +<style> +.mapouter, +.gmap_canvas, +#gmap_canvas { + width: 100%; + height: 50vh; + max-height: 300px; +} +</style> diff --git a/components/DayCountdown.vue b/components/DayCountdown.vue new file mode 100644 index 0000000..9415917 --- /dev/null +++ b/components/DayCountdown.vue @@ -0,0 +1,47 @@ +<template> + <client-only> + <div class="countdown"> + {{ text }} <span>{{ days }} dni</span> + </div> + </client-only> +</template> + +<script> +export default { + name: 'DayCountdown', + props: { + text: { + type: String, + required: true, + }, + endDate: { + type: Date, + required: true, + }, + startDate: { + type: Date, + default: () => new Date(Date.now()), + }, + }, + computed: { + days() { + return Math.round( + (this.endDate.getTime() - this.startDate.getTime()) / 86400000 + ) + }, + }, +} +</script> + +<style> +.countdown { + background: #ffffff; + box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2); + padding: 20px; + margin: 50px 10px; +} + +.countdown span { + font-weight: 600; +} +</style> diff --git a/pages/oboz/2020.vue b/pages/oboz/2020.vue index af9b3d4..e80259d 100644 --- a/pages/oboz/2020.vue +++ b/pages/oboz/2020.vue @@ -11,41 +11,24 @@ <h3>7 PDH Watra</h3> </div> </div> - <no-ssr> - <div class="countdown"> - Do obozu zostało: <span>{{ days }} dni</span> - </div> - </no-ssr> - <div class="mapouter"> - <div class="gmap_canvas"> - <iframe - id="gmap_canvas" - src="https://maps.google.com/maps?q=Jezioro%20Spore&t=&z=13&ie=UTF8&iwloc=&output=embed" - frameborder="0" - scrolling="no" - marginheight="0" - marginwidth="0" - /> - </div> - </div> + <day-countdown text="Do obozu zostało:" :end-date="new Date(2020, 6, 7)" /> + <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="[]" /> - <span class="fether" /> + <pure-post-list loading :posts="[]" style="margin-bottom: 30px" /> </section> </template> <script> import PurePostList from '~/components/Posts/PostList/PurePostList' +import DayCountdown from '~/components/DayCountdown' +import CampMap from '~/components/CampMap' export default { components: { PurePostList, - }, - computed: { - days() { - let now = new Date(Date.now()) - let oboz = new Date(2020, 7, 6) - return Math.round((oboz.getTime() - now.getTime()) / 86400000) - 30 - }, + DayCountdown, + CampMap, }, } </script> @@ -80,17 +63,6 @@ h1 { margin: 10px; } -.countdown { - background: #ffffff; - box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2); - padding: 20px; - margin: 50px 10px; -} - -.countdown span { - font-weight: 600; -} - @media (max-width: 480px) { .troops { flex-direction: column; @@ -105,14 +77,6 @@ h1 { } } -.mapouter, -.gmap_canvas, -#gmap_canvas { - width: 100%; - height: 50vh; - max-height: 300px; -} - .oboz::after { width: 100px; height: 200px; |