Update Relay index page

This commit is contained in:
Angelina Filippova 2021-03-08 20:43:16 +08:00
parent 6fb956adae
commit 259acedd80
6 changed files with 63 additions and 47 deletions

View file

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

View file

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

View file

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

View file

@ -1,15 +1,21 @@
<template> <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"> <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> </div>
<el-table :data="relays"> <el-table :data="relays">
<el-table-column <el-table-column
:label="$t('settings.instanceUrl')" :label="$t('relays.instanceUrl')"
prop="actor"/> prop="actor"/>
<el-table-column <el-table-column
:label="$t('settings.followedBack')" :label="$t('relays.followedBack')"
:width="getLabelWidth" :width="getLabelWidth"
prop="followed_back" prop="followed_back"
align="center"> align="center">
@ -32,8 +38,11 @@
</template> </template>
<script> <script>
import RebootButton from '@/components/RebootButton'
export default { export default {
name: 'Relays', name: 'Relays',
components: { RebootButton },
data() { data() {
return { return {
newRelay: '' newRelay: ''
@ -51,21 +60,10 @@ export default {
}, },
relays() { relays() {
return this.$store.state.relays.fetchedRelays return this.$store.state.relays.fetchedRelays
},
searchQuery() {
return this.$store.state.settings.searchQuery
} }
}, },
mounted() { mounted() {
this.$store.dispatch('FetchRelays') 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: { methods: {
followRelay() { followRelay() {
@ -80,6 +78,6 @@ export default {
</script> </script>
<style rel='stylesheet/scss' lang='scss'> <style rel='stylesheet/scss' lang='scss'>
@import '../styles/settings'; @import '../styles/main';
@include settings @include relays
</style> </style>

View file

@ -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;
}
}
}

View file

@ -69,10 +69,6 @@
padding: 2px 3px; padding: 2px 3px;
} }
} }
.follow-relay {
width: 350px;
margin-right: 7px;
}
.form-container { .form-container {
margin-bottom: 80px; margin-bottom: 80px;
} }
@ -254,9 +250,6 @@
right: 0; right: 0;
z-index: 2000; z-index: 2000;
} }
.relays-container {
margin: 0 15px;
}
.replacement-input { .replacement-input {
width: 80%; width: 80%;
margin-left: 8px; margin-left: 8px;
@ -437,18 +430,6 @@
.divider .thick-line { .divider .thick-line {
height: 2px; 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 { h1 {
font-size: 24px; font-size: 24px;
} }
@ -614,9 +595,6 @@
width: 40%; width: 40%;
margin-right: 4px margin-right: 4px
} }
.relays-container {
margin: 0 10px;
}
.replacement-input { .replacement-input {
width: 60%; width: 60%;
margin-left: 4px; margin-left: 4px;