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

[REF] *: BS4, review the 'media' structure

Browse Source 
Only two classes remain to declare a media structure:
'media' and 'media-body'. 'media-left/right' are guessed by their
position using the flex layout.

Also, the 'media-list' class has been dropped but <ul/> element
should use the 'list-unstyled' class instead.

Like all other components, spacing between medias are now to be
handled explicitely thanks the spacing utility classes.
This commit is contained in:
qsm-odoo
2018-07-27 12:36:54 +02:00
parent a3cc9c2ad9
commit 98c0fef0af
12 changed files with 61 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/hr_org_chart/static/src/xml/hr_org_chart.xml
+13 -17
View File
@@ -5,17 +5,17 @@
<div t-attf-class="o_org_chart_entry o_org_chart_entry_#{employee_type} media">
<t t-set="is_self" t-value="employee_type == 'self'"/>
<div class="media-left">
<div>
<!-- NOTE: Since by the default on not squared images odoo add white borders,
use bg-images to get a clean and centred images -->
<a t-if="! is_self"
class="media-object rounded-circle o_employee_redirect"
class="rounded-circle o_employee_redirect"
t-att-style="'background-image:url(\'/web/image/hr.employee/' + employee.id + '/image/\')'"
t-att-alt="employee.name"
t-att-data-employee-id="employee.id"
t-att-href="employee.link"/>
<div t-if="is_self"
class="media-object rounded-circle"
class="rounded-circle"
t-att-style="'background-image:url(\'/web/image/hr.employee/' + employee.id + '/image/\')'"/>
</div>
@@ -35,12 +35,12 @@
<t t-if="!is_self">
<a t-att-href="employee.link" class="o_employee_redirect" t-att-data-employee-id="employee.id">
<h5 class="media-heading"><b><t t-esc="employee.name"/></b></h5>
<h5><b><t t-esc="employee.name"/></b></h5>
<strong><t t-esc="employee.job_name"/></strong>
</a>
</t>
<t t-if="is_self">
<h5 class="media-heading"><b><t t-esc="employee.name"/></b></h5>
<h5><b><t t-esc="employee.name"/></b></h5>
<strong><t t-esc="employee.job_name"/></strong>
</t>
</div>
@@ -59,13 +59,11 @@
<div t-if='managers.length &gt; 0' class="o_org_chart_group_up">
<t t-if='managers_more'>
<div class="o_org_chart_entry o_org_chart_more media">
<div class="media-left">
<a class="media-object text-center o_employee_redirect"
t-att-href="managers[0].link"
t-att-data-employee-id="managers[0].id">
<i t-attf-class="fa fa-angle-double-up" role="img" aria-label="More managers" title="More managers"/>
</a>
</div>
<a class="text-center o_employee_redirect"
t-att-href="managers[0].link"
t-att-data-employee-id="managers[0].id">
<i t-attf-class="fa fa-angle-double-up" role="img" aria-label="More managers" title="More managers"/>
</a>
</div>
</t>
@@ -102,11 +100,9 @@
<t t-if="(children.length + managers.length) &gt; 7">
<div class="o_org_chart_entry o_org_chart_more media">
<div class="media-left">
<a href="#"
t-att-data-employee-id="self.id"
class="o_org_chart_show_more media-object text-center o_employee_sub_redirect">&#8230;</a>
</div>
<a href="#"
t-att-data-employee-id="self.id"
class="o_org_chart_show_more text-center o_employee_sub_redirect">&#8230;</a>
</div>
</t>
</div>
addons/portal/static/src/xml/portal_chatter.xml
+3 -9
View File
@@ -23,9 +23,7 @@
</t>
<t t-if="widget.options['display_composer']">
<div class="media">
<div class="media-left">
<img alt="Avatar" class="o_portal_chatter_avatar float-left" t-attf-src="/web/image/res.partner/#{widget.options['partner_id']}/image_small/50x50"/>
</div>
<img alt="Avatar" class="o_portal_chatter_avatar" t-attf-src="/web/image/res.partner/#{widget.options['partner_id']}/image_small/50x50"/>
<div class="media-body">
<form class="o_portal_chatter_composer_form" t-attf-action="/mail/chatter_post" method="POST">
<input type="hidden" name="csrf_token" t-att-value="widget.options['csrf_token']"/>
@@ -53,15 +51,11 @@
<div class="o_portal_chatter_messages">
<t t-foreach="widget.get('messages')" t-as="message">
<div class="media o_portal_chatter_message" t-att-id="'message-' + message.id">
<div class="media-left">
<img class="media-object o_portal_chatter_avatar" t-att-src="message.author_avatar_url" alt="avatar"/>
</div>
<img class="o_portal_chatter_avatar" t-att-src="message.author_avatar_url" alt="avatar"/>
<div class="media-body">
<div class="o_portal_chatter_message_title">
<h5 class="media-heading">
<t t-esc="message.author_id[1]"/>
</h5>
<h5><t t-esc="message.author_id[1]"/></h5>
<p class="o_portal_chatter_puslished_date"><t t-esc="message.published_date_str"/></p>
</div>
<t t-raw="message.body"/>
addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
+5 -5
View File
@@ -83,12 +83,12 @@
<t t-set="last_grade" t-value="partner.grade_id.id"/>
</t>
<div class="media">
<a class="float-left" t-attf-href="/partners/#{slug(partner)}?#{current_grade and 'grade_id=%s&amp;' % current_grade.id}#{current_country and 'country_id=%s' % current_country.id}"
<a t-attf-href="/partners/#{slug(partner)}?#{current_grade and 'grade_id=%s&amp;' % current_grade.id}#{current_country and 'country_id=%s' % current_country.id}"
t-field="partner.image_medium"
t-options='{"widget": "image", "class": "media-object"}'
t-options='{"widget": "image"}'
></a>
<div class="media-body o_partner_body" style="min-height: 64px;">
<a class="media-heading" t-attf-href="/partners/#{slug(partner)}?#{current_grade and 'grade_id=%s&amp;' % current_grade.id}#{current_country and 'country_id=%s' % current_country.id}">
<a t-attf-href="/partners/#{slug(partner)}?#{current_grade and 'grade_id=%s&amp;' % current_grade.id}#{current_country and 'country_id=%s' % current_country.id}">
<span t-field="partner.display_name"/>
</a>
<div t-field="partner.website_short_description"/>
@@ -167,11 +167,11 @@
<h3 id="references">References</h3>
<div t-foreach="partner.implemented_partner_ids" t-as="reference" class="media">
<t t-if="reference.website_published">
<a class="float-left" t-attf-href="/customers/#{slug(reference)}">
<a t-attf-href="/customers/#{slug(reference)}">
<span t-field="reference.image_small" t-options='{"widget": "image", "class": "d-block mx-auto"}'/>
</a>
<div class="media-body" style="min-height: 64px;">
<a class="media-heading" t-attf-href="/customers/#{slug(reference)}">
<a t-attf-href="/customers/#{slug(reference)}">
<span t-field="reference.self"/>
</a>
<div t-field='reference.website_short_description'/>
addons/website_customer/views/website_customer_templates.xml
+7 -7
View File
@@ -34,13 +34,13 @@
<p t-if="not partners">No result found</p>
<t t-foreach="partners" t-as="partner">
<div class="media">
<a class="float-left" t-attf-href="/customers/#{slug(partner)}"
<div class="media mt-3">
<a t-attf-href="/customers/#{slug(partner)}"
t-field="partner.image_small"
t-options='{"widget": "image", "class": "media-object"}'
t-options='{"widget": "image"}'
></a>
<div class="media-body" style="min-height: 64px;">
<a class="media-heading" t-attf-href="/customers/#{slug(partner)}">
<a t-attf-href="/customers/#{slug(partner)}">
<span t-field="partner.display_name"/>
</a>
<t t-if="partner.industry_id">
@@ -215,13 +215,13 @@
<template id="references_block" name="Partner References Block">
<t t-if="any([p.website_published for p in partner.implemented_partner_ids])">
<h3 id="references">References</h3>
<div t-foreach="partner.implemented_partner_ids" t-as="reference" class="media">
<div t-foreach="partner.implemented_partner_ids" t-as="reference" class="media mt-3">
<t t-if="reference.website_published">
<a class="float-left" t-attf-href="/customers/#{slug(reference)}">
<a t-attf-href="/customers/#{slug(reference)}">
<span t-field="reference.image_small" t-options='{"widget": "image", "class": "d-block mx-auto"}'/>
</a>
<div class="media-body" style="min-height: 64px;">
<a class="media-heading" t-attf-href="/customers/#{slug(reference)}">
<a t-attf-href="/customers/#{slug(reference)}">
<span t-field="reference.self"/>
</a>
<t t-if="reference.industry_id">
addons/website_event/views/event_templates.xml
+5 -5
View File
@@ -44,10 +44,10 @@
<h1>No event found</h1>
<p groups="event.group_event_manager">Use the top menu <i>'Content'</i> to create your first event.</p>
</div>
<ul class="media-list">
<li t-foreach="event_ids" t-as="event" class="media">
<ul class="list-unstyled">
<li t-foreach="event_ids" t-as="event" t-attf-class="media#{' mt-3' if event_index else ''}">
<div itemscope="itemscope" itemtype="http://schema.org/Event" class="media-body">
<h4 class="media-heading">
<h4>
<a itemprop="url" t-att-class="event.state == 'done' and 'text-success'" t-attf-href="/event/#{ slug(event) }/#{(not event.menu_id) and 'register' or ''}"><span itemprop="name" t-field="event.name"> </span></a>
<small t-if="event.is_participating" class="badge badge-info">Participating</small>
<small t-if="event.is_online" class="badge badge-info">Online</small>
@@ -311,8 +311,8 @@
<hr/>
<div itemprop="description" t-field="event.description"></div>
<div class="clearfix"/>
<ul class="media-list" id="comment">
<li t-foreach="event.website_message_ids" t-as="comment" class="media">
<ul class="list-unstyled" id="comment">
<li t-foreach="event.website_message_ids" t-as="comment" class="media mt-3">
<div class="media-body">
<t t-call="website.publish_management">
<t t-set="object" t-value="comment"/>
addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
+3 -3
View File
@@ -38,10 +38,10 @@
</h4>
</div>
</div>
<ul class="media-list" t-if="jobs">
<li t-foreach="jobs" t-as="job" class="media">
<ul class="list-unstyled" t-if="jobs">
<li t-foreach="jobs" t-as="job" t-attf-class="media#{' mt-3' if job_index else ''}">
<div class="media-body" t-att-data-publish="job.website_published and 'on' or 'off'">
<h3 class="media-heading">
<h3>
<a t-attf-href="/jobs/detail/#{ slug(job) }">
<span t-field="job.name"/>
</a>
addons/website_livechat/views/website_livechat.xml
+8 -8
View File
@@ -110,7 +110,7 @@
<div class="col-lg-12 mb32">
<h3>The <t t-esc="len(ratings)"/> last feedbacks</h3>
<div style="text-align:center">
<t t-foreach="ratings" t-as="rating" class="media">
<t t-foreach="ratings" t-as="rating">
<img t-attf-src='/rating/static/src/img/rating_#{int(rating.rating)}.png' t-att-alt="rating.res_name"/>
<t t-if="(rating_index+1) % 10 == 0">
<br/>
@@ -126,12 +126,12 @@
</div>
<div class="col-lg-4 mb32">
<h3>The Team</h3>
<t t-foreach="team" t-as="user" class="media">
<div class="media">
<div class="float-left" t-if='user.image_small'>
<t t-foreach="team" t-as="user">
<div class="media mt-3">
<t t-if="user.image_small">
<img t-att-src="user.image_small and ('data:image/png;base64,' + to_text(user.image_small)) or '/web/static/src/img/placeholder.png'"
class="rounded" t-att-alt="user.name"/>
</div>
</t>
<div class="media-body">
<h5><t t-esc="user.name"/></h5>
</div>
@@ -160,12 +160,12 @@
<t t-if="len(channels)">
<div class="col-lg-6 offset-lg-3">
<t t-foreach="channels" t-as="channel">
<div class="media">
<a class="float-left" t-attf-href="/livechat/channel/#{ slug(channel)}">
<div t-attf-class="media#{' mt-3' if channel_index else ''}">
<a t-attf-href="/livechat/channel/#{ slug(channel)}">
<img t-att-src="channel.image_small and ('data:image/png;base64,' + to_text(channel.image_small)) or '/web/static/src/img/placeholder.png'" t-att-alt="channel.name" />
</a>
<div class="media-body">
<h4 class="media-heading"><t t-esc="channel.name"/></h4>
<h4><t t-esc="channel.name"/></h4>
</div>
</div>
</t>
addons/website_mail_channel/static/src/js/website_mail_channel.js
+1 -1
View File
@@ -33,7 +33,7 @@ $(document).ready(function () {
if (! data) {
return true;
}
var $thread_container = $link.parents('.o_mg_replies').first().find('ul.media-list');
var $thread_container = $link.parents('.o_mg_replies').first().find('ul.list-unstyled');
if ($thread_container) {
var $last_msg = $thread_container.find('li.media').last();
$(data).find('li.media').insertAfter($last_msg);
addons/website_mail_channel/views/website_mail_channel_templates.xml
+7 -7
View File
@@ -199,10 +199,10 @@
</h4>
</div>
<div class="media">
<img class="rounded float-left mt0 media-object o_mg_avatar" alt="Avatar"
t-att-src="website.image_url(message, 'author_avatar')"/>
<img class="rounded mt0 o_mg_avatar"
t-att-src="website.image_url(message, 'author_avatar')" alt="Avatar"/>
<div class="media-body">
<h4 class="media-heading" t-esc="message.description"/>
<h4 t-esc="message.description"/>
<small>
by
<t t-if="message.author_id">
@@ -258,12 +258,12 @@
<template id="messages_short">
<div>
<ul class="media-list">
<li t-foreach="messages" t-as="thread" class="media">
<img class="rounded float-left mt0 media-object o_mg_avatar" alt="Avatar"
<ul class="list-unstyled">
<li t-foreach="messages" t-as="thread" class="media mt-3">
<img class="rounded mt-0 o_mg_avatar" alt="Avatar"
t-att-src="website.image_url(thread, 'author_avatar')"/>
<div class="media-body">
<h4 class="media-heading">
<h4>
<a t-attf-href="/groups/#{slug(group)}/#{slug(thread)}?mode=#{mode}&amp;date_begin=#{date_begin}&amp;date_end=#{date_end}" t-esc="thread.description"/>
</h4>
<small>
addons/website_membership/views/website_membership_templates.xml
+3 -3
View File
@@ -52,13 +52,13 @@
<h3 class="text-center"><span t-esc="membership_data['name']"/></h3>
<t t-foreach="memberships_partner_ids[membership_data['id']]" t-as="partner_id">
<t t-set="partner" t-value="partners[partner_id]"/>
<div class="media">
<a class="float-left" t-attf-href="/members/#{slug(partner)}"
<div class="media mt-3">
<a t-attf-href="/members/#{slug(partner)}"
t-field="partner.image_small"
t-options='{"widget": "image", "class": "media-object"}'
></a>
<div class="media-body" style="min-height: 64px;">
<a class="media-heading" t-attf-href="/members/#{slug(partner)}">
<a t-attf-href="/members/#{slug(partner)}">
<span t-field="partner.display_name"/>
</a>
<div t-field="partner.website_short_description"/>
addons/website_sale_options/views/website_sale_options_templates.xml
+1 -1
View File
@@ -98,7 +98,7 @@
</td>
<td class='td-product_name'>
<div class="float-left">
<strong class="media-heading" t-field="product.name"/>
<strong t-field="product.name"/>
<div class="text-muted small" t-field="product.description_sale"/>
</div>
</td>
addons/website_slides/views/website_slides.xml
+5 -5
View File
@@ -635,7 +635,7 @@
<div role="tabpanel" id="related" class="tab-pane active mt4">
<div class="col-xl-12 col-lg-12 col-md-12 col-12">
<div class="card">
<ul class="media-list card-body">
<ul class="list-unstyled card-body">
<t t-set="related_slides_list" t-value="list(related_slides)"/>
<t t-if="not related_slides_list">
No presentation available.
@@ -650,7 +650,7 @@
<div role="tabpanel" id="most_viewed" class="tab-pane mt4">
<div class="col-xl-12 col-lg-12 col-md-12 col-12">
<div class="card">
<ul class="media-list card-body">
<ul class="list-unstyled card-body">
<t t-set="most_viewed_slides_list" t-value="list(most_viewed_slides)"/>
<t t-if="not list(most_viewed_slides_list)">
No presentation available.
@@ -672,11 +672,11 @@
<!-- Slide sub-template: display an item in a list of related slides (Related, Most Viewed, ...) -->
<template id="related_slides" name="Related Slide">
<li class="media">
<a class="media-left float-left" t-attf-href="/slides/slide/#{slug(slide)}">
<img class="media-object oe_slides_apart_small" t-attf-src="/web/image/slide.slide/#{slide.id}/image_thumb" alt="slide.name"/>
<a t-attf-href="/slides/slide/#{slug(slide)}">
<img class="oe_slides_apart_small" t-attf-src="/web/image/slide.slide/#{slide.id}/image_thumb" alt="slide.name"/>
</a>
<div class="media-body">
<a t-attf-href="/slides/slide/#{slug(slide)}"><h5 class="media-heading" t-esc="slide.name"/></a>
<a t-attf-href="/slides/slide/#{slug(slide)}"><h5 t-esc="slide.name"/></a>
<small class="text-muted">
<t t-esc="slide.total_views"/> Views . <timeago class="timeago" t-att-datetime="slide.create_date"></timeago>
</small>