moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ProfilePreview: link to internal profile, improve styles

This commit is contained in:
Alex Gleason 2021-10-08 13:49:59 -05:00
parent 92fc853642
commit bba3564ef3
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 9 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/soapbox/features/edit_profile/components/profile_preview.js
View File

@ -2,6 +2,7 @@ import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { Link } from 'react-router-dom';
import { getAcct, isVerified } from 'soapbox/utils/accounts';
import StillImage from 'soapbox/components/still_image';
import VerificationBadge from 'soapbox/components/verification_badge';
@ -13,7 +14,7 @@ const mapStateToProps = state => ({
const ProfilePreview = ({ account, displayFqn }) => (
<div className='card h-card'>
<a target='_blank' rel='noopener' href={account.get('url')}>
<Link to={`/@${account.get('acct')}`}>
<div className='card__img'>
<StillImage alt='' src={account.get('header')} />
</div>
@ -32,7 +33,7 @@ const ProfilePreview = ({ account, displayFqn }) => (
<span>@{getAcct(account, displayFqn)}</span>
</div>
</div>
</a>
</Link>
</div>
);

16
app/styles/accounts.scss
View File

@ -3,7 +3,9 @@
display: block;
text-decoration: none;
color: inherit;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
border-radius: 4px;
overflow: hidden;
@media screen and (max-width: $no-gap-breakpoint) {
box-shadow: none;
@ -13,7 +15,7 @@
&:active,
&:focus {
.card__bar {
background: var(--foreground-color);
background-color: var(--brand-color--faint);
}
}
}
@ -22,7 +24,6 @@
height: 130px;
position: relative;
background: var(--background-color);
border-radius: 4px 4px 0 0;
.still-image {
display: block;
@ -30,7 +31,6 @@
height: 100%;
margin: 0;
object-fit: cover;
border-radius: 4px 4px 0 0;
}
@media screen and (max-width: 600px) {
@ -48,12 +48,8 @@
display: flex;
justify-content: flex-start;
align-items: center;
background: var(--brand-color--faint);
border-radius: 0 0 4px 4px;
@media screen and (max-width: $no-gap-breakpoint) {
border-radius: 0;
}
background: var(--background-color);
transition: 0.2s;
.avatar {
flex: 0 0 auto;