diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/CampMap.vue | 36 | ||||
| -rw-r--r-- | components/DayCountdown.vue | 47 | ||||
| -rw-r--r-- | components/JoinUs.vue | 6 | ||||
| -rw-r--r-- | components/ObozWidget.vue | 50 | ||||
| -rw-r--r-- | components/Posts/EmptyCampStory.vue | 19 | ||||
| -rw-r--r-- | components/Posts/PostList/PurePostList.vue | 9 | ||||
| -rw-r--r-- | components/TheHeader.vue | 18 |
7 files changed, 175 insertions, 10 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/components/JoinUs.vue b/components/JoinUs.vue index a219d16..65431fa 100644 --- a/components/JoinUs.vue +++ b/components/JoinUs.vue @@ -21,12 +21,16 @@ export default { </script> <style scoped> +.webp .joinus { + background-image: url('/assets/bg.webp'); +} + .joinus { width: 100%; padding: 80px 20%; - background-image: url('/assets/bg.webp'); + background-image: url('/assets/bg.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; diff --git a/components/ObozWidget.vue b/components/ObozWidget.vue new file mode 100644 index 0000000..084feab --- /dev/null +++ b/components/ObozWidget.vue @@ -0,0 +1,50 @@ +<template> + <section class="oboz-widget"> + <nuxt-link to="/oboz/2020"> + <img src="/assets/oboz.svg" /> + </nuxt-link> + </section> +</template> + +<script> +export default { + name: 'ObozWidget' +} +</script> + +<style scoped> +.webp .oboz-widget { + background-image: url('/assets/oboz.webp'); +} + +.oboz-widget { + width: 100%; + + margin-top: 50px; + padding: 80px 20%; + + background-image: url('/assets/oboz.jpg'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + + display: flex; + flex-direction: row; + justify-content: center; +} + +img { + max-width: 60vmin; + transition: all 1s ease-in-out; +} + +img:hover { + transform: scale(1.1); +} + +@media (max-width: 500px) { + .oboz-widget { + padding: 80px 20px; + } +} +</style> diff --git a/components/Posts/EmptyCampStory.vue b/components/Posts/EmptyCampStory.vue new file mode 100644 index 0000000..b9ecd12 --- /dev/null +++ b/components/Posts/EmptyCampStory.vue @@ -0,0 +1,19 @@ +<template> + <div style="width: 100%"> + <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/Posts/PostList/PurePostList.vue b/components/Posts/PostList/PurePostList.vue index c87b9dc..210973e 100644 --- a/components/Posts/PostList/PurePostList.vue +++ b/components/Posts/PostList/PurePostList.vue @@ -1,6 +1,6 @@ <template> <div class="post-list"> - <div v-if="loading" class="post-list-container"> + <div v-if="loading" class="post-list-container loading"> <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> @@ -53,6 +53,13 @@ export default { justify-content: center; } +@media (max-width: 920px) { + .post-list-container.loading div:nth-child(1), + .post-list-container.loading div:nth-child(2) { + display: none; + } +} + @keyframes loading { 0%, 100% { 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; |