ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change: move filter input to bottom

Browse Source
This commit is contained in:
Raphael Beer 2020-03-26 05:16:44 +01:00
parent c7762e3539
commit d07bccfcaf
No known key found for this signature in database
GPG Key ID: C1AC5E018B25EF11
1 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
webapp/components/features/FollowList.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<base-card style="position: relative; max-height: 424px;"> <base-card class="hc-connections">
<ds-space v-if="this.connections && this.connections.length" margin="x-small"> <ds-space v-if="this.connections && this.connections.length" margin="x-small">
<ds-text tag="h5" color="soft"> <ds-text tag="h5" color="soft">
{{ userName | truncate(15) }} {{ $t(`profile.network.${type}`) }} {{ userName | truncate(15) }} {{ $t(`profile.network.${type}`) }}
@ -8,16 +8,6 @@
<template v-else> <template v-else>
<p class="no-connections-message">{{ userName }} {{ $t(`profile.network.${type}Nobody`) }}</p> <p class="no-connections-message">{{ userName }} {{ $t(`profile.network.${type}Nobody`) }}</p>
</template> </template>
<ds-space v-if="this.connections && this.connections.length > 7" margin="x-small">
<ds-input
ref="filter"
@input.native="setFilter"
placeholder="filter"
v-focus="true"
size="small"
icon="filter"
/>
</ds-space>
<template v-if="this.connections && this.connections.length <= 7"> <template v-if="this.connections && this.connections.length <= 7">
<ds-space v-for="follow in uniq(this.connections)" :key="follow.id" margin="x-small"> <ds-space v-for="follow in uniq(this.connections)" :key="follow.id" margin="x-small">
<!-- TODO: find better solution for rendering errors --> <!-- TODO: find better solution for rendering errors -->
@ -47,6 +37,16 @@
</client-only> </client-only>
</ds-space> </ds-space>
</div> </div>
<ds-space margin="x-small">
<ds-input
ref="filter"
@input.native="setFilter"
:placeholder="filter"
v-focus="true"
size="small"
icon="filter"
/>
</ds-space>
</template> </template>
</base-card> </base-card>
</template> </template>
@ -131,12 +131,20 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.no-connections-message { .hc-connections {
text-align: center; position: relative;
opacity: 0.5; max-height: 424px;
} width: 240px;
.overflow-container {
max-height: 300px; > .no-connections-message {
overflow-y: auto; text-align: center;
color: $text-color-soft;
}
> .overflow-container {
height: $size-avatar-base * 7;
margin-top: -8px;
overflow-y: auto;
}
} }
</style> </style>