From 9bf5f096eed148955f4ebab6a9f3a063485d343c Mon Sep 17 00:00:00 2001
From: psychobunny <psycho.bunny@hotmail.com>
Date: Thu, 19 Mar 2015 14:58:28 -0400
Subject: [PATCH] styled category view

---
 less/categories.less   |  78 ++++++++++++++++++-
 less/category.less     | 172 -----------------------------------------
 less/style.less        |   6 +-
 templates/category.tpl |  96 ++++++++++++-----------
 4 files changed, 130 insertions(+), 222 deletions(-)

diff --git a/less/categories.less b/less/categories.less
index 9859e1e..ef0a5b1 100644
--- a/less/categories.less
+++ b/less/categories.less
@@ -1,4 +1,4 @@
-.categories {
+.categories, .category > ul {
 	list-style-type: none;
 	padding: 0;
 
@@ -19,9 +19,22 @@
 				margin-top: 2px;
 			}
 
+			img {
+				margin-right: 15px;
+				width: 46px;
+				height: 46px;
+			}
+
 			h1 {
 				font-size: 22px;
 				margin: 0;
+				position: absolute;
+				margin-left: 62px;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				margin-right: 42px;
+				width: 85%;
 			}
 		}
 
@@ -78,4 +91,67 @@
 			}
 		}
 	}
+}
+
+
+.category-header {
+	width: 100%;
+	height: 110px;
+	text-align: center;
+	margin: 0;
+	padding-top:25px;
+	.pointer;
+	margin-bottom: 10px;
+	overflow:hidden;
+	
+	&:hover {
+		filter: brightness(115%);
+		-webkit-filter: brightness(115%);
+	}
+
+	.category-box {
+		height:90px;
+
+		.post-preview {
+			padding-left:10px;
+			padding-right:10px;
+			text-align:left;
+			img {
+				width:60px;
+				height:60px;
+				padding-right:5px;
+			}
+
+			p {
+				overflow: hidden;
+				text-overflow:ellipsis;
+				height:60px;
+			}
+		}
+	}
+
+}
+
+.category-header-image-auto {
+	-webkit-background-size: auto!important;
+	-moz-background-size: auto!important;
+	-o-background-size: auto!important;
+	background-size: auto!important;
+	background-position: 0% 0% !important;
+}
+
+.category-header-image-cover {
+	-webkit-background-size: cover!important;
+	-moz-background-size: cover!important;
+	-o-background-size: cover!important;
+	background-size: cover!important;
+	background-position: center!important;
+}
+
+.category-header-image-contain {
+	-webkit-background-size: contain!important;
+	-moz-background-size: contain!important;
+	-o-background-size: contain!important;
+	background-size: contain!important;
+	background-position: center!important;
 }
\ No newline at end of file
diff --git a/less/category.less b/less/category.less
index 44aa620..cec0e2d 100644
--- a/less/category.less
+++ b/less/category.less
@@ -1,12 +1,4 @@
 .category {
-	.span9 {
-		margin-bottom: 50px;
-	}
-
-	.header {
-		margin-bottom:20px;
-	}
-
 	ul {
 		li {
 			list-style: none;
@@ -22,173 +14,9 @@
 		}
 	}
 
-	ul {
-		padding-left: 0px;
-	}
-
-	.meta {
-		font-size: 12px;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		overflow: hidden;
-	}
-
 	.unread {
 		.topic-title {
 			font-weight: bold;
 		}
 	}
-
-	.topic-row {
-
-		border-radius: 5px;
-		padding: 5px 10px 5px 10px;
-
-		small {
-			vertical-align: 2px;
-			font-size: 14px;
-		}
-
-		h3 {
-			padding: 0;
-			margin: 0;
-			margin-top: 4px;
-			line-height: 25px;
-			white-space: nowrap;
-			text-overflow:ellipsis;
-			overflow: hidden;
-			a {
-				width:100%;
-				display:inline-block;
-			}
-
-			.topic-title {
-				width: 100%;
-				font-size: 20px;
-			}
-		}
-
-		.teaser-pic {
-			width:20px;
-			height:20px;
-		}
-
-		.user-img {
-			width: 50px;
-			height: 50px;
-			margin-right:10px;
-		}
-	}
-
-	.latest-post {
-		float: right;
-		padding-top: 2px;
-		margin-right: 0px;
-		width: 40%;
-
-		.pull-right {
-			width: 100%;
-			height: 50px;
-			line-height: 16px;
-			margin-left: 1px;
-			padding: 2px 5px 5px 20px;
-			border-left: 1px solid #bbb;
-
-			img {
-				display: block;
-				float: left;
-			}
-
-			p {
-				display: block;
-				float: left;
-				width: 70%;
-				margin-left: 10px;
-				overflow: hidden;
-				max-height: 33px;
-				margin-bottom: 0px;
-			}
-		}
-	}
-}
-
-.category-item {
-	.select {
-		line-height: 50px;
-		font-size: 20px;
-	}
-}
-
-h4.category-title {
-	width: 100%;
-	font-weight: 700;
-	line-height: 21px;
-	text-align: left;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	display: inline-block;
-	margin: 0;
-}
-
-.category-header {
-	width: 100%;
-	height: 110px;
-	text-align: center;
-	margin: 0;
-	padding-top:25px;
-	.pointer;
-	margin-bottom: 10px;
-	overflow:hidden;
-	
-	&:hover {
-		filter: brightness(115%);
-		-webkit-filter: brightness(115%);
-	}
-
-	.category-box {
-		height:90px;
-
-		.post-preview {
-			padding-left:10px;
-			padding-right:10px;
-			text-align:left;
-			img {
-				width:60px;
-				height:60px;
-				padding-right:5px;
-			}
-
-			p {
-				overflow: hidden;
-				text-overflow:ellipsis;
-				height:60px;
-			}
-		}
-	}
-
-}
-
-.category-header-image-auto {
-	-webkit-background-size: auto!important;
-	-moz-background-size: auto!important;
-	-o-background-size: auto!important;
-	background-size: auto!important;
-	background-position: 0% 0% !important;
-}
-
-.category-header-image-cover {
-	-webkit-background-size: cover!important;
-	-moz-background-size: cover!important;
-	-o-background-size: cover!important;
-	background-size: cover!important;
-	background-position: center!important;
-}
-
-.category-header-image-contain {
-	-webkit-background-size: contain!important;
-	-moz-background-size: contain!important;
-	-o-background-size: contain!important;
-	background-size: contain!important;
-	background-position: center!important;
 }
\ No newline at end of file
diff --git a/less/style.less b/less/style.less
index 32bf74a..7c8859f 100644
--- a/less/style.less
+++ b/less/style.less
@@ -85,9 +85,9 @@ a:hover, .btn-link:hover, .btn-link:active, .btn-link:focus {
 	transition: opacity 100ms linear;
 
 	&.ajaxifying {
-		-moz-opacity: 0.00;
-		opacity: 0.00;
-		-ms-filter:~"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+		-moz-opacity: 0.15;
+		opacity: 0.15;
+		-ms-filter:~"progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
 	}
 }
 
diff --git a/templates/category.tpl b/templates/category.tpl
index d450a9d..3ea926a 100644
--- a/templates/category.tpl
+++ b/templates/category.tpl
@@ -21,7 +21,6 @@
 			<!-- IMPORT partials/category/tools.tpl -->
 			<!-- IMPORT partials/category/sort.tpl -->
 		</span>
-
 	</div>
 
 	<!-- IF !topics.length -->
@@ -30,65 +29,70 @@
 	</div>
 	<!-- ENDIF !topics.length -->
 
-	<ul component="category" id="topics-container" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}">
+
+	<ul component="category" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}">
 		<meta itemprop="itemListOrder" content="descending">
 		<!-- BEGIN topics -->
-		<li component="category/topic" class="category-item {function.generateTopicClass}" data-tid="{topics.tid}" data-index="{topics.index}" data-cid="{topics.cid}" itemprop="itemListElement">
-
-			<div class="topic-row">
-				<!-- IF privileges.editable -->
-					<i class="fa fa-fw fa-square-o pull-left select pointer"></i>
-				<!-- ENDIF privileges.editable -->
-				<a href="{relative_path}/user/{topics.user.userslug}" class="pull-left">
-					<img src="{topics.user.picture}" class="img-circle user-img" title="{topics.user.username}"/>
-				</a>
+		<li component="category/topic" class="row clearfix {function.generateTopicClass}" data-tid="{topics.tid}" data-index="{topics.index}" data-cid="{topics.cid}" itemprop="itemListElement">
+			<meta itemprop="name" content="{topics.title}">
 
-				<h3>
-					<a href="{relative_path}/topic/{topics.slug}" itemprop="url">
-						<meta itemprop="name" content="{topics.title}">
-
-						<strong>
-							<i component="topic/pinned" class="fa fa-thumb-tack <!-- IF !topics.pinned -->hide<!-- ENDIF !topics.pinned -->"></i>
-							<i component="topic/locked" class="fa fa-lock <!-- IF !topics.locked -->hide<!-- ENDIF !topics.locked -->"></i>
-						</strong>
-						<span class="topic-title">{topics.title}</span>
+			<div class="col-md-7 col-sm-12 col-xs-12 content">
+				<div class="pull-left">
+					<!-- IF privileges.editable -->
+						<i class="fa fa-fw fa-square-o pull-left select pointer hide"></i>
+					<!-- ENDIF privileges.editable -->
+					<a href="{relative_path}/user/{topics.user.userslug}" class="pull-left">
+						<img src="{topics.user.picture}" class="img-circle user-img" title="{topics.user.username}"/>
 					</a>
-				</h3>
+				</div>
 
-				<small>
-					<span class="topic-stats">
-						[[global:posts]]
-						<strong class="human-readable-number" title="{topics.postcount}">{topics.postcount}</strong>
-					</span>
-					|
-					<span class="topic-stats">
-						[[global:views]]
-						<strong class="human-readable-number" title="{topics.viewcount}">{topics.viewcount}</strong>
-					</span>
-					|
-					<span>
-						[[global:posted_ago, <span class="timeago" title="{topics.relativeTime}"></span>]]
-					</span>
+				<h1 class="title pull-left">
+					<i component="topic/pinned" class="fa fa-thumb-tack <!-- IF !topics.pinned -->hide<!-- ENDIF !topics.pinned -->"></i>
+					<i component="topic/locked" class="fa fa-lock <!-- IF !topics.locked -->hide<!-- ENDIF !topics.locked -->"></i>
+					<a href="{relative_path}/topic/{topics.slug}" itemprop="url">{topics.title}</a><br />
+					<small>[[global:posted_ago, <span class="timeago" title="{topics.relativeTime}"></span>]]</small>
+				</h1>
+			</div>
 
-					<span class="pull-right">
+			<div class="hidden-sm hidden-xs">
+				<!-- IF !categories.link -->
+				<div class="col-md-1 stats">
+					<span class="human-readable-number" title="{topics.viewcount}">{topics.viewcount}</span><br />
+					<small>[[global:views]]</small>
+				</div>
+				<div class="col-md-1 stats">
+					<span class="human-readable-number" title="{topics.postcount}">{topics.postcount}</span><br />
+					<small>[[global:posts]]</small>
+				</div>
+				<div class="col-md-3">
+					<div class="card" style="border-color: {bgColor}">
 						<!-- IF topics.unreplied -->
-						[[category:no_replies]]
+						<p>
+							[[category:no_replies]]
+						</p>
 						<!-- ELSE -->
-						<a href="<!-- IF topics.teaser.user.userslug -->{relative_path}/user/{topics.teaser.user.userslug}<!-- ELSE -->#<!-- ENDIF topics.teaser.user.userslug -->">
-							<img class="teaser-pic img-circle" src="{topics.teaser.user.picture}" title="{topics.teaser.user.username}"/>
-						</a>
-						<a href="{relative_path}/topic/{topics.slug}/{topics.teaser.index}">
-							[[global:replied_ago, <span class="timeago" title="{topics.teaser.timestamp}"></span>]]
-						</a>
+						<p>
+							<a href="<!-- IF topics.teaser.user.userslug -->{relative_path}/user/{topics.teaser.user.userslug}<!-- ELSE -->#<!-- ENDIF topics.teaser.user.userslug -->">
+								<strong>{topics.teaser.user.username}</strong>
+							</a>
+							<small class="timeago" title="{topics.teaser.timestamp}"></small>
+						</p>
+						<p>
+							Would be nice to have content here.
+						</p>
 						<!-- ENDIF topics.unreplied -->
-					</span>
+					</div>
+				</div>
+				<!-- ELSE -->
+				<div class="col-md-4">
 
-					<!-- IMPORT partials/category/tags.tpl -->
-				</small>
+				</div>
+				<!-- ENDIF !categories.link -->
 			</div>
 		</li>
 		<!-- END topics -->
 	</ul>
+
 	<!-- IF config.usePagination -->
 		<!-- IMPORT partials/paginator.tpl -->
 	<!-- ENDIF config.usePagination -->