From f96935169b819ebe0345705ba6d548a02e3b1d93 Mon Sep 17 00:00:00 2001
From: "Turkesh Patel (Open ERP)" <tpa@tinyerp.com>
Date: Wed, 26 Feb 2014 15:04:59 +0530
Subject: [PATCH] [IMP] improved post_list template and css

bzr revid: tpa@tinyerp.com-20140226093459-511strae23sk3zih
---
 addons/website_forum/controllers/main.py      |   1 +
 .../static/src/css/website_forum.css          |  57 ++++-
 addons/website_forum/views/website_forum.xml  | 214 +++++++++---------
 3 files changed, 165 insertions(+), 107 deletions(-)

diff --git a/addons/website_forum/controllers/main.py b/addons/website_forum/controllers/main.py
index 4c39b772a6d..c46080b5095 100644
--- a/addons/website_forum/controllers/main.py
+++ b/addons/website_forum/controllers/main.py
@@ -139,6 +139,7 @@ class website_forum(http.Controller):
         values = {
             'question_ids': tag.post_ids,
             'pager': pager,
+            'searches': kwargs
         }
 
         return request.website.render("website_forum.index", values)
diff --git a/addons/website_forum/static/src/css/website_forum.css b/addons/website_forum/static/src/css/website_forum.css
index 4ba28fff7e0..1608f925adb 100644
--- a/addons/website_forum/static/src/css/website_forum.css
+++ b/addons/website_forum/static/src/css/website_forum.css
@@ -1,11 +1,62 @@
 @charset "utf-8";
 @import url(compass/css3.css);
 
-.MainBody{
-  max-width: 700px;
+@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;
+  }
+
+}
+.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 */
+}
+
+.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 */
+}
+.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 */
+}
+.AskButton{
+  float: right;
 }
 .search-navbar{
-  width: 80%;
+  width: 100%;
 }
 .user-profile-image{
   height: 32px;
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index 3b3198c15a1..bfdcf32e666 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -24,75 +24,69 @@
         <!-- Page -->
 
         <template id="post_list">
-            <div class="tab-pane active" id="all">
-                <div class="row">
-                    <div class="col-xs-12">
-                        <div class="row">
-                            <div class="col-xs-9">
-                                <div class="row">
-                                    <div class="col-xs-12">
-                                        <h4>
-                                            <a t-attf-href="/question/#{ slug(question) }">
-                                                <span>
-                                                    <t t-esc="question.name"/>
-                                                </span>
-                                            </a>
-                                        </h4>
-                                    </div>
-                                </div>
-                                <t t-call="website_forum.tags" />
-                                <div class="row">
-                                    <div class="col-xs-12 text-right">
-                                        <small>
-                                            <span>
-                                                <t t-esc="question.write_date" />
-                                            </span>
-                                            <a t-attf-href="/question/user/#{ question.create_uid.id }" >
-                                                <span>
-                                                    <t t-esc="question.create_uid.name"/>
-                                                </span>
-                                            </a>
-                                            <a href="">
-                                                <span>
-                                                    <t t-esc="question.create_uid.karma" />
-                                                </span>
-                                            </a>
-                                        </small>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col-xs-3">
-                                <h5>
-                                    <span itemprop="Votes" class="label label-success">
-                                        <t t-esc="len(question.vote_ids)" />
-                                        Votes
-                                    </span>
-                                </h5>
-                            </div>
-                            <div class="col-xs-3">
-                                <h5>
-                                    <span itemprop="Votes" class="label label-success">
-                                        <t t-esc="len(question.vote_ids)" />
-                                        Answers
-                                    </span>
-                                </h5>
-                            </div>
-                            <div class="col-xs-3">
-                                <h5>
-                                    <span itemprop="Votes" class="label label-success">
-                                        <t t-esc="question.views" />
-                                        Views
-                                    </span>
-                                </h5>
-                            </div>
+            <div class="row">
+                <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 question_font_size">
+                    <a t-attf-href="/question/#{ slug(question) }">
+                        <t t-esc="question.name" /> 
+                    </a>
+                </div>
+                <h4>
+                    <div class="label label-info col-lg-1 col-md-1 text-center visible-md visible-lg" style="border-radius: 20px">
+                        <t t-esc="len(question.vote_ids)" />
+                        <br/>
+                        Votes
+                    </div>
+                    <div  class=" label label-success col-lg-1 col-md-1 text-center visible-md visible-lg" style="border-radius: 20px">
+                        <t t-esc="len(question.vote_ids)" />
+                        <br/>
+                        Answers
+                    </div>
+                    <div class="label label-warning col-lg-1 col-md-1 visible-md visible-lg" style="border-radius: 20px">
+                        <t t-esc="question.views" />
+                        <br/>
+                        Views
+                    </div>
+                </h4>
+                <t t-call="website_forum.tags" />
+                <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4  text-muted" >
+                    <small>
+                        <t t-esc="question.write_date" />
+                        <a t-attf-href="/question/user/#{ question.create_uid.id }">
+                            <t t-esc="question.create_uid.name" />
+                        </a>
+                        <a href="">
+                            <t t-esc="question.create_uid.karma" />
+                        </a>
+                    </small>
+                </div>
+                <div class="col-xs-12 col-sm-12 visible-xs visible-sm">
+                    <div class="col-xs-4 col-sm-4">
+                        <div class="label label-info">
+                            <t t-esc="len(question.vote_ids)" />
+                            Votes  
                         </div>
                     </div>
+                    <div class="col-xs-4 col-sm-4">
+                        <div class="label label-success text-center">
+                            <t t-esc="len(question.vote_ids)" />
+                            Answers
+                        </div>
+                    </div>
+                    <div class="col-xs-4 col-sm-4">
+                        <span class="label label-warning">
+                            <t t-esc="question.views" />
+                            Views
+                        </span>
+                    </div>
+                </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="tags">
-            <div class="col-xs-12">
+            <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="/questions/tag/#{ tag.id }" class="badge"><t t-esc="tag.name"/></a>
                 </t>
@@ -127,9 +121,7 @@
         
         <template id="shorting_answer">
             <div class="row-fluid"> 
-            <div class="col-xs-12" style="width: 1000px;
-            background: buttonface;
-            text-align:left;">
+            <div class="col-xs-12" style="width: 1000px; background: buttonface; text-align:left;">
                 <b><div class="col-md-4">2 Answers</div></b>
                 <div class="col-md-2 col-md-push-4">
                     Short by »
@@ -153,14 +145,12 @@
                     <div class="row">
                         <t t-call="website_forum.post_vote"/>
                         <div class="col-md-9 col-xs-10">
-                            <div class="row">
-                                <div class="col-xs-12">
-                                    <span>
-                                        <h4>
-                                            <t t-esc="answer.content"/>
-                                        </h4>
-                                    </span>
-                                </div>
+                            <div class="row col-xs-12">
+                                <span>
+                                    <h4>
+                                        <t t-esc="answer.content"/>
+                                    </h4>
+                                </span>
                             </div>
                             <div class="row">
                                 <t t-call="website_forum.user_detail"/>
@@ -187,38 +177,54 @@
                 <t t-set="head">
                     <link rel='stylesheet' href='/website_forum/static/src/css/website_forum.css' />
                 </t>
-                <div id="wrap" class="js_blog">
-                    <div class="row">
-                        <t t-call="website_forum.post_search" />
-                    </div>
-                    <div class="row">
-                        <div class="col-xs-3">
-                            <span class="badge">
-                                <t t-esc="total_questions"/> Question
-                            </span>
+                <div id="wrap" class="js_blog base_width">
+                    <div class="container">
+                        <div class="row">
+                            <t t-call="website_forum.post_search" />
+                        </div>
+                        <div class="row">
+                            <div class="col-xs-3">
+                                <span class="badge">
+                                    <t t-esc="total_questions"/> Question
+                                </span>
+                            </div>
+                            <t t-call="website_forum.shorting" />
+                        </div>
+                        <ul id="tabs" class="nav nav-pills">
+                            <li class="active">
+                                <a t-attf-href="#all" data-toggle="tab">ALL</a>
+                            </li>
+                            <li>
+                                <a t-attf-href="#unanswerd" data-toggle="tab">UNANSWERD</a>
+                            </li>
+                            <li>
+                                <a t-attf-href="#followed" data-toggle="tab">FOLLOWED</a>
+                            </li>
+                        </ul>
+                        <ul class="media-list">
+                            <div id="myTabs" class="tab-content">
+                                <div class="tab-pane active" id="all">
+                                    <li t-foreach="question_ids" t-as="question" class="media media_without_margin">
+                                        <t t-call="website_forum.post_list" />
+                                    </li>
+                                </div>
+                                <div class="tab-pane" id="unanswerd">
+                                    <li> 
+                                        Here is Unanswerd questions.
+                                    </li>
+                                </div>
+                                <div class="tab-pane" id="followed">
+                                    <li> 
+                                        Here is Followed questions.
+                                    </li>
+                                </div>
+                            </div>
+                        </ul>
+                        <div class="col-sm-7">
+                            <t t-call="website.pager" >
+                                <t t-set="classname">pull-right</t>
+                            </t>
                         </div>
-                        <t t-call="website_forum.shorting" />
-                    </div>
-                    <ul id="tabs" class="nav nav-pills">
-                        <li class="active">
-                            <a t-attf-href="#all" data-toggle="tab">ALL</a>
-                        </li>
-                        <li>
-                            <a t-attf-href="#unanswerd" data-toggle="tab">UNANSWERD</a>
-                        </li>
-                        <li>
-                            <a t-attf-href="#followed" data-toggle="tab">FOLLOWED</a>
-                        </li>
-                    </ul>
-                    <ul class="media-list">
-                        <li t-foreach="question_ids" t-as="question" class="media">
-                            <t t-call="website_forum.post_list" />
-                        </li>
-                    </ul>
-                    <div class="col-sm-7">
-                        <t t-call="website.pager" >
-                            <t t-set="classname">pull-right</t>
-                        </t>
                     </div>
                 </div>
             </t>