improve index page
This commit is contained in:
rolux
parent
adbecb75a2
commit
dfb96e6649
2 changed files with 156 additions and 57 deletions
90
index.css
90
index.css
|
|
@ -1,12 +1,6 @@
|
|||
body {
|
||||
margin: 0;
|
||||
}
|
||||
body.OxThemeClassic {
|
||||
background-color: rgb(240, 240, 240);
|
||||
}
|
||||
body.OxThemeModern {
|
||||
background-color: rgb(16, 16, 16);
|
||||
}
|
||||
|
||||
.animate, .loading {
|
||||
position: absolute;
|
||||
|
|
@ -32,26 +26,14 @@ body.OxThemeModern {
|
|||
margin: auto;
|
||||
}
|
||||
|
||||
.OxThemeClassic .logo {
|
||||
box-shadow: 0 0 1px rgb(0, 0, 0)
|
||||
}
|
||||
.OxThemeModern .logo {
|
||||
box-shadow: 0 0 1px rgb(255, 255, 255)
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 512px;
|
||||
width: 576px;
|
||||
padding: 32px;
|
||||
margin: 16px auto 16px auto;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
margin: 32px auto 32px auto;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.page blockquote {
|
||||
margin-left: 28px;
|
||||
}
|
||||
.page code, .page pre {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
@ -63,23 +45,75 @@ body.OxThemeModern {
|
|||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.OxThemeClassic .page {
|
||||
border-color: rgb(208, 208, 208);
|
||||
background: rgb(255, 255, 255);
|
||||
|
||||
.readme .item {
|
||||
padding: 4px 8px 4px 8px;
|
||||
border-radius: 8px;
|
||||
margin: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.OxThemeModern .page {
|
||||
border-color: rgb(48, 48, 48);
|
||||
background: rgb(0, 0, 0);
|
||||
.readme .item.selected {
|
||||
cursor: normal;
|
||||
}
|
||||
.readme .item .title {
|
||||
font-size: 14px;
|
||||
}
|
||||
.readme .item .date {
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.readme .text {
|
||||
padding: 8px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.readme .text code, .readme .text pre {
|
||||
font-size: 12px;
|
||||
}
|
||||
.readme .text h1 {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.readme .text h2 {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
|
||||
.screen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
body.OxThemeClassic,
|
||||
.OxThemeClassic .screen {
|
||||
background-color: rgba(240, 240, 240, 1);
|
||||
background-color: rgb(240, 240, 240);
|
||||
}
|
||||
body.OxThemeModern,
|
||||
.OxThemeModern .screen {
|
||||
background-color: rgba(16, 16, 16, 1);
|
||||
background-color: rgb(16, 16, 16);
|
||||
}
|
||||
|
||||
.OxThemeClassic .page {
|
||||
background: rgb(255, 255, 255);
|
||||
}
|
||||
.OxThemeModern .page {
|
||||
background: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.OxThemeClassic .logo,
|
||||
.OxThemeClassic .page {
|
||||
box-shadow: 0 0 1px rgb(0, 0, 0)
|
||||
}
|
||||
.OxThemeModern .logo,
|
||||
.OxThemeModern .page {
|
||||
box-shadow: 0 0 1px rgb(255, 255, 255)
|
||||
}
|
||||
|
||||
.OxThemeClassic .readme .item.selected {
|
||||
background: rgb(224, 224, 224);
|
||||
}
|
||||
.OxThemeModern .readme .item.selected {
|
||||
background: rgb(32, 32, 32);
|
||||
}
|
||||
123
index.js
123
index.js
|
|
@ -28,14 +28,23 @@ Ox.load(function() {
|
|||
});
|
||||
app.$ui.panel.find('.OxButtonGroup').css({opacity: 1});
|
||||
app.$ui.screen.hide();
|
||||
app.$ui.label.show();
|
||||
app.$ui.label.hide();
|
||||
app.$ui.menu.hide().options({value: ''});
|
||||
}
|
||||
} : void 0
|
||||
);
|
||||
});
|
||||
},
|
||||
data: {},
|
||||
data: {
|
||||
sections: [
|
||||
{id: 'about', title: 'About'},
|
||||
{id: 'readme', title: 'Readme'},
|
||||
{id: 'examples', title: 'Examples'},
|
||||
{id: 'doc', title: 'Documentation'},
|
||||
{id: 'downloads', title: 'Downloads'},
|
||||
{id: 'development', title: 'Development'}
|
||||
]
|
||||
},
|
||||
getCSS: function(element) {
|
||||
var css = {},
|
||||
home = !app.url.get(),
|
||||
|
|
@ -123,7 +132,7 @@ Ox.load(function() {
|
|||
app.$ui.panel = app.ui.panel()
|
||||
.select(app.user('url'))
|
||||
.appendTo(Ox.$body);
|
||||
// jqueryfy
|
||||
// jqueryfy so that we can animate
|
||||
['screen', 'logo', 'loading'].forEach(function(element) {
|
||||
app.$ui[element] = $('.' + element);
|
||||
});
|
||||
|
|
@ -177,7 +186,7 @@ Ox.load(function() {
|
|||
},
|
||||
loadData: function(callback) {
|
||||
Ox.getJSON('index.json', function(data) {
|
||||
app.data = data;
|
||||
app.data = Ox.extend(app.data, data);
|
||||
callback();
|
||||
});
|
||||
},
|
||||
|
|
@ -219,6 +228,16 @@ Ox.load(function() {
|
|||
comment: [
|
||||
/\b(Ox\.\w+)\b/g,
|
||||
'<a href="#doc/$1" class="OxMonospace doclink">$1</a>'
|
||||
],
|
||||
version: [
|
||||
'{version}',
|
||||
function() {
|
||||
return (
|
||||
/:\/\/oxjs.org\//.test(window.location.href)
|
||||
? 'The latest version is'
|
||||
: 'You\'re currently running version'
|
||||
) + ' <code>' + app.data.version + '.</code>'
|
||||
}
|
||||
]
|
||||
},
|
||||
resize: function() {
|
||||
|
|
@ -228,15 +247,6 @@ Ox.load(function() {
|
|||
app.$ui[element] && app.$ui[element].css(app.getCSS(element));
|
||||
});
|
||||
},
|
||||
sections: [
|
||||
{id: 'about', title: 'About'},
|
||||
{id: 'readme', title: 'Readme'},
|
||||
{id: 'examples', title: 'Examples'},
|
||||
{id: 'doc', title: 'Documentation'},
|
||||
{id: 'downloads', title: 'Downloads'},
|
||||
{id: 'development', title: 'Development'},
|
||||
{id: 'contact', title: 'Contact'}
|
||||
],
|
||||
setTheme: function(theme) {
|
||||
app.user({theme: theme});
|
||||
(Ox.$('#icon') || Ox.$('<link>').attr({
|
||||
|
|
@ -246,9 +256,9 @@ Ox.load(function() {
|
|||
}).appendTo(Ox.$('head'))).attr({
|
||||
href: app.getSRC('icon')
|
||||
});
|
||||
app.$ui.logo && app.$ui.logo.attr({
|
||||
src: app.getSRC('logo')
|
||||
}).css(app.getCSS('logo'));
|
||||
app.$ui.logo && app.$ui.logo
|
||||
.attr({src: app.getSRC('logo')})
|
||||
.css(app.getCSS('logo'));
|
||||
Ox.Theme
|
||||
? Ox.Theme(theme)
|
||||
: Ox.$('body').addClass('OxTheme' + Ox.toTitleCase(theme)
|
||||
|
|
@ -314,7 +324,7 @@ Ox.load(function() {
|
|||
},
|
||||
menu: function() {
|
||||
return Ox.ButtonGroup({
|
||||
buttons: app.sections,
|
||||
buttons: app.data.sections,
|
||||
min: 0,
|
||||
selectable: true,
|
||||
})
|
||||
|
|
@ -325,12 +335,12 @@ Ox.load(function() {
|
|||
}
|
||||
})
|
||||
},
|
||||
page: function(page) {
|
||||
page: function(page, replace) {
|
||||
var $element = Ox.Container();
|
||||
Ox.get('readme/html/_' + page + '.html', function(html) {
|
||||
$('<div>')
|
||||
.addClass('OxSerif page')
|
||||
.html(html)
|
||||
.html(html.replace(app.re.version[0], app.re.version[1]))
|
||||
.appendTo($element);
|
||||
});
|
||||
return $element;
|
||||
|
|
@ -341,15 +351,7 @@ Ox.load(function() {
|
|||
return app.ui[id] ? app.ui[id]() : app.ui.page(id);
|
||||
},
|
||||
size: 32,
|
||||
tabs: [
|
||||
{id: 'about', title: 'About'},
|
||||
{id: 'readme', title: 'Readme'},
|
||||
{id: 'examples', title: 'Examples'},
|
||||
{id: 'doc', title: 'Documentation'},
|
||||
{id: 'downloads', title: 'Downloads'},
|
||||
{id: 'dev', title: 'Development'},
|
||||
{id: 'contact', title: 'Contact'}
|
||||
]
|
||||
tabs: app.data.sections
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
|
|
@ -358,7 +360,70 @@ Ox.load(function() {
|
|||
});
|
||||
},
|
||||
readme: function() {
|
||||
return Ox.Element();
|
||||
var $list = Ox.Container().css({overflowY: 'scroll'}),
|
||||
$text = Ox.Container().addClass('OxSerif text'),
|
||||
$panel = Ox.SplitPanel({
|
||||
elements: [
|
||||
{element: $list, size: 256},
|
||||
{element: $text}
|
||||
],
|
||||
orientation: 'horizontal'
|
||||
})
|
||||
.addClass('readme');
|
||||
app.data.readme.forEach(function(item, i) {
|
||||
var $item = $('<div>')
|
||||
.addClass('item')
|
||||
.css({
|
||||
width: 224 - Ox.UI.SCROLLBAR_SIZE + 'px'
|
||||
})
|
||||
.bind({
|
||||
click: function(e) {
|
||||
var $this = $(this);
|
||||
if (!$this.is('.selected')) {
|
||||
selectItem(item.id, $this);
|
||||
} else if (e.metaKey) {
|
||||
selectItem(null, $this);
|
||||
}
|
||||
}
|
||||
})
|
||||
.appendTo($list);
|
||||
$('<div>')
|
||||
.addClass('OxSerif title')
|
||||
.html(item.title)
|
||||
.appendTo($item);
|
||||
$('<div>')
|
||||
.addClass('OxSerif OxLight date')
|
||||
.html(Ox.formatDate(item.date, '%B %e, %Y', true))
|
||||
.appendTo($item);
|
||||
});
|
||||
function selectItem(id, $element) {
|
||||
$('.readme .item.selected').removeClass('selected');
|
||||
if (id) {
|
||||
$element.addClass('selected');
|
||||
Ox.get('readme/html/' + id + '.html', function(html) {
|
||||
$text.html(html);
|
||||
$text.find('.code').each(function() {
|
||||
var $this = $(this);
|
||||
$this.replaceWith(
|
||||
Ox.SyntaxHighlighter({
|
||||
source: $this.text()
|
||||
})
|
||||
.attr({id: $this.attr('id')})
|
||||
/*
|
||||
.css({
|
||||
border: '1px solid rgb(192, 192, 192)'
|
||||
})
|
||||
*/
|
||||
);
|
||||
});
|
||||
});
|
||||
app.url.push('readme/' + id);
|
||||
} else {
|
||||
$text.empty();
|
||||
app.url.push('readme');
|
||||
}
|
||||
}
|
||||
return $panel;
|
||||
},
|
||||
screen: function() {
|
||||
return Ox.$('<div>').addClass('screen animate');
|
||||
|
|
|
|||
Loading…
Reference in a new issue