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 <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.defaultProps = { plot: "" };

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

@ -25,44 +25,42 @@ const ListDetails = props => {
}
return (
<div className="col-8 col-md-4 list-details pl-1 d-flex align-items-start flex-column">
<div className="video-details flex-fill d-flex flex-column">
<Title
title={props.data.get("title")}
wishlist={props.wishlist}
wishlisted={isWishlisted(props.data)}
<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">
<Title
title={props.data.get("title")}
wishlist={props.wishlist}
wishlisted={isWishlisted(props.data)}
/>
<ReleaseDate date={props.data.get("year")} />
<Runtime runtime={props.data.get("runtime")} />
<Genres genres={props.data.get("genres")} />
<Rating
rating={props.data.get("rating")}
votes={props.data.get("votes")}
/>
<div>
<ImdbBadge imdbId={props.data.get("imdb_id")} />
<DownloadAndStream
url={props.data.get("polochon_url")}
name={props.data.get("title")}
subtitles={props.data.get("subtitles")}
/>
<ReleaseDate date={props.data.get("year")} />
<Runtime runtime={props.data.get("runtime")} />
<Genres genres={props.data.get("genres")} />
<Rating
rating={props.data.get("rating")}
votes={props.data.get("votes")}
/>
<div>
<ImdbBadge imdbId={props.data.get("imdb_id")} />
<DownloadAndStream
url={props.data.get("polochon_url")}
name={props.data.get("title")}
subtitles={props.data.get("subtitles")}
/>
</div>
<TrackingLabel
wishlisted={props.data.get("wishlisted")}
inLibrary={inLibrary(props.data)}
trackedSeason={props.data.get("tracked_season")}
trackedEpisode={props.data.get("tracked_episode")}
/>
<PolochonMetadata
quality={props.data.get("quality")}
releaseGroup={props.data.get("release_group")}
container={props.data.get("container")}
audioCodec={props.data.get("audio_codec")}
videoCodec={props.data.get("video_codec")}
/>
<Plot plot={props.data.get("plot")} />
{props.children}
</div>
<TrackingLabel
wishlisted={props.data.get("wishlisted")}
inLibrary={inLibrary(props.data)}
trackedSeason={props.data.get("tracked_season")}
trackedEpisode={props.data.get("tracked_episode")}
/>
<PolochonMetadata
quality={props.data.get("quality")}
releaseGroup={props.data.get("release_group")}
container={props.data.get("container")}
audioCodec={props.data.get("audio_codec")}
videoCodec={props.data.get("video_codec")}
/>
<Plot plot={props.data.get("plot")} />
{props.children}
</div>
);
};

6
frontend/scss/app.scss
View File

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