Improve rendering of artist biography and album wiki

This commit is contained in:
Matthias Meulien
2020-10-10 13:25:11 +02:00
parent 4e0a5a7f7d
commit 7a79d7f9fb
6 changed files with 147 additions and 7 deletions

View File

@ -2,6 +2,8 @@ import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import sanitizeHtml from 'sanitize-html';
import ErrorMessage from '../components/ErrorMessage';
import TrackList from '../components/TrackList';
import Thumbnail from '../components/Thumbnail';
@ -268,7 +270,7 @@ export class Album extends React.Component {
<section className="wiki">
<h4 className="wiki__title">{i18n('album.wiki.title')}</h4>
<div className="wiki__text">
<p>{album.wiki}</p>
<p dangerouslySetInnerHTML={{ __html: sanitizeHtml(album.wiki) }}></p>
<br />
<div className="mid_grey-text">
<I18n path="album.wiki.published" params={{ date: album.wiki_publish_date }} />

View File

@ -3,6 +3,9 @@ import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Route, Switch } from 'react-router-dom';
import sanitizeHtml from 'sanitize-html';
import ErrorMessage from '../components/ErrorMessage';
import Link from '../components/Link';
import LazyLoadListener from '../components/LazyLoadListener';
@ -371,7 +374,7 @@ class Artist extends React.Component {
<br />
{artist.biography && (
<div className="biography-text">
<p>{artist.biography}</p>
<p dangerouslySetInnerHTML={{ __html: sanitizeHtml(artist.biography) }}></p>
<br />
<div className="mid_grey-text">
<I18n path="artist.about.wiki.published" date={artist.biography_publish_date} />

View File

@ -37,6 +37,11 @@ main .album-view {
padding-top: 40px;
}
.wiki__text {
overflow-wrap: break-word;
white-space: pre-wrap;
}
@include responsive($bp_medium) {
padding-top: 0;
padding-left: 10px;

View File

@ -65,6 +65,7 @@
.biography-text {
overflow-wrap: break-word;
white-space: pre-wrap;
}
}
}