Move to nuxtjs

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