Merge pull request #8 from 19pdh/develop

Posts & ranking

7 files changed, 278 insertions, 6 deletions

diff --git a/components/ChroniclePost.vue b/components/ChroniclePost.vue
new file mode 100644
index 0000000..7b2c527
--- /dev/null
+++ b/components/ChroniclePost.vue
@@ -0,0 +1,60 @@
+<template>
+  <a :href="route" class="post">
+    <div>
+      <h4 class="post-title">{{title}}</h4>
+      <p class="post-description">{{shortenedDescription}}...</p>
+    </div>
+  </a>
+</template>
+
+<script>
+export default {
+  name: 'ChroniclePost',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    route: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    shortenedDescription() {
+      const first30Words = this.description.split(' ').slice(0, 30)
+      return first30Words.join(' ')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.post {
+  margin: 20px;
+  flex-basis: 410px;
+  text-decoration: none;
+}
+
+.post > div {
+  background: #ffffff;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
+  padding: 20px;
+
+  text-align: left;
+}
+
+.post-title {
+  color: #181818;
+  font-size: 1.3em;
+}
+
+.post-description {
+  color: #484848;
+  font-size: 0.9em;
+}
+</style>
\ No newline at end of file
diff --git a/components/NavBar.vue b/components/NavBar.vue
index e564fb0..4bbae72 100644
--- a/components/NavBar.vue
+++ b/components/NavBar.vue
@@ -8,14 +8,21 @@
     <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 routes" :key="route.path" :link="route.path" :name="route.name" />
+      <NavLink
+        v-for="route in staticRoutes"
+        :key="route.path"
+        :link="route.path"
+        :name="route.name"
+        pure
+      />
       <NavLink
         v-for="route in externalRoutes"
         :key="route.path"
         :link="route.path"
         :name="route.name"
-        :external="true"
-      ></NavLink>
+        external
+      />
     </ul>
   </nav>
 </template>
@@ -30,6 +37,7 @@ export default {
   props: {
     routes: Array,
     externalRoutes: Array,
+    staticRoutes: Array,
     title: String,
     logo: String
   },
@@ -161,10 +169,10 @@ export default {
     display: flex !important;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
+    align-items: flex-start;
 
     margin-bottom: 0;
-    padding: 50px 0;
+    padding: 50px 10px;
 
     width: 100%;
     left: 0;
diff --git a/components/NavLink.vue b/components/NavLink.vue
index 253dde9..bb86ef8 100644
--- a/components/NavLink.vue
+++ b/components/NavLink.vue
@@ -1,6 +1,7 @@
 <template>
   <li class="navlink">
     <a v-if="external" class="link" target="_blank" rel="”noopener”" :href="link">{{ name }}</a>
+    <a v-else-if="pure" class="link" :href="link">{{ name }}</a>
     <nuxt-link v-else class="link" :to="link">{{ name }}</nuxt-link>
   </li>
 </template>
@@ -10,7 +11,8 @@ export default {
   props: {
     link: String,
     name: String,
-    external: { type: Boolean, default: false }
+    external: { type: Boolean, default: false },
+    pure: { type: Boolean, default: false }
   }
 }
 </script>
@@ -22,6 +24,7 @@ export default {
   font-family: 'Roboto Slab', serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-weight: bold;
 
   text-decoration: none;
   color: #181818;
@@ -45,6 +48,12 @@ export default {
   background-color: #ececec !important;
 }
 
+@media (min-width: 900px) {
+  .link {
+    font-weight: normal;
+  }
+}
+
 @media (max-width: 1300px) {
   .navlink {
     margin: 0;
diff --git a/components/Ranking/RankingEntry.vue b/components/Ranking/RankingEntry.vue
new file mode 100644
index 0000000..79746eb
--- /dev/null
+++ b/components/Ranking/RankingEntry.vue
@@ -0,0 +1,52 @@
+<template>
+  <li class="ranking-entry">
+    <div class="ranking-entry__troop">{{ troop }}</div>
+    <div class="ranking-entry__points">{{ points }}</div>
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'RankingEntry',
+  props: {
+    troop: {
+      type: String,
+      required: true
+    },
+    points: {
+      type: Number,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.ranking-entry {
+  min-width: 200px;
+  list-style: none;
+
+  margin: 5px;
+  padding: 10px 20px;
+
+  border: 2px solid #efefef;
+
+  display: grid;
+  grid-template-columns: 0% 75% 25%;
+
+  font-size: 20px;
+}
+
+.ranking-entry div {
+  display: inline-block;
+}
+
+.ranking-entry__troop {
+  text-align: left;
+  grid-column: 2;
+}
+
+.ranking-entry__points {
+  grid-column: 3;
+}
+</style>
diff --git a/components/Ranking/RankingFirstEntry.vue b/components/Ranking/RankingFirstEntry.vue
new file mode 100644
index 0000000..d9f290b
--- /dev/null
+++ b/components/Ranking/RankingFirstEntry.vue
@@ -0,0 +1,52 @@
+<template>
+  <li class="ranking-first-entry">
+    <img class="crown" src="/assets/crown.svg" />
+    <div class="ranking-first-entry__troop">{{ troop }}</div>
+    <div class="ranking-first-entry__points">{{ points }}</div>
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'RankingFirstEntry',
+  props: {
+    troop: {
+      type: String,
+      required: true
+    },
+    points: {
+      type: Number,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.ranking-first-entry {
+  list-style: none;
+  padding: 10px 20px;
+  margin: 10px;
+  width: 100%;
+
+  display: grid;
+  grid-template-columns: 15% 60% 25%;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
+
+  line-height: 50px;
+  font-size: 26px;
+  font-weight: 600;
+}
+
+.crown {
+  margin: auto;
+}
+
+.ranking-first-entry__troop {
+  grid-column: 2;
+}
+
+.ranking-first-entry__points {
+  grid-column: 3;
+}
+</style>
diff --git a/components/Ranking/RankingList.vue b/components/Ranking/RankingList.vue
new file mode 100644
index 0000000..ce700ab
--- /dev/null
+++ b/components/Ranking/RankingList.vue
@@ -0,0 +1,57 @@
+<template>
+  <ol class="ranking-list">
+    <ranking-first-entry
+      :troop="sortedScores[0].troop"
+      :points="sortedScores[0].points"
+    />
+    <ranking-entry
+      v-for="score in sortedScores.slice(1)"
+      :key="score.troop"
+      :troop="score.troop"
+      :points="score.points"
+    />
+  </ol>
+</template>
+
+<script>
+import RankingFirstEntry from './RankingFirstEntry'
+import RankingEntry from './RankingEntry'
+
+function compare(a, b) {
+  return b.points - a.points
+}
+
+export default {
+  name: 'RankingList',
+  components: {
+    RankingEntry,
+    RankingFirstEntry
+  },
+  props: {
+    scores: {
+      type: Array, //i.e. [{troop: "Troop 1", points: 12}, {troop: "Troop 2", points: 22}]
+      required: true
+    }
+  },
+  computed: {
+    sortedScores() {
+      return [...this.scores].sort(compare)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.ranking-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 10px;
+  padding: 0;
+  padding-inline-start: 0;
+
+  width: 100%;
+  max-width: 300px;
+  margin: 10px;
+}
+</style>
diff --git a/components/Ranking/RankingRules.vue b/components/Ranking/RankingRules.vue
new file mode 100644
index 0000000..5ae3c74
--- /dev/null
+++ b/components/Ranking/RankingRules.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <h2>Zasady punktacji</h2>
+    <div class="rules" v-html="rules"></div>
+  </div>
+</template>
+
+<script>
+import rules from '~/assets/zasady-punktacji.md'
+
+const md = require('markdown-it')()
+
+export default {
+  name: 'RankingRules',
+  data() {
+    return {
+      rules: md.render(rules)
+    }
+  }
+}
+</script>
+
+<style>
+.rules table {
+  border-collapse: collapse;
+  margin: 20px 10px;
+}
+
+.rules th,
+.rules td {
+  padding: 5px 15px;
+  border: 1px solid #000;
+}
+</style>