Skip to content

Commit

Permalink
[REF] *: BS5: removal of .media class
Browse files Browse the repository at this point in the history 
https://getbootstrap.com/docs/5.1/migration/#grid-updates
https://getbootstrap.com/docs/5.1/utilities/flex/#media-object
twbs/bootstrap#28265

Task ID: 2766483

Part-of: #95450
  • Loading branch information
@rfr-odoo
rfr-odoo committed Jul 7, 2022
1 parent 68a3bd6 commit 23c3a31
Show file tree
Hide file tree
Showing 22 changed files with 77 additions and 77 deletions.
20 changes: 10 additions & 10 deletions addons/gamification/data/gamification_karma_rank_data.xml
View file
Expand Up @@ -13,8 +13,8 @@
<field name="name">Newbie</field>
<field name="description" type="html"><p>You just began the adventure! Welcome!</p></field>
<field name="description_motivational" type="html">
<div class="media align-items-center">
<div class="media-body">Earn your first points and join the adventure !</div>
<div class="d-flex align-items-center">
<div class="flex-grow-1">Earn your first points and join the adventure !</div>
<img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_newbie_badge.svg"/>
</div>
</field>
Expand All @@ -26,8 +26,8 @@
<field name="name">Student</field>
<field name="description" type="html"><p>You're a young padawan now. May the force be with you!</p></field>
<field name="description_motivational" type="html">
<div class="media align-items-center">
<div class="media-body">Reach the next rank to show the rest of the world you exist.</div>
<div class="d-flex align-items-center">
<div class="flex-grow-1">Reach the next rank to show the rest of the world you exist.</div>
<img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_student_badge.svg"/>
</div>
</field>
Expand All @@ -39,8 +39,8 @@
<field name="name">Bachelor</field>
<field name="description" type="html"><p>You love learning things. Curiosity is a good way to progress.</p></field>
<field name="description_motivational" type="html">
<div class="media align-items-center">
<div class="media-body">Reach the next rank to improve your status!</div>
<div class="d-flex align-items-center">
<div class="flex-grow-1">Reach the next rank to improve your status!</div>
<img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_bachelor_badge.svg"/>
</div>
</field>
Expand All @@ -52,8 +52,8 @@
<field name="name">Master</field>
<field name="description" type="html"><p>You know what you are talking about. People learn from you.</p></field>
<field name="description_motivational" type="html">
<div class="media align-items-center">
<div class="media-body">Reach the next rank and become a Master!</div>
<div class="d-flex align-items-center">
<div class="flex-grow-1">Reach the next rank and become a Master!</div>
<img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_master_badge.svg"/>
</div>
</field>
Expand All @@ -65,8 +65,8 @@
<field name="name">Doctor</field>
<field name="description" type="html"><p>You have reached the last rank. Congratulations!</p></field>
<field name="description_motivational" type="html">
<div class="media align-items-center">
<div class="media-body">Reach the next rank and become a powerful user!</div>
<div class="d-flex align-items-center">
<div class="flex-grow-1">Reach the next rank and become a powerful user!</div>
<img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_doctor_badge.svg"/>
</div>
</field>
Expand Down
16 changes: 8 additions & 8 deletions addons/gamification/data/gamification_karma_rank_demo.xml
View file
Expand Up @@ -3,35 +3,35 @@
<!--Ranks-->
<record id="rank_student" model="gamification.karma.rank">
<field name="description_motivational" type="html">
<div class="media align-items-center">
<div class="media-body">Reach the next rank and gain a very nice mug !</div>
<div class="d-flex align-items-center">
<div class="flex-grow-1">Reach the next rank and gain a very nice mug !</div>
<img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_mug.png"/>
</div>
</field>
</record>

<record id="rank_bachelor" model="gamification.karma.rank">
<field name="description_motivational" type="html">
<div class="media align-items-center">
<div class="media-body">Reach the next rank and gain a very magic wand !</div>
<div class="d-flex align-items-center">
<div class="flex-grow-1">Reach the next rank and gain a very magic wand !</div>
<img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_wand.png"/>
</div>
</field>
</record>

<record id="rank_master" model="gamification.karma.rank">
<field name="description_motivational" type="html">
<div class="media align-items-center">
<div class="media-body">Reach the next rank and gain a very nice hat !</div>
<div class="d-flex align-items-center">
<div class="flex-grow-1">Reach the next rank and gain a very nice hat !</div>
<img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_hat.png"/>
</div>
</field>
</record>

<record id="rank_doctor" model="gamification.karma.rank">
<field name="description_motivational" type="html">
<div class="media align-items-center">
<div class="media-body">Reach the next rank and gain a very nice unicorn !</div>
<div class="d-flex align-items-center">
<div class="flex-grow-1">Reach the next rank and gain a very nice unicorn !</div>
<img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_unicorn.png"/>
</div>
</field>
Expand Down
10 changes: 5 additions & 5 deletions addons/hr_org_chart/static/src/scss/hr_org_chart.scss
View file
Expand Up @@ -135,15 +135,15 @@
overflow: visible;
margin-top: 0;

&, .o_media_left, .media-body {
&, .o_media_left, .flex-grow-1 {
position: relative;
}

.o_media_left {
padding-right: 10px;
}

.media-body {
.flex-grow-1 {
vertical-align: middle;

.badge {
Expand Down Expand Up @@ -203,7 +203,7 @@
.o_media_left {
padding-right: 0;
}
.media-body > a {
.flex-grow-1 > a {
padding-left: 10px;
max-width: 100%;
display: block;
Expand All @@ -218,7 +218,7 @@
.o_media_object {
box-shadow: 0 0 0 $o-hr-org-chart-entry-line-w*2 rgba($o-brand-primary, 0.6);
}
.media-body > a {
.flex-grow-1 > a {
.o_media_heading {
color: $o-brand-primary;
}
Expand Down Expand Up @@ -246,7 +246,7 @@
box-shadow: inset 0 0 0 $o-hr-org-chart-entry-line-w*2 white;
}

.media-body {
.flex-grow-1 {
opacity: 1;
}
}
Expand Down
8 changes: 4 additions & 4 deletions addons/hr_org_chart/static/src/xml/hr_org_chart.xml
View file
Expand Up @@ -2,7 +2,7 @@
<templates id="template" xml:space="preserve">

<t t-name="hr_org_chart_employee">
<div t-attf-class="o_org_chart_entry o_org_chart_entry_#{employee_type} media">
<div t-attf-class="o_org_chart_entry o_org_chart_entry_#{employee_type} d-flex">
<t t-set="is_self" t-value="employee.id == view_employee_id"/>

<div class="o_media_left">
Expand All @@ -19,7 +19,7 @@
t-att-style="'background-image:url(\'/web/image/hr.employee.public/' + employee.id + '/avatar_1024/\')'"/>
</div>

<div class="media-body">
<div class="flex-grow-1">
<span
t-if="employee.indirect_sub_count &gt; 0"
class="badge badge-pill"
Expand Down Expand Up @@ -58,7 +58,7 @@

<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="o_org_chart_entry o_org_chart_more d-flex">
<div class="o_media_left">
<a class="text-center o_employee_more_managers"
t-att-data-employee-id="managers[0].id">
Expand Down Expand Up @@ -100,7 +100,7 @@
</t>

<t t-if="(children.length + managers.length) &gt; 19">
<div class="o_org_chart_entry o_org_chart_more media">
<div class="o_org_chart_entry o_org_chart_more d-flex">
<div class="o_media_left">
<a href="#"
t-att-data-employee-id="self.id"
Expand Down
8 changes: 4 additions & 4 deletions addons/mail_group/views/portal_templates.xml
View file
Expand Up @@ -119,8 +119,8 @@
</a>
</h4>
</div>
<div class="media">
<div class="media-body">
<div class="d-flex">
<div class="flex-grow-1">
<div class="card">
<div class="card-body">
<h4 class="card-title d-flex flex-row justify-content-start align-items-center">
Expand Down Expand Up @@ -158,8 +158,8 @@
<template id="messages_short">
<div>
<ul class="list-unstyled">
<li t-foreach="messages" t-as="message" class="media mt-3">
<div class="media-body o_mg_message mw-100">
<li t-foreach="messages" t-as="message" class="d-flex mt-3">
<div class="flex-grow-1 o_mg_message mw-100">
<div class="card">
<div class="o_mg_ribbon" t-if="message.moderation_status == 'pending_moderation'"><span class="bg-warning">Pending</span></div>
<div class="card-body">
Expand Down
2 changes: 1 addition & 1 deletion addons/portal/static/src/scss/portal.scss
View file
Expand Up @@ -473,7 +473,7 @@ form label {
word-break: break-word;

.o_portal_chatter_message {
div.media-body > p:not(.o_portal_chatter_puslished_date):last-of-type {
div.flex-grow-1 > p:not(.o_portal_chatter_puslished_date):last-of-type {
margin-bottom: 5px;
}
}
Expand Down
8 changes: 4 additions & 4 deletions addons/portal/static/src/xml/portal_chatter.xml
View file
Expand Up @@ -31,10 +31,10 @@
<div class="alert alert-danger mb8 d-none o_portal_chatter_composer_error" role="alert">
Oops! Something went wrong. Try to reload the page and log in.
</div>
<div class="media">
<div class="d-flex">
<img alt="Avatar" class="o_portal_chatter_avatar o_object_fit_cover" t-attf-src="/web/image/res.partner/#{widget.options['partner_id']}/avatar_128"
t-if="!widget.options['is_user_public'] or !widget.options['token']"/>
<div class="media-body">
<div class="flex-grow-1">
<div class="o_portal_chatter_composer_input">
<div class="o_portal_chatter_composer_body mb32">
<textarea rows="4" name="message" class="form-control" placeholder="Write a message..."></textarea>
Expand Down Expand Up @@ -79,9 +79,9 @@
<t t-name="portal.chatter_messages">
<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="d-flex o_portal_chatter_message" t-att-id="'message-' + message.id">
<img class="o_portal_chatter_avatar" t-att-src="message.author_avatar_url" alt="avatar"/>
<div class="media-body">
<div class="flex-grow-1">
<t t-call="portal.chatter_internal_toggle" t-if="widget.options['is_user_employee']"/>

<div class="o_portal_chatter_message_title">
Expand Down
8 changes: 4 additions & 4 deletions addons/portal_rating/static/src/xml/portal_chatter.xml
View file
Expand Up @@ -74,9 +74,9 @@
</t>

<t t-name="portal_rating.chatter_rating_publisher_comment">
<div class="media o_portal_chatter_message">
<div class="d-flex o_portal_chatter_message">
<img class="o_portal_chatter_avatar" t-att-src="rating.publisher_avatar" alt="avatar"/>
<div class="media-body">
<div class="flex-grow-1">
<div class="o_portal_chatter_message_title">
<div class="d-inline-block">
<h5 class="mb-1"><t t-esc="rating.publisher_name"/></h5>
Expand All @@ -101,9 +101,9 @@
</div>
</t>
<t t-name="portal_rating.chatter_rating_publisher_form">
<div t-if="is_publisher" class="media o_portal_chatter_message shadow bg-white rounded px-3 py-3 my-1">
<div t-if="is_publisher" class="d-flex o_portal_chatter_message shadow bg-white rounded px-3 py-3 my-1">
<img class="o_portal_chatter_avatar" t-att-src="rating.publisher_avatar" alt="avatar"/>
<div class="media-body">
<div class="flex-grow-1">
<div class="o_portal_chatter_message_title">
<h5 class='mb-1'><t t-esc="rating.publisher_name"/></h5>
</div>
Expand Down
2 changes: 1 addition & 1 deletion addons/project/static/src/scss/project_sharing/chatter.scss
View file
Expand Up @@ -13,7 +13,7 @@

div.o_portal_chatter_composer,
div.o_portal_chatter_messages {
div.media {
div.d-flex {
gap: 10px;

.o_portal_chatter_attachments {
Expand Down
8 changes: 4 additions & 4 deletions addons/website/data/website_demo.xml
View file
Expand Up @@ -243,9 +243,9 @@
<tr>
<th colspan="2" class="align-middle">Theme Colors</th>
<td t-foreach="[1, 2, 3, 4, 5]" t-as="i">
<div class="media">
<div class="d-flex">
<span t-attf-class="border p-3 mr-1 bg-o-color-#{i}"></span>
<div class="media-body align-self-center">
<div class="flex-grow-1 align-self-center">
<h5 class="m-0">o-color-<t t-esc="i"/></h5>
</div>
</div>
Expand All @@ -254,9 +254,9 @@
<tr>
<th colspan="2" class="align-middle">BTS Base Colors</th>
<td t-foreach="['primary', 'secondary', 'light', 'dark']" t-as="i">
<div class="media">
<div class="d-flex">
<span t-attf-class="border p-3 mr-1 bg-#{i}"></span>
<div class="media-body align-self-center">
<div class="flex-grow-1 align-self-center">
<h5 class="m-0" t-esc="i"></h5>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion addons/website/static/src/snippets/s_mega_menu_images_subtitles/000.scss
View file
@@ -1,6 +1,6 @@

.s_mega_menu_images_subtitles:not([data-vcss]) {
.media img {
.d-flex img {
max-width: 64px;
}

Expand Down
4 changes: 2 additions & 2 deletions addons/website/static/src/snippets/s_searchbar/000.xml
View file
Expand Up @@ -12,12 +12,12 @@
</t>
<a t-foreach="results" t-as="result"
t-att-href="result['website_url']" class="dropdown-item p-2 text-wrap">
<div class="media align-items-center o_search_result_item">
<div class="d-flex align-items-center o_search_result_item">
<t t-if="parts['image_url'] and widget.displayImage">
<img t-if="result['image_url']" t-att-src="result['image_url']" class="flex-shrink-0 o_image_64_contain"/>
<i t-else="" t-attf-class="o_image_64_contain text-center pt16 fa #{result['_fa']}" style="font-size: 34px;"/>
</t>
<div class="media-body px-3">
<div class="flex-grow-1 px-3">
<t t-set="description" t-value="parts['description'] and widget.displayDescription and result['description']"/>
<t t-set="extra_link" t-value="parts['extra_link'] and widget.displayExtraLink and result['extra_link_url'] and result['extra_link']"/>
<t t-set="extra_link_html" t-value="parts['extra_link'] and widget.displayExtraLink and !result['extra_link_url'] and result['extra_link']"/>
Expand Down
4 changes: 2 additions & 2 deletions addons/website/views/snippets/s_mega_menu_big_icons_subtitles.xml
View file
Expand Up @@ -70,9 +70,9 @@

<template id="s_mega_menu_big_icons_subtitles_item">
<a href="#" class="nav-link o_default_snippet_text px-2 my-2 rounded text-wrap" data-name="Menu Item">
<div class="media align-items-center">
<div class="d-flex align-items-center">
<i t-attf-class="fa rounded rounded-circle mr-3 #{_icon_classes}"/>
<div class="media-body">
<div class="flex-grow-1">
<h4 class="mt-0 mb-0" t-esc="_title"/>
<span><font style="font-size: 14px;" t-esc="_text"/></span>
</div>
Expand Down
4 changes: 2 additions & 2 deletions addons/website/views/snippets/s_mega_menu_images_subtitles.xml
View file
Expand Up @@ -58,9 +58,9 @@

<template id="s_mega_menu_images_subtitles_item">
<a href="#" class="nav-link o_default_snippet_text px-2 rounded text-wrap" data-name="Menu Item">
<div class="media">
<div class="d-flex">
<img t-att-src="_img_src" class="mr-3 rounded shadow" alt=""/>
<div class="media-body">
<div class="flex-grow-1">
<h4 class="mt-0 mb-0" t-esc="_title"/>
<span><font style="font-size: 14px;" t-esc="_text"/></span>
</div>
Expand Down
4 changes: 2 additions & 2 deletions addons/website/views/website_templates.xml
View file
Expand Up @@ -2449,10 +2449,10 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml

<template id="one_hybrid" name="Single any Search Results">
<a t-att-href="result.get('website_url')" class="dropdown-item p-2 text-wrap">
<div class="media align-items-center o_search_result_item">
<div class="d-flex align-items-center o_search_result_item">
<img t-if="result.get('image_url')" t-att-src="result.get('image_url')" class="flex-shrink-0 o_image_64_contain"/>
<i t-else="" t-att-class="'o_image_64_contain text-center pt16 fa %s' % result.get('_fa')" style="font-size: 34px;"/>
<div class="media-body px-3">
<div class="flex-grow-1 px-3">
<t t-set="description" t-value="result.get('description')"/>
<t t-set="extra_link" t-value="result.get('extra_link_url') and result.get('extra_link')"/>
<t t-set="extra_link_html" t-value="not result.get('extra_link_url') and result.get('extra_link')"/>
Expand Down

0 comments on commit 23c3a31

Please sign in to comment.