franzz/ugc
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add film details

Browse Source
This commit is contained in:
Franzz
2019-02-24 22:06:40 +01:00
parent 2b8a9118b8
commit e3b59d1580
5 changed files with 156 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
script/ugc.js
View File

@@ -140,16 +140,45 @@ function Film(oSettings)
.append($('<a>', {'target':'_blank', 'href':this.trailer()}) .append($('<a>', {'target':'_blank', 'href':this.trailer()})
.append($('<i>', {'class':'fa fa-fw inline fa-trailer'})) .append($('<i>', {'class':'fa fa-fw inline fa-trailer'}))
.append('Trailer')))*/ .append('Trailer')))*/
.append($('<p>', {'class':'director'}) .append($('<div>', {'class':'film-info'})
.append($('<i>', {'class':'fa fa-fw inline fa-director'})) .append($('<p>', {'class':'director'})
.append(this.director())) .append('By '+this.director())
.append($('<div>', {'class':'timetable'}))) .append($('<i>', {'class':'more-info fa fa-more'}).data('loaded', false).click(this.toggleFilmDetails)))
.append($('<div>', {'class':'film-details'}).hide())
.append($('<div>', {'class':'timetable'}))))
//.append($('<div>', {'class':'timetable fa fa-fw fa-spinner fa-spin'}))) //.append($('<div>', {'class':'timetable fa fa-fw fa-spinner fa-spin'})))
.hide() .hide()
.appendTo(this.$Main); .appendTo(this.$Main);
} }
}; };
this.toggleFilmDetails = function() {
var $This = $(this);
var show = function(hDom){
$This.data('loaded', true);
var $Dom = $(hDom);
$Dom.find('.movie-infos li').add($Dom.find('.movie-infos').next('ul').find('li')).each(function(iKey, oElem){
self.anchor().find('.film-details').append($('<p>').text($(oElem).text()));
});
self.anchor().find('.film-details, .timetable').toggle();
self.anchor().find('.more-info').removeClass('fa-spinner fa-spin').addClass('fa-close');
};
var hide = function() {
self.anchor().find('.film-details, .timetable').toggle();
self.anchor().find('.more-info').removeClass('fa-close').addClass('fa-more');
}
if(self.anchor().find('.more-info').hasClass('fa-close')) hide();
else if(!$This.data('loaded')) self.getFilmDetails(show);
else show();
};
this.getFilmDetails = function(fCallBack) {
self.anchor().find('.more-info').removeClass('fa-more').addClass('fa-spinner fa-spin');
getUgcPage('film.html', {id: self.id()}, fCallBack, function(){}, 'html');
};
this.timetable = function(iCinemaId, sLang, oTimetable) this.timetable = function(iCinemaId, sLang, oTimetable)
{ {
if(!iCinemaId) return this._timetable || {}; if(!iCinemaId) return this._timetable || {};

4
style/_small_screen.scss
View File

@@ -78,6 +78,10 @@
width: calc(100% - 0.5em - #{$poster_size}); width: calc(100% - 0.5em - #{$poster_size});
} }
main .film .info .fa-more {
display: none;
}
#buffer { #buffer {
width: 6em; width: 6em;
height: 6em; height: 6em;

2
style/ugc.css
View File

File diff suppressed because one or more lines are too long

2
style/ugc.css.map
View File

File diff suppressed because one or more lines are too long

170
style/ugc.scss
View File

@@ -91,16 +91,23 @@ select {
.fa-director:before { .fa-director:before {
content: "\f007"; content: "\f007";
} }
.fa-more:before {
content: "\f05a";
}
.fa-spinner { .fa-spinner {
color: $ugc_color; color: $ugc_color;
font-size:2em; font-size:2em;
}
.fa-spinner:before { &:before {
content: "\f110"; content: "\f110";
}
} }
.fa-cinema:before { .fa-cinema:before {
content: "\f017"; content: "\f017";
} }
.fa-close:before {
content: "\f057";
}
.fa-date:before { .fa-date:before {
content: "\f133"; content: "\f133";
} }
@@ -219,84 +226,113 @@ main {
-webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5); -webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5); -moz-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5); box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
}
.film * { * {
transform: translate(0px, 0px); transform: translate(0px, 0px);
} }
.film img.bg { img.bg {
position:absolute; position:absolute;
top:50%; top:50%;
margin-top:-25%; margin-top:-25%;
left:$poster_size; left:$poster_size;
right:0; right:0;
bottom:0; bottom:0;
opacity:0.2; opacity:0.2;
width:calc(100% - #{$poster_size}); width:calc(100% - #{$poster_size});
} }
.film .poster-container { .poster-container {
display: inline-block; display: inline-block;
}
.film img.poster { img.poster {
width:$poster_size; width: $poster_size;
z-index:2; z-index: 2;
vertical-align: top; vertical-align: top;
} }
}
.film .info { p {
z-index:2; margin: 0.5em 0;
display: inline-block; }
vertical-align:top;
padding:1em;
width: calc(100% - 2em - #{$poster_size});
}
.film p { .info {
margin:0.5em 0; z-index:2;
} display: inline-block;
vertical-align:top;
padding:1em;
width: calc(100% - 2em - #{$poster_size});
.film .title { .title {
margin-top:0; margin: 0;
}
.film .title a.name {
font-weight: bold;
text-transform: uppercase;
}
.film .edito { a.name {
font-style: italic; font-weight: bold;
color:#777; text-transform: uppercase;
} }
}
.film .director { .edito {
color: #555; font-style: italic;
} color:#777;
}
.film .timetable { .film-info {
margin-top:1em; padding-left: calc((1.28571429em + 0.5em)/0.9);
font-size: 0.8em; font-size: 0.9em;
} color: #555;
.film .timetable p { .director {
line-height: 2.0; font-style: italic;
margin: 0;
}
.film .timetable .cinema { .more-info {
margin-right:0.5em; font-size: calc(1em/0.9);
} margin-left: 0.5em;
vertical-align: -0.05em;
.film .timetable .cinema .fa { &:not(.fa-spin) {
font-size: 1.25em; cursor: pointer;
line-height: 0.7656249414em; &:hover {
vertical-align: -14.06250352%; color: $ugc_color;
} }
}
}
}
.film .timetable .lang { .film-details {
margin-right:0.5em; border-left: 2px solid #CCC;
padding-left: 0.5em;
p {
font-size: 0.8em;
color: #555;
}
}
}
.timetable {
margin-top:1em;
font-size: 0.8em;
p {
line-height: 2.0;
margin: 0;
}
.cinema {
margin-right:0.5em;
.fa {
font-size: 1.25em;
line-height: 0.7656249414em;
vertical-align: -14.06250352%;
}
}
.lang {
margin-right:0.5em;
}
}
}
} }
/* Section - Feeback */ /* Section - Feeback */