Fixed: Links and already added icons overflowing on add artist/album search results

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>
pull/1807/head
Qstick 4 years ago
parent 4d90daebf1
commit 960d738e29

@ -34,17 +34,22 @@
.content {
flex: 0 1 100%;
overflow: hidden;
}
.name {
.titleRow {
display: flex;
font-weight: 300;
font-size: 36px;
}
.artistName {
.titleContainer {
display: flex;
align-items: flex-end;
flex: 0 1 auto;
}
.title {
font-weight: 300;
font-size: 20px;
font-size: 36px;
}
.year {
@ -52,6 +57,14 @@
color: $disabledColor;
}
.icons {
display: flex;
align-items: center;
justify-content: space-between;
flex: 1 0 auto;
height: 55px;
}
.mbLink {
composes: link from '~Components/Link/Link.css';
@ -75,3 +88,10 @@
margin-top: 20px;
text-align: justify;
}
@media only screen and (max-width: $breakpointMedium) {
.titleRow {
justify-content: space-between;
overflow: hidden;
}
}

@ -111,52 +111,42 @@ class AddNewAlbumSearchResult extends Component {
}
<div className={styles.content}>
<div className={styles.name}>
{title}
{
!!disambiguation &&
<span className={styles.year}>({disambiguation})</span>
}
{
isExistingAlbum ?
<Icon
className={styles.alreadyExistsIcon}
name={icons.CHECK_CIRCLE}
size={20}
title="Album already in your library"
/> :
null
}
<Link
className={styles.mbLink}
to={`https://musicbrainz.org/release-group/${foreignAlbumId}`}
onPress={this.onMBLinkPress}
>
<Icon
className={styles.mbLinkIcon}
name={icons.EXTERNAL_LINK}
size={28}
/>
</Link>
</div>
<div>
<span className={styles.artistName}> By: {artist.artistName}</span>
{
isExistingArtist ?
<div className={styles.titleRow}>
<div className={styles.titleContainer}>
<div className={styles.title}>
{title}
{
!!disambiguation &&
<span className={styles.year}>({disambiguation})</span>
}
</div>
</div>
<div className={styles.icons}>
{
isExistingAlbum ?
<Icon
className={styles.alreadyExistsIcon}
name={icons.CHECK_CIRCLE}
size={36}
title="Already in your library"
/> :
null
}
<Link
className={styles.mbLink}
to={`https://musicbrainz.org/release-group/${foreignAlbumId}`}
onPress={this.onTVDBLinkPress}
>
<Icon
className={styles.alreadyExistsIcon}
name={icons.CHECK_CIRCLE}
size={15}
title="Artist already in your library"
/> :
null
}
className={styles.mbLinkIcon}
name={icons.EXTERNAL_LINK}
size={28}
/>
</Link>
</div>
</div>
<div>

@ -34,10 +34,20 @@
.content {
flex: 0 1 100%;
overflow: hidden;
}
.name {
.nameRow {
display: flex;
}
.nameContainer {
display: flex;
align-items: flex-end;
flex: 0 1 auto;
}
.name {
font-weight: 300;
font-size: 36px;
}
@ -47,6 +57,14 @@
color: $disabledColor;
}
.icons {
display: flex;
align-items: center;
justify-content: space-between;
flex: 1 0 auto;
height: 55px;
}
.mbLink {
composes: link from '~Components/Link/Link.css';
@ -70,3 +88,10 @@
margin-top: 20px;
text-align: justify;
}
@media only screen and (max-width: $breakpointMedium) {
.titleRow {
justify-content: space-between;
overflow: hidden;
}
}

@ -111,44 +111,49 @@ class AddNewArtistSearchResult extends Component {
}
<div className={styles.content}>
<div className={styles.name}>
{artistName}
{
!name.contains(year) && year ?
<span className={styles.year}>
({year})
</span> :
null
}
{
!!disambiguation &&
<span className={styles.year}>({disambiguation})</span>
}
{
isExistingArtist ?
<div className={styles.nameRow}>
<div className={styles.nameContainer}>
<div className={styles.name}>
{artistName}
{
!artistName.contains(year) && year ?
<span className={styles.year}>
({year})
</span> :
null
}
{
!!disambiguation &&
<span className={styles.year}>({disambiguation})</span>
}
</div>
</div>
<div className={styles.icons}>
{
isExistingArtist ?
<Icon
className={styles.alreadyExistsIcon}
name={icons.CHECK_CIRCLE}
size={36}
title="Already in your library"
/> :
null
}
<Link
className={styles.mbLink}
to={`https://musicbrainz.org/artist/${foreignArtistId}`}
onPress={this.onMBLinkPress}
>
<Icon
className={styles.alreadyExistsIcon}
name={icons.CHECK_CIRCLE}
size={36}
title="Already in your library"
/> :
null
}
<Link
className={styles.mbLink}
to={`https://musicbrainz.org/artist/${foreignArtistId}`}
onPress={this.onMBLinkPress}
>
<Icon
className={styles.mbLinkIcon}
name={icons.EXTERNAL_LINK}
size={28}
/>
</Link>
className={styles.mbLinkIcon}
name={icons.EXTERNAL_LINK}
size={28}
/>
</Link>
</div>
</div>
<div>

Loading…
Cancel
Save