LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

fix(followers): improve layout of single follower. Closes #2926

Browse Source
This commit is contained in:
Gabe Kangas 2023-04-15 22:00:42 -07:00
parent bb81ac704c
commit 014acc1663
No known key found for this signature in database
GPG Key ID: 4345B2060657F330
2 changed files with 41 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
web/components/ui/followers/SingleFollower/SingleFollower.module.scss
View File

@ -6,45 +6,41 @@
border-style: solid; border-style: solid;
padding: 10px 10px; padding: 10px 10px;
border-radius: 15px; border-radius: 15px;
height: 75px; background-color: var(--theme-color-background-main);
font-size: 0.8rem; margin: 0.5em;
margin: 5px; font-size: 1rem;
color: var(--theme-color-components-text-on-light);
.name { &:hover {
font-weight: 600; border-color: var(--theme-text-link);
font-size: 1rem; }
color: var(--theme-color-components-text-on-light);
display: inline-block;
text-overflow: ellipsis; .avatar {
overflow: hidden; height: 60px;
width: calc(85%); width: 60px;
white-space: nowrap; border-color: rgba(0, 0, 0, 0.3);
border-width: 1px;
border-style: solid;
font-size: 1.8rem;
}
.avatarColumn {
max-width: 75px;
min-width: 75px;
} }
.account { .account {
color: var(--theme-color-components-text-on-light); color: var(--theme-color-components-text-on-light);
word-break: break-all; text-overflow: ellipsis;
line-height: 1rem; line-height: 1.2rem;
}
@include screen(mobile) { p {
margin: auto; margin: 0;
}
&:hover {
border-color: var(--theme-color-action);
}
.avatar {
border-color: rgba(0, 0, 0, 0.3);
border-width: 1px;
border-style: solid;
background-color: var(--theme-color-background-main);
span {
font-size: 1.6rem;
} }
} }
.username {
font-family: var(--theme-text-display-font-family);
font-weight: 600;
color: var(--theme-color-components-text-on-light);
}
} }

25
web/components/ui/followers/SingleFollower/SingleFollower.tsx
View File

@ -1,4 +1,4 @@
import { Avatar, Col, Row, Typography } from 'antd'; import { Avatar, Col, Row } from 'antd';
import React, { FC } from 'react'; import React, { FC } from 'react';
import cn from 'classnames'; import cn from 'classnames';
import { Follower } from '../../../../interfaces/follower'; import { Follower } from '../../../../interfaces/follower';
@ -12,20 +12,21 @@ export const SingleFollower: FC<SingleFollowerProps> = ({ follower }) => (
<div className={cn([styles.follower, 'followers-follower'])}> <div className={cn([styles.follower, 'followers-follower'])}>
<a href={follower.link} target="_blank" rel="noreferrer"> <a href={follower.link} target="_blank" rel="noreferrer">
<Row wrap={false}> <Row wrap={false}>
<Col span={6}> <Col span={6} className={styles.avatarColumn}>
<Avatar src={follower.image} size="large" alt="Avatar" className={styles.avatar}> <Avatar
{follower.username.charAt(0).toUpperCase()} src={follower.image}
alt={(follower.name || follower.username).charAt(0).toUpperCase()}
className={styles.avatar}
size="large"
>
{(follower.name || follower.username).charAt(0).toUpperCase()}
</Avatar> </Avatar>
</Col> </Col>
<Col span={16}> <Col>
<Row className={styles.name}> <Row className={styles.username}>
<Typography.Text ellipsis> {follower.name || follower.username.split('@', 2)[0]}
{follower.name || follower.username.split('@', 2)[0]}
</Typography.Text>
</Row>
<Row className={styles.account}>
<Typography.Text ellipsis>{follower.username}</Typography.Text>
</Row> </Row>
<Row className={styles.account}>{follower.username}</Row>
</Col> </Col>
</Row> </Row>
</a> </a>