Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Change appearance of account cards in web UI (#17689)

Browse source 
* Change appearance of account cards in web UI

* Various fixes and improvements

* Various fixes and improvements
This commit is contained in:
Eugen Rochko 2022-03-07 11:38:52 +01:00 • committed by GitHub
parent 292c75aa31
commit dba4be1038
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 178 additions and 347 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app/javascript/mastodon/features/directory/index.js
View file

@ -10,9 +10,9 @@ import { fetchDirectory, expandDirectory } from 'mastodon/actions/directory';
import { List as ImmutableList } from 'immutable';
import AccountCard from './components/account_card';
import RadioButton from 'mastodon/components/radio_button';
import classNames from 'classnames';
import LoadMore from 'mastodon/components/load_more';
import ScrollContainer from 'mastodon/containers/scroll_container';
import LoadingIndicator from 'mastodon/components/loading_indicator';
const messages = defineMessages({
title: { id: 'column.directory', defaultMessage: 'Browse profiles' },
@ -129,7 +129,7 @@ class Directory extends React.PureComponent {
const pinned = !!columnId;
const scrollableArea = (
<div className='scrollable' style={{ background: 'transparent' }}>
<div className='scrollable'>
<div className='filter-form'>
<div className='filter-form__column' role='group'>
<RadioButton name='order' value='active' label={intl.formatMessage(messages.recentlyActive)} checked={order === 'active'} onChange={this.handleChangeOrder} />
@ -142,8 +142,10 @@ class Directory extends React.PureComponent {
</div>
</div>
<div className={classNames('directory__list', { loading: isLoading })}>
{accountIds.map(accountId => <AccountCard id={accountId} key={accountId} />)}
<div className='directory__list'>
{isLoading ? <LoadingIndicator /> : accountIds.map(accountId => (
<AccountCard id={accountId} key={accountId} />
))}
</div>
<LoadMore onClick={this.handleLoadMore} visible={!isLoading} />