add logo/icon

This commit is contained in:
j 2019-10-22 16:30:17 +02:00
parent 5ac8d16172
commit 33e55bc705
5 changed files with 348 additions and 6 deletions

View file

@ -992,11 +992,6 @@ examples (config.SITENAME.jsonc) that are part of this pan.do/ra distribution.
{"name": "Private", "color": [255, 128, 128]} {"name": "Private", "color": [255, 128, 128]}
], ],
/* /*
"sendReferrer", if set to false, will cause all outgoing links to originate
from one single URL
*/
"sendReferrer": false,
/*
"site" contains various settings for this instance. In "email", "contact" "site" contains various settings for this instance. In "email", "contact"
if the address in the contact form (to), "system" is the address used by if the address in the contact form (to), "system" is the address used by
the system (from). the system (from).
@ -1011,7 +1006,7 @@ examples (config.SITENAME.jsonc) that are part of this pan.do/ra distribution.
// E-mail address uses by the system (from) // E-mail address uses by the system (from)
"system": "system@collective-cinema.net" "system": "system@collective-cinema.net"
}, },
"https": false, "https": true,
"id": "collectivecinema", "id": "collectivecinema",
"name": "Collective Cinema", "name": "Collective Cinema",
// Set to true to allow search engines to index the site // Set to true to allow search engines to index the site

View file

@ -0,0 +1,323 @@
'use strict';
pandora.ui.home = function() {
var that = $('<div>')
.addClass('OxScreen')
.css({
position: 'absolute',
width: '100%',
height: '100%',
opacity: 0,
zIndex: 1001
}),
$reflectionImage = $('<img>')
.addClass('logo')
.attr({src: '/static/png/logo.png'})
.css({
position: 'absolute',
left: 0,
top: '160px',
right: 0,
bottom: 0,
width: '320px',
margin: 'auto',
opacity: 0,
MozTransform: 'scaleY(-1)',
OTransform: 'scaleY(-1)',
WebkitTransform: 'scaleY(-1)'
})
.appendTo(that),
$reflectionGradient = $('<div>')
.addClass('OxReflection logo')
.css({
position: 'absolute',
left: 0,
top: '160px',
right: 0,
bottom: 0,
// FIXME: should be 320 and 160 - the values below are temporary fixes for Chrome 26
width: '322px',
height: '162px',
margin: 'auto',
})
.appendTo(that),
$logo = $('<img>')
.addClass('logo')
.attr({
id: 'logo',
src: '/static/png/logo.png'
})
.css({
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: '160px',
width: window.innerWidth + 'px',
margin: 'auto',
cursor: 'pointer'
})
.on({
click: function() {
$browseButton.triggerEvent('click');
}
})
.appendTo(that),
$findInput = Ox.Input({
width: 156
})
.css({
position: 'absolute',
left: 0,
top: '48px',
right: '164px',
bottom: 0,
margin: 'auto',
opacity: 0
})
.on({
click: function(e) {
// fixme: why?
e.stopPropagation();
}
})
.bindEvent({
submit: function(data) {
if (data.value) {
$findButton.triggerEvent('click');
} else {
$browseButton.triggerEvent('click');
}
}
})
.appendTo(that),
$findButton = Ox.Button({
title: Ox._('Find'),
width: 74
})
.css({
position: 'absolute',
left: '82px',
top: '48px',
right: 0,
bottom: 0,
margin: 'auto',
opacity: 0
})
.bindEvent({
click: function() {
var folder = pandora.getListData().folder,
value = $findInput.value();
folder && pandora.$ui.folderList[folder].options({selected: []});
that.fadeOutScreen();
pandora.UI.set({
page: '',
find: {
conditions: value === ''
? []
: [{key: '*', value: value, operator: '='}],
operator: '&'
},
section: 'items'
});
pandora.$ui.findSelect && pandora.$ui.findSelect.value('*');
pandora.$ui.findInput && pandora.$ui.findInput.value(value);
}
})
.appendTo(that),
$browseButton = Ox.Button({
title: Ox._('Browse'),
width: 74
})
.css({
position: 'absolute',
left: '246px',
top: '48px',
right: 0,
bottom: 0,
margin: 'auto',
opacity: 0
})
.bindEvent({
click: function() {
pandora.UI.set({
page: pandora.user.ui.page == 'home' ? '' : pandora.user.ui.page,
section: 'items'
});
that.fadeOutScreen();
}
})
.appendTo(that),
$signupButton = Ox.Button({
title: Ox._('Sign Up'),
width: 74
})
.css({
position: 'absolute',
left: 0,
top: '112px',
right: '246px',
bottom: 0,
margin: 'auto',
opacity: 0
})
.bindEvent({
click: function() {
pandora.UI.set({page: 'signup'});
that.fadeOutScreen();
}
}),
$signinButton = Ox.Button({
title: Ox._('Sign In'),
width: 74
})
.css({
position: 'absolute',
left: 0,
top: '112px',
right: '82px',
bottom: 0,
margin: 'auto',
opacity: 0
})
.bindEvent({
click: function() {
pandora.UI.set({page :'signin'});
that.fadeOutScreen();
}
}),
$preferencesButton = Ox.Button({
title: Ox._('Preferences'),
width: 156
})
.css({
position: 'absolute',
left: 0,
top: '112px',
right: '164px',
bottom: 0,
margin: 'auto',
opacity: 0
})
.bindEvent({
click: function() {
pandora.UI.set({page: 'preferences'});
that.fadeOutScreen();
}
}),
$aboutButton = Ox.Button({
title: Ox._('About {0}', [pandora.site.site.name]),
width: 156
})
.css({
position: 'absolute',
left: '164px',
top: '112px',
right: 0,
bottom: 0,
margin: 'auto',
opacity: 0
})
.bindEvent({
click: function() {
pandora.UI.set({page: 'about'});
that.fadeOutScreen();
}
})
.appendTo(that),
$text = $('<div>')
.html(Ox._(
'pan.do/ra. \u2620 2007-{0} 0x2620. All Open Source.',
[Ox.formatDate(new Date(), '%Y')]
)).css({
position: 'absolute',
left: 0,
top: '176px',
right: 0,
bottom: 0,
width: '360px',
height: '16px',
margin: 'auto',
opacity: 0,
textAlign: 'center'
})
.appendTo(that);
adjustRatio();
if (pandora.user.level == 'guest') {
$signupButton.appendTo(that);
$signinButton.appendTo(that);
} else {
$preferencesButton.appendTo(that);
}
function adjustRatio() {
var width = $logo.width();
var height = $logo.height();
if (width == 0 || height == 0) {
setTimeout(adjustRatio, 50);
} else {
var aspect = width / height;
if (aspect != 2) {
var top = 320 / aspect;
$reflectionImage.css({
top: top + 'px',
})
$reflectionGradient.css({
top: top + 'px',
height: (top + 2) + 'px',
})
$logo.css({
bottom: top + 'px',
})
}
}
}
that.fadeInScreen = function() {
that.appendTo(Ox.$body).animate({opacity: 1}, 500, function() {
that.find(':not(#logo)').animate({opacity: 1}, 250, function() {
$findInput.focusInput(true);
});
});
$logo.animate({width: '320px'}, 500);
return that;
};
that.fadeOutScreen = function() {
that.find(':not(#logo)').hide();
$logo.animate({width: window.innerWidth + 'px'}, 500);
that.animate({opacity: 0}, 500, function() {
that.remove();
});
pandora.$ui.tv && pandora.$ui.tv.unmute().find('.OxControls.OxVolume').hide();
return that;
};
that.hideScreen = function() {
that.hide().remove();
that.find(':not(#logo)').css({opacity: 0});
$logo.css({width: window.innerWidth + 'px'});
return that;
};
that.showScreen = function(callback) {
var $elements = that.find(':not(.logo)'), count = 0;
$logo.css({width: '320px'});
that.css({opacity: 1}).appendTo(Ox.$body);
that.find(':not(#logo)').css({opacity: 1});
$elements.animate({opacity: 1}, 500, function() {
if (callback && ++count == $elements.length) {
callback();
}
});
$findInput.focusInput(true);
return that;
};
return that;
};

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

View file

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="141.73px" height="52.5px" viewBox="0 45.865 141.73 52.5" enable-background="new 0 45.865 141.73 52.5"
xml:space="preserve">
<g>
<path d="M66.965,90.647c-5.235,4.29-8.517,4.983-15.077,4.983c-6.436,0-11.986-2.271-16.592-6.876
c-4.604-4.605-6.876-10.156-6.876-16.592c0-6.498,2.271-12.05,6.876-16.655c4.605-4.604,10.157-6.876,16.592-6.876
c6.624,0,12.111,3.218,14.762,5.236l-7.634,11.481c-0.062-0.063-0.062-0.063-0.125-0.126c-1.956-1.956-4.29-2.902-7.002-2.902
c-2.714,0-5.11,0.946-7.002,2.902c-1.956,1.892-2.902,4.227-2.902,6.938s0.567,4.921,2.523,6.812
c1.894,1.956,4.667,2.713,7.382,2.713c2.713,0,5.804-0.441,7.759-2.396c0.063-0.062,0.188-0.188,0.188-0.188l8.518,10.155
L66.965,90.647z"/>
</g>
<g>
<path d="M72.227,89.26l8.517-10.155c0,0,0.126,0.126,0.189,0.188c1.955,1.955,5.047,2.396,7.76,2.396
c2.712,0,5.488-0.757,7.381-2.713c1.955-1.893,2.522-4.102,2.522-6.812c0-2.713-0.945-5.047-2.901-6.938
c-1.894-1.956-4.29-2.902-7.002-2.902c-2.713,0-5.047,0.946-7.003,2.902c-0.063,0.062-0.063,0.062-0.126,0.126L73.93,53.869
c2.648-2.019,8.138-5.236,14.763-5.236c6.434,0,11.986,2.271,16.591,6.876c4.605,4.605,6.876,10.157,6.876,16.655
c0,6.436-2.271,11.985-6.876,16.592c-4.604,4.604-10.157,6.876-16.591,6.876c-6.562,0-9.842-0.693-15.078-4.983L72.227,89.26z"/>
</g>
<circle cx="16.503" cy="69.12" r="7.039"/>
<circle cx="123.366" cy="69.12" r="7.039"/>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB