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

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>
pull/4958/head
Qstick 4 years ago
parent 87bf6b5977
commit c3223ea8e7

@ -34,10 +34,20 @@
.content {
flex: 0 1 100%;
overflow: hidden;
}
.title {
.titleRow {
display: flex;
}
.titleContainer {
display: flex;
align-items: flex-end;
flex: 0 1 auto;
}
.title {
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;
}
.alreadyExistsIcon {
margin-left: 10px;
color: #37bc9b;
@ -67,3 +85,10 @@
margin-left: 8px;
pointer-events: all;
}
@media only screen and (max-width: $breakpointMedium) {
.titleRow {
justify-content: space-between;
overflow: hidden;
}
}

@ -94,33 +94,43 @@ class AddNewMovieSearchResult extends Component {
}
<div className={styles.content}>
<div className={styles.title}>
{title}
{
!title.contains(year) && !!year &&
<span className={styles.year}>({year})</span>
}
{
isExistingMovie &&
<Icon
className={styles.alreadyExistsIcon}
name={icons.CHECK_CIRCLE}
size={36}
title={translate('AlreadyInYourLibrary')}
/>
}
<div className={styles.titleRow}>
<div className={styles.titleContainer}>
<div className={styles.title}>
{title}
{
!title.contains(year) && !!year ?
<span className={styles.year}>
({year})
</span> :
null
}
</div>
</div>
<div className={styles.icons}>
{
isExistingMovie &&
<Icon
className={styles.alreadyExistsIcon}
name={icons.CHECK_CIRCLE}
size={36}
title={translate('AlreadyInYourLibrary')}
/>
}
{
isExclusionMovie &&
<Icon
className={styles.exclusionIcon}
name={icons.DANGER}
size={36}
title={translate('MovieIsOnImportExclusionList')}
/>
}
{
isExclusionMovie &&
<Icon
className={styles.exclusionIcon}
name={icons.DANGER}
size={36}
title={translate('MovieIsOnImportExclusionList')}
/>
}
</div>
</div>
<div>

Loading…
Cancel
Save