ui improve for mobile

themes/beauty/views/site/mp3player.php

@@ -43,11 +43,11 @@
         data-cid="<?php echo $viewData['cacheParentDataId']; ?>"
         data-page="<?php echo $viewData['page']; ?>"
         data-page-size="<?php echo $viewData['pageSize']; ?>"
-        class="row othervideos ml-1"><div class="ml-1">...</div></div>
+        class="row othervideos"><div class="ml-1">...</div></div>
 </div>
 <div class="audioplayer" style="background:url('/img/beauty/audio_bg.jpg') top center">
     <div class="row">
-        <div class="col col-md-3 col-xs-8">
+        <div class="col col-md-offset-3 col-md-6 col-xs-12">
             <div class="videoplayer">
                 <video
                     data-id="<?php echo $viewData['videoId']; ?>"
@@ -63,17 +63,21 @@
                 </video>
             </div>
         </div>
-        <div class="col col-md-3 col-xs-4">
+        <div class="col col-md-1 col-xs-4 vercenter hidden-xs">
             <a class="btn btn-default downloadbtn" href="<?php echo $viewData['videoUrl']; ?>&download=1">
                 <img src="/img/download.png" alt="download icon" width="20">
-                下载音乐
+                <span class="">下载</span>
             </a>
         </div>
+        <a class="btn btn-default downloadbtn visible-xs-block" href="<?php echo $viewData['videoUrl']; ?>&download=1">
+            <img src="/img/download.png" alt="download icon" width="20">
+        </a>
     </div>
 </div>
 
 <script type="text/template" id="template_video_item">
-    <div class="col-xs-12 mb-1 audio-item">
+    <div class="col-xs-12">
+        <div class="mb-1 audio-item clearfix">
             <a href="{videoUrl}" title="{title}">
                 <img src="/img/beauty/audio_icon.jpeg?v1" class="bor_radius video-poster" id="poster_{videoId}"
                     width="60" height="60"
@@ -84,4 +88,5 @@
                 <span class="title">{title}</span>
             </a>
         </div>
+    </div>
 </script>

themes/beauty/views/site/player.php

@@ -43,15 +43,17 @@
             </video>
             <div class="text-right mt-2 mr-1">
                 <?php if (!empty($viewData['isAdminIp'])) { ?>
-                <button class="btn btn-default mr-1 btn-snapshot">
+                <button class="btn btn-default btn-snapshot">
                     <img src="/img/beauty/video_dir.png" alt="download icon" width="20">
                     生成封面图
                 </button>
                 <?php } ?>
-                <a class="btn btn-default" href="<?php echo $viewData['videoUrl']; ?>&download=1">
+                <?php if ($viewData['videoExtension'] != 'm3u8') { ?>
+                <a class="btn btn-default ml-1" href="<?php echo $viewData['videoUrl']; ?>&download=1">
                     <img src="/img/download.png" alt="download icon" width="20">
-                    下载视频
+                    下载
                 </a>
+                <?php } ?>
             </div>
         </div>
     </div>

www/css/beauty.css

@@ -151,14 +151,15 @@ a:link{text-decoration:none}
 .audio-list-item .duration{bottom:17.5%;left:50%;width:50px;margin-left:-25px}
 .audiolist{max-width:600px;margin:0 auto;min-height:560px}
 .audiolist .othervideos{max-height:inherit}
-.audio-item{background:rgba(7, 7, 7, .1);padding:5px;border-radius:5px}
+.audio-item{background:rgba(7, 7, 7, .1);padding:5px;border-radius:5px;margin:0 5px;position:relative;cursor:pointer}
+.audio-item:hover{background-color:#CCC}
 .audio-item a{display:block}
 .audio-item img{float:left;width:60px;height:60px}
 .audio-item .title{display:block;margin-left:70px}
-.audio-item .duration{max-width:60px;overflow:hidden;margin-left:6px}
+.audio-item .duration{max-width:60px;overflow:hidden;margin-left:6px;bottom:2px}
 .audioplayer{position:fixed;left:0;right:0;bottom:0;z-index:1000;height:120px;overflow:hidden;background-color:#000}
-.audioplayer .videoplayer{max-width:335px;height:120px;overflow:hidden;opacity:0.85}
+.audioplayer .videoplayer{max-width:460px;height:120px;overflow:hidden;opacity:0.85}
-.audioplayer .downloadbtn{width:96px;margin:80px auto 0 auto}
+.audioplayer .downloadbtn{width:96px;margin:81px auto 0 auto}
 
 .mt-3{margin-top:3em}
 .mt-2{margin-top:2em}
@@ -180,6 +181,7 @@ a:link{text-decoration:none}
 .lampshow .othervideos{background-color:inherit}
 .lampshow .btn-default{background-color:#EEE}
 .lampshow .audio-item{background-color:#333}
+.lampshow .audio-item:hover{background-color:#444}
 .lampshow .audio-item .title{color:#999}
 .lampshow .audio-list-item .im_img{opacity:0.65}
 .lampshow .audio-list-item .title{color:#999}
@@ -202,6 +204,9 @@ a:link{text-decoration:none}
         height: 45vw;
     }
     .othervideos .im_item{height:34vw}
+    .audioplayer .videoplayer{max-width:100%}
+    .audioplayer .downloadbtn{width:30px;padding:3px 0;margin:0;position:absolute;top:5px;right:5px}
+
     .hidden-xs{display:none}
     .navbar-fixed-left,.navbar-fixed-left.closed,.versioninfo{position:static;width:100%}
     .navbar-fixed-left.closed li{display:block}

www/js/beauty.js

@@ -777,7 +777,7 @@ if ($('#my-player').length > 0 && typeof(videojs) != 'undefined') {
                 src: nextVideo.path,
                 type: nextVideo.videoType
             });
-            $('.navbar-header .videotitle').text(nextVideo.filename);
+            $('.navbar-header .videotitle').text(nextVideo.filename + '.' + nextVideo.extension);
         }
     };
     myPlayer.on('ended', function() {