started work on noscript tags in pages (but blocked by template bug with block processing), allowed reverting of theme in ACP
introducing mixins css filev1.18.x
Julian Lam
12 years ago
parent
49ea40f6ee
commit
a09cfd9304
@ -0,0 +1,23 @@
|
||||
.no-select {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
*cursor: hand;
|
||||
}
|
||||
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
@ -0,0 +1,64 @@
|
||||
nodebb_admin.themes = {
|
||||
render: function(bootswatch) {
|
||||
var themeFrag = document.createDocumentFragment(),
|
||||
themeEl = document.createElement('li'),
|
||||
themeContainer = document.querySelector('#content .themes'),
|
||||
numThemes = bootswatch.themes.length;
|
||||
|
||||
for(var x=0;x<numThemes;x++) {
|
||||
var theme = bootswatch.themes[x];
|
||||
themeEl.setAttribute('data-css', theme.cssMin);
|
||||
themeEl.setAttribute('data-theme', theme.name);
|
||||
themeEl.innerHTML = '<img src="' + theme.thumbnail + '" />' +
|
||||
'<div>' +
|
||||
'<div class="pull-right">' +
|
||||
'<button class="btn btn-primary" data-action="use">Use</button> ' +
|
||||
'<button class="btn" data-action="preview">Preview</button>' +
|
||||
'</div>' +
|
||||
'<h4>' + theme.name + '</h4>' +
|
||||
'<p>' + theme.description + '</p>' +
|
||||
'</div>' +
|
||||
'<div class="clear">';
|
||||
themeFrag.appendChild(themeEl.cloneNode(true));
|
||||
}
|
||||
themeContainer.innerHTML = '';
|
||||
themeContainer.appendChild(themeFrag);
|
||||
}
|
||||
};
|
||||
|
||||
(function() {
|
||||
var scriptEl = document.createElement('script');
|
||||
scriptEl.src = 'http://api.bootswatch.com?callback=nodebb_admin.themes.render';
|
||||
document.body.appendChild(scriptEl);
|
||||
|
||||
var themeContainer = document.querySelector('#content .themes');
|
||||
themeContainer.addEventListener('click', function(e) {
|
||||
if (e.target.hasAttribute('data-action')) {
|
||||
switch(e.target.getAttribute('data-action')) {
|
||||
case 'preview':
|
||||
var cssSrc = $(e.target).parents('li').attr('data-css'),
|
||||
cssEl = document.getElementById('base-theme');
|
||||
|
||||
cssEl.href = cssSrc;
|
||||
break;
|
||||
case 'use':
|
||||
var parentEl = $(e.target).parents('li'),
|
||||
cssSrc = parentEl.attr('data-css'),
|
||||
cssName = parentEl.attr('data-theme');
|
||||
socket.emit('api:config.set', {
|
||||
key: 'theme:id', value: 'bootswatch:' + cssName
|
||||
});
|
||||
socket.emit('api:config.set', {
|
||||
key: 'theme:src', value: cssSrc
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}, false);
|
||||
|
||||
var revertEl = document.getElementById('revert_theme');
|
||||
revertEl.addEventListener('click', function() {
|
||||
nodebb_admin.remove('theme:id');
|
||||
nodebb_admin.remove('theme:src');
|
||||
}, false);
|
||||
})();
|
||||
@ -1,71 +1,18 @@
|
||||
<h1>Themes</h1>
|
||||
<hr />
|
||||
|
||||
<h3>Bootswatch Themes</h3>
|
||||
<p>
|
||||
NodeBB Themes are powered by Bootswatch, a repository containing hundreds of themes built
|
||||
NodeBB Themes are powered by Bootswatch, a repository containing themes built
|
||||
with Bootstrap as a base theme.
|
||||
</p>
|
||||
<ul class="themes">
|
||||
<li><i class="icon-refresh icon-spin"></i> Loading Themes</li>
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
nodebb_admin.themes = {
|
||||
render: function(bootswatch) {
|
||||
console.log(bootswatch);
|
||||
var themeFrag = document.createDocumentFragment(),
|
||||
themeEl = document.createElement('li'),
|
||||
themeContainer = document.querySelector('#content .themes'),
|
||||
numThemes = bootswatch.themes.length;
|
||||
|
||||
for(var x=0;x<numThemes;x++) {
|
||||
var theme = bootswatch.themes[x];
|
||||
themeEl.setAttribute('data-css', theme.cssMin);
|
||||
themeEl.setAttribute('data-theme', theme.name);
|
||||
themeEl.innerHTML = '<img src="' + theme.thumbnail + '" />' +
|
||||
'<div>' +
|
||||
'<div class="pull-right">' +
|
||||
'<button class="btn btn-primary" data-action="use">Use</button> ' +
|
||||
'<button class="btn" data-action="preview">Preview</button>' +
|
||||
'</div>' +
|
||||
'<h4>' + theme.name + '</h4>' +
|
||||
'<p>' + theme.description + '</p>' +
|
||||
'</div>';
|
||||
themeFrag.appendChild(themeEl.cloneNode(true));
|
||||
}
|
||||
themeContainer.innerHTML = '';
|
||||
themeContainer.appendChild(themeFrag);
|
||||
}
|
||||
};
|
||||
|
||||
(function() {
|
||||
var scriptEl = document.createElement('script');
|
||||
scriptEl.src = 'http://api.bootswatch.com?callback=nodebb_admin.themes.render';
|
||||
document.body.appendChild(scriptEl);
|
||||
|
||||
var themeContainer = document.querySelector('#content .themes');
|
||||
themeContainer.addEventListener('click', function(e) {
|
||||
if (e.target.hasAttribute('data-action')) {
|
||||
switch(e.target.getAttribute('data-action')) {
|
||||
case 'preview':
|
||||
var cssSrc = $(e.target).parents('li').attr('data-css'),
|
||||
cssEl = document.getElementById('base-theme');
|
||||
<h3>Revert to Default</h3>
|
||||
<p class="alert">
|
||||
<button class="btn btn-warning" id="revert_theme">Revert</button> This will remove any custom theme applied to your NodeBB, and restore the base theme.
|
||||
</p>
|
||||
|
||||
cssEl.href = cssSrc;
|
||||
break;
|
||||
case 'use':
|
||||
var parentEl = $(e.target).parents('li'),
|
||||
cssSrc = parentEl.attr('data-css'),
|
||||
cssName = parentEl.attr('data-theme');
|
||||
socket.emit('api:config.set', {
|
||||
key: 'theme:id', value: 'bootswatch:' + cssName
|
||||
});
|
||||
socket.emit('api:config.set', {
|
||||
key: 'theme:src', value: cssSrc
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
<script type="text/javascript" src="/src/forum/admin/themes.js"></script>
|
||||
@ -0,0 +1,15 @@
|
||||
<div class="alert alert-error">
|
||||
<p>
|
||||
Your browser does not seem to support javascript. As a result, your viewing experience will be diminished.
|
||||
</p>
|
||||
<p>
|
||||
Please download a browser that supports javascript, or enable it, if it disabled (i.e. NoScript).
|
||||
</p>
|
||||
</div>
|
||||
<ul>
|
||||
<!-- BEGIN posts -->
|
||||
<li>
|
||||
|
||||
</li>
|
||||
<!-- END posts -->
|
||||
</ul>
|
||||
Loading…
Reference in New Issue