mirror
/
Lidarr
mirror of https://github.com/lidarr/Lidarr
1
0
Fork 0
Code Issues Releases Wiki Activity

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

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>
This commit is contained in:
Qstick 2020-12-13 01:20:01 -05:00
parent 4d90daebf1
commit 960d738e29
4 changed files with 124 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/Search/Album/AddNewAlbumSearchResult.css
View File

@ -34,24 +34,37 @@
.content {
flex: 0 1 100%;
overflow: hidden;
}
.name {
.titleRow {
display: flex;
}
.titleContainer {
display: flex;
align-items: flex-end;
flex: 0 1 auto;
}
.title {
font-weight: 300;
font-size: 36px;
}
.artistName {
font-weight: 300;
font-size: 20px;
}
.year {
margin-left: 10px;
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;
}
}

76
frontend/src/Search/Album/AddNewAlbumSearchResult.js
View File

@ -111,52 +111,42 @@ class AddNewAlbumSearchResult extends Component {
}
<div className={styles.content}>
<div className={styles.name}>
{title}
<div className={styles.titleRow}>
<div className={styles.titleContainer}>
<div className={styles.title}>
{title}
{
!!disambiguation &&
<span className={styles.year}>({disambiguation})</span>
}
{
!!disambiguation &&
<span className={styles.year}>({disambiguation})</span>
}
</div>
</div>
{
isExistingAlbum ?
<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={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 ?
<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>

27
frontend/src/Search/Artist/AddNewArtistSearchResult.css
View File

@ -34,10 +34,20 @@
.content {
flex: 0 1 100%;
overflow: hidden;
}
.nameRow {
display: flex;
}
.nameContainer {
display: flex;
align-items: flex-end;
flex: 0 1 auto;
}
.name {
display: flex;
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;
}
}

73
frontend/src/Search/Artist/AddNewArtistSearchResult.js
View File

@ -111,44 +111,49 @@ class AddNewArtistSearchResult extends Component {
}
<div className={styles.content}>
<div className={styles.name}>
{artistName}
<div className={styles.nameRow}>
<div className={styles.nameContainer}>
<div className={styles.name}>
{artistName}
{
!name.contains(year) && year ?
<span className={styles.year}>
({year})
</span> :
null
}
{
!artistName.contains(year) && year ?
<span className={styles.year}>
({year})
</span> :
null
}
{
!!disambiguation &&
<span className={styles.year}>({disambiguation})</span>
}
</div>
</div>
{
!!disambiguation &&
<span className={styles.year}>({disambiguation})</span>
}
<div className={styles.icons}>
{
isExistingArtist ?
<Icon
className={styles.alreadyExistsIcon}
name={icons.CHECK_CIRCLE}
size={36}
title="Already in your library"
/> :
null
}
{
isExistingArtist ?
<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>