From fa217bba332c25fb78f6864fe524a673e86baa72 Mon Sep 17 00:00:00 2001
From: Christophe Matthieu <chm@openerp.com>
Date: Thu, 12 Dec 2013 11:12:58 +0100
Subject: [PATCH] [IMP] website_sale, website_event: layout

bzr revid: chm@openerp.com-20131212101258-tzzyyuz74ysmfn6s
---
 addons/website_event/views/website_event.xml  | 37 +++++++++-------
 .../static/src/css/website_sale.css           | 28 +++++++++---
 .../static/src/css/website_sale.sass          | 22 +++++++---
 addons/website_sale/views/website_sale.xml    | 43 ++++++++++---------
 4 files changed, 81 insertions(+), 49 deletions(-)

diff --git a/addons/website_event/views/website_event.xml b/addons/website_event/views/website_event.xml
index b6d7524de5d..4adba2d1ed5 100644
--- a/addons/website_event/views/website_event.xml
+++ b/addons/website_event/views/website_event.xml
@@ -42,18 +42,7 @@
                     </span>
                 </h3>
                 <div class="row mt32 mb32">
-                    <div class="col-md-3 col-sm-4 css_noprint" id="left_column">
-                        <ul class="nav nav-pills nav-stacked">
-                            <t t-foreach="dates" t-as="date">
-                                <li t-att-class="searches.get('date') == date[0] and 'active' or ''" t-if="date[3] or (date[0] in ('old','all'))">
-                                    <a t-href="/event/#{ search_path }&amp;date=#{ date[0] }"><t t-esc="date[1]"/>
-                                        <span t-if="date[3]" class="badge pull-right"><t t-esc="date[3]"/></span>
-                                    </a>
-                                </li>
-                            </t>
-                        </ul>
-                    </div>
-                    <div class="col-sm-7 col-md-6" id="middle_column">
+                    <div class="col-md-9" id="middle_column">
                         <t t-if="not event_ids">
                             <p t-if="current_date or current_country or current_type">
                                 No event found in this category, check <a href="/event">all events</a>.
@@ -93,7 +82,7 @@
                             </li>
                         </ul>
                     </div>
-                    <div class="col-sm-2 col-md-3 oe_structure" id="right_column">
+                    <div class="col-md-3 oe_structure" id="right_column">
                     </div>
                 </div>
             </div>
@@ -138,7 +127,25 @@
         </xpath>
     </template>
 
-    <template id="event_category" inherit_id="website_event.index" inherit_option_id="website_event.index" name="Filter by Category">
+    <template id="event_left_column" inherit_option_id="website_event.index" name="Filters">
+        <xpath expr="//div[@id='middle_column']" position="attributes">
+            <attribute name="class">col-md-6</attribute>
+        </xpath>
+        <xpath expr="//div[@id='middle_column']" position="before">
+            <div class="col-md-3 css_noprint" id="left_column">
+                <ul class="nav nav-pills nav-stacked">
+                    <t t-foreach="dates" t-as="date">
+                        <li t-att-class="searches.get('date') == date[0] and 'active' or ''" t-if="date[3] or (date[0] in ('old','all'))">
+                            <a t-href="/event/#{ search_path }&amp;date=#{ date[0] }"><t t-esc="date[1]"/>
+                                <span t-if="date[3]" class="badge pull-right"><t t-esc="date[3]"/></span>
+                            </a>
+                        </li>
+                    </t>
+                </ul>
+            </div>
+        </xpath>
+    </template>
+    <template id="event_category" inherit_id="website_event.event_left_column" inherit_option_id="website_event.event_left_column" name="Filter by Category">
         <xpath expr="//div[@id='left_column']" position="inside">
             <ul class="nav nav-pills nav-stacked mt32">
                 <t t-foreach="types">
@@ -151,7 +158,7 @@
             </ul>
         </xpath>
     </template>
-    <template id="event_location" inherit_id="website_event.index" inherit_option_id="website_event.index" name="Filter by Country">
+    <template id="event_location" inherit_id="website_event.event_left_column" inherit_option_id="website_event.event_left_column" name="Filter by Country">
         <xpath expr="//div[@id='left_column']" position="inside">
             <ul class="nav nav-pills nav-stacked mt32">
                 <t t-foreach="countries">
diff --git a/addons/website_sale/static/src/css/website_sale.css b/addons/website_sale/static/src/css/website_sale.css
index 1ea297732a2..25484199e55 100644
--- a/addons/website_sale/static/src/css/website_sale.css
+++ b/addons/website_sale/static/src/css/website_sale.css
@@ -36,6 +36,26 @@
   height: 100%;
 }
 
+.products_pager {
+  text-align: center;
+}
+.products_pager > div {
+  margin: 0 auto;
+  display: inline-block;
+}
+.products_pager > div > * {
+  vertical-align: middle;
+  float: none;
+  padding: 0;
+}
+.products_pager > div > ul {
+  padding-left: 10px;
+}
+.products_pager > ul {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 /* ---- Default Styles Description ---- */
 .oe_product .oe_product_image {
   position: absolute;
@@ -149,14 +169,8 @@
     display: inline-block;
   }
 
-  .products_pager {
-    text-align: center;
-    margin: 10px 0;
-  }
   .products_pager .pagination {
-    float: none !important;
-    margin: 0 !important;
-    padding: 0 !important;
+    margin: 5px auto !important;
   }
 }
 @media (max-width: 400px) {
diff --git a/addons/website_sale/static/src/css/website_sale.sass b/addons/website_sale/static/src/css/website_sale.sass
index 88d1f5f6a57..4143dfe62cc 100644
--- a/addons/website_sale/static/src/css/website_sale.sass
+++ b/addons/website_sale/static/src/css/website_sale.sass
@@ -33,6 +33,21 @@
         width: 100%
         height: 100%
 
+.products_pager
+    text-align: center
+    > div
+        margin: 0 auto
+        display: inline-block
+        > *
+            vertical-align: middle
+            float: none
+            padding: 0
+        > ul
+            padding-left: 10px
+    > ul
+        margin-left: auto
+        margin-right: auto
+
 /* ---- Default Styles Description ---- */
 
 .oe_product
@@ -136,12 +151,8 @@
             height: 300px
             display: inline-block
     .products_pager
-        text-align: center
-        margin: 10px 0
         .pagination
-            float: none !important
-            margin: 0 !important
-            padding: 0 !important
+            margin: 5px auto !important
 
 @media (max-width: 400px)
     #products_grid
@@ -355,4 +366,3 @@ ul.wizard li.text-primary .chevron:before
 ul.wizard li:first-child
     padding-left: 15px
     border-radius: 4px 0 0 4px
-
diff --git a/addons/website_sale/views/website_sale.xml b/addons/website_sale/views/website_sale.xml
index 8a7b9124f37..038029755a3 100644
--- a/addons/website_sale/views/website_sale.xml
+++ b/addons/website_sale/views/website_sale.xml
@@ -42,7 +42,12 @@
     <template id="search" name="Search hidden fields">
         <input type="hidden" name="category" t-att-value="search.get('category') or ''"/>
         <input type="hidden" name="filters" t-att-value="search.get('filters') or ''"/>
-        <input type="text" name="search" class="search-query form-control" placeholder="Search..." t-att-value="search.get('search') or ''"/>
+        <div class="input-group">
+          <input type="text" name="search" class="search-query form-control" placeholder="Search..." t-att-value="search.get('search') or ''"/>
+          <span class="input-group-btn">
+            <button class="btn btn-default" type="submit"><i class="fa fa-search"/></button>
+          </span>
+        </div>
     </template>
 
     <template id="products_cart" name="Shopping cart">
@@ -89,18 +94,14 @@
             <div id="wrap">
               <div class="oe_structure"/>
               <div class="container oe_website_sale">
-                <div class="row">
-                    <div class="col-sm-8 products_pager">
-                        <t t-call="website.pager">
-                            <t t-set="classname">pull-right</t>
-                            <t t-set="style">padding-left: 5px;</t>
-                        </t>
-                        <form action="/shop/" method="get" class="pull-right pagination form-inline" style="padding-right: 5px;">
-                            <t t-call="website_sale.search" />
-                        </form>
-                    </div>
+                <div class="products_pager">
+                  <div>
+                    <form action="/shop/" method="get" class="pagination form-inline col-md-3">
+                        <t t-call="website_sale.search" />
+                    </form>
+                    <t t-call="website.pager"/>
+                  </div>
                 </div>
-
                 <div class='style_default row'>
                   <div class="hidden" id="products_grid_before"></div>
                   <div class="col-md-12" id="products_grid">
@@ -190,9 +191,7 @@
                   </div>
                 </div>
                 <div class="products_pager">
-                    <t t-call="website.pager">
-                        <t t-set="classname">pull-right</t>
-                    </t>
+                    <t t-call="website.pager"/>
                 </div>
               </div>
               <div class="oe_structure mb32"/>
@@ -260,13 +259,19 @@
 
               <section class="container mt8">
                 <div class="row">
-                  <div class="col-sm-5">
+                  <div class="col-sm-4">
                       <ol class="breadcrumb">
                           <li><a href="/shop">Products</a></li>
                           <li t-if="search.get('category')"><a t-href="/shop/" t-keep-query="category,search,filters"><span t-field="category.name"/></a></li>
                           <li class="active"><span t-field="product.name"/></li>
                       </ol>
-                  </div><div class="col-sm-3">
+                  </div>
+                  <div class="col-sm-3">
+                    <form action="/shop/" method="get" class="pull-right">
+                        <t t-call="website_sale.search" />
+                    </form>
+                  </div>
+                  <div class="col-sm-4">
                       <t t-call="website.publish_management">
                         <t t-set="object" t-value="product"/>
                         <t t-set="publish_edit" t-value="True"/>
@@ -278,10 +283,6 @@
                             </ul>
                         </li>
                       </t>
-                  </div><div class="col-sm-3 col-sm-offset-1">
-                        <form action="/shop/" method="get" class="pull-right">
-                            <t t-call="website_sale.search" />
-                        </form>
                   </div>
                 </div>
               </section>