diff options
| -rw-r--r-- | vnext/src/components/Message.css | 19 | ||||
| -rw-r--r-- | vnext/src/components/Message.js | 24 | ||||
| -rw-r--r-- | vnext/src/components/UserInfo.js | 47 | ||||
| -rw-r--r-- | vnext/src/style/main.css | 1 |
4 files changed, 44 insertions, 47 deletions
diff --git a/vnext/src/components/Message.css b/vnext/src/components/Message.css index 9bc05dc6..55bed2f2 100644 --- a/vnext/src/components/Message.css +++ b/vnext/src/components/Message.css @@ -9,13 +9,14 @@ .msg-cont .msg-header { padding: 12px; } -.msg-cont > nav.l { +.msg-cont > .l { border-top: 1px solid #eee; display: flex; + align-items: center; justify-content: space-around; background: #fdfdfe; } -.msg-cont > nav.l a { +.msg-cont > .l a { color: #88958d; margin-right: 15px; font-size: small; @@ -31,17 +32,6 @@ display: inline-block; font-size: small; } -.l .msg-button { - align-items: center; - display: flex; - flex-basis: 0; - flex-direction: row; - flex-grow: 1; - padding-top: 12px; -} -.l .msg-button-icon { - font-weight: bold; -} .msgthread { margin-bottom: 0; } @@ -144,7 +134,8 @@ blockquote { overflow: hidden; text-indent: 10px; } -.msg-summary { +.msg-summary, +.msg-summary a { color: #88958d; font-size: small; padding: 12px; diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js index 3d063114..c63c5750 100644 --- a/vnext/src/components/Message.js +++ b/vnext/src/components/Message.js @@ -41,34 +41,28 @@ function Message({ data, visitor, children, ...rest }) { <MessageSummary message={data} /> <nav className="l"> {visitor.uid === data.user.uid ? ( - <a href={`/${data.user.uname}/${data.mid}`} className="a-like msg-button"> - <span className="msg-button-icon"> - <Icon name="ei-heart" size="s" /> - </span> - <span> Recommend</span> - </a> + <Link to={{ pathname: `/${data.user.uname}/${data.mid}`}} className="a-like msg-button"> + <Icon name="ei-heart" size="s" /> + <span className="desktop">Recommend</span> + </Link> ) : visitor.uid > 0 ? ( <Link to={{ pathname: '/post', search: `?body=!+%23${data.mid}` }} className="a-like msg-button"> - <span className="msg-button-icon"> - <Icon name="ei-heart" size="s" /> - </span> - <span> Recommend</span> + <Icon name="ei-heart" size="s" /> + <span className="desktop">Recommend</span> </Link> ) : ( <a href="/login" className="a-login msg-button"> <span className="msg-button-icon"> <Icon name="ei-heart" size="s" /> </span> - <span> Recommend</span> + <span className="desktop">Recommend</span> </a> )} {!data.ReadOnly | (visitor.uid === data.user.uid) && ( <> <Link to={{ pathname: `/${data.user.uname}/${data.mid}`, state: { msg: data } }} className="a-comment msg-button"> - <span className="msg-button-icon"> - <Icon name="ei-comment" size="s" /> - </span> - <span> Comment</span> + <Icon name="ei-comment" size="s" /> + <span className="desktop">Comment</span> </Link> </> )} diff --git a/vnext/src/components/UserInfo.js b/vnext/src/components/UserInfo.js index a65bd993..e92ccfd5 100644 --- a/vnext/src/components/UserInfo.js +++ b/vnext/src/components/UserInfo.js @@ -36,28 +36,23 @@ export default function UserInfo(props) { <div className="msg-ts">Was online recently</div> </Avatar> </div> + <UserSummary user={user} /> <div className="l"> { user.uid > 0 && <> <Link to="/pm"> - <Icon name="ei-envelope" size="s" />PM - </Link> + <Icon name="ei-envelope" size="s" /> + <span className="desktop">PM</span> + </Link> <Link to={`/${user.uname}/?show=recomm`} rel="nofollow"> - <Icon name="ei-heart" size="s" />Recommendations - </Link> + <Icon name="ei-heart" size="s" /> + <span className="desktop">Recommendations</span> + </Link> <Link to={`/${user.uname}/?media=1`} rel="nofollow"> - <Icon name="ei-camera" size="s" />Photos - </Link> - { - user.read && - <Link to={`/${user.uname}/friends`}>I read: {user.read.length}</Link> - } - <Link to={`/${user.uname}/readers`}>My readers: {user.readers ? user.readers.length : 0}</Link> - { - user.statsMyBL && - <Link to={`/${user.uname}/bl`}>My blacklist: {user.statsMyBL}</Link> - } + <Icon name="ei-camera" size="s" /> + <span className="desktop">Photos</span> + </Link> </> } </div> @@ -66,6 +61,24 @@ export default function UserInfo(props) { ); } +function Summary({ user }) { + let read = user.read && <Link to={`/${user.uname}/friends`}>I read: {user.read.length}</Link>; + let readers = user.readers && <Link to={`/${user.uname}/readers`}>My readers: {user.readers.length}</Link> + let mybl = user.statsMyBL && <Link to={`/${user.uname}/bl`}>My blacklist: {user.statsMyBL}</Link> + let presentItems = [read, readers, mybl].filter(Boolean); + return ( + <div className="msg-summary"> + {presentItems.length > 0 && presentItems.reduce((prev, curr) => [prev, ' ', curr])} + </div> + ); +} + +Summary.propTypes = { + user: UserType.isRequired +}; + +const UserSummary = React.memo(Summary); + export function UserLink(props) { const [user, setUser] = useState(props.user); useEffect(() => { @@ -84,8 +97,8 @@ export function UserLink(props) { }, [props.user]); return ( user.uid ? - <Link key={user.uid} to={`/${user.uname}/`} className="info-avatar"><img src={user.avatar}/>{user.uname}</Link> - : <a href={user.uri} className="info-avatar"><img src={user.avatar}/>{user.uname}</a> + <Link key={user.uid} to={`/${user.uname}/`} className="info-avatar"><img src={user.avatar} />{user.uname}</Link> + : <a href={user.uri} className="info-avatar"><img src={user.avatar} />{user.uname}</a> ); } diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css index 9ba06123..496a7771 100644 --- a/vnext/src/style/main.css +++ b/vnext/src/style/main.css @@ -236,7 +236,6 @@ hr { .icon { vertical-align: middle; - margin-right: 12px; } #search input { |