0x2620/pandora
2
1
Fork 1
Code Issues 1.3k Pull requests Releases Wiki Activity

merge

Browse source
This commit is contained in:
j 2011-08-05 17:50:36 +02:00
commit b312e32afa
3 changed files with 44 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
static/html/itemInfo.html
View file

@ -1,79 +1,85 @@
<div id="itemInfo"> <div id="itemInfo">
<div style="align: center; width: 256px; margin: 8px; float: left"> <div style="position: absolute; left: 8px; top: 8px; width: 256px">
<img class="icon" style="height: 256px" src="/${id}/poster.jpg"> <div style="width: 256px; height: ${posterHeight}px">
<img class="icon" style="position: absolute; left: ${posterLeft}px; width: ${posterWidth}px; height: ${posterHeight}px" src="/${id}/poster.jpg"/>
</div>
<div style="display: block; position: absolute; top: ${posterHeight}px; width: 256px; height: 128px; overflow-y: hidden">
<img class="icon" style="position: absolute; left: ${posterLeft}px; width: ${posterWidth}px; height: ${posterHeight}px; -moz-transform: scaleY(-1); -webkit-transform: scaleY(-1)" src="/${id}/poster.jpg"/>
<div style="display: block; position: absolute; width: 256px; height: 128px; background: -moz-linear-gradient(top, rgba(16, 16, 16, 0.75), rgba(16, 16, 16, 1)); background: -webkit-linear-gradient(top, rgba(16, 16, 16, 0.75), rgba(16, 16, 16, 1))"></div>
</div>
</div> </div>
<div style="width: 512px; float: left"> <div style="position: absolute; width: 512px; left: 272px; top: 8px">
<div id="movieTitle" class="movieData textLarge textLeft" style="margin-top: 0px; margin-bottom: 2px"> <div id="movieTitle" class="movieData textLarge textLeft" style="margin-top: 0px; margin-bottom: 2px; font-size: 13px; font-weight: bold">
${title} ${title}
</div> </div>
<div id="movieDirector" class="movieData textLarge textLeft" style="margin-bottom: 4px"> <div id="movieDirector" class="movieData textLarge textLeft" style="margin-bottom: 4px; font-size: 13px; font-weight: bold">
${director} ${director}
</div> </div>
<div id="movieInfo" class="movieData textMedium textJustify" style="margin-bottom: 4px"> <div id="movieInfo" class="movieData textMedium textJustify" style="margin-bottom: 4px">
<span id="movieCountry"> <span id="movieCountry">
<span class="textBold">Country:</span> ${country} <span style="font-weight: bold">Country:</span> ${country}
</span> </span>
<span id="movieYear"> <span id="movieYear">
<span class="textBold">Year:</span> ${year} <span style="font-weight: bold">Year:</span> ${year}
</span> </span>
<span id="movieLanguage"> <span id="movieLanguage">
<span class="textBold">Language:</span> ${language} <span style="font-weight: bold">Language:</span> ${language}
</span> </span>
<span id="movieRuntime"> <span id="movieRuntime">
<span class="textBold">Runtime:</span> ${runtime} <span style="font-weight: bold">Runtime:</span> ${runtime}
</span> </span>
</div> </div>
<div id="movieAltTitles" class="movieData textMedium textJustify" style="margin-bottom: 4px"> <div id="movieAltTitles" class="movieData textMedium textJustify" style="margin-bottom: 4px">
<span class="textBold">Alternative Title(s):</span> {alternative_titles} <span style="font-weight: bold">Alternative Title(s):</span> ${alternative_titles}
</div> </div>
<div id="movieWriter" class="movieData textMedium textJustify" style="margin-bottom: 4px"> <div id="movieWriter" class="movieData textMedium textJustify" style="margin-bottom: 4px">
<span class="textBold">Writer:</span> ${writer} <span style="font-weight: bold">Writer:</span> ${writer}
</div> </div>
<div id="movieProducer" class="movieData textMedium textJustify" style="margin-bottom: 4px"> <div id="movieProducer" class="movieData textMedium textJustify" style="margin-bottom: 4px">
<span class="textBold">Producer:</span> ${producer} <span style="font-weight: bold">Producer:</span> ${producer}
</div> </div>
<div id="movieCast" class="movieData textMedium textJustify" style="margin-bottom: 4px"> <div id="movieCast" class="movieData textMedium textJustify" style="margin-bottom: 4px">
<span class="textBold">Cast:</span> ${cast} <span style="font-weight: bold">Cast:</span> ${cast}
</div> </div>
<div id="movieGenre" class="movieData textMedium textJustify" style="margin-bottom: 4px"> <div id="movieGenre" class="movieData textMedium textJustify" style="margin-bottom: 4px">
<span class="textBold">Genre:</span> ${genre} <span style="font-weight: bold">Genre:</span> ${genre}
</div> </div>
<div id="movieKeywords" class="movieData textMedium textJustify" style="margin-bottom: 4px"> <div id="movieKeywords" class="movieData textMedium textJustify" style="margin-bottom: 4px">
<span class="textBold">Keywords:</span> ${keyword} <span style="font-weight: bold">Keywords:</span> ${keyword}
</div> </div>
<div id="movieSummary" class="movieData textMedium textJustify" style="margin-bottom: 4px"> <div id="movieSummary" class="movieData textMedium textJustify" style="margin-bottom: 4px">
<span class="textBold">Summary:</span> FIXME <span style="font-weight: bold">Summary:</span> FIXME
</div> </div>
<div id="movieTrivia" class="movieData textMedium"> <div id="movieTrivia" class="movieData textMedium">
FIXTRIVA FIXTRIVA
</div> </div>
<div id="movieBusiness" class="movieData textMedium textJustify" style="margin-bottom: 4px"> <div id="movieBusiness" class="movieData textMedium textJustify" style="margin-bottom: 4px">
<div id="movieDate" style="margin-bottom: 4px;"> <div id="movieDate" style="margin-bottom: 4px;">
<span class="textBold">Release Date:</span> ${release_date} <span style="font-weight: bold">Release Date:</span> ${release_date}
</div> </div>
<span id="movieBudget"> <span id="movieBudget">
<span class="textBold">Budget:</span> ${budget} <span style="font-weight: bold">Budget:</span> ${budget}
</span> </span>
<span id="movieGross"> <span id="movieGross">
<span class="textBold">Gross:</span> ${gross} <span style="font-weight: bold">Gross:</span> ${gross}
</span> </span>
<span id="movieLoss"> <span id="movieLoss">
<span class="textBold">Profit:</span> ${profit} <span style="font-weight: bold">Profit:</span> ${profit}
</span> </span>
</div> </div>
<div id="moviePoll" class="movieData textMedium textJustify" style="margin-bottom: 4px"> <div id="moviePoll" class="movieData textMedium textJustify" style="margin-bottom: 4px">
<span id="movieRating"> <span id="movieRating">
<span class="textBold">Rating:</span> ${rating} <span style="font-weight: bold">Rating:</span> ${rating}
</span> </span>
<span id="movieVotes"> <span id="movieVotes">
<span class="textBold">Votes:</span> ${votes} <span style="font-weight: bold">Votes:</span> ${votes}
</span> </span>
</div> </div>
<div id="movieConnections"> <div id="movieConnections">
FIXME: movie connections FIXME: movie connections
</div> </div>
<div id="movieReviews" class="movieData textMedium textJustify" style="margin-bottom: 4px"> <div id="movieReviews" class="movieData textMedium textJustify" style="margin-bottom: 4px">
<span class="textBold">Reviews:</span> ${reviewsHtml} <span style="font-weight: bold">Reviews:</span> ${reviewsHtml}
</div> </div>
</div> </div>
</div> </div>

7
static/js/pandora/ui/item.js
View file

@ -105,9 +105,12 @@ pandora.ui.item = function() {
} else { } else {
$.get('/static/html/itemInfo.html', {}, function(template) { $.get('/static/html/itemInfo.html', {}, function(template) {
//Ox.print(template); //Ox.print(template);
var posterRatio = result.data.poster.width / result.data.poster.height;
result.data.posterWidth = posterRatio > 1 ? 256 : Math.round(256 * posterRatio);
result.data.posterHeight = posterRatio < 1 ? 256 : Math.round(256 / posterRatio);
result.data.posterLeft = Math.floor((256 - result.data.posterWidth) / 2);
pandora.$ui.contentPanel.replaceElement(1, pandora.$ui.contentPanel.replaceElement(1,
pandora.$ui.item = Ox.Element() pandora.$ui.item = Ox.Element().append($.tmpl(template, result.data))
.append($.tmpl(template, result.data))
); );
}); });
} }

19
static/js/pandora/ui/list.js
View file

@ -335,10 +335,10 @@ pandora.ui.list = function(view) { // fixme: remove view argument
var documentHeight = pandora.$ui.document.height(), var documentHeight = pandora.$ui.document.height(),
item = result.data.items[0], item = result.data.items[0],
title = item.title + (item.director ? ' (' + item.director + ')' : ''), title = item.title + (item.director ? ' (' + item.director + ')' : ''),
dialogHeight = documentHeight - 100, dialogHeight = documentHeight - 48,
dialogWidth; dialogWidth;
pandora.site.previewRatio = item.poster.width / item.poster.height, pandora.site.previewRatio = item.poster.width / item.poster.height,
dialogWidth = parseInt((dialogHeight - 48) * pandora.site.previewRatio); dialogWidth = Math.round((dialogHeight - 48) * pandora.site.previewRatio);
if ('previewDialog' in pandora.$ui) { if ('previewDialog' in pandora.$ui) {
pandora.$ui.previewDialog.options({ pandora.$ui.previewDialog.options({
title: title title: title
@ -355,7 +355,7 @@ pandora.ui.list = function(view) { // fixme: remove view argument
pandora.$ui.previewImage pandora.$ui.previewImage
.css({ .css({
width: dialogWidth + 'px', width: dialogWidth + 'px',
height: (dialogHeight - 48 - 2) + 'px', // fixme: why -2 ? height: (dialogHeight - 48) + 'px', // fixme: why -2 ?
opacity: 0 opacity: 0
}) })
.animate({ .animate({
@ -373,7 +373,7 @@ pandora.ui.list = function(view) { // fixme: remove view argument
.css({ .css({
position: 'absolute', position: 'absolute',
width: dialogWidth + 'px', width: dialogWidth + 'px',
height: (dialogHeight - 48 - 2) + 'px', // fixme: why -2 ? height: (dialogHeight - 48) + 'px', // fixme: why -2 ?
left: 0, left: 0,
top: 0, top: 0,
right: 0, right: 0,
@ -393,10 +393,11 @@ pandora.ui.list = function(view) { // fixme: remove view argument
}) })
], ],
content: pandora.$ui.previewImage, content: pandora.$ui.previewImage,
focus: false,
height: dialogHeight, height: dialogHeight,
id: 'previewDialog', id: 'previewDialog',
minHeight: pandora.site.previewRatio >= 1 ? 128 / pandora.site.previewRatio + 48 : 176, minHeight: pandora.site.previewRatio >= 1 ? Math.round(128 / pandora.site.previewRatio) + 48 : 176,
minWidth: pandora.site.previewRatio >= 1 ? 128 : 176 * pandora.site.previewRatio, minWidth: pandora.site.previewRatio >= 1 ? 128 : Math.round(176 * pandora.site.previewRatio),
padding: 0, padding: 0,
title: title, title: title,
width: dialogWidth width: dialogWidth
@ -406,10 +407,10 @@ pandora.ui.list = function(view) { // fixme: remove view argument
height, width; height, width;
if (dialogRatio < pandora.site.previewRatio) { if (dialogRatio < pandora.site.previewRatio) {
width = data.width; width = data.width;
height = width / pandora.site.previewRatio; height = Math.round(width / pandora.site.previewRatio);
} else { } else {
height = (data.height - 48 - 2); height = (data.height - 48);
width = height * pandora.site.previewRatio; width = Math.round(height * pandora.site.previewRatio);
} }
pandora.$ui.previewImage.css({ pandora.$ui.previewImage.css({
width: width + 'px', width: width + 'px',