From ddeae6bd266cf3d8d0863dc163e50b69f20b8b9e Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Mon, 23 Sep 2019 11:34:57 +0200
Subject: [PATCH] Correctly redirect to instances list

---
 src/components/InstancesList.vue |  6 +++++-
 src/main.js                      |  9 ++++++++-
 src/views/Home.vue               | 34 +++++++++++++++++---------------
 src/views/Instances.vue          |  5 +++--
 4 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/components/InstancesList.vue b/src/components/InstancesList.vue
index 11ccaf2..f27ddad 100644
--- a/src/components/InstancesList.vue
+++ b/src/components/InstancesList.vue
@@ -105,7 +105,7 @@
     <div class="instances-list">
       <div v-translate class="title">Instances list</div>
 
-      <div class="list">
+      <div class="list" v-bind:class="{ unloaded: instances.length === 0 && noResults === false }">
         <div v-for="instance of instances" class="instance" :key="instance.host">
           <instance-card
             :instance="instance" :isVideoMaker="isVideoMaker()"
@@ -234,6 +234,10 @@
     .instance {
       margin-bottom: 40px;
     }
+
+    .list.unloaded {
+      min-height: 400px;
+    }
   }
 </style>
 
diff --git a/src/main.js b/src/main.js
index c2cdb02..98bd1e0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -93,7 +93,14 @@ for (const locale of allLocales) {
 const router = new VueRouter({
   mode: 'history',
   base: process.env.BASE_URL,
-  routes
+  routes,
+  scrollBehavior (to, from, savedPosition) {
+    if (to.hash) {
+      return { selector: to.hash }
+    } else {
+      return { x: 0, y: 0 }
+    }
+  }
 })
 
 // Stats Matomo
diff --git a/src/views/Home.vue b/src/views/Home.vue
index c52e298..fdd2521 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -20,7 +20,7 @@
           <span v-translate>What is PeerTube?</span>
         </a>
 
-        <router-link to="/instances" hash="instances-list" class="jpt-button jpt-big-button-icon instances-list">
+        <router-link :to="{ path: '/instances', hash: 'instances-list' }" class="jpt-button jpt-big-button-icon instances-list">
           <icon-instance></icon-instance>
 
           <translate>See the instances list</translate>
@@ -43,7 +43,7 @@
       </div>
 
       <div class="bottom-link-wrapper">
-        <router-link to="/instances" hash="instances-list" class="bottom-link">
+        <router-link :to="{ path: '/instances', hash: 'instances-list' }" class="bottom-link">
           <span class="text" v-translate>Discover PeerTube instances</span>
           <icon-right></icon-right>
         </router-link>
@@ -100,7 +100,7 @@
         </p>
 
         <div class="bottom-link-wrapper">
-          <router-link to="/instances" hash="instances-list" class="bottom-link">
+          <router-link :to="{ path: '/instances', hash: 'instances-list' }" class="bottom-link">
             <span class="text" v-translate>Discover PeerTube instances</span>
             <icon-right></icon-right>
           </router-link>
@@ -131,12 +131,13 @@
           <strong>ou même de commenter une vidéo hébergée sur PeerTube directement depuis Mastodon.</strong>
         </p>
 
-        <div class="bottom-link-wrapper">
-          <a href="#" class="bottom-link">
-            <span class="text" v-translate>En savoir plus sur la fédération</span>
-            <icon-right></icon-right>
-          </a>
-        </div>
+<!--        TODO: find interesting resource regarding federation-->
+<!--        <div class="bottom-link-wrapper">-->
+<!--          <a href="#" class="bottom-link">-->
+<!--            <span class="text" v-translate>En savoir plus sur la fédération</span>-->
+<!--            <icon-right></icon-right>-->
+<!--          </a>-->
+<!--        </div>-->
       </div>
 
       <div class="free-software one-column">
@@ -171,12 +172,13 @@
           permet à de nombreux contributeur⋅ices de proposer des évolutions et de nouvelles fonctionnalités.</strong>
         </p>
 
-        <div class="bottom-link-wrapper">
-          <a href="#" class="bottom-link">
-            <span class="text" v-translate>En savoir plus sur les logiciels libres</span>
-            <icon-right></icon-right>
-          </a>
-        </div>
+<!--        TODO: find interesting resource regarding free softwares -->
+<!--        <div class="bottom-link-wrapper">-->
+<!--          <a href="#" class="bottom-link">-->
+<!--            <span class="text" v-translate>En savoir plus sur les logiciels libres</span>-->
+<!--            <icon-right></icon-right>-->
+<!--          </a>-->
+<!--        </div>-->
       </div>
 
       <div id="you-are-a-video-maker" class="one-column">
@@ -215,7 +217,7 @@
           besoin, une envie...
         </div>
 
-        <router-link to="/instances" hash="instances-list" class="jpt-button discover-instances">
+        <router-link :to="{ path: '/instances', hash: 'instances-list' }" class="jpt-button discover-instances">
           <translate>Découvrir les instances PeerTube</translate>
         </router-link>
       </div>
diff --git a/src/views/Instances.vue b/src/views/Instances.vue
index 91d1979..df16c40 100644
--- a/src/views/Instances.vue
+++ b/src/views/Instances.vue
@@ -10,9 +10,9 @@
           then all you have to do is <strong>create an account on the PeerTube instance of your choice.</strong>
         </p>
 
-        <button class="jpt-button">
+        <a href="#instances-list" class="jpt-button">
           <span v-translate>See the instances list</span>
-        </button>
+        </a>
       </div>
 
       <div class="block-with-image">
@@ -81,6 +81,7 @@
 
       img {
         width: 370px;
+        height: 210px;
       }
     }