Mastodon/mastoradio-la-radio-di-mastodon
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

add smooth entering transition on tracks

Browse Source
This commit is contained in:
Tixie 2020-03-03 22:09:45 +01:00
parent 977be69127
commit d64b384203
2 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/assets/scss/5-modules/track.scss
View File

@ -7,6 +7,20 @@
display: flex; display: flex;
margin-right: -1rem; margin-right: -1rem;
padding: 1rem 0; padding: 1rem 0;
transform-origin: center;
animation: trackIn .3s;
}
@keyframes trackIn {
from {
opacity: 0;
transform: scale(.7, 0);
}
to {
opacity: 1;
transform: scale(1);
}
} }
.track--active::before { .track--active::before {
@ -34,6 +48,7 @@
.track__title { .track__title {
overflow: hidden; overflow: hidden;
min-height: 1.14em;
color: $color-secondary; color: $color-secondary;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -47,8 +62,10 @@
.track__subtitle { .track__subtitle {
margin-top: .2rem; margin-top: .2rem;
min-height: 1.5em;
color: $color-grey-1; color: $color-grey-1;
font-size: 1.2rem; font-size: 1.2rem;
line-height: 1.5em;
} }
.track__username { .track__username {

4
src/components/Queue.svelte
View File

@ -27,8 +27,8 @@
<div class="queue__section"> <div class="queue__section">
<div class="queue__sectionTitle">History</div> <div class="queue__sectionTitle">History</div>
{#each history as track} {#each history as track, i (track.referer.url)}
<div class="track" class:track--active={track === $current} class:track--playing={!$paused}> <div class="track track--history" class:track--active={track === $current} class:track--playing={!$paused}>
<div class="track__main" on:click={() => select(track)}> <div class="track__main" on:click={() => select(track)}>
<div class="track__title">{track.media.title}</div> <div class="track__title">{track.media.title}</div>
<div class="track__subtitle"> <div class="track__subtitle">