ODWRTW/canape
2
2
Fork 0
Code Issues 3 Pull Requests 1 Releases Activity

Fix the plot wrap when the user's screen is to small #11

Merged
PouuleT merged 1 commits from fixPlotWrap into master 2020-02-29 21:52:42 +00:00
Conversation 0 Commits 1 Files Changed 3 +37 -43
3 changed files with 37 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/js/components/details/plot.js
View File

@ -6,7 +6,9 @@ export const Plot = ({ plot }) => {
return null; return null;
} }
return <span className="text text-break plot">{plot}</span>; return (
<span className="text text-break overflow-auto text-justify">{plot}</span>
);
}; };
Plot.propTypes = { plot: PropTypes.string }; Plot.propTypes = { plot: PropTypes.string };
Plot.defaultProps = { plot: "" }; Plot.defaultProps = { plot: "" };

4
frontend/js/components/list/details.js
View File

@ -25,8 +25,7 @@ const ListDetails = props => {
} }
return ( return (
<div className="col-8 col-md-4 list-details pl-1 d-flex align-items-start flex-column"> <div className="col-8 col-md-4 list-details pl-1 d-flex align-items-start flex-column video-details flex-fill flex-column flex-nowrap">
<div className="video-details flex-fill d-flex flex-column">
<Title <Title
title={props.data.get("title")} title={props.data.get("title")}
wishlist={props.wishlist} wishlist={props.wishlist}
@ -63,7 +62,6 @@ const ListDetails = props => {
<Plot plot={props.data.get("plot")} /> <Plot plot={props.data.get("plot")} />
{props.children} {props.children}
</div> </div>
</div>
); );
}; };
ListDetails.propTypes = { ListDetails.propTypes = {

6
frontend/scss/app.scss
View File

@ -58,12 +58,6 @@ div.show.dropdown.nav-item > div {
cursor: pointer; cursor: pointer;
} }
.plot {
text-align: justify;
max-height: 65%;
overflow: auto;
}
.poster-list { .poster-list {
img { img {
display: block; display: block;