settings - automated table of contents

public/less/admin/settings.less

@@ -1,9 +1,15 @@
 .settings {
-	.settings-header {
-		font-weight: 700;
-	}
-
 	.row {
 		margin-bottom: 15px;
 	}
+
+	.section-content {
+		border-left: 3px solid @brand-primary;
+
+		ul {
+			list-style-type: none;
+			font-size: 16px;
+			padding-left: 20px;
+		}
+	}
 }

public/src/admin/settings.js

@@ -8,6 +8,16 @@ define('admin/settings', ['uploader', 'sounds'], function(uploader, sounds) {
 		$(window).on('action:config.loaded', Settings.prepare);
 	};
 
+	Settings.populateTOC = function() {
+		$('.settings-header').each(function() {
+			var header = $(this).text(),
+				anchor = header.toLowerCase().replace(/ /g, '-').trim();
+
+			$(this).prepend('<a name="' + anchor + '"></a>');
+			$('.section-content ul').append('<li><a href="#' + anchor + '">' + header + '</a></li>');
+		});
+	};
+
 	Settings.prepare = function(callback) {
 		// Populate the fields on the page from the config
 		var fields = $('#content [data-field]'),

src/views/admin/settings/footer.tpl

@@ -5,5 +5,6 @@
 <script>
 	require(['admin/settings'], function(Settings) {
 		Settings.prepare();
+		Settings.populateTOC();
 	});
 </script>

src/views/admin/settings/general.tpl

@@ -1,6 +1,17 @@
 <!-- IMPORT admin/settings/header.tpl -->
 
 
+<div class="row">
+	<div class="col-xs-2 settings-header">
+		Contents
+	</div>
+	<div class="col-xs-10">
+		<nav class="section-content">
+			<ul></ul>
+		</nav>
+	</div>
+</div>
+
 <div class="row">
 	<div class="col-xs-2 settings-header">
 		Site Settings