refactor(frontend/release-page): less layout shift on player

This commit is contained in:
Kentai Radiquum 2024-04-30 16:01:41 +05:00
parent 76a0bc7a85
commit 2dbcbde50f
Signed by: Radiquum
GPG key ID: 858E8EE696525EED

View file

@ -90,7 +90,7 @@ export default function Release(props) {
<a data-ui="#vo" className="active"> <a data-ui="#vo" className="active">
озвучка озвучка
</a> </a>
{sourcesInfo && <a data-ui="#src">плеер</a>} <a data-ui="#src">плеер</a>
</div> </div>
<div <div
className="page padding active scroll" className="page padding active scroll"
@ -115,9 +115,9 @@ export default function Release(props) {
); );
})} })}
</div> </div>
{sourcesInfo && ( <div className="page center-align padding" id="src">
<div className="page center-align padding" id="src"> {sourcesInfo &&
{sourcesInfo.sources.map((item) => { sourcesInfo.sources.map((item) => {
return ( return (
<button <button
key={item.id} key={item.id}
@ -133,10 +133,12 @@ export default function Release(props) {
</button> </button>
); );
})} })}
</div> </div>
)}
</div> </div>
<div className="s12 scroll row" style={{ paddingBottom: "8px" }}> <nav
className="s12 scroll row no-margin no-space"
style={{ paddingBottom: "8px", height: "48px" }}
>
{episodeInfo && {episodeInfo &&
episodeInfo.episodes.map((item) => { episodeInfo.episodes.map((item) => {
return ( return (
@ -150,13 +152,14 @@ export default function Release(props) {
setEpisodeURL(item.url); setEpisodeURL(item.url);
item.is_watched = true; item.is_watched = true;
}} }}
style={{ marginLeft: "8px" }}
> >
{item.is_watched && <i className="small">check</i>} {item.is_watched && <i className="small">check</i>}
{item.name} {item.name}
</button> </button>
); );
})} })}
</div> </nav>
</article> </article>
); );
} }