Add beta download

package-lock.json

@@ -904,6 +904,11 @@
         "postcss": "^7.0.0"
       }
     },
+    "@mdi/font": {
+      "version": "3.4.93",
+      "resolved": "https://registry.npmjs.org/@mdi/font/-/font-3.4.93.tgz",
+      "integrity": "sha512-iXNInmV6Xlmq8SA1zvYxp4uUA7/Z3cNgiK+Ps8UmHZNn1FLD6KDgeg0XE5RCraK+9qPWl8jsiBMpmbs+RFxI4Q=="
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -8837,6 +8842,11 @@
         }
       }
     },
+    "moment": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -12979,6 +12989,11 @@
         "vue-style-loader": "^4.1.0"
       }
     },
+    "vue-material-design-icons": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-3.0.0.tgz",
+      "integrity": "sha512-Y9dLUDuU0X3BjdeYjaHaWQ1UX4LMKT1kPIGApVhJmIs+HKY6xf57JLuba82YK+8iRlkJ/QYXbSV9oLrugn6M3w=="
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

package.json

@@ -8,7 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "vue": "^2.6.6"
+    "@mdi/font": "^3.4.93",
+    "moment": "^2.24.0",
+    "vue": "^2.6.6",
+    "vue-material-design-icons": "^3.0.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.1.1",

src/components/HomeDownloadBeta.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="download-beta">
+    <home-download-beta-item
+      v-for="version in versions"
+      :key="version.code"
+      :code="version.code"
+      :released="version.released" />
+  </div>
+</template>
+
+<script>
+import HomeDownloadBetaItem from './HomeDownloadBetaItem.vue';
+
+export default {
+  name: 'home-download-beta',
+  components: {
+    HomeDownloadBetaItem,
+  },
+  computed: {
+    versions() {
+      // return [
+      //   {
+      //     code: '0.7.0',
+      //     released: '2019-02-22T21:14:07Z',
+      //   },
+      //   {
+      //     code: '0.6.9',
+      //     released: '2019-02-15T21:14:07Z',
+      //   },
+      //   {
+      //     code: '0.6.8',
+      //     released: '2019-01-08T21:14:07Z',
+      //   },
+      //   {
+      //     code: '0.7.0',
+      //     released: '2019-02-22T21:14:07Z',
+      //   },
+      //   {
+      //     code: '0.6.9',
+      //     released: '2019-02-15T21:14:07Z',
+      //   },
+      //   {
+      //     code: '0.6.8',
+      //     released: '2019-01-08T21:14:07Z',
+      //   },
+      //   {
+      //     code: '0.7.0',
+      //     released: '2019-02-22T21:14:07Z',
+      //   },
+      //   {
+      //     code: '0.6.9',
+      //     released: '2019-02-15T21:14:07Z',
+      //   },
+      //   {
+      //     code: '0.6.8',
+      //     released: '2019-01-08T21:14:07Z',
+      //   },
+      //   {
+      //     code: '0.7.0',
+      //     released: '2019-02-22T21:14:07Z',
+      //   },
+      //   {
+      //     code: '0.6.9',
+      //     released: '2019-02-15T21:14:07Z',
+      //   },
+      //   {
+      //     code: '0.6.8',
+      //     released: '2019-01-08T21:14:07Z',
+      //   },
+      // ];
+      return null;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .download-beta {
+    overflow: auto;
+    padding-right: 8px;
+
+    &::-webkit-scrollbar-track {
+      border-radius: 4px;
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar {
+      width: 8px;
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      background-color: #aaa;
+    }
+  }
+</style>

src/components/HomeDownloadBetaItem.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="download-beta-item">
+    <div class="code">{{ code }}</div>
+    <div class="released" :title="releasedString">{{ releasedRelativeString }}</div>
+    <div class="buttons">
+      <a class="github-button" href="https://google.com/" target="_blank" title="GitHub">
+        <span class="mdi mdi-github-circle"></span>
+      </a>
+      <a class="download-button" href="https://google.com/" target="_blank" title="Download">
+        <span class="mdi mdi-download"></span>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment';
+
+moment.locale('pl');
+
+export default {
+  name: 'home-download-beta-item',
+  props: {
+    code: {
+      type: String,
+    },
+    released: {
+      type: String,
+    },
+  },
+  computed: {
+    releasedString() {
+      return moment(this.released).format('dddd, D MMM YYYY HH:mm:ss');
+    },
+    releasedRelativeString() {
+      return moment(this.released).fromNow();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .download-beta-item {
+    height: 52px;
+    padding: 8px;
+    padding-left: 8px;
+    display: grid;
+    grid-template-rows: 1fr auto auto 1fr;
+    grid-template-columns: 1fr auto;
+    background-color: #fff;
+    border-radius: 4px;
+    box-shadow:
+      0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+      0px 2px 2px 0px rgba(0, 0, 0, 0.14),
+      0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+
+    &:not(:first-child) {
+      margin-top: 16px;
+    }
+  }
+
+  .code {
+    grid-column: 1;
+    grid-row: 2;
+    color: #D32F2F;
+    font-family: 'Roboto', sans-serif;
+    font-size: 24px;
+  }
+
+  .released {
+    grid-column: 1;
+    grid-row: 3;
+    color: #0009;
+    font-family: 'Roboto', sans-serif;
+    font-size: 14px;
+  }
+
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    grid-column: 2;
+    grid-row: 1/5;
+
+    .github-button, .download-button {
+      font-size: 32px;
+      color: #000;
+      padding: 4px;
+      margin: 6px 4px;
+      display: block;
+    }
+  }
+</style>

src/components/HomeDownloadSection.vue

@@ -0,0 +1,65 @@
+<template>
+  <div id="download">
+    <h2 class="title">Pobieranie</h2>
+    <h3 class="section-name section-name-beta">Beta</h3>
+    <h3 class="section-name section-name-dev">Dev</h3>
+    <home-download-beta />
+  </div>
+</template>
+
+<script>
+import HomeDownloadBeta from './HomeDownloadBeta.vue';
+
+export default {
+  name: 'home-download-section',
+  components: {
+    HomeDownloadBeta,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  #download {
+    height: 100vh;
+    padding: 0 32px;
+    overflow: hidden;
+    background-color: #F6F6F6;
+    display: grid;
+    grid-template-columns: 1fr 32px 1fr;
+    grid-template-rows: auto auto 1fr 64px;
+  }
+
+  .title {
+    font-size: 32px;
+    text-align: center;
+    color: #D32F2F;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    grid-column: 1/4;
+    grid-row: 1;
+  }
+
+  .section-name {
+    font-size: 28px;
+    text-align: center;
+    color: #D32F2F;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 300;
+    margin: 0;
+    grid-row: 2;
+  }
+
+  .section-name-beta {
+    grid-column: 1;
+  }
+
+  .section-name-dev {
+    grid-column: 3;
+  }
+
+  .download-beta {
+    grid-row: 3;
+    grid-column: 1;
+    margin-top: 8px;
+  }
+</style>

src/components/HomeMainHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="home-main-header">
+  <div id="main-header">
     <img class="logo" src="../assets/wulkanowy-full-flat.svg" alt="Wulkanowy" />
     <h3 class="text">
       APLIKACJA UCZNIA I RODZICA<br />
@@ -12,7 +12,7 @@
         target="_blank">
         <img src="../assets/google-play-badge.svg" alt="Pobierz z Google Play" />
       </a>
-      <a class="other-options" href="#home-download-section">
+      <a class="other-options" href="#download">
         INNE OPCJE
       </a>
     </div>
@@ -27,7 +27,7 @@ export default {
 
 
 <style lang="scss" scoped>
-  #home-main-header {
+  #main-header {
     padding-bottom: 48px;
     height: 100vh;
     box-sizing: border-box;

src/components/HomeMainSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="home-main-section">
+  <div id="main">
     <home-main-header />
   </div>
 </template>
@@ -16,8 +16,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  #home-main-section {
+  #main {
-    width: 100vw;
     height: 100vh;
     background:
       linear-gradient(

src/components/HomeView.vue

@@ -1,16 +1,19 @@
 <template>
   <div id="home">
     <home-main-section />
+    <home-download-section />
   </div>
 </template>
 
 <script>
 import HomeMainSection from './HomeMainSection.vue';
+import HomeDownloadSection from './HomeDownloadSection.vue';
 
 export default {
   name: 'home-view',
   components: {
     HomeMainSection,
+    HomeDownloadSection,
   },
 };
 </script>

src/main.js

@@ -1,3 +1,4 @@
+import '@mdi/font/css/materialdesignicons.min.css';
 import Vue from 'vue';
 import App from './App.vue';