From 178aa473fcff14d7f78309ff160fe1a8258060fe Mon Sep 17 00:00:00 2001
From: psychobunny <psycho.bunny@hotmail.com>
Date: Tue, 30 Sep 2014 15:28:36 -0400
Subject: [PATCH] categories page first pass

---
 src/views/admin/manage/categories.tpl | 262 ++++++++++++++------------
 1 file changed, 138 insertions(+), 124 deletions(-)

diff --git a/src/views/admin/manage/categories.tpl b/src/views/admin/manage/categories.tpl
index 2a09128266..a7d7d081ac 100644
--- a/src/views/admin/manage/categories.tpl
+++ b/src/views/admin/manage/categories.tpl
@@ -1,137 +1,151 @@
 
 <div class="categories">
-	<h1><i class="fa fa-folder"></i> Categories
-		<div class="pull-right">
-			<button class="btn btn-default" id="revertChanges">Revert Changes</button>
-			<button class="btn btn-primary" id="addNew">New Category</button>
-		</div>
-	</h1>
-	<hr />
-	<ul class="nav nav-pills">
-		<li class='active'><a href='/admin/manage/categories/active'>Active</a></li>
-		<li class=''><a href='/admin/manage/categories/disabled'>Disabled</a></li>
-	</ul>
-
-	<div class="row admin-categories">
-		<ul class="col-md-12" id="entry-container">
-		<!-- BEGIN categories -->
-			<li data-cid="{categories.cid}" class="entry-row">
-				<div class="well">
-					<form class="form">
-						<div class="row">
-							<div class="col-sm-2 hidden-xs text-center">
-								<div class="preview-box" style="
-									<!-- IF categories.backgroundImage -->background-image: url({categories.backgroundImage});<!-- ENDIF categories.backgroundImage -->
-									<!-- IF categories.bgColor -->background-color: {categories.bgColor};<!-- ENDIF categories.bgColor -->
-									color: {categories.color};
-									background-size:cover;
-								">
-									<div class="icon">
-										<i data-name="icon" value="{categories.icon}" class="fa {categories.icon} fa-2x"></i>
-									</div>
-								</div><br />
-								<button type="button" data-name="image" data-value="{categories.image}" class="btn btn-default upload-button"><i class="fa fa-upload"></i> Image</button>
-								<!-- IF categories.image -->
-								<br/>
-								<small class="pointer delete-image"><i data-name="icon" value="fa-times" class="fa fa-times"></i> Delete Image</small>
-								<!-- ENDIF categories.image -->
-							</div>
-							<div class="col-sm-10">
-								<div class="pull-right text-right">
-									<div class="form-group">
-										<div class="dropdown">
-											<button type="button" class="btn btn-default" data-toggle="dropdown"><i class="fa fa-cogs"></i> Options</button>
-											<ul class="dropdown-menu" role="menu">
-												<li class="permissions"><a href="#"><i class="fa fa-ban"></i> Access Control</a></li>
-												<hr />
-												<li data-disabled="{categories.disabled}">
-													<!-- IF categories.disabled -->
-														<a href="#"><i class="fa fa-power-off"></i> Enable</a>
-													<!-- ELSE -->
-														<a href="#"><i class="fa fa-power-off"></i> Disable</a>
-													<!-- ENDIF categories.disabled -->
-												</li>
-												<li><a href="#" class="purge"><i class="fa fa-eraser"></i> Purge</a></li>
-											</ul>
-
-
-											<button class="btn btn-primary save">Save</button>
+	<div class="col-sm-9">
+		<div class="panel panel-default">
+			<div class="panel-heading"><i class="fa fa-folder"></i> Categories</div>
+			<div class="panel-body">
+				<ul class="nav nav-pills">
+					<li class='active'><a href='/admin/manage/categories/active'>Active</a></li>
+					<li class=''><a href='/admin/manage/categories/disabled'>Disabled</a></li>
+				</ul>
 
+				<div class="row admin-categories">
+					<ul class="col-md-12" id="entry-container">
+					<!-- BEGIN categories -->
+						<li data-cid="{categories.cid}" class="entry-row">
+							<div class="well">
+								<form class="form">
+									<div class="row">
+										<div class="col-sm-2 hidden-xs text-center">
+											<div class="preview-box" style="
+												<!-- IF categories.backgroundImage -->background-image: url({categories.backgroundImage});<!-- ENDIF categories.backgroundImage -->
+												<!-- IF categories.bgColor -->background-color: {categories.bgColor};<!-- ENDIF categories.bgColor -->
+												color: {categories.color};
+												background-size:cover;
+											">
+												<div class="icon">
+													<i data-name="icon" value="{categories.icon}" class="fa {categories.icon} fa-2x"></i>
+												</div>
+											</div><br />
+											<button type="button" data-name="image" data-value="{categories.image}" class="btn btn-default upload-button"><i class="fa fa-upload"></i> Image</button>
+											<!-- IF categories.image -->
+											<br/>
+											<small class="pointer delete-image"><i data-name="icon" value="fa-times" class="fa fa-times"></i> Delete Image</small>
+											<!-- ENDIF categories.image -->
 										</div>
-									</div>
-								</div>
-								<h3 data-edit-target="#cid-{categories.cid}-name"><span>{categories.name}</span> <small><i class="fa fa-edit"></i></small></h3>
-								<input id="cid-{categories.cid}-name" type="text" class="form-control hide" placeholder="Category Name" data-name="name" value="{categories.name}" />
-								<h4 data-edit-target="#cid-{categories.cid}-description"><span>{categories.description}</span> <small><i class="fa fa-edit"></i></small></h4>
-								<input id="cid-{categories.cid}-description" data-name="description" placeholder="Category Description" value="{categories.description}" class="form-control category_description input-sm description hide"></input>
+										<div class="col-sm-10">
+											<div class="pull-right text-right">
+												<div class="form-group">
+													<div class="dropdown">
+														<button type="button" class="btn btn-default" data-toggle="dropdown"><i class="fa fa-cogs"></i> Options</button>
+														<ul class="dropdown-menu" role="menu">
+															<li class="permissions"><a href="#"><i class="fa fa-ban"></i> Access Control</a></li>
+															<hr />
+															<li data-disabled="{categories.disabled}">
+																<!-- IF categories.disabled -->
+																	<a href="#"><i class="fa fa-power-off"></i> Enable</a>
+																<!-- ELSE -->
+																	<a href="#"><i class="fa fa-power-off"></i> Disable</a>
+																<!-- ENDIF categories.disabled -->
+															</li>
+															<li><a href="#" class="purge"><i class="fa fa-eraser"></i> Purge</a></li>
+														</ul>
 
-								<fieldset>
-									<div class="col-sm-4 col-xs-12">
-										<div class="form-group">
-											<label for="cid-{categories.cid}-parentCid">Parent Category</label>
-											<!-- IF categories.parent.name -->
-											<div class="btn-group">
-												<button type="button" class="btn btn-default" data-action="setParent" data-parentCid="{categories.parent.cid}"><i class="fa {categories.parent.icon}"></i> {categories.parent.name}</button>
-												<button type="button" class="btn btn-warning" data-action="removeParent" data-parentCid="{categories.parent.cid}"><i class="fa fa-times"></i></button>
+
+														<button class="btn btn-primary save">Save</button>
+
+													</div>
+												</div>
 											</div>
-											<!-- ELSE -->
-											<button type="button" class="btn btn-default form-control" data-action="setParent"><i class="fa fa-sitemap"></i> (None)</button>
-											<!-- ENDIF categories.parent.name -->
-										</div>
-									</div>
-								</fieldset>
-								<fieldset>
-									<div class="col-sm-4 col-xs-12">
-										<div class="form-group">
-											<label for="cid-{categories.cid}-bgColor">Background Colour</label>
-											<input id="cid-{categories.cid}-bgColor" placeholder="#0059b2" data-name="bgColor" value="{categories.bgColor}" class="form-control category_bgColor" />
-										</div>
-									</div>
-									<div class="col-sm-4 col-xs-12">
-										<div class="form-group">
-											<label for="cid-{categories.cid}-color">Text Colour</label>
-											<input id="cid-{categories.cid}-color" placeholder="#fff" data-name="color" value="{categories.color}" class="form-control category_color" />
-										</div>
-									</div>
-									<div class="col-sm-4 col-xs-12">
-										<div class="form-group">
-											<label for="cid-{categories.cid}-imageClass">Image Class</label>
-												<select id="cid-{categories.cid}-imageClass" class="form-control" data-name="imageClass" data-value="{categories.imageClass}">
-												<option value="auto">auto</option>
-												<option value="cover">cover</option>
-												<option value="contain">contain</option>
-											</select>
-										</div>
-									</div>
-									<div class="col-sm-4 col-xs-12">
-										<div class="form-group">
-											<label for="cid-{categories.cid}-class">Custom Class</label>
-											<input id="cid-{categories.cid}-class" type="text" class="form-control" placeholder="col-md-6 col-xs-6" data-name="class" value="{categories.class}" />
-										</div>
-									</div>
-									<div class="col-sm-4 col-xs-12">
-										<div class="form-group">
-											<label for="cid-{categories.cid}-numRecentReplies"># of Recent Replies Displayed</label>
-											<input id="cid-{categories.cid}-numRecentReplies" type="text" class="form-control" placeholder="2" data-name="numRecentReplies" value="{categories.numRecentReplies}" />
-										</div>
-									</div>
-									<div class="col-sm-4 col-xs-12">
-										<div class="form-group">
-											<label for="cid-{categories.cid}-link">External Link</label>
-											<input id="cid-{categories.cid}-link" type="text" class="form-control" placeholder="http://domain.com" data-name="link" value="{categories.link}" />
-										</div>
-									</div>
-								</fieldset>
+											<h3 data-edit-target="#cid-{categories.cid}-name"><span>{categories.name}</span> <small><i class="fa fa-edit"></i></small></h3>
+											<input id="cid-{categories.cid}-name" type="text" class="form-control hide" placeholder="Category Name" data-name="name" value="{categories.name}" />
+											<h4 data-edit-target="#cid-{categories.cid}-description"><span>{categories.description}</span> <small><i class="fa fa-edit"></i></small></h4>
+											<input id="cid-{categories.cid}-description" data-name="description" placeholder="Category Description" value="{categories.description}" class="form-control category_description input-sm description hide"></input>
 
-								<input type="hidden" data-name="order" data-value="{categories.order}"></input>
+											<fieldset>
+												<div class="col-sm-4 col-xs-12">
+													<div class="form-group">
+														<label for="cid-{categories.cid}-parentCid">Parent Category</label>
+														<!-- IF categories.parent.name -->
+														<div class="btn-group">
+															<button type="button" class="btn btn-default" data-action="setParent" data-parentCid="{categories.parent.cid}"><i class="fa {categories.parent.icon}"></i> {categories.parent.name}</button>
+															<button type="button" class="btn btn-warning" data-action="removeParent" data-parentCid="{categories.parent.cid}"><i class="fa fa-times"></i></button>
+														</div>
+														<!-- ELSE -->
+														<button type="button" class="btn btn-default form-control" data-action="setParent"><i class="fa fa-sitemap"></i> (None)</button>
+														<!-- ENDIF categories.parent.name -->
+													</div>
+												</div>
+											</fieldset>
+											<fieldset>
+												<div class="col-sm-4 col-xs-12">
+													<div class="form-group">
+														<label for="cid-{categories.cid}-bgColor">Background Colour</label>
+														<input id="cid-{categories.cid}-bgColor" placeholder="#0059b2" data-name="bgColor" value="{categories.bgColor}" class="form-control category_bgColor" />
+													</div>
+												</div>
+												<div class="col-sm-4 col-xs-12">
+													<div class="form-group">
+														<label for="cid-{categories.cid}-color">Text Colour</label>
+														<input id="cid-{categories.cid}-color" placeholder="#fff" data-name="color" value="{categories.color}" class="form-control category_color" />
+													</div>
+												</div>
+												<div class="col-sm-4 col-xs-12">
+													<div class="form-group">
+														<label for="cid-{categories.cid}-imageClass">Image Class</label>
+															<select id="cid-{categories.cid}-imageClass" class="form-control" data-name="imageClass" data-value="{categories.imageClass}">
+															<option value="auto">auto</option>
+															<option value="cover">cover</option>
+															<option value="contain">contain</option>
+														</select>
+													</div>
+												</div>
+												<div class="col-sm-4 col-xs-12">
+													<div class="form-group">
+														<label for="cid-{categories.cid}-class">Custom Class</label>
+														<input id="cid-{categories.cid}-class" type="text" class="form-control" placeholder="col-md-6 col-xs-6" data-name="class" value="{categories.class}" />
+													</div>
+												</div>
+												<div class="col-sm-4 col-xs-12">
+													<div class="form-group">
+														<label for="cid-{categories.cid}-numRecentReplies"># of Recent Replies Displayed</label>
+														<input id="cid-{categories.cid}-numRecentReplies" type="text" class="form-control" placeholder="2" data-name="numRecentReplies" value="{categories.numRecentReplies}" />
+													</div>
+												</div>
+												<div class="col-sm-4 col-xs-12">
+													<div class="form-group">
+														<label for="cid-{categories.cid}-link">External Link</label>
+														<input id="cid-{categories.cid}-link" type="text" class="form-control" placeholder="http://domain.com" data-name="link" value="{categories.link}" />
+													</div>
+												</div>
+											</fieldset>
+
+											<input type="hidden" data-name="order" data-value="{categories.order}"></input>
+										</div>
+									</div>
+								</form>
 							</div>
-						</div>
-					</form>
+						</li>
+					<!-- END categories -->
+					</ul>
 				</div>
-			</li>
-		<!-- END categories -->
-		</ul>
+
+				
+			</div>
+		</div>
 	</div>
+
+
+	<div class="col-lg-3">
+		<div class="panel panel-default">
+			<div class="panel-heading">Categories Control Panel</div>
+			<div class="panel-body">
+				<button class="btn btn-primary" id="addNew">Create New Category</button>
+				<button class="btn btn-default" id="revertChanges">Revert Changes</button>
+			</div>
+		</div>
+	</div>
+	
 	<span class="hidden" id="csrf" data-csrf="{csrf}"></span>
 
 	<!-- IMPORT admin/partials/categories/new.tpl -->