From df9725df26ed123752313545e2a7ea186ca88817 Mon Sep 17 00:00:00 2001
From: David Monjoie <dmo@odoo.com>
Date: Thu, 25 Jun 2015 10:15:45 +0200
Subject: [PATCH] [IMP] web_editor,website: added scalable margins in less

The original commit by fka used to define less variables like this:
@px-4: 4px
@px-8: 8px

The goal was to be able to change the margin values in
media queries for smaller screens.
However, as the less is only compiled once in css, those
variables didn't really help as you couldn't redefine them
from inside a media query and have the less magically
reassign the margins on the fly.

I created less helper functions to be able to easily redefine
the margins for smaller screens from inside media queries.

The task also required to replace the nbsp in the html by the
newly created mr and ml classes.

This is also the first phase of the sass -> less transition.
---
 .../web_editor/static/src/css/web_editor.css  | 97 -------------------
 .../web_editor/static/src/css/web_editor.sass | 55 -----------
 .../static/src/less/web_editor.less           | 63 ++++++++++++
 addons/web_editor/static/src/xml/snippets.xml |  6 +-
 addons/web_editor/views/editor.xml            |  1 +
 addons/website/views/website_templates.xml    |  1 +
 .../views/website_blog_templates.xml          | 13 ++-
 .../views/website_customer.xml                |  4 +-
 .../views/website_event_sale.xml              |  4 +-
 .../website_forum_doc/views/website_doc.xml   |  2 +-
 addons/website_sale/views/templates.xml       | 12 +--
 11 files changed, 85 insertions(+), 173 deletions(-)
 create mode 100644 addons/web_editor/static/src/less/web_editor.less

diff --git a/addons/web_editor/static/src/css/web_editor.css b/addons/web_editor/static/src/css/web_editor.css
index 09a55ac9846..f83b5628b4e 100644
--- a/addons/web_editor/static/src/css/web_editor.css
+++ b/addons/web_editor/static/src/css/web_editor.css
@@ -25,103 +25,6 @@
   min-width: 20px;
 }
 
-/* Vertical Spacing */
-.mt128 {
-  margin-top: 128px !important;
-}
-
-.mt92 {
-  margin-top: 92px !important;
-}
-
-.mt64 {
-  margin-top: 64px !important;
-}
-
-.mt48 {
-  margin-top: 48px !important;
-}
-
-.mt32 {
-  margin-top: 32px !important;
-}
-
-.mt16 {
-  margin-top: 16px !important;
-}
-
-.mt8 {
-  margin-top: 8px !important;
-}
-
-.mt4 {
-  margin-top: 4px !important;
-}
-
-.mt0 {
-  margin-top: 0px !important;
-}
-
-.mb128 {
-  margin-bottom: 128px !important;
-}
-
-.mb92 {
-  margin-bottom: 92px !important;
-}
-
-.mb64 {
-  margin-bottom: 64px !important;
-}
-
-.mb48 {
-  margin-bottom: 48px !important;
-}
-
-.mb32 {
-  margin-bottom: 32px !important;
-}
-
-.mb16 {
-  margin-bottom: 16px !important;
-}
-
-.mb8 {
-  margin-bottom: 8px !important;
-}
-
-.mb4 {
-  margin-bottom: 4px !important;
-}
-
-.mb0 {
-  margin-bottom: 0px !important;
-}
-
-.ml8 {
-  margin-left: 8px !important;
-}
-
-.ml4 {
-  margin-left: 4px !important;
-}
-
-.ml0 {
-  margin-left: 0px !important;
-}
-
-.mr8 {
-  margin-right: 8px !important;
-}
-
-.mr4 {
-  margin-right: 4px !important;
-}
-
-.mr0 {
-  margin-right: 0px !important;
-}
-
 /* Media */
 img.shadow {
   -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
diff --git a/addons/web_editor/static/src/css/web_editor.sass b/addons/web_editor/static/src/css/web_editor.sass
index c9ea7876c16..2b5b4a8ee2f 100644
--- a/addons/web_editor/static/src/css/web_editor.sass
+++ b/addons/web_editor/static/src/css/web_editor.sass
@@ -27,61 +27,6 @@
         td
             min-width: 20px
 
-
-/* Vertical Spacing */
-
-.mt128
-    margin-top: 128px !important
-.mt92
-    margin-top: 92px !important
-.mt64
-    margin-top: 64px !important
-.mt48
-    margin-top: 48px !important
-.mt32
-    margin-top: 32px !important
-.mt16
-    margin-top: 16px !important
-.mt8
-    margin-top: 8px !important
-.mt4
-    margin-top: 4px !important
-.mt0
-    margin-top: 0px !important
-
-.mb128
-    margin-bottom: 128px !important
-.mb92
-    margin-bottom: 92px !important
-.mb64
-    margin-bottom: 64px !important
-.mb48
-    margin-bottom: 48px !important
-.mb32
-    margin-bottom: 32px !important
-.mb16
-    margin-bottom: 16px !important
-.mb8
-    margin-bottom: 8px !important
-.mb4
-    margin-bottom: 4px !important
-.mb0
-    margin-bottom: 0px !important
-
-.ml8
-    margin-left: 8px !important
-.ml4
-    margin-left: 4px !important
-.ml0
-    margin-left: 0px !important
-
-.mr8
-    margin-right: 8px !important
-.mr4
-    margin-right: 4px !important
-.mr0
-    margin-right: 0px !important
-
 /* Media */
 
 img.shadow
diff --git a/addons/web_editor/static/src/less/web_editor.less b/addons/web_editor/static/src/less/web_editor.less
new file mode 100644
index 00000000000..8cc69271afa
--- /dev/null
+++ b/addons/web_editor/static/src/less/web_editor.less
@@ -0,0 +1,63 @@
+// Generate all margins for all sizes
+.o-margins-all(@factor: 1) {
+    // Unfortunately, the margins sizes are not
+    // mathematically related by a single function
+    .o-margins(128, @factor);
+    .o-margins(96, @factor);
+    .o-margins(92, @factor);
+    .o-margins(64, @factor);
+    .o-margins(48, @factor);
+    .o-margins(32, @factor);
+    .o-margins(24, @factor);
+    .o-margins(16, @factor);
+    .o-margins(8, @factor);
+    .o-margins(4, @factor);
+    .o-margins(0, @factor);
+}
+
+// Generate all margins for one size, scalled by a
+// given factor (0 <= factor <= 1)
+.o-margins(@name, @factor: 1) {
+    .o-margins-define(@name, @factor * @name);
+}
+
+// Generate all margins for one size, given
+// the name of the margin and intended size
+.o-margins-define(@name, @size: @name) {
+    .mt@{name} {margin-top: ~"@{size}px";}
+    .mb@{name} {margin-bottom: ~"@{size}px";}
+    .ml@{name} {margin-left: ~"@{size}px";}
+    .mr@{name} {margin-right: ~"@{size}px";}
+}
+
+// Generate all margins
+.o-margins-all();
+
+// It is possible to change the margins ratio for
+// small screen sizes using media queries, e.g.:
+// @media (max-width: 768px) {
+//     .o-margins-all(0.75);
+// }
+
+// It is also possible to only redefine single margins
+// for small screen sizes using media queries, e.g.:
+// @media (max-width: 768px) {
+//     .o-margins(64, 0.50);
+//     .o-margins(48, 0.50);
+// }
+
+// It is also possible to directly redefine the size
+// of single margins instead of refering to a factor
+// for small screen sizes using media queries, e.g.:
+// @media (max-width: 768px) {
+//     .o-margins-define(128, 48);
+//     .o-margins-define(96, 48);
+//     .o-margins-define(64, 48);
+// }
+
+a.o_underline {
+    text-decoration: underline;
+    &:hover {
+        text-decoration: underline;
+    }
+}
\ No newline at end of file
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index ee996548379..ccced98af2c 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -33,9 +33,9 @@
                         <a href="#" data-toggle="dropdown" class="btn btn-primary btn-sm" title="Customize">Customize <span class="caret"/></a>
                         <ul class="dropdown-menu" role="menu"></ul>
                     </div>
-                    <a href="#" class="btn btn-default btn-sm oe_snippet_move" title="Drag to Move">&amp;nbsp;<i class="fa fa-arrows"></i>&amp;nbsp;</a>
-                    <a href="#" class="btn btn-default btn-sm oe_snippet_clone" title="Duplicate Container">&amp;nbsp;<i class="fa fa-files-o"></i>&amp;nbsp; </a>
-                    <a href="#" class="btn btn-default btn-sm oe_snippet_remove" title="Remove Block">&amp;nbsp;<i class="fa fa-trash-o"></i>&amp;nbsp; </a>
+                    <a href="#" class="btn btn-default btn-sm oe_snippet_move" title="Drag to Move"><i class="fa fa-arrows ml4 mr4"></i></a>
+                    <a href="#" class="btn btn-default btn-sm oe_snippet_clone" title="Duplicate Container"><i class="fa fa-files-o ml4 mr4"></i></a>
+                    <a href="#" class="btn btn-default btn-sm oe_snippet_remove" title="Remove Block"><i class="fa fa-trash-o ml4 mr4"></i></a>
                 </div>
             </div>
             <div class='oe_handles'>
diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml
index 5053d5acd6b..fb89f1fec3c 100644
--- a/addons/web_editor/views/editor.xml
+++ b/addons/web_editor/views/editor.xml
@@ -113,6 +113,7 @@
 <template id="assets_common" inherit_id="web.assets_common" name="web_editor base assets_common">
     <xpath expr="." position="inside">
         <link rel="stylesheet" href='/web_editor/static/src/css/web_editor.css'/>
+        <link rel="stylesheet" href='/web_editor/static/src/less/web_editor.less'/>
         <script type="text/javascript" src="/web_editor/static/src/js/base.js" />
         <script type="text/javascript" src="/web_editor/static/src/js/snippets.animation.js" />
     </xpath>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index e0f1e0899ec..54be37490f3 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -49,6 +49,7 @@
     <script type="text/javascript" src="/website/static/src/js/web_planner_website.js"></script>
     <script type="text/javascript" src="/website/static/src/js/website.contentMenu.js"></script>
     <link rel='stylesheet' href='/web_editor/static/src/css/web_editor.css'/>
+    <link rel='stylesheet' href='/web_editor/static/src/less/web_editor.less'/>
     <link rel="stylesheet" href="/website/static/src/css/website.editor.css"/>
     <script type="text/javascript" src="/website/static/src/js/website.snippets.editor.js"></script>
     <script type="text/javascript" src="/website/static/src/js/website.snippets.gallery.js"></script>
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index 2d6d97a6564..20e60fd8f19 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -61,16 +61,15 @@
                         <h4>
                             <a t-attf-href="#{blog_url('', ['blog', 'post'], blog=post.blog_id, post=post)}" t-field="post.name"></a>
                             <span t-if="not post.website_published" class="text-warning">
-                                &amp;nbsp;
-                                <span class="fa fa-exclamation-triangle" title="Not published"/>
+                                <span class="fa fa-exclamation-triangle ml8" title="Not published"/>
                             </span>
                         </h4>
                         <div class="text-muted">
-                            <span class="fa fa-calendar"> <span t-field="post.create_date"/> &amp;nbsp;</span>
+                            <span class="fa fa-calendar mr8"> <span t-field="post.create_date"/></span>
                             <span class="fa fa-folder-open"> In
-                                <a t-attf-href="#{blog_url(blog=post.blog_id)}">
+                                <a class="mr8" t-attf-href="#{blog_url(blog=post.blog_id)}">
                                 <span t-field="post.blog_id"/>
-                                </a> &amp;nbsp;
+                                </a>
                             </span>
                         </div>
                         <div class="text-muted fa fa-tags">
@@ -177,7 +176,7 @@
         <p class="post-meta text-muted text-center" t-if="len(blog_post.tag_ids)">
             <span class="fa fa-tags"/>
             <t t-foreach="blog_post.tag_ids" t-as="one_tag">
-                <a t-attf-href="#{blog_url(tag=one_tag.id, date_begin=False, date_end=False)}" t-esc="one_tag.name"/> &amp;nbsp;
+                <a class="mr8" t-attf-href="#{blog_url(tag=one_tag.id, date_begin=False, date_end=False)}" t-esc="one_tag.name"/>
             </t>
         </p>
     </xpath>
@@ -336,7 +335,7 @@
         <p class="post-meta text-muted text-center" t-if="len(blog_post.tag_ids)">
             <span class="fa fa-tags"/>
             <t t-foreach="blog_post.tag_ids" t-as="one_tag">
-                <a t-attf-href="#{blog_url(tag=one_tag.id)}" t-esc="one_tag.name"/> &amp;nbsp;
+                <a class="mr8" t-attf-href="#{blog_url(tag=one_tag.id)}" t-esc="one_tag.name"/>
             </t>
         </p>
     </xpath>
diff --git a/addons/website_customer/views/website_customer.xml b/addons/website_customer/views/website_customer.xml
index c7d3591f815..680b82c4a18 100644
--- a/addons/website_customer/views/website_customer.xml
+++ b/addons/website_customer/views/website_customer.xml
@@ -115,8 +115,8 @@
 
         <h3 t-if="len(tags)">References by Tag</h3>
         <ul class="nav nav-pills nav-stacked mt16 mb32" t-if="len(tags)">
-            <a t-attf-class="" t-attf-href="/customers/#{ current_country and 'country/%s' % slug(current_country) or '' }#{ search_path }">
-                <span class="fa fa-1x fa-tags"/> All </a>&amp;nbsp;
+            <a class="mr8" t-attf-href="/customers/#{ current_country and 'country/%s' % slug(current_country) or '' }#{ search_path }">
+                <span class="fa fa-1x fa-tags"/> All </a>
             <t t-foreach="tags" t-as="o_tag">
                 <a t-attf-class="label label-#{o_tag.classname}" t-esc="o_tag.name" t-att-style="tag and tag.id==o_tag.id and 'text-decoration: underline'"
                     t-attf-href="/customers/#{ 'tag/%s/' % slug(o_tag) }#{ current_country and 'country/%s' % slug(current_country)  or '' }#{ search_path }"/>
diff --git a/addons/website_event_sale/views/website_event_sale.xml b/addons/website_event_sale/views/website_event_sale.xml
index 2f08bebdd29..eb0a2a85889 100644
--- a/addons/website_event_sale/views/website_event_sale.xml
+++ b/addons/website_event_sale/views/website_event_sale.xml
@@ -39,11 +39,11 @@
                     <td>
                             <t t-if="ticket.price or editable">
                               <t t-if="(ticket.price-ticket.price_reduce) &gt; 1">
-                                <del class="text-danger" style="white-space: nowrap;" t-field="ticket.price" t-field-options='{
+                                <del class="text-danger mr4" style="white-space: nowrap;" t-field="ticket.price" t-field-options='{
                                   "widget": "monetary",
                                   "from_currency": "website.currency_id",
                                   "display_currency": "user_id.partner_id.property_product_pricelist.currency_id"
-                                }'/>&amp;nbsp;
+                                }'/>
                               </t>
                               <span t-field="ticket.price_reduce" t-field-options='{
                                "widget": "monetary",
diff --git a/addons/website_forum_doc/views/website_doc.xml b/addons/website_forum_doc/views/website_doc.xml
index 3b0a7894743..74127a91aa7 100644
--- a/addons/website_forum_doc/views/website_doc.xml
+++ b/addons/website_forum_doc/views/website_doc.xml
@@ -149,7 +149,7 @@
                                         from the Q&amp;A section where you can
                                         discuss it and get feedback.
                                     </div>
-                                    &amp;nbsp; <a t-attf-href="/forum/#{slug(forum)}/question/#{slug(post)}" class="fa fa-arrow-right mt16"> Related question</a>
+                                    <a t-attf-href="/forum/#{slug(forum)}/question/#{slug(post)}" class="fa fa-arrow-right mt16 ml8"> Related question</a>
                                 </div>
                             </div>
                         </div>
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index e21a7665986..9312659d4d2 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -88,11 +88,11 @@
       <div itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer" class="product_price" t-if="product.product_variant_ids">
           <b>
               <t t-if="(compute_currency(product.lst_price) - product.price) &gt; 0.1">
-                <del class="text-danger" style="white-space: nowrap;" t-field="product.lst_price" t-field-options='{
+                <del class="text-danger mr8" style="white-space: nowrap;" t-field="product.lst_price" t-field-options='{
                   "widget": "monetary",
                   "from_currency": "product.company_id.currency_id",
                   "display_currency": "user_id.partner_id.property_product_pricelist.currency_id"
-                }'/>&amp;nbsp;
+                }'/>
               </t>
               <span t-field="product.price" style="white-space: nowrap;"  t-field-options='{
                    "widget": "monetary",
@@ -759,12 +759,12 @@
                                   </div>
                               </td>
                               <td class="text-center" id="td-price" name="price">
-                                  <del class="text-danger" t-att-style="'' if (compute_currency(line.product_id.lst_price) - line.price_reduce) &gt; 1 else 'display: none;'" style="text-decoration: line-through; white-space: nowrap;"
+                                  <del class="text-danger mr8" t-att-style="'' if (compute_currency(line.product_id.lst_price) - line.price_reduce) &gt; 1 else 'display: none;'" style="text-decoration: line-through; white-space: nowrap;"
                                     t-field="line.product_id.lst_price" t-field-options='{
                                         "widget": "monetary",
                                         "from_currency": "line.company_id.currency_id",
                                         "display_currency": "user_id.partner_id.property_product_pricelist.currency_id"
-                                    }'/>&amp;nbsp;
+                                    }'/>
                                 <span t-field="line.price_reduce" style="white-space: nowrap;" t-field-options='{
                                      "widget": "monetary",
                                      "from_currency": "website_sale_order.pricelist_id.currency_id",
@@ -866,12 +866,12 @@
                   </td>
                   <td>
                       <t t-if="(compute_currency(product.lst_price) - product.price) &gt; 0.1">
-                        <del class="text-danger" style="white-space: nowrap;"
+                        <del class="text-danger mr8" style="white-space: nowrap;"
                           t-field="product.lst_price" t-field-options='{
                               "widget": "monetary",
                               "from_currency": "product.company_id.currency_id",
                               "display_currency": "user_id.partner_id.property_product_pricelist.currency_id"
-                          }'/>&amp;nbsp;
+                          }'/>
                       </t>
                       <span t-field="product.price" style="white-space: nowrap;" t-field-options='{
                            "widget": "monetary",