forked from 0x2620/pandora
merge
This commit is contained in:
commit
2bfe54b682
7 changed files with 267 additions and 8 deletions
78
static/js/pandora/ui/homePage.js
Normal file
78
static/js/pandora/ui/homePage.js
Normal 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;
|
||||||
|
|
||||||
|
}
|
|
@ -207,6 +207,181 @@ pandora.ui.mainMenu = function() {
|
||||||
title: 'About'
|
title: 'About'
|
||||||
}).open();
|
}).open();
|
||||||
} else if (data.id == 'home') {
|
} 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({
|
var $dialog = new Ox.Dialog({
|
||||||
buttons: [
|
buttons: [
|
||||||
new Ox.Button({
|
new Ox.Button({
|
||||||
|
@ -224,6 +399,7 @@ pandora.ui.mainMenu = function() {
|
||||||
title: pandora.site.site.name,
|
title: pandora.site.site.name,
|
||||||
width: 800
|
width: 800
|
||||||
}).open();
|
}).open();
|
||||||
|
*/
|
||||||
} else if (data.id == 'register') {
|
} else if (data.id == 'register') {
|
||||||
pandora.$ui.accountDialog = pandora.ui.accountDialog('register').open();
|
pandora.$ui.accountDialog = pandora.ui.accountDialog('register').open();
|
||||||
} else if (data.id == 'loginlogout') {
|
} else if (data.id == 'loginlogout') {
|
||||||
|
|
|
@ -2,16 +2,20 @@
|
||||||
pandora.ui.rightPanel = function() {
|
pandora.ui.rightPanel = function() {
|
||||||
var that;
|
var that;
|
||||||
if (pandora.user.ui.section == 'site') {
|
if (pandora.user.ui.section == 'site') {
|
||||||
that = new Ox.Element()
|
if (pandora.user.ui.sitePage == 'home') {
|
||||||
.html(pandora.user.ui.sitePage)
|
that = pandora.ui.homePage()
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
resize: function(event, data) {
|
resize: function(data) {
|
||||||
|
that.resize();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
} else {
|
||||||
|
that = new Ox.Element()
|
||||||
|
.css({padding: '8px'});
|
||||||
pandora.api.getPage(pandora.user.ui.sitePage, function(result) {
|
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') {
|
} else if (pandora.user.ui.section == 'items') {
|
||||||
that = new Ox.SplitPanel({
|
that = new Ox.SplitPanel({
|
||||||
elements: [
|
elements: [
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
"js/pandora/autovalidate.js",
|
"js/pandora/autovalidate.js",
|
||||||
"js/pandora/UI.js",
|
"js/pandora/UI.js",
|
||||||
"js/pandora/ui/info.js",
|
"js/pandora/ui/info.js",
|
||||||
|
"js/pandora/ui/homePage.js",
|
||||||
"js/pandora/ui/rightPanel.js",
|
"js/pandora/ui/rightPanel.js",
|
||||||
"js/pandora/ui/folderBrowserList.js",
|
"js/pandora/ui/folderBrowserList.js",
|
||||||
"js/pandora/ui/group.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
BIN
static/png/logo1024.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 46 KiB |
BIN
static/png/logo256.png
Normal file
BIN
static/png/logo256.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 32 KiB |
Loading…
Reference in a new issue