mirror of https://github.com/lidarr/Lidarr
Fixed: (UI) Improve displaying long album titles
This commit is contained in:
parent
911c147090
commit
ddea4eaff9
|
@ -35,7 +35,7 @@ import AlbumDetailsLinks from './AlbumDetailsLinks';
|
||||||
import AlbumDetailsMediumConnector from './AlbumDetailsMediumConnector';
|
import AlbumDetailsMediumConnector from './AlbumDetailsMediumConnector';
|
||||||
import styles from './AlbumDetails.css';
|
import styles from './AlbumDetails.css';
|
||||||
|
|
||||||
const defaultFontSize = parseInt(fonts.defaultFontSize);
|
const intermediateFontSize = parseInt(fonts.intermediateFontSize);
|
||||||
const lineHeight = parseFloat(fonts.lineHeight);
|
const lineHeight = parseFloat(fonts.lineHeight);
|
||||||
|
|
||||||
function getFanartUrl(images) {
|
function getFanartUrl(images) {
|
||||||
|
@ -358,8 +358,14 @@ class AlbumDetails extends Component {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.title}>
|
<div
|
||||||
{title}{disambiguation ? ` (${disambiguation})` : ''}
|
className={styles.title}
|
||||||
|
title={disambiguation ? `${title} (${disambiguation})` : title}
|
||||||
|
>
|
||||||
|
<TextTruncate
|
||||||
|
line={2}
|
||||||
|
text={disambiguation ? `${title} (${disambiguation})` : title}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -512,9 +518,9 @@ class AlbumDetails extends Component {
|
||||||
/>
|
/>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.overview}>
|
<div className={styles.overview} title={overview}>
|
||||||
<TextTruncate
|
<TextTruncate
|
||||||
line={Math.floor(125 / (defaultFontSize * lineHeight))}
|
line={Math.floor(125 / (intermediateFontSize * lineHeight))}
|
||||||
text={overview}
|
text={overview}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
.title {
|
.title {
|
||||||
composes: cell from '~Components/Table/Cells/TableRowCell.css';
|
composes: cell from '~Components/Table/Cells/TableRowCell.css';
|
||||||
|
|
||||||
white-space: nowrap;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
.monitored {
|
.monitored {
|
||||||
|
|
|
@ -75,7 +75,7 @@
|
||||||
"react-router-dom": "5.2.0",
|
"react-router-dom": "5.2.0",
|
||||||
"react-slider": "1.1.4",
|
"react-slider": "1.1.4",
|
||||||
"react-tabs": "3.2.2",
|
"react-tabs": "3.2.2",
|
||||||
"react-text-truncate": "0.18.0",
|
"react-text-truncate": "0.19.0",
|
||||||
"react-virtualized": "9.21.1",
|
"react-virtualized": "9.21.1",
|
||||||
"redux": "4.1.0",
|
"redux": "4.1.0",
|
||||||
"redux-actions": "2.6.5",
|
"redux-actions": "2.6.5",
|
||||||
|
|
|
@ -5330,10 +5330,10 @@ react-tabs@3.2.2:
|
||||||
clsx "^1.1.0"
|
clsx "^1.1.0"
|
||||||
prop-types "^15.5.0"
|
prop-types "^15.5.0"
|
||||||
|
|
||||||
react-text-truncate@0.18.0:
|
react-text-truncate@0.19.0:
|
||||||
version "0.18.0"
|
version "0.19.0"
|
||||||
resolved "https://registry.yarnpkg.com/react-text-truncate/-/react-text-truncate-0.18.0.tgz#c65f4be660d24734badb903a4832467eddcf8058"
|
resolved "https://registry.yarnpkg.com/react-text-truncate/-/react-text-truncate-0.19.0.tgz#60bc5ecf29a03ebc256f31f90a2d8402176aac91"
|
||||||
integrity sha512-0cc07CRPRPm3cTloVbPicVTSosJNauwVcmJb5FPa71u4KtDVgrRPJoxVvLBubl3gLyx1pVUozgREYMHpHM16jg==
|
integrity sha512-QxHpZABfGG0Z3WEYbRTZ+rXdZn50Zvp+sWZXgVAd7FCKAMzv/kcwctTpNmWgXDTpAoHhMjOVwmgRtX3x5yeF4w==
|
||||||
dependencies:
|
dependencies:
|
||||||
prop-types "^15.5.7"
|
prop-types "^15.5.7"
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue