diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/FacebookFeed.vue | 25 | ||||
| -rw-r--r-- | components/FacebookFindUsButton.vue | 35 | ||||
| -rw-r--r-- | components/Footer.vue | 119 | ||||
| -rw-r--r-- | components/JoinUs.vue | 73 | ||||
| -rw-r--r-- | components/NavBar.vue | 203 | ||||
| -rw-r--r-- | components/NavLink/NavLink.test.js | 20 | ||||
| -rw-r--r-- | components/NavLink/index.vue | 53 |
7 files changed, 528 insertions, 0 deletions
diff --git a/components/FacebookFeed.vue b/components/FacebookFeed.vue new file mode 100644 index 0000000..9d2d251 --- /dev/null +++ b/components/FacebookFeed.vue @@ -0,0 +1,25 @@ +<template> + <section class="feed"> + <h1>Zobacz co się dzieje!</h1> + <FacebookFindUsButton /> + </section> +</template> + +<script> +import FacebookFindUsButton from "./FacebookFindUsButton.vue"; + +export default { + components: { + FacebookFindUsButton + }, + props: { + pageId: String + } +}; +</script> + +<style scoped> +.feed { + margin: 50px 0; +} +</style> \ No newline at end of file diff --git a/components/FacebookFindUsButton.vue b/components/FacebookFindUsButton.vue new file mode 100644 index 0000000..9a27c11 --- /dev/null +++ b/components/FacebookFindUsButton.vue @@ -0,0 +1,35 @@ +<template> + <a href="https://facebook.com/19pdhpuszcza" target="_blank" rel="noopener"> + <div class="button"> + <img class="image" src="/assets/social/find_us_fb.png" alt="Find us on Facebook" /> + </div> + </a> +</template> + +<style scoped> +.button { + border: 2px solid #c4c4c4; + border-radius: 4px; + + padding: 15px 40px; + margin: 10px; +} + +.button:hover { + background-color: #efefef; +} + +.image { + width: 200px; +} + +@media (max-width: 500px) { + a { + width: 100%; + } + + .image { + width: 150px; + } +} +</style> \ No newline at end of file diff --git a/components/Footer.vue b/components/Footer.vue new file mode 100644 index 0000000..1cdad44 --- /dev/null +++ b/components/Footer.vue @@ -0,0 +1,119 @@ +<template> + <div class="footer" :style="style"> + <div class="map"> + <div class="routes"> + <router-link v-for="route in routes" :key="route.name" :to="route.path">{{route.name}}</router-link> + </div> + <div class="routes"> + <router-link + v-for="route in specialRoutes" + :key="route.name" + :to="route.path" + >{{route.name}}</router-link> + </div> + </div> + <div class="space"></div> + <div class="author"> + <p>19 Poznańska Drużyna Harcerzy Puszcza</p> + <div class="social"> + <a href="https://github.com/19pdh/" target="_blank" rel="”noopener”"> + <img class="icon" src="/assets/social/github.png" alt="Github" /> + </a> + <a href="https://www.facebook.com/19pdhpuszcza/" target="_blank" rel="”noopener”"> + <img class="icon" src="/assets/social/facebook.png" alt="Facebook" /> + </a> + </div> + </div> + </div> +</template> + +<script> +export default { + props: { + routes: Array, + specialRoutes: Array, + color: { + type: String, + default: "#507b34" + } + }, + computed: { + style() { + return `background-color: ${this.color}`; + } + } +}; +</script> + +<style scoped> +.footer { + color: #ffffff; + min-height: 175px; + width: 100%; + + display: flex; + flex-direction: row; + + align-items: center; + justify-content: center; + + padding: 0 15vw; +} + +.map { + display: flex; + flex-direction: row; + + text-align: left; + + /* margin-right: 100px; */ +} + +.map a { + text-decoration: none; + color: #ffffff; + margin: 5px; +} + +.routes { + display: flex; + flex-direction: column; +} + +.icon { + width: 30px; + height: 30px; + + margin: 0 5px; +} + +.space { + flex: 1; + max-width: 500px; +} + +@media (max-width: 900px) { + .footer { + padding: 20px 10vw 20px 10vw; + flex-direction: column; + + justify-content: center; + } + + .map { + text-align: center; + margin-bottom: 10px; + } + + .space { + height: 1px; + width: 100%; + flex: none; + background-color: #ffffff; + } + + .author { + margin-top: 10px; + } +} +</style> \ No newline at end of file diff --git a/components/JoinUs.vue b/components/JoinUs.vue new file mode 100644 index 0000000..f534d22 --- /dev/null +++ b/components/JoinUs.vue @@ -0,0 +1,73 @@ +<template> + <section class="joinus"> + <div class="heading"> + <div class="title"> + <div class="text">Rozpocznij swoją harcerską przygodę!</div> + </div> + <div class="button"> + <router-link to="/kontakt">Dołącz do nas!</router-link> + </div> + </div> + </section> +</template> + +<style scoped> +.joinus { + width: 100%; + + padding: 80px 20%; + + background: #dddddd; + + display: flex; + flex-direction: row; + justify-content: center; +} + +.heading { + width: 900px; + padding: 100px 0; + + display: flex; + flex-direction: column; +} + +.title { + background-color: #340c0e; + color: #ffffff; + + width: 260px; + height: 85px; + margin-bottom: 20px; + + text-align: left; +} + +.title .text { + margin: 0; + padding: 10px; + font-size: 24px; +} + +.button { + background-color: #507b34; + padding: 10px; + max-width: 150px; +} + +.button a { + color: #ffffff; + text-decoration: none; +} + +@media (max-width: 500px) { + .heading { + margin: 0; + align-items: center; + } + + .joinus { + padding: 80px 20px; + } +} +</style> \ No newline at end of file diff --git a/components/NavBar.vue b/components/NavBar.vue new file mode 100644 index 0000000..e9fa1f0 --- /dev/null +++ b/components/NavBar.vue @@ -0,0 +1,203 @@ +<template> + <nav :class="navbarClass"> + <div class="title"> + <img v-if="logo" class="logo" :src="logo" alt="ZHR" /> + <router-link :class="titleClass" to="/">{{ title }}</router-link> + </div> + <div class="space"></div> + <button @click="toggleMenu" class="menu-toggler">Menu</button> + <ul :class="linksClass" @click="toggleMenu"> + <!-- Loop for generating links --> + <NavLink v-for="route in routes" :key="route.path" :link="route.path" :name="route.name"></NavLink> + <NavLink + v-for="route in externalRoutes" + :key="route.path" + :link="route.path" + :name="route.name" + :external="true" + ></NavLink> + </ul> + </nav> +</template> + +<script> +import NavLink from "./NavLink"; + +export default { + components: { + NavLink + }, + props: { + routes: Array, + externalRoutes: Array, + title: String, + logo: String + }, + computed: { + titleClass() { + if (this.logo) { + return "title-name margin"; + } + return "title-name"; + }, + navbarClass() { + if (this.menuCollapsed) { + return "navbar"; + } + return "navbar menu-open"; + }, + linksClass() { + if (this.menuCollapsed) { + return "links"; + } + return "links show"; + } + }, + data: function() { + return { + menuCollapsed: true + }; + }, + methods: { + toggleMenu() { + this.menuCollapsed = !this.menuCollapsed; + }, + linksClick() { + this.toggleMenu(); + } + } +}; +</script> + +<style scoped> +.navbar { + font-family: "Roboto Slab", serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + color: #181818; + + box-sizing: border-box; + width: 100%; + height: 80px; + + background: #ffffff; + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); + + padding: 0 200px 0 200px; + + display: flex; + align-items: center; + justify-content: center; +} + +.space { + flex: 1; + max-width: 500px; +} + +.title { + font-size: 30px; + flex-shrink: 0; + + display: flex; +} + +.title-name { + text-decoration: none; + color: #181818; + padding: 10px; +} + +.title-name.margin { + margin-left: 100px; +} + +.links { + display: flex; + flex-direction: row; + padding: 0; +} + +.logo { + position: absolute; + top: 0; + z-index: 1; +} + +.menu-toggler { + display: none; +} + +@media (max-width: 1300px) { + .navbar { + padding: 0 50px 0 50px; + } +} + +@media (max-width: 900px) { + .navbar.menu-open { + box-shadow: none; + } + + .title { + font-size: 24px; + } + + .links { + position: absolute; + /* width: 100vw; */ + + margin-top: 80px; + + flex-direction: column; + display: none; + } + + .menu-toggler { + display: block; + } + + .links.show { + display: flex !important; + flex-direction: column; + justify-content: center; + align-items: center; + + margin-bottom: 0; + padding: 50px 0; + + width: 100%; + left: 0; + top: 0; + + background: #fff; + } + + .links.show li { + padding: 2vh; + font-size: 30px; + } +} + +@media (max-width: 500px) { + .navbar { + padding: 0 10px 0 10px; + } + + .logo { + width: 65px; + } + + .title-name { + font-size: 20px; + } + + .title-name.margin { + margin-left: 70px; + } + + .links.show { + height: calc(100% - 80px); + } +} +</style> \ No newline at end of file diff --git a/components/NavLink/NavLink.test.js b/components/NavLink/NavLink.test.js new file mode 100644 index 0000000..a5da412 --- /dev/null +++ b/components/NavLink/NavLink.test.js @@ -0,0 +1,20 @@ +import { mount } from '@vue/test-utils'; +import NavLink from './index.vue'; + +describe('NavLink', () => { + // Now mount the component and you have the wrapper + const wrapper = mount(NavLink); + + wrapper.setProps({ link: '/link', name: 'Link' }); + + it('renders the correct markup', () => { + expect(wrapper.html()).toContain(` <li class="navlink"> + <a class="link" href="/link">Link</a> + </li>`); + }); + + // it's also easy to check for the existence of elements + it('has a button', () => { + expect(wrapper.contains('button')).toBe(true); + }); +}); diff --git a/components/NavLink/index.vue b/components/NavLink/index.vue new file mode 100644 index 0000000..8915585 --- /dev/null +++ b/components/NavLink/index.vue @@ -0,0 +1,53 @@ +<template> + <li class="navlink"> + <a v-if="external" class="link" target="_blank" rel="”noopener”" :href="link">{{ name }}</a> + <router-link v-else class="link" :to="link">{{ name }}</router-link> + </li> +</template> + +<script> +export default { + props: { + link: String, + name: String, + external: { type: Boolean, default: false } + } +}; +</script> + +<style scoped> +@import url("https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap"); + +.link { + font-family: "Roboto Slab", serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + text-decoration: none; + color: #181818; + + padding: 10px; + + border-radius: 5px; +} + +.link:hover { + background-color: #cfcfcf; +} + +.navlink { + list-style-type: none; + + margin: 10px; +} + +.router-link-exact-active { + background-color: #ececec !important; +} + +@media (max-width: 1300px) { + .navlink { + margin: 0; + } +} +</style> \ No newline at end of file |