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

[FIX] website_{slides, profile}: fix display of not square user image

Browse Source 
When having not square images for user avatar several issues appear

  * website_slides: heroes of the week banner is broken as circles are not
    circles anymore. They look more like UFOs or funny snowmen;
  * website_slides: my user status / leaderboard / achievements card display
    is broken as image may take much more width than planned;
  * website_slides: channel page view displays user avatar when having joined
    it, and it is broken;
  * website_profile: user avatars in top 3 of users karma ranking is broken.

In this commit we apply strict rules on width / height combined to an object
fit in order to always have a bioutifoul displayed circled image.

Task 2065425 (avatar ratio badly displayed)
PR #36756
This commit is contained in:
Thibault Delavallée
2019-09-13 10:05:15 +00:00
parent 477b73ed31
commit 98f847be3a
3 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website_profile/views/website_profile.xml
+3 -1
View File
@@ -514,7 +514,9 @@
<div class="card text-center mb-2 border-bottom-0 o_wprofile_pointer">
<div class="card-body">
<div class="d-inline-block position-relative">
<img class="rounded-circle img-fluid" t-att-src="'/profile/avatar/%s?field=image_128%s' % (user['id'], '&amp;res_model=%s&amp;res_id=%s' % (record._name, record.id) if record else '')"/>
<img class="rounded-circle img-fluid"
style="width: 128px; height: 128px; object-fit: cover;"
t-att-src="'/profile/avatar/%s?field=image_256%s' % (user['id'], '&amp;res_model=%s&amp;res_id=%s' % (record._name, record.id) if record else '')"/>
<img class="position-absolute" t-attf-src="/website_profile/static/src/img/rank_#{user_index + 1}.svg" alt="User rank" style="bottom: 0; right: -10px"/>
</div>
<h3 class="mt-2 mb-0" t-esc="user['name']"></h3>
addons/website_slides/views/website_slides_templates_course.xml
+1 -1
View File
@@ -300,7 +300,7 @@
t-att-data-enroll="channel.enroll">
<t t-call="website_slides.slides_misc_user_image">
<t t-set="img_class" t-value="'rounded-circle mr-1'"/>
<t t-set="img_style" t-value="'height: 1.4em'"/>
<t t-set="img_style" t-value="'width: 1.4em; height: 1.4em; object-fit: cover;'"/>
</t>
<h6 class="d-flex flex-grow-1 my-0">You're enrolled</h6>
<i class="fa fa-check"/>
addons/website_slides/views/website_slides_templates_homepage.xml
+4 -4
View File
@@ -14,8 +14,8 @@
<div class="ml-4 ml-md-2 mt-3">
<t t-foreach="top3_users" t-as="user">
<img class="rounded-circle img-fluid shadow ml-n4"
style="border: 6px solid white; max-width: 40%"
t-attf-src="/web/image/res.users/#{user['id']}/image_128"/>
style="width: 140px; height: 140px; max-width: 40%; max-height: 40%; object-fit: cover; border: 6px solid white;"
t-attf-src="/web/image/res.users/#{user['id']}/image_256"/>
</t>
</div>
</div>
@@ -99,7 +99,7 @@
<div class="d-flex align-items-center">
<t t-call="website_slides.slides_misc_user_image">
<t t-set="img_class" t-value="'rounded-circle mr-1'"/>
<t t-set="img_style" t-value="'height: 22px'"/>
<t t-set="img_style" t-value="'width: 22px; height: 22px; object-fit: cover;'"/>
</t>
<h5 t-esc="user.name" class="d-flex flex-grow-1 mb-0"/>
<a class="d-none d-lg-block" t-att-href="'/profile/user/%s' % user.id">View</a>
@@ -451,7 +451,7 @@
<template id='slides_misc_user_image' name="User Avatar">
<img t-att-class="img_class if img_class else 'rounded-circle float-left'"
t-att-style="img_style if img_style else 'max-height: 32px;'"
t-att-style="img_style if img_style else 'width: 32px; height: 32px; object-fit: cover;'"
t-att-src="'/profile/avatar/%s?field=image_128' % user.id"
t-att-alt="user.name"/>
</template>