From 081a1c092557fde85a7204520639c6f68f4e4654 Mon Sep 17 00:00:00 2001
From: Mantavya Gajjar <mga@tinyerp.com>
Date: Thu, 27 Feb 2014 17:22:37 +0530
Subject: [PATCH] [IMP]: improve main page of forum module

bzr revid: mga@tinyerp.com-20140227115237-ho3spisd0zh60t0j
---
 .../static/src/css/website_forum.css          | 106 +-------
 addons/website_forum/views/website_forum.xml  | 244 +++++++++++-------
 2 files changed, 159 insertions(+), 191 deletions(-)

diff --git a/addons/website_forum/static/src/css/website_forum.css b/addons/website_forum/static/src/css/website_forum.css
index 46798faea00..ece726ca75b 100644
--- a/addons/website_forum/static/src/css/website_forum.css
+++ b/addons/website_forum/static/src/css/website_forum.css
@@ -1,101 +1,23 @@
 @charset "utf-8";
+
 @import url(compass/css3.css);
 
-@media only screen and (min-width: 769px)
-{
-  .base_width{
-    margin: 0 20% 0 10%;
-  }
-  .search-navbar{
-    width: 80% !important;
-  }
-  
-  .question_font_size{
-    font-size: 18px !important;
-  }
-
+.forum_menu {
+	
+	padding-right: 3px;
+	padding-left: 0px;
 }
 
-.hr_no_margin{
-     margin: 5px 0px 0px 0px;
-}
-.media_without_margin{
-  margin: 0px;
-}
-.background_answer{
-background: rgb(191,210,85); /* Old browsers */
-background: -moz-linear-gradient(top, rgba(191,210,85,1) 0%, rgba(142,185,42,1) 50%, rgba(114,170,0,1) 51%, rgba(158,203,45,1) 100%); /* FF3.6+ */
-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(191,210,85,1)), color-stop(50%,rgba(142,185,42,1)), color-stop(51%,rgba(114,170,0,1)), color-stop(100%,rgba(158,203,45,1))); /* Chrome,Safari4+ */
-background: -webkit-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Chrome10+,Safari5.1+ */
-background: -o-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Opera 11.10+ */
-background: -ms-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* IE10+ */
-background: linear-gradient(to bottom, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* W3C */
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-9 */
+.items{	
+	   margin-top: 3px;
 }
 
-.background_vote{
-background: rgb(183,222,237); /* Old browsers */
-background: -moz-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%); /* FF3.6+ */
-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(183,222,237,1)), color-stop(50%,rgba(113,206,239,1)), color-stop(51%,rgba(33,180,226,1)), color-stop(100%,rgba(183,222,237,1))); /* Chrome,Safari4+ */
-background: -webkit-linear-gradient(top, rgba(183,222,237,1) 0%,rgba(113,206,239,1) 50%,rgba(33,180,226,1) 51%,rgba(183,222,237,1) 100%); /* Chrome10+,Safari5.1+ */
-background: -o-linear-gradient(top, rgba(183,222,237,1) 0%,rgba(113,206,239,1) 50%,rgba(33,180,226,1) 51%,rgba(183,222,237,1) 100%); /* Opera 11.10+ */
-background: -ms-linear-gradient(top, rgba(183,222,237,1) 0%,rgba(113,206,239,1) 50%,rgba(33,180,226,1) 51%,rgba(183,222,237,1) 100%); /* IE10+ */
-background: linear-gradient(to bottom, rgba(183,222,237,1) 0%,rgba(113,206,239,1) 50%,rgba(33,180,226,1) 51%,rgba(183,222,237,1) 100%); /* W3C */
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed',GradientType=0 ); /* IE6-9 */
+.list-unstyled .question {
+	border-bottom-color: #DDDBCE;
+	border-bottom-style: solid;
+	border-bottom-width: 1px;
 }
-.background_view{
-background: rgb(252,234,187); /* Old browsers */
-background: -moz-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%); /* FF3.6+ */
-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,234,187,1)), color-stop(50%,rgba(252,205,77,1)), color-stop(51%,rgba(248,181,0,1)), color-stop(100%,rgba(251,223,147,1))); /* Chrome,Safari4+ */
-background: -webkit-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* Chrome10+,Safari5.1+ */
-background: -o-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* Opera 11.10+ */
-background: -ms-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* IE10+ */
-background: linear-gradient(to bottom, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* W3C */
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* IE6-9 */
+
+.status {
+    display: inline-block;	
 }
-.search-navbar{
-  width: 100%;
-}
-.user-profile-image{
-  height: 32px;
-  width: 32px;
-}
-.action-links{
-  margin-left: 10px;
-  margin-right: 10px;
-}
-.like{
-  color: green;
-}
-.badge-gold{
-  color : #FFD700;
-  text-shadow: 0px 0px 10px yellow;
-}
-.badge-silver{
-  color : #C0C0C0;
-  text-shadow: 0px 0px 10px yellow;
-}
-.badge-bronze{
-  color : #8c7853; 
-  text-shadow: 0px 0px 10px yellow;
-}
-.-heading{
-  background-color: #428bca;
-  color: white;
-}
-.user-name-pannel{
-  height: 20px;
-}
-.custom-arrow-height{
-  height: 15px;
- }
-.custom-vote-height{
-  height: 30px;
-}
-.correct-answer{
-  color:  green;
-}
-.user-big-profile-image{
-    height: 140px;
-    width: 140px;
-}
\ No newline at end of file
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index 0721bc52413..1b23421bad8 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -22,37 +22,47 @@
 			</xpath>
 		</template>
 
-		<!-- Page -->
+		<!-- Forum Tags -->
+		<template id="tags">
+			<t t-foreach="question.tags" t-as="tag">
+				<a t-attf-href="/forum/tag/#{ tag.id }" class="badge">
+					<t t-esc="tag.name" />
+				</a>
+			</t>
+			<t t-if="not question.tags">
+				<div style="visibility:hidden;">No Tags</div>
+			</t>
+		</template>
+
+		<!-- List of Questions -->
 		<template id="post_list">
 			<div class="row">
-				<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 question_font_size">
+				<div class="col-md-8">
 					<a t-attf-href="/forum/question/#{ slug(question) }">
 						<t t-esc="question.name" />
 					</a>
 				</div>
-				<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
-					<div class="label label-info pull-right" style="padding-left: 20px; padding-right: 20px;">
-						<h3>
-							<t t-esc="len(question.vote_ids)" />
-						</h3>
+				<div class="col-md-4 text-right">
+					<span class="label label-primary status">
+						<t t-esc="len(question.vote_ids)" />
 						Votes
-					</div>
-					<div class=" label label-success pull-right" style="padding-left: 20px; padding-right: 20px;">
-						<h3>
-							<t t-esc="len(question.child_ids)" />
-						</h3>
+					</span>
+					<span class="label label-success status">
+						<t t-esc="len(question.child_ids)" />
 						Answers
-					</div>
-
-					<div class="label label-warning  pull-right" style="padding-left: 20px; padding-right: 20px;">
-						<h3>
-							<t t-esc="question.views" />
-						</h3>
+					</span>
+					<span class="label label-info status">
+						<t t-esc="question.views" />
 						Views
-					</div>
+					</span>
 				</div>
-				<t t-call="website_forum.tags" />
-				<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 text-muted text-right">
+			</div>
+
+			<div class="row">
+				<div class="col-md-8 visible-lg">
+					<t t-call="website_forum.tags" />
+				</div>
+				<div class="col-md-4 text-muted text-right">
 					<small>
 						<t t-esc="question.write_date" />
 						<a t-attf-href="/forum/user/#{ question.create_uid.id }">
@@ -63,82 +73,128 @@
 						</a>
 					</small>
 				</div>
-				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
-					<hr class="hr_no_margin" />
-				</div>
 			</div>
 		</template>
 
 		<template id="forum_header">
 			<div class="navbar navbar-default">
-				<br />
 				<div class="container">
-
-					<div class="container">
-						<ul class="nav nav-pills pull-left" style="margin-left:2px">
-							<li>
-								<a href="#">
-									<span class="badge pull-right">12000</span>
-									ALL
-								</a>
-							</li>
-							<li>
-								<a href="#">
-									<span class="badge pull-right">4200</span>
-									UNANSWERD
-								</a>
-							</li>
-							<li>
-								<a href="#">
-									<span class="badge pull-right">420</span>
-									FOLLOWED
-								</a>
-							</li>
-						</ul>
-						<ul class="nav nav-pills pull-right" style="margin-right:2px">
-							<li>
-								<a href="#">
-									tags
-								</a>
-							</li>
-							<li>
-								<a href="#">
-									people
-								</a>
-							</li>
-							<li>
-								<a href="#">
-									badges
-								</a>
-							</li>
-						</ul>
+					<div class="raw visible-lg">
+						<div class="col-md-9 nav nav-pills pull-left">
+							<ul class="col-md-5 nav nav-pills pull-left" style="visibility:hidden;">
+								<li>
+									<a href="#">
+										<span class="badge pull-right">0</span>
+										Blank Space
+									</a>
+								</li>
+							</ul>
+						</div>
+						<div class="col-md-3 nav nav-pills text-right">
+							<ul class="nav nav-pills">
+								<li>
+									<a href="#">
+										tags
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										people
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										badges
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+
+					<div class="raw">
+						<div class="col-md-4 forum_menu items">
+							<ul class="nav nav-pills">
+								<li class="active">
+									<a href="#">
+										ALL
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										UNANSWERD
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										FOLLOWED
+									</a>
+								</li>
+							</ul>
+						</div>
+						<form action="/forum/" method="get" role="search">
+							<div class="col-md-5 forum_menu">
+
+								<input type="search" class="form-control btn-block input-lg"
+									name="search" placeholder="Search Or Ask your Question"
+									t-att-value="searches.get('search') or ''" />
+							</div>
+							<div class="col-md-3 pull-right forum_menu visible-lg">
+								<button type="submit" class="btn btn-danger btn-lg btn-block pull-left">ASK YOUR QUESTION</button>
+							</div>
+						</form>
 					</div>
-                    <form action="/forum/" method="get" role="search">
-					    <div class="container">
-						    <div class="col-md-9 pull-left">
-							    <input type="search" class="form-control input-group-lg input-lg" name="search"
-								    placeholder="Search Or Ask your Question" t-att-value="searches.get('search') or ''" />
-						    </div>
-						    <div class="col-md-3 pull-right">
-							    <button type="submit" class="btn btn-danger btn-lg btn-block pull-left">ASK YOUR QUESTION</button>
-						    </div>
-					    </div>
-                    </form>
 				</div>
-				<br />
 			</div>
 		</template>
-	
+
+		<!-- Page -->
+		<template id="index" name="Forum Navigation">
+			<t t-call="website.layout">
+				<t t-set="head">
+					<link rel='stylesheet' href='/website_forum/static/src/css/website_forum.css' />
+				</t>
+				<!-- div> <t t-call="website_forum.forum_header"/> </div -->
+				<div id="wrap" class="container">
+					<ul class="list-unstyled">
+						<li t-foreach="question_ids" t-as="question" class="question">
+							<t t-call="website_forum.post_list" />
+						</li>
+					</ul>
+					<div class="pull-center">
+						<t t-call="website.pager" />
+					</div>
+				</div>
+			</t>
+		</template>
+
+		<template id="index_right" name="Right Column"
+			inherit_option_id="website_forum.index">
+			<xpath expr="//div[@id='wrap']" position="replace">
+				<div class="container mt16 js_website_blog">
+					<div class="row">
+						<div class="col-lg-9 col-sm-9" id="blog_left_column">
+							<ul class="list-unstyled">
+								<li t-foreach="question_ids" t-as="question" class="question">
+									<t t-call="website_forum.post_list" />
+								</li>
+							</ul>
+							<div class="pull-left">
+								<t t-call="website.pager" />
+							</div>
+						</div>
+						<div class="col-lg-2 col-lg-offset-1 col-sm-2 visible-lg" id="blog_right_column">
+							<div>This is right panel</div>
+						</div>
+					</div>
+				</div>
+			</xpath>
+		</template>
+
+
 		<!-- Need to improve this template -->
 		<template id="shorting_answer">
-			<!--ul class="nav nav-pills pull-left">
-				<li>
-					<h4>
-						<t t-esc="len(question_ids)" />
-						Questions
-					</h4>
-				</li>
-			</ul-->
+			<!--ul class="nav nav-pills pull-left"> <li> <h4> <t t-esc="len(question_ids)" 
+				/> Questions </h4> </li> </ul -->
 			<!-- div class="col-md-2"> </div> <div class="col-md-2"> Short by » </div> 
 				<div class="col-md-2"> <a href="#">oldest</a> </div> <div class="col-md-2"> 
 				<a href="#">newest</a> </div> <div class="col-md-1"> <a href="#">most viewd</a> 
@@ -147,7 +203,7 @@
 		</template>
 
 		<!-- index page of forum -->
-		<template id="index" name="Posts">
+		<template id="index1" name="Posts">
 			<t t-call="website.layout">
 				<t t-set="head">
 					<link rel='stylesheet' href='/website_forum/static/src/css/website_forum.css' />
@@ -165,13 +221,11 @@
 								</li>
 							</ul>
 							<div class="col-sm-7">
-								<t t-call="website.pager">
-									<t t-set="classname">pull-right</t>
-								</t>
+
 							</div>
 						</div>
 						<div class="col-md-3">
-							<t t-raw="0"/>
+							<t t-raw="0" />
 							<h4>This is a right panel</h4>
 						</div>
 					</div>
@@ -182,15 +236,7 @@
 
 		<!-- need to refactor below code -->
 
-		<template id="tags">
-			<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
-				<t t-foreach="question.tags" t-as="tag">
-					<a t-attf-href="/forum/tag/#{ tag.id }" class="badge">
-						<t t-esc="tag.name" />
-					</a>
-				</t>
-			</div>
-		</template>
+
 
 		<template id="shorting">
 			<div class="col-xs-3">