Merge pull request #3351 from yariplus/catsfixes

Fixing some issues with acp category page

public/src/admin/manage/category.js

@@ -50,11 +50,11 @@ define('admin/manage/category', [
 
 		function enableColorPicker(idx, 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) {
 				if ($inputEl.attr('data-name') === 'bgColor') {
-					previewEl.css('background', '#' + hex);
+					previewEl.css('background-color', '#' + hex);
 				} else if ($inputEl.attr('data-name') === 'color') {
 					previewEl.css('color', '#' + hex);
 				}
@@ -83,6 +83,11 @@ define('admin/manage/category', [
 			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
 		$('[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) {
 				inputEl.val(imageUrlOnServer);
 				var previewBox = inputEl.parent().parent().siblings('.category-preview');
-				previewBox.css('background', 'url(' + imageUrlOnServer + '?' + new Date().getTime() + ')')
-					.css('background-size', 'cover');
+				previewBox.css('background', 'url(' + imageUrlOnServer + '?' + new Date().getTime() + ')');
 				modified(inputEl[0]);
 			});
 		});

src/views/admin/manage/category.tpl

@@ -41,7 +41,7 @@
 						</div>
 						<div class="col-sm-4 col-xs-12">
 							<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}">
 									<option value="auto">auto</option>
 									<option value="cover">cover</option>
@@ -97,8 +97,8 @@
 					<div class="category-preview" style="
 						<!-- IF category.backgroundImage -->background-image: url({category.backgroundImage});<!-- ENDIF category.backgroundImage -->
 						<!-- IF category.bgColor -->background-color: {category.bgColor};<!-- ENDIF category.bgColor -->
+						<!-- IF category.imageClass -->background-size: {category.imageClass};<!-- ENDIF category.imageClass -->
 						color: {category.color};
-						background-size:cover;
 					">
 						<div class="icon">
 							<i data-name="icon" value="{category.icon}" class="fa {category.icon} fa-2x"></i>