feat(home): Dynamic background image of home body

This commit is contained in:
OldHawk
2018-04-26 16:14:05 +08:00
parent 67bd472028
commit 3c1574e6cf
4 changed files with 68 additions and 13 deletions

View File

@@ -248,6 +248,7 @@ module.exports = {
showVipBanner: false,
showForumNewTopicsAndNewestTorrents: false,
showTopLevelTorrents: false,
bodyBackgroundImage: 'https://image.tmdb.org/t/p/w1280/cnKAGbX1rDkAquF2V1wVkptHDJO.jpg',
buttonList: [
{
icon: 'fa-bars',

View File

@@ -26,6 +26,29 @@
vm.searchType = 'torrents';
/**
* initBodyBackground
*/
vm.initBodyBackground = function () {
var url = localStorageService.get('body_background_image') || vm.homeConfig.bodyBackgroundImage;
$('.body-backdrop').css('backgroundImage', 'url("' + url + '")');
TorrentsService.get({
torrent_status: 'reviewed',
torrent_type: 'movie',
torrent_vip: false,
limit: 1
}, function (items) {
if (items.rows.length > 0) {
var newUrl = vm.TGI.getTorrentBackdropImage(items.rows[0]);
if (newUrl !== url) {
$('.body-backdrop').css('backgroundImage', 'url("' + newUrl + '")');
localStorageService.set('body_background_image', newUrl);
}
}
});
};
/**
* getForumList
*/

View File

@@ -128,19 +128,19 @@
cursor: pointer;
font-size: 50px;
color: #fff;
transition: color .2s ease-in;
transition: color .3s ease-in;
.fun-icon {
color: @mt-base-color;
transition: color .2s ease-in;
transition: color .3s ease-in;
}
}
.fun-desc {
font-size: 14px;
color: #8a8a8a;
transition: color .2s ease-in;
transition: color .3s ease-in;
}
.fun-title {
transition: color .2s ease-in;
transition: color .3s ease-in;
}
&:hover {
.fa-stack {
@@ -260,7 +260,7 @@
}
.body-backdrop {
background-image: url("https://image.tmdb.org/t/p/w1280/cnKAGbX1rDkAquF2V1wVkptHDJO.jpg");
background-image: url("");
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
@@ -272,28 +272,44 @@
.filter-search {
position: relative;
background-color: #2a2a2a;
background-color: rgba(42, 42, 42, .9);
background-color: rgba(42, 42, 42, .8);
transition: background-color .3s ease-in;
&:hover {
background-color: rgba(42, 42, 42, .9);
}
}
.filter-notice {
position: relative;
margin-top: 2px;
background-color: @mt-body-background-color;
background-color: rgba(255, 255, 255, .9);
background-color: rgba(255, 255, 255, .8);
transition: background-color .3s ease-in;
&:hover {
background-color: rgba(255, 255, 255, .9);
}
}
.filter-vip {
position: relative;
margin-top: 2px;
background-color: @mt-body-background-color;
background-color: rgba(255, 255, 255, .9);
background-color: rgba(255, 255, 255, .8);
transition: background-color .3s ease-in;
&:hover {
background-color: rgba(255, 255, 255, .9);
}
}
.filter-button-list {
position: relative;
margin-top: 2px;
background-color: @mt-body-background-color;
background-color: rgba(255, 255, 255, .9);
background-color: rgba(255, 255, 255, .8);
transition: background-color .3s ease-in;
&:hover {
background-color: rgba(255, 255, 255, .9);
}
}
.filter-copy {
@@ -301,8 +317,14 @@
line-height: 2;
margin-top: 2px;
padding: 30px 0;
color: #aaa;
text-shadow: 0 0 0.1em #000,-0 -0 0.1em #000;
background-color: #2a2a2a;
background-color: rgba(42, 42, 42, .9);
background-color: rgba(42, 42, 42, .8);
transition: background-color .3s ease-in;
&:hover {
background-color: rgba(42, 42, 42, .9);
}
}
.filter-footer {
@@ -310,8 +332,13 @@
margin-top: 2px;
padding: 30px 0;
color: #aaa;
text-shadow: 0 0 0.1em #000,-0 -0 0.1em #000;
background-color: #2a2a2a;
background-color: rgba(42, 42, 42, .9);
background-color: rgba(42, 42, 42, .8);
transition: background-color .3s ease-in;
&:hover {
background-color: rgba(42, 42, 42, .9);
}
}
.filter-disclaimer {
@@ -319,7 +346,11 @@
margin-top: 2px;
padding: 30px 0 60px 0;
background-color: @progress-bar-danger-bg;
background-color: rgba(217, 83, 79, .9);
background-color: rgba(217, 83, 79, .8);
transition: background-color .3s ease-in;
&:hover {
background-color: rgba(217, 83, 79, .9);
}
}
.home-torrents {

View File

@@ -1,4 +1,4 @@
<section ng-controller="HomeController as vm">
<section ng-controller="HomeController as vm" ng-init="vm.initBodyBackground()">
<div class="home_notice sales_notice panel-collapsed" ng-if="vm.showSaleNotice()" ng-init="vm.openSalesNotice()" style="display: none;">
<div class="container">
<div class="alert alert-success" role="alert" style="padding: 20px 50px;">