ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-12 23:35:58 +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>
<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-text tag="h5" color="soft">
{{ userName | truncate(15) }} {{ $t(`profile.network.${type}`) }}
@ -8,16 +8,6 @@
<template v-else>
<p class="no-connections-message">{{ userName }} {{ $t(`profile.network.${type}Nobody`) }}</p>
</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">
<ds-space v-for="follow in uniq(this.connections)" :key="follow.id" margin="x-small">
<!-- TODO: find better solution for rendering errors -->
@ -47,6 +37,16 @@
</client-only>
</ds-space>
</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>
</base-card>
</template>
@ -131,12 +131,20 @@ export default {
</script>
<style lang="scss">
.no-connections-message {
text-align: center;
opacity: 0.5;
}
.overflow-container {
max-height: 300px;
overflow-y: auto;
.hc-connections {
position: relative;
max-height: 424px;
width: 240px;
> .no-connections-message {
text-align: center;
color: $text-color-soft;
}
> .overflow-container {
height: $size-avatar-base * 7;
margin-top: -8px;
overflow-y: auto;
}
}
</style>