Update Relay index page

src/lang/en.js

@@ -433,11 +433,6 @@ export default {
     esshd: 'BBS / SSH access',
     rateLimiters: 'Rate limiters',
     other: 'Other',
-    relays: 'Relays',
-    follow: 'Follow',
-    followRelay: 'Follow new relay',
-    followedBack: 'Followed Back',
-    instanceUrl: 'Instance URL',
     success: 'Settings changed successfully!',
     description: 'Description',
     removeFromDB: 'Remove setting from the DB',
@@ -459,6 +454,13 @@ export default {
     instancePanel: 'Instance Panel Document',
     termsOfServices: 'Terms of Service'
   },
+  relays: {
+    relays: 'Relays',
+    follow: 'Follow',
+    followRelay: 'Follow new relay',
+    followedBack: 'Followed Back',
+    instanceUrl: 'Instance URL'
+  },
   invites: {
     inviteTokens: 'Invite tokens',
     createInviteToken: 'Generate invite token',

src/styles/sidebar.scss

@@ -91,7 +91,7 @@
     }
 
     .submenu-title-noDropdown {
-      padding-left: 10px !important;
+      padding-left: 8px !important;
       position: relative;
 
       .el-tooltip {

src/views/layout/components/Sidebar/Item.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <i v-if="icon" :class="icon"/>
+    <i v-if="icon" :class="icon" class="menu-item-icon"/>
     <span slot="title">{{ title }}</span>
     <el-badge :value="count" type="primary" class="count-badge" />
   </div>
@@ -31,4 +31,11 @@ export default {
   margin-left: 5px;
   height: 48px;
 }
+.menu-item-icon {
+    margin-right: 5px;
+    width: 18px;
+    text-align: center;
+    font-size: 18px;
+    vertical-align: middle;
+}
 </style>

src/views/relays/index.vue

@@ -1,15 +1,21 @@
 <template>
-  <div v-if="!loading" class="relays-container" data-search="relays">
+  <div v-if="!loading" class="relays-container">
+    <div class="relays-header-container">
+      <h1>
+        {{ $t('relays.relays') }}
+      </h1>
+      <reboot-button/>
+    </div>
     <div class="follow-relay-container">
-      <el-input v-model="newRelay" :placeholder="$t('settings.followRelay')" class="follow-relay" @keyup.enter.native="followRelay"/>
+      <el-input v-model="newRelay" :placeholder="$t('relays.followRelay')" class="follow-relay" @keyup.enter.native="followRelay"/>
-      <el-button @click.native="followRelay">{{ $t('settings.follow') }}</el-button>
+      <el-button @click.native="followRelay">{{ $t('relays.follow') }}</el-button>
     </div>
     <el-table :data="relays">
       <el-table-column
-        :label="$t('settings.instanceUrl')"
+        :label="$t('relays.instanceUrl')"
         prop="actor"/>
       <el-table-column
-        :label="$t('settings.followedBack')"
+        :label="$t('relays.followedBack')"
         :width="getLabelWidth"
         prop="followed_back"
         align="center">
@@ -32,8 +38,11 @@
 </template>
 
 <script>
+import RebootButton from '@/components/RebootButton'
+
 export default {
   name: 'Relays',
+  components: { RebootButton },
   data() {
     return {
       newRelay: ''
@@ -51,21 +60,10 @@ export default {
     },
     relays() {
       return this.$store.state.relays.fetchedRelays
-    },
-    searchQuery() {
-      return this.$store.state.settings.searchQuery
     }
   },
   mounted() {
     this.$store.dispatch('FetchRelays')
-
-    if (this.searchQuery.length > 0) {
-      const selectedSetting = document.querySelector(`[data-search="${this.searchQuery}"]`)
-      if (selectedSetting) {
-        selectedSetting.scrollIntoView({ block: 'start', behavior: 'smooth' })
-      }
-      this.$store.dispatch('SetSearchQuery', '')
-    }
   },
   methods: {
     followRelay() {
@@ -80,6 +78,6 @@ export default {
 </script>
 
 <style rel='stylesheet/scss' lang='scss'>
-@import '../styles/settings';
+@import '../styles/main';
-@include settings
+@include relays
 </style>

src/views/styles/main.scss

@@ -0,0 +1,31 @@
+@mixin relays {
+  .follow-relay {
+    width: 350px;
+    margin-right: 7px;
+  }
+  .relays-container {
+    margin: 0 15px;
+  }
+  .relays-header-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  @media only screen and (max-width:480px) {
+    .follow-relay {
+      width: 75%;
+      margin-right: 5px;
+      input {
+        width: 100%;
+      }
+    }
+    .follow-relay-container {
+      display: flex;
+      justify-content: space-between;
+      margin: 0 5px;
+    }
+    .relays-container {
+      margin: 0 10px;
+    }
+  }
+}

src/views/styles/settings.scss

@@ -69,10 +69,6 @@
       padding: 2px 3px;
     }
   }
-  .follow-relay {
-    width: 350px;
-    margin-right: 7px;
-  }
   .form-container {
     margin-bottom: 80px;
   }
@@ -254,9 +250,6 @@
     right: 0;
     z-index: 2000;
   }
-  .relays-container {
-    margin: 0 15px;
-  }
   .replacement-input {
     width: 80%;
     margin-left: 8px;
@@ -437,18 +430,6 @@
     .divider .thick-line {
       height: 2px;
     }
-    .follow-relay {
-      width: 75%;
-      margin-right: 5px;
-      input {
-        width: 100%;
-      }
-    }
-    .follow-relay-container {
-      display: flex;
-      justify-content: space-between;
-      margin: 0 5px;
-    }
     h1 {
       font-size: 24px;
     }
@@ -614,9 +595,6 @@
       width: 40%;
       margin-right: 4px
     }
-    .relays-container {
-      margin: 0 10px;
-    }
     .replacement-input {
       width: 60%;
       margin-left: 4px;