Add download section

package-lock.json

@@ -8036,6 +8036,14 @@
       "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
       "dev": true
     },
+    "json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=",
+      "requires": {
+        "string-convert": "^0.2.0"
+      }
+    },
     "json3": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.2.tgz",
@@ -12274,6 +12282,11 @@
       "integrity": "sha1-2sMECGkMIfPDYwo/86BYd73L1zY=",
       "dev": true
     },
+    "string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c="
+    },
     "string-width": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
@@ -13227,6 +13240,14 @@
       "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-3.0.0.tgz",
       "integrity": "sha512-Y9dLUDuU0X3BjdeYjaHaWQ1UX4LMKT1kPIGApVhJmIs+HKY6xf57JLuba82YK+8iRlkJ/QYXbSV9oLrugn6M3w=="
     },
+    "vue-mq": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vue-mq/-/vue-mq-1.0.1.tgz",
+      "integrity": "sha512-FceZ1tFE0MZ8GroRBKPQWBRy4ZEAa7p5R7cGAzJpGuKPU2AI4ClmE+S6O/yV4jO5271o9tgaUFt7fzUAIf9xOQ==",
+      "requires": {
+        "json2mq": "^0.2.0"
+      }
+    },
     "vue-resource": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/vue-resource/-/vue-resource-1.5.1.tgz",

package.json

@@ -13,6 +13,7 @@
     "vue": "^2.6.6",
     "vue-async-computed": "^3.6.1",
     "vue-material-design-icons": "^3.0.0",
+    "vue-mq": "^1.0.1",
     "vue-resource": "^1.5.1"
   },
   "devDependencies": {

src/components/HomeDownloadBeta.vue

@@ -2,7 +2,7 @@
   <div class="download-beta">
     <home-download-beta-item
       v-for="version in versions"
-      :key="version.code"
+      :key="version.id"
       :code="version.code"
       :released="version.released"
       :github="version.github"
@@ -22,12 +22,12 @@ export default {
   asyncComputed: {
     async versions() {
       const response = await this.$http.get('https://api.github.com/repos/wulkanowy/wulkanowy/releases');
-      console.log(response.body);
       return response.body.map(release => ({
         code: release.tag_name,
         released: release.published_at,
         github: release.html_url,
         download: release.assets[0].browser_download_url,
+        id: release.id,
       }));
       // return [
       //   {
@@ -87,6 +87,7 @@ export default {
 <style lang="scss" scoped>
   .download-beta {
     overflow: auto;
+    padding-left: 8px;
     padding-right: 8px;
 
     &::-webkit-scrollbar-track {

src/components/HomeDownloadBetaItem.vue

@@ -48,7 +48,7 @@ export default {
 
 <style lang="scss" scoped>
   .download-beta-item {
-    height: 52px;
+    height: 56px;
     padding: 8px;
     padding-left: 8px;
     display: grid;
@@ -72,6 +72,7 @@ export default {
     color: #D32F2F;
     font-family: 'Roboto', sans-serif;
     font-size: 24px;
+    margin-bottom: 2px;
   }
 
   .released {
@@ -92,8 +93,9 @@ export default {
       font-size: 32px;
       color: #000;
       padding: 4px;
-      margin: 6px 4px;
+      margin: 4px 4px;
       display: block;
+      align-self: center;
     }
   }
 </style>

src/components/HomeDownloadDev.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="download-dev">
+    <home-download-dev-master
+      v-if="master"
+      :released="master.released"
+      :download="master.download"
+      :build="master.build" />
+    <home-download-dev-item
+      v-for="version in versions"
+      :key="version.id"
+      :title="version.title"
+      :number="version.number"
+      :released="version.released"
+      :github="version.github"
+      :download="version.download"
+      :avatar="version.avatar"
+      :user="version.user"
+      :build="version.build" />
+    <div v-if="versions === null" class="loading">Loading</div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment';
+import HomeDownloadDevItem from './HomeDownloadDevItem.vue';
+import HomeDownloadDevMaster from './HomeDownloadDevMaster.vue';
+
+export default {
+  name: 'home-download-dev',
+  components: {
+    HomeDownloadDevItem,
+    HomeDownloadDevMaster,
+  },
+  asyncComputed: {
+    async master() {
+      const redirectorUrl = 'https://bitrise-redirector.herokuapp.com/v0.1/apps/daeff1893f3c8128/builds/master/artifacts/0/info';
+      const build = await this.$http.get(redirectorUrl);
+      return {
+        released: build.body.finished_at,
+        download: build.body.public_install_page_url,
+        build: build.body.build_number,
+      };
+    },
+    async versions() {
+      const response = await this.$http.get('https://api.github.com/repos/wulkanowy/wulkanowy/pulls?state=open');
+      return (await Promise.all(response.body.map(async (release) => {
+        const redirectorUrl = `https://bitrise-redirector.herokuapp.com/v0.1/apps/daeff1893f3c8128/builds/${release.head.ref}/artifacts/0/info`;
+        const build = await this.$http.get(redirectorUrl);
+        return {
+          title: release.title,
+          number: release.number,
+          released: build.body.finished_at,
+          github: release.html_url,
+          download: build.body.public_install_page_url,
+          build: build.body.build_number,
+          avatar: release.user.avatar_url,
+          user: release.user.login,
+          id: release.id,
+        };
+      }))).sort((a, b) => {
+        if (moment(a.released).isBefore(b.released)) return 1;
+        if (moment(a.released).isAfter(b.released)) return -1;
+        return 0;
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .download-dev {
+    overflow: auto;
+    padding-left: 8px;
+    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;
+    }
+  }
+
+  .loading {
+    text-align: center;
+    margin-top: 16px;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 300;
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 24px;
+  }
+</style>

src/components/HomeDownloadDevItem.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="download-dev-item">
+    <div class="title">{{ title }} <span class="number">#{{ number }}</span></div>
+    <div class="subheader">
+      <span class="build-number">{{ build }}</span>
+      <span class="released" :title="releasedString">{{ releasedRelativeString }}</span>
+      <img class="avatar" :src="avatar" />
+      <span class="user">{{ user }}</span>
+    </div>
+    <div class="buttons">
+      <a class="github-button" :href="github" target="_blank" title="GitHub">
+        <span class="mdi mdi-github-circle"></span>
+      </a>
+      <a class="download-button" :href="download" 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-dev-item',
+  props: {
+    title: {
+      type: String,
+    },
+    released: {
+      type: String,
+    },
+    number: {
+      type: Number,
+    },
+    build: {
+      type: Number,
+    },
+    github: {
+      type: String,
+    },
+    download: {
+      type: String,
+    },
+    avatar: {
+      type: String,
+    },
+    user: {
+      type: String,
+    },
+  },
+  computed: {
+    releasedString() {
+      return moment(this.released).format('dddd, D MMM YYYY HH:mm:ss');
+    },
+    releasedRelativeString() {
+      const string = moment(this.released).fromNow();
+      return string.charAt(0).toUpperCase() + string.slice(1);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .download-dev-item {
+    min-height: 56px;
+    padding: 8px;
+    padding-left: 16px;
+    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);
+    margin-top: 16px;
+  }
+
+  .title {
+    grid-column: 1;
+    grid-row: 2;
+    color: #D32F2F;
+    font-family: 'Roboto', sans-serif;
+    font-size: 20px;
+    margin-bottom: 8px;
+    line-height: 24px;
+
+    .number {
+      color: #0009;
+      font-weight: 300;
+    }
+  }
+
+  .subheader {
+    grid-column: 1;
+    grid-row: 3;
+    font-family: 'Roboto', sans-serif;
+    font-size: 14px;
+    line-height: 16px;
+    display: flex;
+    flex-direction: row;
+
+    .build-number {
+      color: #0009;
+    }
+
+    .released {
+      margin-left: 4px;
+      color: #0006;
+    }
+
+    .avatar {
+      width: 16px;
+      height: 16px;
+      margin-left: 8px;
+      border-radius: 2px;
+      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);
+    }
+
+    .user {
+      color: #0009;
+      margin-left: 4px;
+    }
+  }
+
+  .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: 4px 4px;
+      display: block;
+      align-self: center;
+    }
+  }
+</style>

src/components/HomeDownloadDevMaster.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="download-dev-master">
+    <div class="title">Najnowsza stabilna wersja DEV</div>
+    <div class="subheader">
+      <span class="build-number">{{ build }}</span>
+      <span class="released" :title="releasedString">{{ releasedRelativeString }}</span>
+    </div>
+    <div class="buttons">
+      <a class="download-button" :href="download" 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-dev-master',
+  props: {
+    released: {
+      type: String,
+    },
+    build: {
+      type: Number,
+    },
+    download: {
+      type: String,
+    },
+  },
+  computed: {
+    releasedString() {
+      return moment(this.released).format('dddd, D MMM YYYY HH:mm:ss');
+    },
+    releasedRelativeString() {
+      const string = moment(this.released).fromNow();
+      return string.charAt(0).toUpperCase() + string.slice(1);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .download-dev-master {
+    min-height: 56px;
+    padding: 8px;
+    padding-left: 16px;
+    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);
+  }
+
+  .title {
+    grid-column: 1;
+    grid-row: 2;
+    color: #D32F2F;
+    font-family: 'Roboto', sans-serif;
+    font-size: 20px;
+    margin-bottom: 8px;
+    line-height: 24px;
+
+    .number {
+      color: #0009;
+      font-weight: 300;
+    }
+  }
+
+  .subheader {
+    grid-column: 1;
+    grid-row: 3;
+    font-family: 'Roboto', sans-serif;
+    font-size: 14px;
+    line-height: 16px;
+    display: flex;
+    flex-direction: row;
+
+    .build-number {
+      color: #0009;
+    }
+
+    .released {
+      margin-left: 4px;
+      color: #0006;
+    }
+  }
+
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    grid-column: 2;
+    grid-row: 1/5;
+
+    .download-button {
+      font-size: 32px;
+      color: #000;
+      padding: 4px;
+      margin: 4px 4px;
+      display: block;
+      align-self: center;
+    }
+  }
+</style>

src/components/HomeDownloadSection.vue

@@ -1,19 +1,42 @@
 <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 />
+    <home-download-version-switcher v-if="$mq === 'md'" :activeSection="activeSection" />
+    <h3 class="section-name section-name-beta" v-if="$mq === 'lg'">BETA</h3>
+    <h3 class="section-name section-name-dev" v-if="$mq === 'lg'">DEV</h3>
+    <home-download-beta v-if="$mq === 'lg' || active === 'beta'" />
+    <home-download-dev v-if="$mq === 'lg' || active === 'dev'" />
   </div>
 </template>
 
 <script>
 import HomeDownloadBeta from './HomeDownloadBeta.vue';
+import HomeDownloadDev from './HomeDownloadDev.vue';
+import HomeDownloadVersionSwitcher from './HomeDownloadVersionSwitcher.vue';
 
 export default {
   name: 'home-download-section',
   components: {
     HomeDownloadBeta,
+    HomeDownloadDev,
+    HomeDownloadVersionSwitcher,
+  },
+  data() {
+    return {
+      activeSection: {
+        data: 'beta',
+      },
+    };
+  },
+  computed: {
+    active: {
+      get() {
+        return this.activeSection.data;
+      },
+      set(value) {
+        this.activeSection.data = value;
+      },
+    },
   },
 };
 </script>
@@ -27,6 +50,10 @@ export default {
     display: grid;
     grid-template-columns: 1fr 32px 1fr;
     grid-template-rows: auto auto 1fr 64px;
+
+    @media screen and (max-width: 875px) {
+      grid-template-columns: 1fr;
+    }
   }
 
   .title {
@@ -37,6 +64,9 @@ export default {
     font-weight: 400;
     grid-column: 1/4;
     grid-row: 1;
+    @media screen and (max-width: 875px) {
+      grid-column: 1;
+    }
   }
 
   .section-name {
@@ -61,5 +91,17 @@ export default {
     grid-row: 3;
     grid-column: 1;
     margin-top: 8px;
+    @media screen and (max-width: 875px) {
+      grid-column: 1;
+    }
+  }
+
+  .download-dev {
+    grid-row: 3;
+    grid-column: 3;
+    margin-top: 8px;
+    @media screen and (max-width: 875px) {
+      grid-column: 1;
+    }
   }
 </style>

src/components/HomeDownloadVersionSwitcher.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="download-version-switcher">
+    <span
+      class="section-name section-name-beta"
+      :class="{ active: active == 'beta' }"
+      @click="active = 'beta'">BETA</span>
+    <div class="devider" />
+    <span
+      class="section-name section-name-dev"
+      :class="{ active: active == 'dev' }"
+      @click="active = 'dev'">DEV</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'home-download-version-switcher',
+  components: {
+  },
+  props: {
+    activeSection: Object,
+    default: {},
+  },
+  computed: {
+    active: {
+      get() {
+        return this.activeSection.data;
+      },
+      set(value) {
+        this.activeSection.data = value;
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .download-version-switcher {
+    height: 32px;
+    display: flex;
+    direction: row;
+    margin-bottom: 16px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .section-name {
+    min-width: 128px;
+    font-size: 28px;
+    line-height: 32px;
+    text-align: center;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 300;
+    margin: 0;
+    color: #0008;
+    cursor: pointer;
+
+    &.active {
+      font-weight: 400;
+      color: #D32F2F;
+    }
+  }
+
+  .section-name-beta {
+    text-align: right;
+  }
+
+  .section-name-dev {
+    text-align: left;
+  }
+
+  .devider {
+    width: 0;
+    border: 1px solid #0006;
+    height: 100%;
+    margin: 0 8px;
+  }
+</style>

src/main.js

@@ -2,11 +2,18 @@ import '@mdi/font/css/materialdesignicons.min.css';
 import Vue from 'vue';
 import AsyncComputed from 'vue-async-computed';
 import VueResource from 'vue-resource';
+import VueMq from 'vue-mq';
 
 import App from './App.vue';
 
 Vue.use(AsyncComputed);
 Vue.use(VueResource);
+Vue.use(VueMq, {
+  breakpoints: {
+    md: 875,
+    lg: Infinity,
+  },
+});
 
 Vue.config.productionTip = false;