less padding, closes #5811

public/less/admin/manage/categories.less

@@ -12,8 +12,6 @@ div.categories {
 		.row {
 			margin-left: -15px;
 			margin-right: -15px;
-			padding-bottom: 12px;
-			margin-bottom: 12px;
 		}
 
 		> li li:last-child {
@@ -37,7 +35,6 @@ div.categories {
 	li {
 		min-height: @acp-line-height;
 		margin: @acp-base-line 0;
-		margin-top: 28px;
 
 		&.placeholder {
 			border: 1px dashed #2196F3;
@@ -56,21 +53,40 @@ div.categories {
 		}
 	}
 
+	.toggle {
+		width: 24px;
+		height: 24px;
+		border-radius: 50%;
+		line-height: 24px;
+		text-align: center;
+		vertical-align: bottom;
+		background-size: cover;
+		float: left;
+		margin-right: 0px;
+		cursor: pointer;
+		.fa {
+			font-size: 85%;
+		}
+	}
+
 	.icon {
-		width: @acp-line-height;
-		height: @acp-line-height;
+		width: 24px;
+		height: 24px;
 		border-radius: 50%;
-		line-height: @acp-line-height;
+		line-height: 24px;
 		text-align: center;
 		vertical-align: bottom;
 		background-size: cover;
 		float: left;
-		margin-right: @acp-margin;
+		margin-right: 0px;
 		cursor: move;
+		.fa {
+			font-size: 85%;
+		}
 	}
 
 	.information {
-		padding-left: 70px;
+		padding-left: 60px;
 	}
 
 	.category-header {

public/src/admin/manage/categories.js

@@ -31,6 +31,12 @@ define('admin/manage/categories', ['vendor/jquery/serializeObject/jquery.ba-seri
 			Categories.toggle([cid].concat(children), !disabled);
 			return false;
 		});
+
+		$('.categories').on('click', '.toggle', function () {
+			var el = $(this);
+			el.find('i').toggleClass('fa-minus').toggleClass('fa-plus');
+			el.closest('[data-cid]').find('> ul[data-cid]').toggleClass('hidden');
+		});
 	};
 
 	Categories.throwCreateModal = function () {

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

@@ -4,6 +4,9 @@
         <div class="row">
             <div class="col-md-9">
                 <div class="clearfix">
+                    <div class="toggle">
+                        <i class="fa fa-minus"></i>
+                    </div>
                     <div class="icon" style="
                         color: {categories.color};
                         background-color: {categories.bgColor};
@@ -15,24 +18,23 @@
                     </div>
                     <div class="information">
                         <h5 class="category-header">{categories.name}</h5>
-                        <p class="description">{categories.descriptionParsed}</p>
                     </div>
                 </div>
             </div>
             <div class="col-md-3">
                 <div class="clearfix pull-right text-right">
                     <div class="btn-group">
-                        <button data-cid="{categories.cid}" data-action="toggle" data-disabled="{categories.disabled}" class="btn <!-- IF categories.disabled -->btn-primary<!-- ELSE -->btn-danger<!-- ENDIF categories.disabled -->">
+                        <button data-cid="{categories.cid}" data-action="toggle" data-disabled="{categories.disabled}" class="btn btn-sm <!-- IF categories.disabled -->btn-primary<!-- ELSE -->btn-danger<!-- ENDIF categories.disabled -->">
                             <!-- IF categories.disabled -->
                             [[admin/manage/categories:enable]]
                             <!-- ELSE -->
                             [[admin/manage/categories:disable]]
                             <!-- ENDIF categories.disabled -->
                         </button>
-                        <a href="./categories/{categories.cid}/analytics" class="btn btn-default">
+                        <a href="./categories/{categories.cid}/analytics" class="btn btn-default btn-sm">
                             <i class="fa fa-line-chart"></i>
                         </a>
-                        <a href="./categories/{categories.cid}" class="btn btn-default">
+                        <a href="./categories/{categories.cid}" class="btn btn-default btn-sm">
                             [[admin/manage/categories:edit]]
                         </a>
                     </div>