treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

[Glitch] Change layout of public profile directory to be the same as in web UI 

Port b47119eb61 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
lolsob-rspec
Eugen Rochko 2019-08-30 07:41:16 +02:00 committed by Thibaut Girka
parent 2cdbfb39e8
commit c4aa608971
2 changed files with 20 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/flavours/glitch/features/directory/components/account_card.js
View File

@ -119,7 +119,7 @@ class AccountCard extends ImmutablePureComponent {
return ( return (
<div className='directory__card'> <div className='directory__card'>
<div className='directory__card__img'> <div className='directory__card__img'>
<img src={autoPlayGif ? account.get('header') : account.get('header_static')} alt='' className='parallax' /> <img src={autoPlayGif ? account.get('header') : account.get('header_static')} alt='' />
</div> </div>
<div className='directory__card__bar'> <div className='directory__card__bar'>
@ -134,7 +134,7 @@ class AccountCard extends ImmutablePureComponent {
</div> </div>
<div className='directory__card__extra'> <div className='directory__card__extra'>
{account.get('note').length > 0 && account.get('note') !== '<p></p>' && <div className='account__header__content' dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }} />} <div className='account__header__content' dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }} />
</div> </div>
<div className='directory__card__extra'> <div className='directory__card__extra'>

18
app/javascript/flavours/glitch/styles/containers.scss
View File

@ -769,6 +769,24 @@
} }
} }
.directory__list {
display: grid;
grid-gap: 10px;
grid-template-columns: minmax(0, 50%) minmax(0, 50%);
@media screen and (max-width: $no-gap-breakpoint) {
display: block;
}
.icon-button {
font-size: 18px;
}
}
.directory__card {
margin-bottom: 0;
}
.card-grid { .card-grid {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;