better organization of groups less

less/groups.less

@@ -1,46 +1,6 @@
-[component="groups/container"] {
+.groups.details {
 	margin-top: 200px;
 
-	[component="groups/summary"] {
-		.panel-body {
-			min-height: 72px;
-		}
-
-		.list-cover {
-			background-size: cover;
-			min-height: 125px;
-			background-position: 50% 50%;
-			.pointer;
-
-			h3 {
-				background-color: rgba(0,0,0,0.5);
-				display: inline-block;
-				padding: 0.25em 0.5em;
-				color: white;
-				font-weight: bold;
-				text-transform: capitalize;
-			}
-		}
-
-		.members {
-			padding-left: 0;
-
-			> li {
-				list-style-type: none;
-				display: inline-block;
-
-				img {
-					width: 32px;
-					height: 32px;
-				}
-			}
-
-			.truncated {
-				vertical-align: bottom;
-			}
-		}
-	}
-
 	[component="groups/cover"] {
 		background-size: cover;
 		background-repeat: no-repeat;
@@ -167,3 +127,45 @@
 		}
 	}
 }
+
+.groups.list {
+	[component="groups/summary"] {
+		.panel-body {
+			min-height: 72px;
+		}
+
+		.list-cover {
+			background-size: cover;
+			min-height: 125px;
+			background-position: 50% 50%;
+			.pointer;
+
+			h3 {
+				background-color: rgba(0,0,0,0.5);
+				display: inline-block;
+				padding: 0.25em 0.5em;
+				color: white;
+				font-weight: bold;
+				text-transform: capitalize;
+			}
+		}
+
+		.members {
+			padding-left: 0;
+
+			> li {
+				list-style-type: none;
+				display: inline-block;
+
+				img {
+					width: 32px;
+					height: 32px;
+				}
+			}
+
+			.truncated {
+				vertical-align: bottom;
+			}
+		}
+	}
+}

templates/account/groups.tpl

@@ -1,10 +1,13 @@
+<div class="account">
+	<!-- IMPORT partials/account_menu.tpl -->
 
-<!-- IMPORT partials/account_menu.tpl -->
-
-<div component="groups/container" id="groups-list" class="groups row">
+	<div class="groups list">
+		<div component="groups/container" id="groups-list" class="row">
 			<!-- IF !groups.length -->
 			<div class="alert alert-warning">[[groups:no_groups_found]]</div>
 			<!-- ELSE -->
 			<!-- IMPORT partials/groups/list.tpl -->
 			<!-- ENDIF !groups.length -->
+		</div>
+	</div>
 </div>

templates/groups/details.tpl

@@ -1,4 +1,4 @@
-<div component="groups/container" class="details row">
+<div component="groups/container" class="groups details row">
 	<div component="groups/cover" style="background-image: url({group.cover:url}); background-position: {group.cover:position};">
 		<div class="controls">
 			<span class="upload"><i class="fa fa-fw fa-4x fa-upload"></i></span>

templates/groups/list.tpl

@@ -1,6 +1,7 @@
-<!-- IMPORT partials/breadcrumbs.tpl -->
+<div class="groups list">
+	<!-- IMPORT partials/breadcrumbs.tpl -->
 
-<div class="row">
+	<div class="row">
 		<div class="col-lg-4">
 			<!-- IF allowGroupCreation -->
 			<button class="btn btn-primary" data-action="new"><i class="fa fa-plus"></i> [[groups:new_group]]</button>
@@ -23,11 +24,11 @@
 				</div>
 			</div>
 		</div>
-</div>
+	</div>
 
-<hr />
+	<hr />
 
-<div component="groups/container" class="row" id="groups-list" data-nextstart={nextStart}>
+	<div component="groups/container" class="row" id="groups-list" data-nextstart={nextStart}>
 		<!-- IF groups.length -->
 		<!-- IMPORT partials/groups/list.tpl -->
 		<!-- ELSE -->
@@ -37,4 +38,5 @@
 			</div>
 		</div>
 		<!-- ENDIF groups.length -->
+	</div>
 </div>