This commit is contained in:
j 2011-06-06 17:55:37 +02:00
commit 2bfe54b682
7 changed files with 267 additions and 8 deletions

View file

@ -0,0 +1,78 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
pandora.ui.homePage = function() {
var that = Ox.Element()
.css({padding: '8px'});
var $left = $('<div>')
.css({
float: 'left',
margin: '8px',
background: 'black'
})
.html('left')
.appendTo(that.$element),
$center = $('<div>')
.css({
float: 'left',
margin: '8px'
})
.appendTo(that.$element),
$right = $('<div>')
.css({
float: 'left',
margin: '8px',
background: 'black'
})
.html('right')
.appendTo(that.$element),
$logo = $('<img>')
.attr({src: '/static/png/logo256.png'})
.appendTo($center);
// fixme: duplicated
$select = Ox.Select({
id: 'select',
items: $.merge($.map(pandora.site.findKeys,
function(key, i) {
return {
id: key.id,
title: 'Find: ' + key.title
};
}), [{}, {
id: 'advanced',
title: 'Find: Advanced'
}]),
overlap: 'right',
width: 112
})
$input = Ox.Input({})
.bindEvent({
change: function() {
}
});
$findElement = Ox.FormElementGroup({
elements: [$select, $input],
})
.css({marginTop: '16px'})
.appendTo($center);
$center = $('<div>')
.css({marginTop: '16px'})
.html('center')
.appendTo($center);
that.resize = function() {
var size = Ox.divideInt(window.innerWidth - pandora.user.ui.showSidebar * pandora.user.ui.sidebarSize - 1 - 64, 3);
$left.css({width: size[0] + 'px'});
$center.css({width: size[1] + 'px'});
$logo.css({width: size[1] + 'px'});
$input.options({width: size[1] - 112});
$right.css({width: size[2] + 'px'});
};
that.resize();
return that;
}

View file

@ -207,6 +207,181 @@ pandora.ui.mainMenu = function() {
title: 'About'
}).open();
} else if (data.id == 'home') {
var $screen = $('<div>')
.attr({id: 'screen'})
.css({
position: 'absolute',
width: '100%',
height: '100%',
background: 'rgb(32, 32, 32)',
opacity: 0,
zIndex: 1000
})
.appendTo(Ox.UI.$body),
$reflectionImage = $('<img>')
.attr({
src: '/static/png/logo256.png'
})
.css({
position: 'absolute',
left: 0,
top: '160px',
right: 0,
bottom: 0,
width: '320px',
margin: 'auto',
opacity: 0,
MozTransform: 'scaleY(-1)',
WebkitTransform: 'scaleY(-1)'
})
.appendTo($screen),
$reflectionGradient = $('<div>')
.css({
position: 'absolute',
left: 0,
top: '160px',
right: 0,
bottom: 0,
width: '320px',
height: '160px',
margin: 'auto',
backgroundImage: '-webkit-linear-gradient(top, rgba(32, 32, 32, 0.8), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1))'
})
.appendTo($screen),
$logo = $('<img>')
.attr({
id: 'logo',
src: '/static/png/logo256.png'
})
.css({
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: '160px',
width: window.innerWidth + 'px',
margin: 'auto'
})
.bind({
click: function() {
$screen.find(':not(#logo)').remove();
$logo.animate({
width: window.innerWidth + 'px'
}, 500)
$screen.animate({opacity: 0}, 500, function() {
$screen.remove();
});
}
})
.appendTo($screen),
$input = Ox.Input({
width: 156
})
.css({
position: 'absolute',
left: 0,
top: '48px',
right: '164px',
bottom: 0,
margin: 'auto',
opacity: 0
})
.click(function(e) {
e.stopPropagation();
})
.appendTo($screen)
.focusInput(),
$findButton = Ox.Button({
title: 'Find',
width: 74
})
.css({
position: 'absolute',
left: '82px',
top: '48px',
right: 0,
bottom: 0,
margin: 'auto',
opacity: 0
})
.appendTo($screen),
$browseButton = Ox.Button({
title: 'Browse',
width: 74
})
.css({
position: 'absolute',
left: '246px',
top: '48px',
right: 0,
bottom: 0,
margin: 'auto',
opacity: 0
})
.appendTo($screen),
$signupButton = Ox.Button({
title: 'Sign Up',
width: 74
})
.css({
position: 'absolute',
left: 0,
top: '112px',
right: '246px',
bottom: 0,
margin: 'auto',
opacity: 0
})
.appendTo($screen),
$signinButton = Ox.Button({
title: 'Sign In',
width: 74
})
.css({
position: 'absolute',
left: 0,
top: '112px',
right: '82px',
bottom: 0,
margin: 'auto',
opacity: 0
})
.appendTo($screen),
$aboutButton = Ox.Button({
title: 'About ' + pandora.site.site.name,
width: 156
})
.css({
position: 'absolute',
left: '164px',
top: '112px',
right: 0,
bottom: 0,
margin: 'auto',
opacity: 0
})
.appendTo($screen),
$text = $('<div>')
.html('A Movie Database. \u2620 2007-2011 0x2620. All Open Source.')
.css({
position: 'absolute',
left: 0,
top: '176px',
right: 0,
bottom: 0,
width: '360px',
height: '16px',
margin: 'auto',
opacity: 0,
textAlign: 'center'
})
.appendTo($screen)
$screen.animate({opacity: 1}, 500, function() {
$screen.find(':not(#logo)').animate({opacity: 1}, 250)
});
$logo.animate({width: '320px'}, 500);
/*
var $dialog = new Ox.Dialog({
buttons: [
new Ox.Button({
@ -224,6 +399,7 @@ pandora.ui.mainMenu = function() {
title: pandora.site.site.name,
width: 800
}).open();
*/
} else if (data.id == 'register') {
pandora.$ui.accountDialog = pandora.ui.accountDialog('register').open();
} else if (data.id == 'loginlogout') {

View file

@ -2,16 +2,20 @@
pandora.ui.rightPanel = function() {
var that;
if (pandora.user.ui.section == 'site') {
that = new Ox.Element()
.html(pandora.user.ui.sitePage)
.bindEvent({
resize: function(event, data) {
}
});
if (pandora.user.ui.sitePage == 'home') {
that = pandora.ui.homePage()
.bindEvent({
resize: function(data) {
that.resize();
}
});
} else {
that = new Ox.Element()
.css({padding: '8px'});
pandora.api.getPage(pandora.user.ui.sitePage, function(result) {
that.html(result.data.body).css({'overflow-y':'auto'});
that.html(result.data.body).css({overflowY: 'auto'});
});
}
} else if (pandora.user.ui.section == 'items') {
that = new Ox.SplitPanel({
elements: [

View file

@ -5,6 +5,7 @@
"js/pandora/autovalidate.js",
"js/pandora/UI.js",
"js/pandora/ui/info.js",
"js/pandora/ui/homePage.js",
"js/pandora/ui/rightPanel.js",
"js/pandora/ui/folderBrowserList.js",
"js/pandora/ui/group.js",

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3 KiB

After

Width:  |  Height:  |  Size: 799 B

BIN
static/png/logo1024.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

BIN
static/png/logo256.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB