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

Review: user-teasers as unordered list

Browse Source
This commit is contained in:
Raphael Beer 2020-04-16 20:59:35 +02:00
parent 97a30ad8f8
commit e70faa0a2d
No known key found for this signature in database
GPG Key ID: C1AC5E018B25EF11
3 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
webapp/assets/_new/styles/tokens.scss
View File

@ -230,6 +230,7 @@ $space-small: 16px;
$space-x-small: 8px; $space-x-small: 8px;
$space-xx-small: 4px; $space-xx-small: 4px;
$space-xxx-small: 2px; $space-xxx-small: 2px;
$space-none: 0;
/** /**
* @tokens Size Height * @tokens Size Height

4
webapp/components/features/FollowList/FollowList.spec.js
View File

@ -137,8 +137,8 @@ describe('FollowList.vue', () => {
expect(wrapper.findAll('.user-teaser')).toHaveLength(allConnectionsUser.followingCount) expect(wrapper.findAll('.user-teaser')).toHaveLength(allConnectionsUser.followingCount)
}) })
it('renders the user-teasers in an overflow-container', () => { it('renders the user-teasers as an overflowing list', () => {
expect(wrapper.find('.--overflow').is('div')).toBe(true) expect(wrapper.find('.--overflow').is('ul')).toBe(true)
}) })
it('renders a filter text input', () => { it('renders a filter text input', () => {

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

@ -4,14 +4,15 @@
<h5 class="title spacer-x-small"> <h5 class="title spacer-x-small">
{{ userName | truncate(15) }} {{ $t(`profile.network.${type}`) }} {{ userName | truncate(15) }} {{ $t(`profile.network.${type}`) }}
</h5> </h5>
<div :class="connectionsClass"> <ul :class="connectionsClass">
<user-teaser <li
v-for="connection in filteredConnections" v-for="connection in filteredConnections"
:key="connection.id" :key="connection.id"
:user="connection" class="connections__item"
class="spacer-x-small" >
/> <user-teaser :user="connection" />
</div> </li>
</ul>
<base-button <base-button
v-if="hasMore" v-if="hasMore"
:loading="loading" :loading="loading"
@ -135,10 +136,21 @@ export default {
.connections { .connections {
height: $size-height-connections; height: $size-height-connections;
padding: $space-none;
list-style-type: none;
&.--overflow { &.--overflow {
overflow-y: auto; overflow-y: auto;
} }
> .connections__item {
padding: $space-xx-small;
&.is-selected,
&:hover {
background-color: $background-color-primary-inverse;
}
}
} }
.nobody-message { .nobody-message {
@ -149,9 +161,5 @@ export default {
> :nth-child(n):not(:last-child) { > :nth-child(n):not(:last-child) {
margin-bottom: $space-small; margin-bottom: $space-small;
} }
.user-teaser {
margin-bottom: $space-x-small;
}
} }
</style> </style>