diff --git a/pandora/templates/site.json b/pandora/templates/site.json
index cf11ed12a..9bc3a8ae6 100644
--- a/pandora/templates/site.json
+++ b/pandora/templates/site.json
@@ -120,11 +120,12 @@
"columns": ["id", "title", "director", "country", "year", "language", "genre"],
"findQuery": {"conditions": [], "operator": ""},
"groupsQuery": {"conditions": [], "operator": "|"},
- "groupsSize": 128,
+ "groupsSize": 176,
"itemView": "timeline",
"listQuery": {"conditions": [], "operator": ""},
"listsSize": 256,
"listView": "icons",
+ "section": "items",
"sections": ["history", "lists", "public", "featured", "admin"],
"showAnnotations": true,
"showGroups": true,
diff --git a/static/js/pandora.js b/static/js/pandora.js
index 698c49484..afbb3d189 100755
--- a/static/js/pandora.js
+++ b/static/js/pandora.js
@@ -23,6 +23,7 @@ var pandora = new Ox.App({
},
ui: {
infoRatio: 4 / 3,
+ sectionElement: 'buttons',
selectedMovies: []
},
user: data.user
@@ -58,6 +59,17 @@ var pandora = new Ox.App({
app.$ui.appPanel = ui.appPanel().display();
+ app.ui.sectionButtonsWidth = app.$ui.sectionButtons.width() + 8;
+
+ app.$ui.window.resize(function(foo) {
+ Ox.print('foo', foo)
+ app.$ui.list.size();
+ resizeGroups(app.$ui.rightPanel.width());
+ if (app.user.ui.listView == 'map') {
+ app.$ui.map.triggerResize();
+ }
+ });
+
}
var ui = {
@@ -301,7 +313,7 @@ var pandora = new Ox.App({
delete data.keys;
return pandora.api.find($.extend(data, {
group: id,
- query: Query.toObject()
+ query: Query.toObject(id)
}), callback);
},
sort: [
@@ -528,7 +540,7 @@ var pandora = new Ox.App({
var that = new Ox.SplitPanel({
elements: [
{
- element: app.$ui.sectionbar = ui.sectionbar(),
+ element: app.$ui.sectionbar = ui.sectionbar('buttons'),
size: 24
},
{
@@ -548,6 +560,15 @@ var pandora = new Ox.App({
orientation: 'vertical'
})
.bindEvent('resize', function(event, data) {
+ if (data < app.ui.sectionButtonsWidth && app.$ui.sectionButtons) {
+ app.$ui.sectionButtons.remove();
+ delete app.$ui.sectionButtons;
+ app.$ui.sectionbar.append(app.$ui.sectionSelect = ui.sectionSelect());
+ } else if (data >= app.ui.sectionButtonsWidth && app.$ui.sectionSelect) {
+ app.$ui.sectionSelect.remove();
+ delete app.$ui.sectionSelect;
+ app.$ui.sectionbar.append(app.$ui.sectionButtons = ui.sectionButtons());
+ }
Ox.print('resize', data, data / app.ui.infoRatio + 16);
app.$ui.leftPanel.size('infoPanel', Math.round(data / app.ui.infoRatio) + 16);
});
@@ -567,6 +588,7 @@ var pandora = new Ox.App({
}),
columnsMovable: true,
columnsRemovable: true,
+ columnsResizable: true,
id: 'list',
request: function(data, callback) {
Ox.print('data, Query.toObject', data, Query.toObject())
@@ -702,6 +724,9 @@ var pandora = new Ox.App({
}
],
orientation: 'horizontal'
+ })
+ .bindEvent('resize', function() {
+ app.$ui.map.triggerResize();
});
} else {
$list = new Ox.Element('
')
@@ -951,13 +976,15 @@ var pandora = new Ox.App({
id: 'mainMenu',
menus: [
{ id: app.config.site.id + 'Menu', title: app.config.site.name, items: [
- { id: 'about', title: 'About' },
+ { id: 'home', title: 'Home' },
{},
- { id: 'home', title: 'Home Screen' },
+ { id: 'about', title: 'About' },
+ { id: 'tour', title: 'Tour' },
+ { id: 'news', title: 'News' },
{ id: 'faq', title: 'Frequently Asked Questions' },
{ id: 'tos', title: 'Terms of Service' },
{},
- { id: 'contact', title: 'Contact...' }
+ { id: 'contact', title: 'Contact' }
] },
{ id: 'userMenu', title: 'User', items: [
{ id: 'username', title: 'User: not logged in', disabled: true },
@@ -1583,44 +1610,44 @@ var pandora = new Ox.App({
orientation: 'vertical'
})
.bindEvent('resize', function(event, data) {
- var widths = $.map(app.ui.groups, function(v, i) {
- return getGroupWidth(i, data);
- });
- Ox.print('widths', widths);
- app.$ui.browser.size(0, widths[0].list).size(2, widths[4].list);
- app.$ui.groupsInnerPanel.size(0, widths[1].list).size(2, widths[3].list);
- $.each(app.$ui.groups, function(i, list) {
- list.resizeColumn('name', widths[i].column);
- });
+ resizeGroups(data);
app.$ui.list.size();
+ if (app.user.ui.listView == 'map') {
+ app.$ui.map.triggerResize();
+ }
});
return that;
},
- sectionbar: function() {
- var that =new Ox.Bar({
+ sectionbar: function(mode) {
+ var that = new Ox.Bar({
size: 24
})
.append(
- app.$ui.sectionButtons = new Ox.ButtonGroup({
- buttons: [
- {id: 'site', title: app.config.site.name},
- {id: 'items', title: app.config.itemName.plural},
- {id: 'texts', title: 'Texts'},
- {id: 'admin', title: 'Admin', type: 'image'}
- ],
- id: 'sectionButtons',
- selectable: true
- })
- .css({
- float: 'left',
- margin: '4px'
- })
+ mode == 'buttons' ?
+ app.$ui.sectionButtons = ui.sectionButtons() :
+ app.$ui.sectionSelect = ui.sectionSelect()
);
that.toggle = function() {
};
return that;
},
+ sectionButtons: function() {
+ var that = new Ox.ButtonGroup({
+ buttons: items = [
+ {id: 'site', title: app.config.site.name},
+ {id: 'items', title: app.config.itemName.plural},
+ {id: 'texts', title: 'Texts'},
+ {id: 'admin', title: 'Admin'}
+ ],
+ id: 'sectionButtons',
+ selectable: true
+ }).css({
+ float: 'left',
+ margin: '4px'
+ });
+ return that;
+ },
sections: function() {
var that = new Ox.Element();
var $sections = [];
@@ -1651,6 +1678,21 @@ var pandora = new Ox.App({
}
return that;
},
+ sectionSelect: function() {
+ var that = new Ox.Select({
+ id: 'sectionSelect',
+ items: items = [
+ {id: 'site', title: app.config.site.name},
+ {id: 'items', title: app.config.itemName.plural},
+ {id: 'texts', title: 'Texts'},
+ {id: 'admin', title: 'Admin'}
+ ]
+ }).css({
+ float: 'left',
+ margin: '4px'
+ });
+ return that;
+ },
status: function(key, data) {
var that = Ox.toTitleCase(key) + ': ' + [
Ox.formatNumber(data.items) + ' movie' + (data.items != 1 ? 's' : ''),
@@ -1719,6 +1761,7 @@ var pandora = new Ox.App({
})
.bindEvent('change', function(event, data) {
var id = data.selected[0].id;
+ app.user.ui.listView = id;
app.$ui.mainMenu.checkItem('viewMenu_movies_' + id);
//$ui.list.$element.replaceWith(constructList(id));
// Ox.print('change ... id', id, list = app.constructList(id), list.options(), list.options('id'))
@@ -1736,6 +1779,18 @@ var pandora = new Ox.App({
return width;
}
+ function resizeGroups(width) {
+ var widths = $.map(app.ui.groups, function(v, i) {
+ return getGroupWidth(i, width);
+ });
+ Ox.print('widths', widths);
+ app.$ui.browser.size(0, widths[0].list).size(2, widths[4].list);
+ app.$ui.groupsInnerPanel.size(0, widths[1].list).size(2, widths[3].list);
+ $.each(app.$ui.groups, function(i, list) {
+ list.resizeColumn('name', widths[i].column);
+ });
+ }
+
var Query = (function() {
function constructFind(query) {