optimize the style of aplayer with lrc

DIYgod · Oct 11, 2016 · c1c83d3 · c1c83d3
1 parent 89992c8
commit c1c83d3
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 23 deletions.
diff --git a/dist/APlayer.min.js b/dist/APlayer.min.js
diff --git a/dist/APlayer.min.js.map b/dist/APlayer.min.js.map
diff --git a/src/APlayer.js b/src/APlayer.js
@@ -112,8 +112,8 @@ class APlayer {
                 for (let i = 0; i < this.lrc.length; i++) {
                     if (currentTime >= this.lrc[i][0] && (!this.lrc[i + 1] || currentTime < this.lrc[i + 1][0])) {
                         this.lrcIndex = i;
-                        this.lrcContents.style.transform = `translateY(${-this.lrcIndex * 20}px)`;
-                        this.lrcContents.style.webkitTransform = `translateY(${-this.lrcIndex * 20}px)`;
+                        this.lrcContents.style.transform = `translateY(${-this.lrcIndex * 16}px)`;
+                        this.lrcContents.style.webkitTransform = `translateY(${-this.lrcIndex * 16}px)`;
                         this.lrcContents.getElementsByClassName('aplayer-lrc-current')[0].classList.remove('aplayer-lrc-current');
                         this.lrcContents.getElementsByTagName('p')[i].classList.add('aplayer-lrc-current');
                     }
@@ -140,6 +140,9 @@ class APlayer {
         if (this.option.showlrc) {
             this.element.classList.add('aplayer-withlrc');
         }
+        if (this.option.music.length > 1) {
+            this.element.classList.add('aplayer-list');
+        }
 
         // fill in HTML
         let eleHTML = `
@@ -172,7 +175,7 @@ class APlayer {
                             - <span class="aplayer-ptime">00:00</span> / <span class="aplayer-dtime">00:00</span>
                         </span>
                         <div class="aplayer-volume-wrap">
-                            <button class="aplayer-icon aplayer-icon-volume-down">`
+                            <button class="aplayer-icon aplayer-icon-volume-down" ${this.isMobile ? 'style="display: none;"' : ''}>`
             +                   this.getSVG('volume-down')
             + `             </button>
                             <div class="aplayer-volume-bar-wrap">

diff --git a/src/APlayer.scss b/src/APlayer.scss
@@ -1,6 +1,6 @@
 $aplayer-height: 66px;
-$lrc-height: 40px;
-$aplayer-height-lrc: $aplayer-height + $lrc-height;
+$lrc-height: 30px;
+$aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
 
 .aplayer-narrow {
     width: $aplayer-height;
@@ -13,16 +13,32 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
     &.aplayer-narrow {
         width: $aplayer-height-lrc;
     }
-    &.aplayer .aplayer-pic {
-        height: $aplayer-height-lrc;
-        width: $aplayer-height-lrc;
-    }
-    &.aplayer .aplayer-info {
-        margin-left: $aplayer-height-lrc;
-        height: $aplayer-height-lrc;
+    &.aplayer {
+        .aplayer-pic {
+            height: $aplayer-height-lrc;
+            width: $aplayer-height-lrc;
+        }
+
+        .aplayer-info {
+            margin-left: $aplayer-height-lrc;
+            height: $aplayer-height-lrc;
+        }
+
+        .aplayer-lrc {
+            display: block;
+        }
+
+        .aplayer-info {
+            padding: 10px 7px 0 7px;
+        }
     }
-    &.aplayer .aplayer-lrc {
-        display: block;
+}
+
+.aplayer-list {
+    &.aplayer {
+        .aplayer-info {
+            border-bottom: 1px solid #e9e9e9;
+        }
     }
 }
 
@@ -135,6 +151,7 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
             margin-bottom: 13px;
             user-select: text;
             cursor: default;
+            padding-bottom: 2px;
 
             .aplayer-title {
                 font-size: 14px;
@@ -285,7 +302,7 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
         background: #fff;
         text-align: center;
         overflow: hidden;
-        margin: -10px 0 10px;
+        margin: -10px 0 7px;
 
         &:before {
             position: absolute;
@@ -311,17 +328,17 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
             width: 100%;
             height: 33%;
             content: ' ';
-            background: -moz-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
-            background: -webkit-linear-gradient(bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
-            background: linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
-            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
+            background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%);
+            background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 100%);
+            background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 100%);
+            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ccffffff',GradientType=0 );
         }
 
         p {
             font-size: 12px;
             color: #666;
-            line-height: 20px !important;
-            height: 20px !important;
+            line-height: 16px !important;
+            height: 16px !important;
             padding: 0 !important;
             margin: 0 !important;
             transition: all 0.5s ease-out;
@@ -380,6 +397,10 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
                 transition: all 0.2s ease;
                 overflow: hidden;
 
+                &:first-child {
+                    border-top: none;
+                }
+
                 &:hover {
                     background: #efefef;
                 }