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

* 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

src/components/CoverRow.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="cover-row" :style="rowStyles">
+  <div
+    class="cover-row"
+    :style="rowStyles"
+    :class="{ 'without-padding': withoutPadding }"
+  >
     <div
       class="item"
       v-for="item in items"
@@ -50,6 +54,7 @@ export default {
     showPlayCount: { type: Boolean, default: false },
     columnNumber: { type: Number, default: 5 },
     gap: { type: String, default: "44px 24px" },
+    withoutPadding: { type: Boolean, default: false },
   },
   computed: {
     rowStyles() {
@@ -114,6 +119,13 @@ export default {
 <style lang="scss" scoped>
 .cover-row {
   display: grid;
+  padding: var(--main-content-padding);
+  max-width: calc(100vw - var(--main-content-padding-x));
+  overflow-x: scroll;
+}
+
+.cover-row.without-padding {
+  padding: 0;
 }
 
 .item {
@@ -143,6 +155,18 @@ export default {
   }
 }
 
+@media (max-width: 800px) {
+  .item {
+    width: 256px;
+  }
+}
+
+@media (max-width: 600px) {
+  .item {
+    width: 192px;
+  }
+}
+
 .item.artist {
   display: flex;
   flex-direction: column;

src/components/MvRow.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mv-row">
+  <div class="mv-row" :class="{ 'without-padding': withoutPadding }">
     <div class="mv" v-for="mv in mvs" :key="getID(mv)">
       <div
         class="cover"
@@ -35,6 +35,7 @@ export default {
       type: String,
       default: "artist",
     },
+    withoutPadding: { type: Boolean, default: false },
   },
   data() {
     return {
@@ -83,9 +84,39 @@ export default {
 
 <style lang="scss" scoped>
 .mv-row {
+  --col-num: 5;
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(var(--col-num), 1fr);
   gap: 36px 24px;
+  padding: var(--main-content-padding);
+}
+
+.mv-row.without-padding {
+  padding: 0;
+}
+
+@media (max-width: 900px) {
+  .mv-row {
+    --col-num: 4;
+  }
+}
+
+@media (max-width: 800px) {
+  .mv-row {
+    --col-num: 3;
+  }
+}
+
+@media (max-width: 700px) {
+  .mv-row {
+    --col-num: 2;
+  }
+}
+
+@media (max-width: 550px) {
+  .mv-row {
+    --col-num: 1;
+  }
 }
 
 .mv {

src/components/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav>
+  <nav :class="{ 'search-box-open': isSearchBoxOpen }">
     <div class="navigation-buttons">
       <button-icon @click.native="go('back')"
         ><svg-icon icon-class="arrow-left"
@@ -30,6 +30,9 @@
         v-if="settings.showGithubIcon !== false"
         ><svg-icon icon-class="github" class="github"
       /></a>
+      <button-icon @click.native="toggleSearchBox()" class="search-button">
+        <svg-icon icon-class="search" />
+      </button-icon>
       <div class="search-box">
         <div class="container" :class="{ active: inputFocus }">
           <svg-icon icon-class="search" />
@@ -63,6 +66,7 @@ export default {
       inputFocus: false,
       langs: ["zh-CN", "en"],
       keywords: "",
+      isSearchBoxOpen: false,
     };
   },
   computed: {
@@ -86,6 +90,9 @@ export default {
         params: { keywords: this.keywords },
       });
     },
+    toggleSearchBox() {
+      this.isSearchBoxOpen = !this.isSearchBoxOpen;
+    },
   },
 };
 </script>
@@ -105,6 +112,9 @@ nav {
     left: 10vw;
   }
   backdrop-filter: saturate(180%) blur(20px);
+  border-bottom: 1px solid transparent;
+  transition-property: padding-bottom, border-bottom;
+  transition-duration: 0.4s;
 
   background-color: var(--color-navbar-bg);
   z-index: 100;
@@ -248,5 +258,67 @@ nav {
     color: var(--color-text);
     -webkit-app-region: no-drag;
   }
+  @media (max-width: 400px) {
+    .github {
+      display: none;
+    }
+  }
+  .search-button {
+    display: none;
+  }
+  @media (max-width: 600px) {
+    .search-button {
+      display: flex;
+    }
+  }
+}
+
+@media (max-width: 600px) {
+  .right-part {
+    flex: 0;
+  }
+}
+
+@media (max-width: 800px) {
+  .navigation-links > a {
+    margin: 4px;
+  }
+}
+
+@media (max-width: 700px) {
+  .navigation-buttons {
+    display: none;
+  }
+}
+
+@media (max-width: 600px) {
+  nav.search-box-open {
+    padding-bottom: 36px;
+    border-bottom-color: var(--color-secondary-bg-for-transparent);
+  }
+
+  .search-box {
+    display: block;
+    position: fixed;
+    top: 56px;
+    left: 16px;
+    right: 16px;
+    .container {
+      width: 100%;
+      opacity: 0;
+      height: 0;
+      overflow: hidden;
+      transition-property: height, opacity;
+      transition-duration: 0.4s;
+      .input {
+        width: 100%;
+      }
+    }
+  }
+
+  nav.search-box-open .container {
+    opacity: 1;
+    height: 32px;
+  }
 }
 </style>

src/components/Player.vue

@@ -62,7 +62,10 @@
       <div class="middle-control-buttons">
         <div class="blank"></div>
         <div class="container" @click.stop>
-          <button-icon @click.native="previous" :title="$t('player.previous')"
+          <button-icon
+            @click.native="previous"
+            :title="$t('player.previous')"
+            class="auto-hide"
             ><svg-icon icon-class="previous"
           /></button-icon>
           <button-icon
@@ -78,7 +81,7 @@
         </div>
         <div class="blank"></div>
       </div>
-      <div class="right-control-buttons">
+      <div class="right-control-buttons auto-hide">
         <div class="blank"></div>
         <div class="container" @click.stop>
           <button-icon
@@ -343,6 +346,18 @@ export default {
   display: flex;
 }
 
+@media (max-width: 700px) {
+  .controls {
+    display: flex;
+  }
+  .playing {
+    flex: 1;
+  }
+  .playing .container {
+    pointer-events: none;
+  }
+}
+
 .playing .container {
   display: flex;
   align-items: center;
@@ -448,6 +463,20 @@ export default {
   margin-left: 16px;
 }
 
+@media (max-width: 700px) {
+  .controls {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .middle-control-buttons {
+    justify-content: flex-end;
+    margin-left: auto;
+  }
+  .auto-hide,
+  .blank {
+    display: none;
+  }
+}
+
 // .lyrics-button {
 //   position: fixed;
 //   right: 18px;

src/components/TrackList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="track-list">
+  <div class="track-list" :class="{ 'without-padding': withoutPadding }">
     <ContextMenu ref="menu">
       <div class="item-info">
         <img :src="rightClickedTrack.al.picUrl | resizeImage(224)" />
@@ -26,7 +26,7 @@
       >
       <div class="item" @click="addTrackToPlaylist">添加到歌单</div>
     </ContextMenu>
-    <div :style="listStyles">
+    <div :style="listStyles" class="track-list-inner-container">
       <TrackListItem
         v-for="(track, index) in tracks"
         :track="track"
@@ -78,10 +78,6 @@ export default {
         return []; // 'removeTrackFromPlaylist'
       },
     },
-    columnNumber: {
-      type: Number,
-      default: 4,
-    },
     highlightPlayingTrack: {
       type: Boolean,
       default: true,
@@ -90,6 +86,10 @@ export default {
       type: String,
       default: "id",
     },
+    withoutPadding: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -107,7 +107,6 @@ export default {
       this.listStyles = {
         display: "grid",
         gap: "4px",
-        gridTemplateColumns: `repeat(${this.columnNumber}, 1fr)`,
       };
     }
   },
@@ -240,4 +239,36 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.track-list {
+  --col-num: 4;
+  padding: var(--main-content-padding);
+
+  .track-list-inner-container {
+    grid-template-columns: repeat(var(--col-num), 1fr);
+  }
+}
+
+.track-list.without-padding {
+  padding: 0;
+}
+
+@media (max-width: 800px) {
+  .track-list {
+    --col-num: 3;
+    padding: var(--main-content-padding);
+  }
+}
+
+@media (max-width: 700px) {
+  .track-list {
+    --col-num: 2;
+  }
+}
+
+@media (max-width: 550px) {
+  .track-list {
+    --col-num: 1;
+  }
+}
+</style>

src/components/TrackListItem.vue

@@ -193,6 +193,7 @@ button {
   padding: 8px;
   border-radius: 12px;
   user-select: none;
+  transition: all 0.3s;
 
   .no {
     display: flex;
@@ -293,6 +294,11 @@ button {
     -webkit-line-clamp: 2;
     overflow: hidden;
   }
+  @media (max-width: 600px) {
+    .album {
+      flex: 0;
+    }
+  }
   .time {
     font-size: 16px;
     width: 50px;
@@ -307,7 +313,6 @@ button {
 }
 
 .track.focus {
-  transition: all 0.3s;
   background: var(--color-secondary-bg);
 }
 
@@ -354,6 +359,12 @@ button {
   justify-content: flex-end;
 }
 
+@media (max-width: 600px) {
+  .actions {
+    width: auto;
+  }
+}
+
 .track.playing {
   background: var(--color-primary-bg);
   color: var(--color-primary);