pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] web_editor,website: added scalable margins in less

Browse Source 
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.
This commit is contained in:
David Monjoie
2015-07-20 15:00:24 +02:00
parent 61ecac539e
commit df9725df26
11 changed files with 85 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/css/web_editor.css
-97
View File
@@ -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);
addons/web_editor/static/src/css/web_editor.sass
-55
View File
@@ -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
addons/web_editor/static/src/less/web_editor.less
+63
View File
@@ -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;
}
}
addons/web_editor/static/src/xml/snippets.xml
+3 -3
View File
@@ -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'>
addons/web_editor/views/editor.xml
+1
View File
@@ -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>
addons/website/views/website_templates.xml
+1
View File
@@ -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>
addons/website_blog/views/website_blog_templates.xml
+6 -7
View File
@@ -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>
addons/website_customer/views/website_customer.xml
+2 -2
View File
@@ -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 }"/>
addons/website_event_sale/views/website_event_sale.xml
+2 -2
View File
@@ -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",
addons/website_forum_doc/views/website_doc.xml
+1 -1
View File
@@ -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>
addons/website_sale/views/templates.xml
+6 -6
View File
@@ -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",