Move MediaInfo into playbar-left-group div

This commit is contained in:
Ethan Girouard 2024-05-10 17:39:39 -04:00
parent c07237ad8a
commit a0da89204c
Signed by: eta357
GPG Key ID: 7BCDC36DFD11C146
2 changed files with 20 additions and 16 deletions

View File

@ -486,7 +486,9 @@ pub fn PlayBar(status: RwSignal<PlayStatus>) -> impl IntoView {
on:timeupdate=on_time_update on:ended=on_end type="audio/mpeg" /> on:timeupdate=on_time_update on:ended=on_end type="audio/mpeg" />
<div class="playbar"> <div class="playbar">
<ProgressBar percentage=percentage.into() status=status /> <ProgressBar percentage=percentage.into() status=status />
<div class="playbar-left-group">
<MediaInfo status=status /> <MediaInfo status=status />
</div>
<PlayControls status=status /> <PlayControls status=status />
<PlayDuration elapsed_secs=elapsed_secs.into() total_secs=total_secs.into() /> <PlayDuration elapsed_secs=elapsed_secs.into() total_secs=total_secs.into() />
<QueueToggle status=status /> <QueueToggle status=status />

View File

@ -39,23 +39,25 @@
} }
} }
.media-info { .playbar-left-group {
font-size: 16; .media-info {
margin-left: 10px; font-size: 16;
position: absolute;
top: 50%;
transform: translateY(-50%);
display: grid;
grid-template-columns: 50px 1fr;
.media-info-img {
width: 50px;
}
.media-info-text {
text-align: left;
margin-left: 10px; margin-left: 10px;
position: absolute;
top: 50%;
transform: translateY(-50%);
display: grid;
grid-template-columns: 50px 1fr;
.media-info-img {
width: 50px;
}
.media-info-text {
text-align: left;
margin-left: 10px;
}
} }
} }