fix: too small sortable handle for ACP>Manage>Categories

The handle was initially just the icon, but now it is the icon
and the category label itself.

public/less/admin/manage/categories.less

@@ -68,26 +68,27 @@ div.categories {
 		}
 	}
 
-	.icon {
-		width: 24px;
-		height: 24px;
-		border-radius: 50%;
-		line-height: 24px;
-		text-align: center;
-		vertical-align: bottom;
-		background-size: cover;
-		float: left;
-		margin-right: 0px;
+	.information {
 		cursor: move;
-		.fa {
-			font-size: 85%;
+		padding-left: 3rem;
+
+		.icon {
+			width: 24px;
+			height: 24px;
+			border-radius: 50%;
+			line-height: 24px;
+			text-align: center;
+			vertical-align: bottom;
+			background-size: cover;
+			float: left;
+			margin-right: 1rem;
+
+			.fa {
+				font-size: 85%;
+			}
 		}
 	}
 
-	.information {
-		padding-left: 60px;
-	}
-
 	.category-header {
 		margin-top: 0;
 		margin-bottom: @acp-base-line;

public/src/admin/manage/categories.js

@@ -291,7 +291,7 @@ define('admin/manage/categories', [
 					sortables[parentId] = Sortable.create($('ul[data-cid="' + parentId + '"]')[0], {
 						group: 'cross-categories',
 						animation: 150,
-						handle: '.icon',
+						handle: '.information',
 						dataIdAttr: 'data-cid',
 						ghostClass: 'placeholder',
 						onAdd: itemDidAdd,

src/views/admin/partials/categories/category-rows.tpl

@@ -7,16 +7,16 @@
                     <div class="toggle">
                         <i class="fa fa-minus"></i>
                     </div>
-                    <div class="icon" style="
-                        color: {categories.color};
-                        background-color: {categories.bgColor};
-                        <!-- IF categories.backgroundImage -->
-                        background-image: url('{categories.backgroundImage}');
-                        <!-- ENDIF categories.backgroundImage -->
-                    ">
-                        <i data-name="icon" value="{categories.icon}" class="fa {categories.icon}"></i>
-                    </div>
                     <div class="information">
+                        <div class="icon" style="
+                            color: {categories.color};
+                            background-color: {categories.bgColor};
+                            <!-- IF categories.backgroundImage -->
+                            background-image: url('{categories.backgroundImage}');
+                            <!-- ENDIF categories.backgroundImage -->
+                        ">
+                            <i data-name="icon" value="{categories.icon}" class="fa {categories.icon}"></i>
+                        </div>
                         <h5 class="category-header">{categories.name}</h5>
                     </div>
                 </div>