Merge pull request #8 from DerianAndre/main

Improved download page
picotorrent · May 12, 2021 · 4136c06 · 4136c06
2 parents 5c656ac + 1e09333
commit 4136c06
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 5 deletions.
diff --git a/pages/download.vue b/pages/download.vue
@@ -3,9 +3,19 @@
     <div class="container">
       <h2>PicoTorrent v{{ release.version }}</h2>
       <p>Get the latest release, select your desired file:</p>
+      <!-- Releases -->
+      <h3>Releases</h3>
       <div class="files">
-        <a v-for="asset in release.assets" :key="asset.url" class="file" :href="asset.url">{{ asset.name }}</a>
+        <a v-for="asset in main" :key="asset.url" class="file" :href="asset.url">{{ asset.name }}</a>
       </div>
+      <!-- Releases with symbols -->
+      <details>
+        <summary><h3>Releases with symbols <small>(for developers)</small></h3></summary>
+        <div class="files">
+          <a v-for="asset in symbols" :key="asset.url" class="file" :href="asset.url">{{ asset.name }}</a>
+        </div>
+      </details>
+      <!-- Release notes -->
       <h3>Release notes</h3>
       <!-- eslint-disable-next-line vue/no-v-html -->
       <div class="notes" v-html="release.notes" />
@@ -17,11 +27,26 @@
 export default {
   async asyncData ({ $axios }) {
     const data = await $axios.$get('/api/releases/latest');
-    return { release: data };
+    const assetsMain = [];
+    const assetsSymbols = [];
+    data.assets.forEach((element) => {
+      if (element.name.includes('symbols')) {
+        assetsSymbols.push(element);
+      } else {
+        assetsMain.push(element);
+      }
+    });
+    return {
+      release: data,
+      main: assetsMain,
+      symbols: assetsSymbols
+    };
   },
   data () {
     return {
-      release: {}
+      release: {},
+      main: [],
+      symbols: []
     };
   },
   head: {
@@ -31,3 +56,32 @@ export default {
   }
 };
 </script>
+
+<style lang="scss">
+  details {
+    margin-bottom: 2rem;
+    summary {
+      opacity: 0.6;
+      transition: all 0.35s ease;
+      h3 {
+        font-size: 1.25rem;
+        display: inline;
+      }
+    }
+    .files {
+      margin-top: 1rem !important;
+    }
+    &[open] {
+      summary {
+        opacity: 1;
+      }
+    }
+  }
+  h2 {
+    margin-bottom: 1rem;
+  }
+  h3 {
+    font-size: 1.5rem;
+    margin: 1rem 0;
+  }
+</style>
diff --git a/static/css/style.scss b/static/css/style.scss
@@ -68,7 +68,7 @@ html,
 body {
   margin     : 0;
   padding    : 0;
-  font-family: 'Segoe UI Light', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
+  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
   overflow-x : hidden;
   font-size  : 16px;
   background : var(--body-bg);
@@ -482,7 +482,7 @@ footer {
       text-decoration: none;
       font-size      : 0.9rem;
       font-family    : 'Segoe UI SemiBold', Tahoma, Geneva, Verdana, sans-serif;
-      transition     : all .35s ease;
+      transition     : color 0.35s ease, background 0.35s ease;
       &::after {
         content      : "";
         display      : block;
@@ -581,4 +581,12 @@ footer {
       justify-content: center;
     }
   }
+}
+
+.page-enter-active, .page-leave-active {
+  transition: opacity 0.35s;
+}
+
+.page-enter, .page-leave-to {
+  opacity: 0;
 }