1
0
mirror of https://github.com/Sonarr/Sonarr.git synced 2024-10-30 07:22:35 +01:00

Fixed: Links and already added icons overflowing on add series search results

This commit is contained in:
Mark McDowall 2020-08-16 10:14:37 -07:00
parent e42aad4b2f
commit d222387d01
2 changed files with 61 additions and 30 deletions

View File

@ -34,10 +34,20 @@
.content {
flex: 0 1 100%;
overflow: hidden;
}
.titleRow {
display: flex;
}
.titleContainer {
display: flex;
align-items: flex-end;
flex: 0 1 auto;
}
.title {
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;
}
.tvdbLink {
composes: link from '~Components/Link/Link.css';
@ -68,3 +86,10 @@
.overview {
margin-top: 20px;
}
@media only screen and (max-width: $breakpointMedium) {
.titleRow {
justify-content: space-between;
overflow: hidden;
}
}

View File

@ -97,39 +97,45 @@ class AddNewSeriesSearchResult extends Component {
}
<div className={styles.content}>
<div className={styles.title}>
{title}
<div className={styles.titleRow}>
<div className={styles.titleContainer}>
<div className={styles.title}>
{title}
{
!title.contains(year) && year ?
<span className={styles.year}>
{
!title.contains(year) && year ?
<span className={styles.year}>
({year})
</span> :
null
}
</span> :
null
}
</div>
</div>
{
isExistingSeries ?
<div className={styles.icons}>
{
isExistingSeries ?
<Icon
className={styles.alreadyExistsIcon}
name={icons.CHECK_CIRCLE}
size={36}
title="Already in your library"
/> :
null
}
<Link
className={styles.tvdbLink}
to={`http://www.thetvdb.com/?tab=series&id=${tvdbId}`}
onPress={this.onTVDBLinkPress}
>
<Icon
className={styles.alreadyExistsIcon}
name={icons.CHECK_CIRCLE}
size={36}
title="Already in your library"
/> :
null
}
<Link
className={styles.tvdbLink}
to={`http://www.thetvdb.com/?tab=series&id=${tvdbId}`}
onPress={this.onTVDBLinkPress}
>
<Icon
className={styles.tvdbLinkIcon}
name={icons.EXTERNAL_LINK}
size={28}
/>
</Link>
className={styles.tvdbLinkIcon}
name={icons.EXTERNAL_LINK}
size={28}
/>
</Link>
</div>
</div>
<div>