filesite
/
machete
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

ui improve for mobile

master
filesite 2 months ago
parent
4ebfa8ae35
commit
255295bcc5
4 changed files with 34 additions and 22 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 33
      themes/beauty/views/site/mp3player.php
  2. 8
      themes/beauty/views/site/player.php
  3. 13
      www/css/beauty.css
  4. 2
      www/js/beauty.js

33
themes/beauty/views/site/mp3player.php
Unescape View File

@ -43,11 +43,11 @@ @@ -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,25 +63,30 @@ @@ -63,25 +63,30 @@
</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">
<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"
data-video-id="{videoId}"
data-video-url="{videoPath}"
alt="">
<span class="duration">00:00:00</span>
<span class="title">{title}</span>
</a>
<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"
data-video-id="{videoId}"
data-video-url="{videoPath}"
alt="">
<span class="duration">00:00:00</span>
<span class="title">{title}</span>
</a>
</div>
</div>
</script>

8
themes/beauty/views/site/player.php
Unescape View File

@ -43,15 +43,17 @@ @@ -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>

13
www/css/beauty.css
Unescape View File

@ -151,14 +151,15 @@ a:link{text-decoration:none} @@ -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 .downloadbtn{width:96px;margin:80px auto 0 auto}
.audioplayer .videoplayer{max-width:460px;height:120px;overflow:hidden;opacity:0.85}
.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} @@ -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} @@ -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}

2
www/js/beauty.js
Unescape View File

@ -777,7 +777,7 @@ if ($('#my-player').length > 0 && typeof(videojs) != 'undefined') { @@ -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() {

Write Preview
Loading…
Cancel
Save