girineko/YesPlayMusic
1
0
Fork 0
mirror of https://github.com/GiriNeko/YesPlayMusic.git synced 2025-12-17 21:58:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update animations for lyrics, panels and tracklists | 为歌词、面板和列表更新动画 (#249)

Browse source 
* Update lyrics scrolling animation

* Remove the useless module imported by mistake

* Auto prettify the changed code

* Update lyrics animation curve and add blur effect to lyrics

* Auto prettify the changed code

* Add initial lyrics blur filter

* Update lyrics blur and fade effect

* Update open and close animation for explore page's panel

* Update tracklist hover animation

* Add scale animation to lyrics

* Auto prettify the changed code

* Update lyrics blur effect with CSS variables

* Support small screen devices for all pages

* Fix paddings for some pages

* Auto prettify the changed code

* Update lyrics page for small screen devices
This commit is contained in:
Mr. Will 2021-02-12 07:18:55 +00:00 • committed by GitHub
parent 97f2ce043b
commit 1d34aa794f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 496 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/views/artist.vue
View file

@ -4,7 +4,7 @@
<div class="head">
<img :src="artist.img1v1Url | resizeImage(1024)" />
</div>
<div>
<div class="info">
<div class="name">{{ artist.name }}</div>
<div class="artist">{{ $t("artist.artist") }}</div>
<div class="statistics">
@ -253,6 +253,7 @@ export default {
align-items: center;
margin-bottom: 26px;
color: var(--color-text);
padding: var(--main-content-padding);
img {
height: 192px;
width: 192px;
@ -289,12 +290,37 @@ export default {
}
}
@media (max-width: 600px) {
.artist-info {
display: block;
.head {
display: flex;
justify-content: center;
align-items: center;
}
.info {
margin-top: 24px;
}
.name {
font-size: 36px;
}
img {
margin: 0;
}
}
}
.section-title {
font-weight: 600;
font-size: 22px;
opacity: 0.88;
color: var(--color-text);
margin-bottom: 16px;
padding: var(--main-content-padding);
padding-top: 46px;
display: flex;
@ -309,6 +335,11 @@ export default {
.latest-release {
color: var(--color-text);
padding: var(--main-content-padding);
.section-title {
padding-left: 0;
padding-right: 0;
}
.release {
display: flex;
}
@ -343,6 +374,7 @@ export default {
.popular-tracks {
.show-more {
display: flex;
padding: var(--main-content-padding);
button {
padding: 4px 8px;