diff options
| -rw-r--r-- | components/Posts/PostList/PurePostList.vue | 9 | ||||
| -rw-r--r-- | pages/oboz/2020.vue | 23 |
2 files changed, 30 insertions, 2 deletions
diff --git a/components/Posts/PostList/PurePostList.vue b/components/Posts/PostList/PurePostList.vue index ace069f..2fe98cb 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> @@ -52,6 +52,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/pages/oboz/2020.vue b/pages/oboz/2020.vue index 335a24b..8915bec 100644 --- a/pages/oboz/2020.vue +++ b/pages/oboz/2020.vue @@ -8,6 +8,9 @@ <h3>7 PDH Watra</h3> </div> </div> + <div class="countdown"> + Do obozu zostało: <span>{{ days }} dni</span> + </div> <div class="mapouter"> <div class="gmap_canvas"> <iframe @@ -30,6 +33,13 @@ import PurePostList from '~/components/Posts/PostList/PurePostList' 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) + } } } </script> @@ -40,7 +50,7 @@ export default { flex-direction: column; justify-content: center; align-items: center; - margin: 15vmax 0; + margin: 15vmax 0 5vmax 0; } h1 { @@ -60,6 +70,17 @@ 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; |