10 files changed, 76 insertions, 17 deletions
diff --git a/src/components/about/about.js b/src/components/about/about.js
new file mode 100644
index 00000000..b4433b4e
--- /dev/null
+++ b/src/components/about/about.js
@@ -0,0 +1,13 @@
+import InstanceSpecificPanel from '../instance_specific_panel/instance_specific_panel.vue'
+import FeaturesPanel from '../features_panel/features_panel.vue'
+import TermsOfServicePanel from '../terms_of_service_panel/terms_of_service_panel.vue'
+
+const About = {
+  components: {
+    InstanceSpecificPanel,
+    FeaturesPanel,
+    TermsOfServicePanel
+  }
+}
+
+export default About
diff --git a/src/components/about/about.vue b/src/components/about/about.vue
new file mode 100644
index 00000000..bf87e0b8
--- /dev/null
+++ b/src/components/about/about.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="sidebar">
+    <instance-specific-panel></instance-specific-panel>
+    <features-panel></features-panel>
+    <terms-of-service-panel></terms-of-service-panel>
+  </div>
+</template>
+
+<script src="./about.js" ></script>
+
+<style lang="scss">
+</style>
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 1455354e..25c1a9d0 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -76,7 +76,7 @@
             </div>
 
             <div class="form-group" id="captcha-group" v-if="captcha.type != 'none'">
-              <label class='form--label' for='captcha-label'>$t('captcha')</label>
+              <label class='form--label' for='captcha-label'>{{$t('captcha')}}</label>
 
               <template v-if="captcha.type == 'kocaptcha'">
                 <img v-bind:src="captcha.url" v-on:click="setCaptcha">
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index f5ccba67..7c792deb 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -71,6 +71,11 @@
             {{ $t("settings.settings") }}
           </router-link>
         </li>
+        <li @click="toggleDrawer">
+          <router-link :to="{ name: 'about'}">
+            {{ $t("nav.about") }}
+          </router-link>
+        </li>
         <li v-if="currentUser" @click="toggleDrawer">
           <a @click="doLogout" href="#">
             {{ $t("login.logout") }}
diff --git a/src/components/terms_of_service_panel/terms_of_service_panel.js b/src/components/terms_of_service_panel/terms_of_service_panel.js
new file mode 100644
index 00000000..4276f8f7
--- /dev/null
+++ b/src/components/terms_of_service_panel/terms_of_service_panel.js
@@ -0,0 +1,9 @@
+const TermsOfServicePanel = {
+  computed: {
+    content () {
+      return this.$store.state.instance.tos
+    }
+  }
+}
+
+export default TermsOfServicePanel
diff --git a/src/components/terms_of_service_panel/terms_of_service_panel.vue b/src/components/terms_of_service_panel/terms_of_service_panel.vue
new file mode 100644
index 00000000..eb0f2527
--- /dev/null
+++ b/src/components/terms_of_service_panel/terms_of_service_panel.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <div class="panel panel-default">
+      <div class="panel-body">
+        <div v-html="content" class="tos-content">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./terms_of_service_panel.js" ></script>
+
+<style lang="scss">
+.tos-content {
+  margin: 1em
+}
+</style>
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 2ca09817..bde20707 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -21,7 +21,7 @@ const UserProfile = {
       return this.$route.params.id || this.user.id
     },
     userName () {
-      return this.$route.params.name
+      return this.$route.params.name || this.user.screen_name
     },
     friends () {
       return this.user.friends
@@ -68,7 +68,7 @@ const UserProfile = {
       }
       this.$store.dispatch('stopFetching', 'user')
       this.$store.commit('clearTimeline', { timeline: 'user' })
-      this.$store.dispatch('startFetching', ['user', this.userName])
+      this.$store.dispatch('startFetching', ['user', this.fetchBy])
     },
     userId () {
       if (!this.isExternal) {
@@ -76,7 +76,7 @@ const UserProfile = {
       }
       this.$store.dispatch('stopFetching', 'user')
       this.$store.commit('clearTimeline', { timeline: 'user' })
-      this.$store.dispatch('startFetching', ['user', this.userId])
+      this.$store.dispatch('startFetching', ['user', this.fetchBy])
     },
     user () {
       if (this.user.id && !this.user.followers) {
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index a46befa5..50619026 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -3,7 +3,7 @@
   <div v-if="user.id" class="user-profile panel panel-default">
     <user-card-content :user="user" :switcher="true" :selected="timeline.viewing"></user-card-content>
     <tab-switcher>
-      <Timeline :label="$t('user_card.statuses')" :embedded="true" :title="$t('user_profile.timeline_title')" :timeline="timeline" :timeline-name="'user'" :user-id="userId"/>
+      <Timeline :label="$t('user_card.statuses')" :embedded="true" :title="$t('user_profile.timeline_title')" :timeline="timeline" :timeline-name="'user'" :user-id="fetchBy"/>
       <div :label="$t('user_card.followees')">
         <div v-if="friends">
           <user-card v-for="friend in friends" :key="friend.id" :user="friend" :showFollows="true"></user-card>
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js
index eaeb527a..fddc7c7d 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.js
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@@ -1,10 +1,12 @@
 import apiService from '../../services/api/api.service.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import _ from 'lodash'
 
 function showWhoToFollow (panel, reply) {
+  _.shuffle(reply)
+
   panel.usersToFollow.forEach((toFollow, index) => {
-    let randIndex = Math.floor(Math.random() * reply.length)
-    let user = reply[randIndex]
+    let user = reply[index]
     let img = user.avatar || '/images/avi.png'
     let name = user.acct
 
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.vue b/src/components/who_to_follow_panel/who_to_follow_panel.vue
index ad6a028e..272c41d3 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.vue
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.vue
@@ -7,15 +7,13 @@
         </div>
       </div>
       <div class="panel-body who-to-follow">
-        <p>
-          <span v-for="user in usersToFollow">
-	      <img v-bind:src="user.img" />
-              <router-link v-bind:to="userProfileLink(user.id, user.name)">
-                {{user.name}}
-              </router-link><br />
-          </span>
-          <img v-bind:src="$store.state.instance.logo"> <a v-bind:href="moreUrl" target="_blank">{{$t('who_to_follow.more')}}</a>
-        </p>
+        <span v-for="user in usersToFollow">
+          <img v-bind:src="user.img" />
+            <router-link v-bind:to="userProfileLink(user.id, user.name)">
+              {{user.name}}
+            </router-link><br />
+        </span>
+        <img v-bind:src="$store.state.instance.logo"> <a v-bind:href="moreUrl" target="_blank">{{$t('who_to_follow.more')}}</a>
       </div>
     </div>
   </div>
@@ -31,7 +29,9 @@
     width: 32px;
     height: 32px;
   }
-  .who-to-follow p {
+  .who-to-follow {
+    padding: 0.5em 1em 0.5em 1em;
+    margin: 0px;
     line-height: 40px;
     white-space: nowrap;
     overflow: hidden;