[IMP] First Theme Example

bzr revid: fp@openerp.com-20130811210927-dys2ilkss3553r65

9 files changed, 204 insertions, 178 deletions

diff --git a/addons/website/static/src/css/Makefile b/addons/website/static/src/css/Makefile
index 238219f8906..2c05352f1e1 100644
--- a/addons/website/static/src/css/Makefile
+++ b/addons/website/static/src/css/Makefile
@@ -1,3 +1,4 @@
 sass:
 	sass -t expanded --unix-newlines --watch website.sass:website.css&
+	sass -t expanded --unix-newlines --watch website-flatly.sass:website-flatly.css&
 	sass -t expanded --unix-newlines --watch editor.sass:editor.css&
diff --git a/addons/website/static/src/css/website-flatly.css b/addons/website/static/src/css/website-flatly.css
new file mode 100644
index 00000000000..e06de976539
--- /dev/null
+++ b/addons/website/static/src/css/website-flatly.css
@@ -0,0 +1,84 @@
+@charset "utf-8";
+/*       THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
+ *
+ * css for editor buttons, openerp widget included in the website and other
+ * stuff must go to the editor.css 
+ *
+ */
+/* ----- GENERIC LAYOUTING HELPERS ---- */
+/* Grid of unequally tall elements */
+.grid > [class*="span"] {
+  display: inline-block;
+  float: none;
+  vertical-align: top;
+  margin-right: -4px;
+  box-sizing: border-box;
+}
+.grid > [class*="span"].grid-align-top > [class*="span"] {
+  vertical-align: top;
+}
+.grid > [class*="span"].grid-align-middle > [class*="span"] {
+  vertical-align: middle;
+}
+.grid > [class*="span"].grid-align-bottom > [class*="span"] {
+  vertical-align: bottom;
+}
+
+/* Table with two collumns aligned on the center */
+.table-equalized {
+  width: 100%;
+}
+.table-equalized td:first-child {
+  width: 50%;
+  text-align: right;
+  padding-right: 1em;
+  vertical-align: bottom;
+}
+.table-equalized td:last-child {
+  width: 50%;
+  text-align: left;
+  vertical-align: bottom;
+}
+
+/* Theming pagination inside navbar */
+.navbar-inner > .pagination {
+  margin: 6px 0;
+}
+.navbar-inner > .pagination ul {
+  position: relative;
+  top: 2px;
+  border: solid 2px rgba(0, 0, 0, 0.05);
+  border-radius: 8px;
+}
+
+/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
+.subheader {
+  letter-spacing: 3px;
+  font-weight: 300;
+}
+
+.dark {
+  background: #eff8f8;
+  padding: 64px;
+}
+
+h5 {
+  font-weight: bold;
+}
+
+#myCarousel .item {
+  min-height: 300px;
+  color: white;
+}
+
+.thumbnail {
+  background: white;
+}
+
+.navbar .nav > li a {
+  float: none;
+  padding: 15px 15px 15px;
+  color: white;
+  text-decoration: none;
+  text-shadow: 0 1px 0 #2c3e50;
+}
diff --git a/addons/website/static/src/css/website-flatly.sass b/addons/website/static/src/css/website-flatly.sass
new file mode 100644
index 00000000000..892e3b08f44
--- /dev/null
+++ b/addons/website/static/src/css/website-flatly.sass
@@ -0,0 +1,76 @@
+@charset "utf-8"
+
+/* 
+ *       THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
+ *
+ * css for editor buttons, openerp widget included in the website and other
+ * stuff must go to the editor.css 
+ *
+ */
+
+/* ----- GENERIC LAYOUTING HELPERS ---- */
+
+/* Grid of unequally tall elements */
+.grid > [class*="span"]
+    display: inline-block
+    float: none
+    vertical-align: top
+    margin-right: -4px
+    box-sizing: border-box
+    &.grid-align-top > [class*="span"]
+        vertical-align: top
+    &.grid-align-middle > [class*="span"]
+        vertical-align: middle
+    &.grid-align-bottom > [class*="span"]
+        vertical-align: bottom
+
+/* Table with two collumns aligned on the center */
+.table-equalized
+    width: 100%
+    td:first-child
+        width: 50%
+        text-align: right
+        padding-right: 1em
+        vertical-align: bottom
+    td:last-child
+        width: 50%
+        text-align: left
+        vertical-align: bottom
+
+/* Theming pagination inside navbar */
+.navbar-inner > .pagination
+    margin: 6px 0
+    ul
+        position: relative
+        top: 2px
+        border: solid 2px rgba(0,0,0,0.05)
+        border-radius: 8px
+
+/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
+
+.subheader
+    letter-spacing: 3px   
+    font-weight: 300
+
+.dark
+    background: rgb(239, 248, 248)
+    padding: 64px
+
+h5
+    font-weight: bold 
+
+#myCarousel .item
+    min-height: 300px
+    color: white
+
+.thumbnail
+    background: white
+
+.navbar .nav > li  a 
+    float: none
+    padding: 15px 15px 15px
+    color: #ffffff
+    text-decoration: none
+    text-shadow: 0 1px 0 #2c3e50
+
+
diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index eff864d500c..c19576b0a3f 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -1,3 +1,4 @@
+@charset "utf-8";
 /*       THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
  *
  * css for editor buttons, openerp widget included in the website and other
@@ -78,51 +79,6 @@
   margin-bottom: 0px !important;
 }
 
-/* Grid of unequally tall elements */
-.grid > [class*="span"] {
-  display: inline-block;
-  float: none;
-  vertical-align: top;
-  margin-right: -4px;
-  box-sizing: border-box;
-}
-.grid > [class*="span"].grid-align-top > [class*="span"] {
-  vertical-align: top;
-}
-.grid > [class*="span"].grid-align-middle > [class*="span"] {
-  vertical-align: middle;
-}
-.grid > [class*="span"].grid-align-bottom > [class*="span"] {
-  vertical-align: bottom;
-}
-
-/* Table with two collumns aligned on the center */
-.table-equalized {
-  width: 100%;
-}
-.table-equalized td:first-child {
-  width: 50%;
-  text-align: right;
-  padding-right: 1em;
-  vertical-align: bottom;
-}
-.table-equalized td:last-child {
-  width: 50%;
-  text-align: left;
-  vertical-align: bottom;
-}
-
-/* Theming pagination inside navbar */
-.navbar-inner > .pagination {
-  margin: 6px 0;
-}
-.navbar-inner > .pagination ul {
-  position: relative;
-  top: 2px;
-  border: solid 2px rgba(0, 0, 0, 0.05);
-  border-radius: 8px;
-}
-
 /* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */
 html, body {
   height: 100%;
@@ -147,38 +103,6 @@ footer {
   padding-bottom: 48px;
 }
 
-/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
-.subheader {
-  letter-spacing: 3px;
-  font-weight: 300;
-}
-
-header.navbar-fixed-top {
-  position: static;
-}
-
-.dark {
-  background: #eff8f8;
-  padding: 64px;
-}
-
-h5 {
-  font-weight: bold;
-}
-
-#myCarousel .item {
-  min-height: 300px;
-  color: white;
-}
-
-.nav > .pull-right {
-  float: right !important;
-}
-
-.thumbnail {
-  background: white;
-}
-
 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 .navbar .nav > li > p {
   margin-bottom: 0px;
@@ -188,14 +112,16 @@ h5 {
   text-shadow: none;
 }
 
-.navbar .nav > li a {
-  float: none;
-  padding: 15px 15px 15px;
-  color: white;
-  text-decoration: none;
-  text-shadow: 0 1px 0 #2c3e50;
-}
-
 .nav > li a {
   display: block;
 }
+
+/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
+header.navbar-fixed-top {
+  position: static;
+}
+
+#myCarousel .item {
+  min-height: 300px;
+  color: white;
+}
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 3ae32d8830a..a8ae998b1ec 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -49,42 +49,6 @@
 .mb0
     margin-bottom: 0px !important
 
-/* Grid of unequally tall elements */
-.grid > [class*="span"]
-    display: inline-block
-    float: none
-    vertical-align: top
-    margin-right: -4px
-    box-sizing: border-box
-    &.grid-align-top > [class*="span"]
-        vertical-align: top
-    &.grid-align-middle > [class*="span"]
-        vertical-align: middle
-    &.grid-align-bottom > [class*="span"]
-        vertical-align: bottom
-
-/* Table with two collumns aligned on the center */
-.table-equalized
-    width: 100%
-    td:first-child
-        width: 50%
-        text-align: right
-        padding-right: 1em
-        vertical-align: bottom
-    td:last-child
-        width: 50%
-        text-align: left
-        vertical-align: bottom
-
-/* Theming pagination inside navbar */
-.navbar-inner > .pagination
-    margin: 6px 0
-    ul
-        position: relative
-        top: 2px
-        border: solid 2px rgba(0,0,0,0.05)
-        border-radius: 8px
-
 /* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */
 
 html,body
@@ -107,32 +71,6 @@ footer
     padding-top: 48px
     padding-bottom: 48px
 
-/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
-
-.subheader
-    letter-spacing: 3px   
-    font-weight: 300
-
-header.navbar-fixed-top
-    position: static
-
-.dark
-    background: rgb(239, 248, 248)
-    padding: 64px
-
-h5
-    font-weight: bold 
-
-#myCarousel .item
-    min-height: 300px
-    color: white
-
-
-.nav > .pull-right
-    float: right !important //bugfix for flatly theme
-
-.thumbnail
-    background: white
 
 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 
@@ -142,13 +80,16 @@ h5
 .navbar .nav > li  a
     text-shadow: none
 
-.navbar .nav > li  a 
-    float: none
-    padding: 15px 15px 15px
-    color: #ffffff
-    text-decoration: none
-    text-shadow: 0 1px 0 #2c3e50
-
 .nav > li  a 
     display: block
 
+/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
+
+header.navbar-fixed-top
+    position: static
+
+#myCarousel .item
+    min-height: 300px
+    color: white
+
+
diff --git a/addons/website/views/views.xml b/addons/website/views/views.xml
index 704ad10ace5..c8237224369 100644
--- a/addons/website/views/views.xml
+++ b/addons/website/views/views.xml
@@ -9,9 +9,9 @@
                     <em>Open</em><b>ERP</b>
                     <!--<img t-att-alt="res_company.name" src='/web/binary/company_logo'/></a>-->
                 </a>
-                <ul class="nav pull-right">
-                    <li class='pull-right'><a href="/admin">Sign in</a></li>
-                    <li class='pull-right'><a href="/page/website.contactus">Contact us</a></li>
+                <ul class="nav pull-right" id="top_menu">
+                    <li><a href="/page/website.contactus">Contact us</a></li>
+                    <li><a href="/admin">Sign in</a></li>
                 </ul>
             </div>
         </template>
@@ -20,18 +20,17 @@
             Files used in the generic theme, mostly bootstrap and a few OpenERP tags
         -->
         <template id="theme" name="Theme">
-            <link id="bootstrap_css" rel='stylesheet' href='/website/static/lib/bootstrap/css/bootstrap.css'/>
-            <link id="website_css" rel='stylesheet' href='/website/static/src/css/website.css'/>
+            <link id="bootstrap_css" rel='stylesheet' href='/website/static/lib/bootstrap/css/bootstrap.css' t-ignore="true"/>
+            <link id="website_css" rel='stylesheet' href='/website/static/src/css/website.css' t-ignore="true"/>
         </template>
 
-        <template id="theme_flatly" name="Flat" inherit_option_id="website.theme">
+        <template id="theme_flatly" name="Flat Theme" inherit_option_id="website.theme">
             <xpath expr="//link[@id='bootstrap_css']" position="replace">
-                <link id="bootstrap_css" rel='stylesheet' href='/website/static/lib/bootstrap/css/bootstrap-flatly.css'/>
+                <link rel='stylesheet' href='/website/static/lib/bootstrap/css/bootstrap-flatly.css' t-ignore="true"/>
+                <link rel='stylesheet' href='/website/static/src/css/website-flatly.css' t-ignore="true"/>
             </xpath>
-            
         </template>
 
-
         <template id="footer" name="Footer">
                 <div class="container" id="footer_container">
                     <div class="row">
@@ -110,12 +109,11 @@
                         <t t-raw="head or ''"/>
                         <t t-call="website.theme"/>
 
-
                         <link rel='stylesheet' href='/web/static/lib/fontawesome/css/font-awesome.css'/>
                         <link rel='stylesheet' href='/website/static/lib/bootstrap/css/bootstrap-responsive.css'/>
                     </head>
                     <body>
-                        <header class='navbar navbar-fixed-top'>
+                        <header class='navbar navbar-static-top'>
                             <div class='navbar-inner'>
                                 <t t-call="website.header"/>
                             </div>
@@ -249,7 +247,7 @@
                                 <div class='container'>
                                     <div class="mt64"> </div>
                                     <h1>Create Awesome Websites</h1>
-                                    <h2>So many features, so easy to use</h2>
+                                    <h3>Super easy, fully flexible</h3>
                                     <a href='/page/website.contactus' class='btn btn-success btn-large mt16'>Contact us</a>
                                 </div>
                             </div>
diff --git a/addons/website_event/views/website_event.xml b/addons/website_event/views/website_event.xml
index 865910add6f..6be733743d5 100644
--- a/addons/website_event/views/website_event.xml
+++ b/addons/website_event/views/website_event.xml
@@ -9,8 +9,8 @@
         <field name="inherit_id" ref="website.header"/>
         <field name="arch" type="xml">
             <data>
-                <xpath expr="(//li)[last()]" position="after">
-                    <li class="pull-right"><a href="/event">Events</a></li>
+                <xpath expr="//ul[@id='top_menu']/li" position="after">
+                    <li><a href="/event">Events</a></li>
                 </xpath>
            </data>
         </field>
diff --git a/addons/website_mail/views/website_mail.xml b/addons/website_mail/views/website_mail.xml
index 6de48040b9b..9a852007b85 100644
--- a/addons/website_mail/views/website_mail.xml
+++ b/addons/website_mail/views/website_mail.xml
@@ -17,8 +17,8 @@
         <field name="inherit_id" ref="website.header"/>
         <field name="arch" type="xml">
             <data>
-                <xpath expr="//li[last()]" position="after">
-                    <li class="pull-right"><a href="/blog/%(website_mail.website_mail_blog)d/">News</a></li>
+                <xpath expr="//ul[@id='top_menu']/li" position="after">
+                    <li><a href="/blog/%(website_mail.website_mail_blog)d/">News</a></li>
                 </xpath>
             </data>
         </field>
diff --git a/addons/website_sale/views/ecommerce.xml b/addons/website_sale/views/ecommerce.xml
index 9757aeb09a2..2a91fe4d5bc 100644
--- a/addons/website_sale/views/ecommerce.xml
+++ b/addons/website_sale/views/ecommerce.xml
@@ -9,14 +9,14 @@
         <field name="inherit_id" ref="website.header"/>
         <field name="arch" type="xml">
             <data>
-                <xpath expr="(//li)[last()]" position="after">
-                    <li class="pull-right">
+                <xpath expr="//ul[@id='top_menu']/li" position="before">
+                    <li>
                         <a href="/shop/mycart/">
-                            <i class="icon-shopping-cart icon-large" style="position: absolute;"></i>
+                            <i class="icon-shopping-cart"></i>
                             My cart
                         </a>
                     </li>
-                    <li class="pull-right">
+                    <li>
                         <a href="/shop/">Shop</a>
                     </li>
                 </xpath>
@@ -28,16 +28,16 @@
         <field name="inherit_id" ref="website.header"/>
         <field name="arch" type="xml">
             <data>
-                <xpath expr="(//li)[last()]" position="after">
-                    <li class="pull-right">
+                <xpath expr="//ul[@id='top_menu']/li" position="before">
+                    <li>
+                        <li><a href="/shop/">Shop</a></li>
                         <a href="/shop/mycart/">
-                            <i class="icon-shopping-cart icon-large" style="position: absolute;"></i>
+                            <i class="icon-shopping-cart"></i>
                             My cart
                             <!-- FIXME: logic to obtain the shopping cart numer of items shall not be in the template. Move it in models or in controllers -->
                             <!-- <span class="badge badge-success" t-if="order.order_line" t-esc="int(sum([l.product_uom_qty for l in order.order_line]))"/> -->
                         </a>
                     </li>
-                    <li class="pull-right"><a href="/shop/">Shop</a></li>
                 </xpath>
            </data>
         </field>