Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2025-11-11 16:35:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix issues with acp category page

Browse Source 
strange name for background size variable
invalid class selectors
hijacking of background style
This commit is contained in:
yariplus
2015-07-22 04:52:54 -04:00
parent 2b93c01340
commit 67e450a05b
2 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
public/src/admin/manage/category.js
View File

@@ -50,11 +50,11 @@ define('admin/manage/category', [
function enableColorPicker(idx, inputEl) { function enableColorPicker(idx, inputEl) {
var $inputEl = $(inputEl), var $inputEl = $(inputEl),
previewEl = $inputEl.parents('[data-cid]').find('.preview-box'); previewEl = $inputEl.parents('[data-cid]').find('.category-preview');
colorpicker.enable($inputEl, function(hsb, hex) { colorpicker.enable($inputEl, function(hsb, hex) {
if ($inputEl.attr('data-name') === 'bgColor') { if ($inputEl.attr('data-name') === 'bgColor') {
previewEl.css('background', '#' + hex); previewEl.css('background-color', '#' + hex);
} else if ($inputEl.attr('data-name') === 'color') { } else if ($inputEl.attr('data-name') === 'color') {
previewEl.css('color', '#' + hex); previewEl.css('color', '#' + hex);
} }
@@ -83,6 +83,11 @@ define('admin/manage/category', [
modified(ev.target); modified(ev.target);
}); });
// Update preview image size on change
$('[data-name="imageClass"]').on('change', function(ev) {
$('.category-preview').css('background-size', $(this).val());
});
// Colour Picker // Colour Picker
$('[data-name="bgColor"], [data-name="color"]').each(enableColorPicker); $('[data-name="bgColor"], [data-name="color"]').each(enableColorPicker);
@@ -113,8 +118,7 @@ define('admin/manage/category', [
uploader.open(RELATIVE_PATH + '/api/admin/category/uploadpicture', { cid: cid }, 0, function(imageUrlOnServer) { uploader.open(RELATIVE_PATH + '/api/admin/category/uploadpicture', { cid: cid }, 0, function(imageUrlOnServer) {
inputEl.val(imageUrlOnServer); inputEl.val(imageUrlOnServer);
var previewBox = inputEl.parent().parent().siblings('.category-preview'); var previewBox = inputEl.parent().parent().siblings('.category-preview');
previewBox.css('background', 'url(' + imageUrlOnServer + '?' + new Date().getTime() + ')') previewBox.css('background', 'url(' + imageUrlOnServer + '?' + new Date().getTime() + ')');
.css('background-size', 'cover');
modified(inputEl[0]); modified(inputEl[0]);
}); });
}); });

4
src/views/admin/manage/category.tpl
View File

@@ -41,7 +41,7 @@
</div> </div>
<div class="col-sm-4 col-xs-12"> <div class="col-sm-4 col-xs-12">
<div class="form-group"> <div class="form-group">
<label for="cid-{category.cid}-imageClass">Image Class</label> <label for="cid-{category.cid}-imageClass">Background Image Size</label>
<select id="cid-{category.cid}-imageClass" class="form-control" data-name="imageClass" data-value="{category.imageClass}"> <select id="cid-{category.cid}-imageClass" class="form-control" data-name="imageClass" data-value="{category.imageClass}">
<option value="auto">auto</option> <option value="auto">auto</option>
<option value="cover">cover</option> <option value="cover">cover</option>
@@ -97,8 +97,8 @@
<div class="category-preview" style=" <div class="category-preview" style="
<!-- IF category.backgroundImage -->background-image: url({category.backgroundImage});<!-- ENDIF category.backgroundImage --> <!-- IF category.backgroundImage -->background-image: url({category.backgroundImage});<!-- ENDIF category.backgroundImage -->
<!-- IF category.bgColor -->background-color: {category.bgColor};<!-- ENDIF category.bgColor --> <!-- IF category.bgColor -->background-color: {category.bgColor};<!-- ENDIF category.bgColor -->
<!-- IF category.imageClass -->background-size: {category.imageClass};<!-- ENDIF category.imageClass -->
color: {category.color}; color: {category.color};
background-size:cover;
"> ">
<div class="icon"> <div class="icon">
<i data-name="icon" value="{category.icon}" class="fa {category.icon} fa-2x"></i> <i data-name="icon" value="{category.icon}" class="fa {category.icon} fa-2x"></i>