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

[REF] website_profile and dependencies: improve global layout and design

Browse Source 
Purpose is to perform a cleaning pass on website_profile templates. It
cleans the DOM, templates and CSS and proposes various improvements on
general design and layouting. This includes notably

 * lessen custom CSS and use bootstrap 4 classes;
 * simplify layout when possible;
 * make is responsive and mobile friendly;

No functional changes should occur with this commit.

Sub modules are impacted as profile is extended in various other
applications: eLearning, forum and certification.

Commit linked to task ID 1941250 and PR #31453
This commit is contained in:
sri-odoo
2019-03-04 16:13:52 +00:00
committed by Thibault Delavallée
parent 4363598582
commit af41382fa1
12 changed files with 326 additions and 553 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website_forum/views/website_forum_profile.xml
+12 -12
View File
@@ -10,18 +10,18 @@
</template>
<template id="user_profile_content" inherit_id="website_profile.user_profile_content">
<xpath expr="//tr[@id='profile_abstract_info_company']" position="after">
<xpath expr="//table[@id='o_wprofile_sidebar_table']//tr[last()]" position="after">
<t t-if="forum and (up_votes or down_votes)">
<tr id="profile_abstract_info_company">
<th style="width: 30%"><span class="font-weight-bold text-muted">Votes</span></th>
<th style="width: 70%">
<th><small class="font-weight-bold">Votes</small></th>
<td>
<span>
<i class="fa fa-thumbs-up text-success" role="img" aria-label="Positive votes" title="Positive votes"/>
<span class="font-weight-bold" t-esc="up_votes"/>
<i class="fa fa-thumbs-down text-danger ml-3" role="img" aria-label="Negative votes" title="Negative votes"/>
<span class="font-weight-bold" t-esc="down_votes"/>
</span>
</th>
</td>
</tr>
</t>
</xpath>
@@ -45,7 +45,7 @@
<t t-if="forum">
<div role="tabpanel" class="tab-pane" id="questions">
<div class="mb32">
<h4><i class="fa fa-question"/> Questions</h4>
<h5 class="border-bottom pb-1">Questions</h5>
<t t-if="questions">
<div class="mb16" t-foreach="questions" t-as="question">
<t t-call="website_forum.display_post"/>
@@ -57,7 +57,7 @@
</div>
<t t-if="favourite">
<div class="mb32">
<h4><i class="fa fa-star"/> Favourite Questions</h4>
<h5 class="border-bottom pb-1">Favourite Questions</h5>
<div t-foreach="favourite" t-as="question">
<t t-call="website_forum.display_post"/>
</div>
@@ -65,7 +65,7 @@
</t>
<t t-if="followed">
<div class="mb32">
<h4><i class="fa fa-eye"/> Followed Questions</h4>
<h5 class="border-bottom pb-1">Followed Questions</h5>
<div t-foreach="followed" t-as="question" class="mb16">
<t t-call="website_forum.display_post"/>
</div>
@@ -74,7 +74,7 @@
</div>
<div role="tabpanel" class="tab-pane" id="answers">
<div class="mb32">
<h4><i class="fa fa-reply"/> Answers</h4>
<h5 class="border-bottom pb-1">Answers</h5>
<t t-if="answers">
<div t-foreach="answers" t-as="answer">
<t t-call="website_forum.display_post_answer"/>
@@ -87,13 +87,13 @@
</div>
<div role="tabpanel" class="tab-pane" id="votes" t-if="uid == user.id">
<div class="mb32">
<h4><i class="fa fa-thumbs-up"/> Votes</h4>
<h5 class="border-bottom pb-1">Votes</h5>
<t t-call="website_forum.user_votes"/>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="activity" t-if="uid == user.id">
<div class="mb32">
<h4><i class="fa fa-history"/> Activities</h4>
<h5 class="border-bottom pb-1">Activities</h5>
<t t-call="website_forum.display_activities"/>
</div>
</div>
@@ -122,7 +122,7 @@
</div>
</t>
<t t-else="">
<span class="font-weight-bold">No activities yet!</span>
<p class="text-muted">No activities yet!</p>
</t>
</template>
@@ -139,7 +139,7 @@
</t>
</div>
<div class="mb16" t-if="not vote_post">
<span class="font-weight-bold">No vote given by you yet!</span>
<p class="text-muted">No vote given by you yet!</p>
</div>
</template>
</data></odoo>
addons/website_profile/static/src/img/badge_bronze.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><g fill="none"><circle cx="150" cy="150" r="150" fill="#FFF"/><path fill="#C37933" d="M150 300C67.157 300 0 232.843 0 150S67.157 0 150 0s150 67.157 150 150-67.157 150-150 150zm0-9.375c77.665 0 140.625-62.96 140.625-140.625 0-77.665-62.96-140.625-140.625-140.625C72.335 9.375 9.375 72.335 9.375 150c0 77.665 62.96 140.625 140.625 140.625zm0-14.063C80.101 276.563 23.437 219.9 23.437 150S80.102 23.437 150 23.437 276.563 80.102 276.563 150 219.899 276.563 150 276.563zm56.757-126.57l12.882-12.602c1.867-1.743 2.49-3.922 1.867-6.536-.747-2.551-2.365-4.139-4.854-4.76l-17.55-4.482 4.947-17.365c.747-2.552.156-4.73-1.773-6.535-1.805-1.93-3.983-2.52-6.535-1.774l-17.363 4.948-4.48-17.551c-.623-2.552-2.21-4.14-4.761-4.761-2.552-.685-4.73-.094-6.535 1.773L150 93.324l-12.602-12.977c-1.805-1.93-3.983-2.52-6.535-1.773-2.551.622-4.138 2.209-4.76 4.76l-4.481 17.552-17.363-4.948c-2.552-.747-4.73-.155-6.535 1.774-1.929 1.805-2.52 3.983-1.773 6.535l4.947 17.365-17.55 4.481c-2.489.623-4.107 2.21-4.854 4.761-.622 2.614 0 4.793 1.867 6.536l12.882 12.603-12.882 12.603c-1.867 1.743-2.49 3.921-1.867 6.535.747 2.552 2.365 4.14 4.854 4.762l17.55 4.481-4.947 17.365c-.747 2.552-.156 4.73 1.773 6.535 1.805 1.93 3.983 2.52 6.535 1.774l17.363-4.948 4.48 17.551c.623 2.552 2.21 4.17 4.761 4.855 2.614.622 4.792 0 6.535-1.867L150 206.755l12.602 12.884c1.245 1.369 2.832 2.053 4.761 2.053.436 0 1.027-.062 1.774-.186 2.551-.747 4.138-2.365 4.76-4.855l4.481-17.551 17.363 4.948c2.552.747 4.73.155 6.535-1.774 1.929-1.805 2.52-3.983 1.773-6.535l-4.947-17.365 17.55-4.481c2.489-.623 4.107-2.21 4.854-4.762.622-2.614 0-4.792-1.867-6.535l-12.882-12.603z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

addons/website_profile/static/src/img/badge_gold.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><g fill="none"><circle cx="150" cy="150" r="150" fill="#FFF"/><path fill="#E2BE00" d="M150 300C67.157 300 0 232.843 0 150S67.157 0 150 0s150 67.157 150 150-67.157 150-150 150zm0-9.375c77.665 0 140.625-62.96 140.625-140.625 0-77.665-62.96-140.625-140.625-140.625C72.335 9.375 9.375 72.335 9.375 150c0 77.665 62.96 140.625 140.625 140.625zm0-14.063C80.101 276.563 23.437 219.9 23.437 150S80.102 23.437 150 23.437 276.563 80.102 276.563 150 219.899 276.563 150 276.563zm56.757-126.57l12.882-12.602c1.867-1.743 2.49-3.922 1.867-6.536-.747-2.551-2.365-4.139-4.854-4.76l-17.55-4.482 4.947-17.365c.747-2.552.156-4.73-1.773-6.535-1.805-1.93-3.983-2.52-6.535-1.774l-17.363 4.948-4.48-17.551c-.623-2.552-2.21-4.14-4.761-4.761-2.552-.685-4.73-.094-6.535 1.773L150 93.324l-12.602-12.977c-1.805-1.93-3.983-2.52-6.535-1.773-2.551.622-4.138 2.209-4.76 4.76l-4.481 17.552-17.363-4.948c-2.552-.747-4.73-.155-6.535 1.774-1.929 1.805-2.52 3.983-1.773 6.535l4.947 17.365-17.55 4.481c-2.489.623-4.107 2.21-4.854 4.761-.622 2.614 0 4.793 1.867 6.536l12.882 12.603-12.882 12.603c-1.867 1.743-2.49 3.921-1.867 6.535.747 2.552 2.365 4.14 4.854 4.762l17.55 4.481-4.947 17.365c-.747 2.552-.156 4.73 1.773 6.535 1.805 1.93 3.983 2.52 6.535 1.774l17.363-4.948 4.48 17.551c.623 2.552 2.21 4.17 4.761 4.855 2.614.622 4.792 0 6.535-1.867L150 206.755l12.602 12.884c1.245 1.369 2.832 2.053 4.761 2.053.436 0 1.027-.062 1.774-.186 2.551-.747 4.138-2.365 4.76-4.855l4.481-17.551 17.363 4.948c2.552.747 4.73.155 6.535-1.774 1.929-1.805 2.52-3.983 1.773-6.535l-4.947-17.365 17.55-4.481c2.489-.623 4.107-2.21 4.854-4.762.622-2.614 0-4.792-1.867-6.535l-12.882-12.603z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

addons/website_profile/static/src/img/badge_silver.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><g fill="none"><circle cx="150" cy="150" r="150" fill="#FFF"/><path fill="#838997" d="M150 300C67.157 300 0 232.843 0 150S67.157 0 150 0s150 67.157 150 150-67.157 150-150 150zm0-9.375c77.665 0 140.625-62.96 140.625-140.625 0-77.665-62.96-140.625-140.625-140.625C72.335 9.375 9.375 72.335 9.375 150c0 77.665 62.96 140.625 140.625 140.625zm0-14.063C80.101 276.563 23.437 219.9 23.437 150S80.102 23.437 150 23.437 276.563 80.102 276.563 150 219.899 276.563 150 276.563zm56.757-126.57l12.882-12.602c1.867-1.743 2.49-3.922 1.867-6.536-.747-2.551-2.365-4.139-4.854-4.76l-17.55-4.482 4.947-17.365c.747-2.552.156-4.73-1.773-6.535-1.805-1.93-3.983-2.52-6.535-1.774l-17.363 4.948-4.48-17.551c-.623-2.552-2.21-4.14-4.761-4.761-2.552-.685-4.73-.094-6.535 1.773L150 93.324l-12.602-12.977c-1.805-1.93-3.983-2.52-6.535-1.773-2.551.622-4.138 2.209-4.76 4.76l-4.481 17.552-17.363-4.948c-2.552-.747-4.73-.155-6.535 1.774-1.929 1.805-2.52 3.983-1.773 6.535l4.947 17.365-17.55 4.481c-2.489.623-4.107 2.21-4.854 4.761-.622 2.614 0 4.793 1.867 6.536l12.882 12.603-12.882 12.603c-1.867 1.743-2.49 3.921-1.867 6.535.747 2.552 2.365 4.14 4.854 4.762l17.55 4.481-4.947 17.365c-.747 2.552-.156 4.73 1.773 6.535 1.805 1.93 3.983 2.52 6.535 1.774l17.363-4.948 4.48 17.551c.623 2.552 2.21 4.17 4.761 4.855 2.614.622 4.792 0 6.535-1.867L150 206.755l12.602 12.884c1.245 1.369 2.832 2.053 4.761 2.053.436 0 1.027-.062 1.774-.186 2.551-.747 4.138-2.365 4.76-4.855l4.481-17.551 17.363 4.948c2.552.747 4.73.155 6.535-1.774 1.929-1.805 2.52-3.983 1.773-6.535l-4.947-17.365 17.55-4.481c2.489-.623 4.107-2.21 4.854-4.762.622-2.614 0-4.792-1.867-6.535l-12.882-12.603z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

addons/website_profile/static/src/img/rank_1.svg
+1
View File
@@ -0,0 +1 @@
<svg height="37" viewBox="0 0 35 37" width="35" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0" stop-color="#ffe897"/><stop offset="1" stop-color="#f1c363"/></linearGradient><circle id="b" cx="17.5" cy="17.5" r="17.5"/><filter id="c" height="111.4%" width="105.7%" x="-2.9%" y="-2.9%"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.564705882 0 0 0 0 0.37254902 0 0 0 0 0.192156863 0 0 0 1 0"/></filter></defs><g fill="none" fill-rule="evenodd"><g fill-rule="nonzero"><use fill="#000" filter="url(#c)" xlink:href="#b"/><use fill="url(#a)" xlink:href="#b"/></g><text fill="#905f31" font-family="Montserrat-Bold, Montserrat" font-size="11" font-weight="bold"><tspan x="10.031" y="22">1st</tspan></text></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 899 B

addons/website_profile/static/src/img/rank_2.svg
+1
View File
@@ -0,0 +1 @@
<svg height="37" viewBox="0 0 35 37" width="35" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0" stop-color="#d7dde1"/><stop offset="1" stop-color="#b7c3c8"/></linearGradient><circle id="b" cx="17.5" cy="17.5" r="17.5"/><filter id="c" height="111.4%" width="105.7%" x="-2.9%" y="-2.9%"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.360784314 0 0 0 0 0.388235294 0 0 0 0 0.403921569 0 0 0 1 0"/></filter></defs><g fill="none" fill-rule="evenodd"><g fill-rule="nonzero"><use fill="#000" filter="url(#c)" xlink:href="#b"/><use fill="url(#a)" xlink:href="#b"/></g><text fill="#5c6367" font-family="Montserrat-Bold, Montserrat" font-size="11" font-weight="bold"><tspan x="6.615" y="22">2nd</tspan></text></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 899 B

addons/website_profile/static/src/img/rank_3.svg
+1
View File
@@ -0,0 +1 @@
<svg height="37" viewBox="0 0 35 37" width="35" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0" stop-color="#ecc29f"/><stop offset="1" stop-color="#d09e7d"/></linearGradient><circle id="b" cx="17.5" cy="17.5" r="17.5"/><filter id="c" height="111.4%" width="105.7%" x="-2.9%" y="-2.9%"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.62745098 0 0 0 0 0.462745098 0 0 0 0 0.329411765 0 0 0 1 0"/></filter></defs><g fill="none" fill-rule="evenodd"><g fill-rule="nonzero"><use fill="#000" filter="url(#c)" xlink:href="#b"/><use fill="url(#a)" xlink:href="#b"/></g><text fill="#5e4129" font-family="Montserrat-Bold, Montserrat" font-size="11" font-weight="bold"><tspan x="8.117" y="22">3rd</tspan></text></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 898 B

addons/website_profile/static/src/scss/website_profile.scss
+78 -237
View File
@@ -1,122 +1,80 @@
$gold: #ffcc00;
$silver: #cccccc;
$bronze: #eea91e;
$owprofile-color-bg: desaturate(map-get($grays, "200"), 80%);
$owprofile-tabs-height: 37px;
.o_wprofile_container {
margin: auto;
width: 100%;
max-width: 1140px;
padding: 32px 32px 0px 32px;
.o_wprofile_wrap {
background-color: $owprofile-color-bg;
}
.o_wprofile_gradient {
background-image: linear-gradient(120deg, #875A7B, darken(#875A7B, 10%));
}
.o_wprofile_pict {
@include size(30%);
border-radius: 100%;
padding-top: 30%;
background-size: cover;
background-position: center;
@include media-breakpoint-up(md) {
@include size(100%);
border-radius: 0;
padding-top: 100%;
}
}
.o_wprofile_header {
margin: auto;
background-color: #875A7B !important;
border-bottom: 48px solid #66445e;
.o_wprofile_header_container {
top: 48px;
padding-top: 0px;
.o_wprofile_id {
font-size: 16px;
.o_wprofile_id_info {
margin-right: 36px;
}
}
.o_wprofile_pict {
.o_wprofile_photo {
width: 100%;
max-width: 256px;
}
@include media-breakpoint-up(md) {
&:before {
content: "";
@include o-position-absolute(auto, 0, 0, 0);
height: $owprofile-tabs-height;
background: rgba(black, 0.2);
}
}
}
.o_wprofile_navtabs_container {
.o_wprofile_nav_tabs {
border-bottom: 0px;
}
.o_wprofile_navlink {
color: white;
border-radius: 0px;
height: 48px;
font-weight: bold;
padding-top: 12px;
border-left: 2px solid #875A7B;
text-align: center;
width: 120px;
&:hover {
border: 0px;
border-radius: 0px;
background-color: #875A7B;
.o_wprofile_nav_tabs {
@include media-breakpoint-up(md) {
margin-top: $owprofile-tabs-height * -1;
border-bottom: 0;
.nav-link {
border-radius: 0;
border-width: 0 1px;
@include o-hover-text-color(rgba(white, 0.8), white);
&, &:hover {
border-color: #875A7B;
background: transparent;
}
&.active {
color: $headings-color;
background: $owprofile-color-bg;
border-color: $owprofile-color-bg;
}
}
}
.o_wprofile_navlink.active {
color: #212529;
background-color: #f2f2f2;
border: 0px;
}
}
.o_wprofile_content {
margin: auto;
background-color: #f2f2f2 !important;
.o_wprofile_content_container{
position: relative;
top: -80px;
.o_wprofile_detail {
.o_wprofile_content_abstract {
top: 1px;
width: 256px;
max-width: 256px;
margin-left: 15px;
table {
width: 100%;
tr {
line-height: 32px;
}
th {
font-weight: normal;
}
}
.o_wprofile_rank {
background-color: white;
}
.o_wprofile_abstract_info {
background-color: white;
}
}
.o_wprofile_content_detail {
h4 {
border-bottom: 1px solid lightgrey;
color: grey;
margin-bottom: 16px;
}
.o_user_badges {
padding: 8px;
div {
padding: 8px;
}
img {
width: 48px;
height: 48px;
}
}
}
@include media-breakpoint-only(xs) {
overflow-x: auto;
overflow-y: hidden;
li {
white-space: nowrap;
}
}
}
// Rank
.o_wprofile_ranks_presentation {
background-color: lightgray;
.o_wprofile_rank_tile {
width: 20%;
div {
text-align:center;
img {
height: 128px;
}
}
.o_wprofile_tabs_content {
@include media-breakpoint-down(sm) {
background-color: $nav-tabs-link-active-bg;
padding:0 ($grid-gutter-width * 0.5);
}
@include media-breakpoint-only(xs) {
margin: 0 ($grid-gutter-width * -0.5);
}
}
@@ -159,141 +117,28 @@ $bronze: #eea91e;
}
}
.o_wprofile_next_rank_card {
div {
text-align: center;
img {
width: 128px;
height: 128px;
}
}
.o_wprofile_next_rank_progress {
background-color: lightgray;
.o_wprofile_next_rank_progress_bar {
background-color: #00A09D !important;
}
}
}
// Edit Profile button
.o_wprofile_edit {
position: absolute;
top: 0px;
right: 0px;
padding-left: 16px;
padding-right: 16px;
}
// All Users Page
.o_wprofile_all_users_header {
margin: auto;
background-color: #875A7B !important;
> div:first-child {
margin: auto;
width: 100%;
max-width: 1140px;
padding: 32px 32px 0px 32px;
color: white;
top: 48px;
padding-top: 0px;
height: 250px;
@include media-breakpoint-up(sm) {
min-height: 200px;
margin-bottom: -60px;
}
}
.o_wprofile_all_user_content {
position: relative;
top: -140px;
.o_wprofile_all_user_card_top3 {
cursor: pointer;
height: 325px;
text-align: center;
border-radius: 0px;
border: 0px;
.card-body {
padding-left: 0px;
padding-right: 0px;
> div:first-child {
margin-bottom: -40px;
div {
position: relative;
margin: auto;
right: -35px;
bottom: 55px;
width: 45px;
padding: 12px 0px 12px 0px;
border-radius: 50%;
}
.o_wprofile_top3_first {
background-color: $gold;
}
.o_wprofile_top3_second {
background-color: $silver;
}
.o_wprofile_top3_third {
background-color: $bronze;
}
}
:nth-child(4) {
position: absolute;
bottom: 0px;
width: 100%;
margin: auto;
border-top: 1px solid lightgrey;
div {
padding: 4% 0% 4% 0%;
border-radius: 0px;
}
}
}
}
.o_wprofile_all_users_card {
cursor: pointer;
border-radius: 0px;
border: 0px;
padding: 8px 15px 8px 15px;
> div > div:first-child > div > div:nth-child(3) {
padding-top: 12px;
padding-bottom: 12px;
}
> div > div:first-child > div > div:nth-child(2) {
padding: 0px;
width: 80px;
}
> div > div:first-child > div > div:first-child {
padding: 5% 0px 5% 16px;
width: 60px;
}
.o_wprofile_top3_card_footer div {
border-color: $border-color;
border-style: solid;
border-width: 1px 0;
margin-top: -1px;
+ div {
border-left-width: 1px;
margin-left: -1px;
}
}
// Badges
.badge-gold {
color: $gold;
}
.bg-gold {
background-color: $gold;
}
.badge-silver {
color: $silver;
}
.bg-silver {
background-color: $silver;
}
.badge-bronze {
color: $bronze;
}
.bg-bronze {
background-color: $bronze;
}
// Other stuffs
.o_wprofile_bb_grey {
border-bottom: 2px solid lightgrey !important;
}
.country_flag {
display: inline-block;
margin-left: 2px;
@@ -301,11 +146,7 @@ $bronze: #eea91e;
width: auto !important;
}
.o_wprofile_img_small {
width: 64px;
height: 64px;
}
.o_wprofile_img_medium {
width: 96px;
height: 96px;
}
// Tools
.o_wprofile_pointer {
cursor: pointer;
}
addons/website_profile/views/website_profile.xml
+187 -223
View File
@@ -14,9 +14,10 @@
<!-- Edit Profile Page -->
<template id="user_profile_edit_main" name="Edit Profile">
<t t-call="website.layout">
<div class="container mt16 mb32">
<t t-call="website_profile.user_profile_edit_content">
</t>
<div id="wrap" class="o_wprofile_wrap">
<div class="container pt-4 pb-5">
<t t-call="website_profile.user_profile_edit_content"/>
</div>
</div>
</t>
</template>
@@ -114,47 +115,46 @@
<!-- Profile Page -->
<template id="user_profile_main" name="Profile Page">
<t t-call="website.layout">
<t t-call="website_profile.user_profile_header"></t>
<t t-call="website_profile.user_profile_content"></t>
<div id="wrap" class="o_wprofile_wrap">
<t t-call="website_profile.user_profile_header"/>
<t t-call="website_profile.user_profile_content"/>
</div>
</t>
</template>
<template id="user_profile_header" name="Profile Page Header">
<div class="row o_wprofile_header">
<div class="col-lg-12 o_wprofile_container o_wprofile_header_container">
<div class="o_wprofile_header o_wprofile_gradient position-relative text-white pb-3 pb-md-0 pt-2 pt-md-5">
<div class="container">
<div class="row">
<div class="col o_wprofile_pict">
<img class="o_wprofile_photo mr-3" t-attf-src="/web/image/res.users/#{user.id}/image"/>
</div>
<div class="col-8 o_wprofile_id">
<a id="edit_profile_button" class="btn btn-primary o_wprofile_edit"
t-if="request.env.user == user"
t-attf-href="/profile/edit?url_param=#{edit_button_url_param}"><span class="font-weight-bold">EDIT PROFILE</span></a>
<div class="row mb32">
<h3 class="o_card_people_name text-white"><span class="font-weight-bold" t-field="user.name"/></h3>
<!-- ==== Header Left ==== -->
<div class="col-12 col-md-4 col-lg-3">
<div t-attf-class="d-flex align-items-start #{'justify-content-between' if (request.env.user == user) else 'justify-content-around' }">
<div class="o_wprofile_pict d-inline-block mb-3 mb-md-0" t-attf-style="background-image:url(/web/image/res.users/#{user.id}/image)"/>
<a class="btn btn-primary d-inline-block d-md-none" t-if="request.env.user == user" t-attf-href="/profile/edit?url_param=#{edit_button_url_param}">
<i class="fa fa-pencil mr-1"/>EDIT
</a>
</div>
<div class="row">
<div class="o_wprofile_id_info">
<t t-if="user.company_id">
<span class="text-white">
<i class="fa fa-building-o text-white mr-2"/><span t-field="user.company_id"/>
</span>
</t>
</div>
<!-- ==== Header Right ==== -->
<div class="col-12 col-md-8 col-lg-9 d-flex flex-column">
<div class="d-flex justify-content-between align-items-start">
<h1 class="o_card_people_name" t-field="user.name"/>
<a class="btn btn-primary d-none d-md-inline-block" t-if="request.env.user == user" t-attf-href="/profile/edit?url_param=#{edit_button_url_param}">
<i class="fa fa-pencil mr-2"/>EDIT PROFILE
</a>
</div>
<div class="d-flex flex-column justify-content-center flex-grow-1 mb-0 mb-md-5">
<div t-if="user.company_id" class="lead mb-2">
<i class="fa fa-building-o fa-fw mr-1"/><span t-field="user.company_id"/>
</div>
<div class="o_wprofile_id_info">
<t t-if="user.city or user.country_id">
<i class="fa fa-map-marker text-white mr-2"/>
<span class="text-white">
<span t-field="user.city"/><t t-if="user.country_id"> (</t><span t-field="user.country_id"/><t t-if="user.country_id">)</t>
</span>
</t>
<div t-if="user.city or user.country_id" class="lead mb-2">
<i class="fa fa-map-marker fa-fw mr-1"/>
<span t-field="user.city"/><span class="text-nowrap ml-1" t-if="user.country_id">(<span t-field="user.country_id"/>)</span>
</div>
<div class="o_wprofile_id_info">
<t t-if="user.website">
<span class="text-white">
<i class="fa fa-globe text-white mr-2"/><span t-field="user.website"/>
</span>
</t>
<div t-if="user.website" class="lead mb-2">
<i class="fa fa-globe fa-fw mr-1"/><span t-field="user.website"/>
</div>
</div>
</div>
@@ -164,87 +164,61 @@
</template>
<template id="user_profile_content" name="Profile Page Content">
<div class="row o_wprofile_content">
<div class="col-lg-12 o_wprofile_container o_wprofile_content_container">
<div class="row">
<div class="col o_wprofile_navtabs_blank"></div>
<div class="col-8 o_wprofile_navtabs_container">
<ul class="nav nav-tabs o_wprofile_nav_tabs" role="tablist" id="profile_extra_info_tablist">
<li class="nav-item" id="profile_nav_tab_about">
<a role="tab" aria-controls="about" href="#profile_tab_content_about" class="nav-link o_wprofile_navlink active" data-toggle="tab">About</a>
</li>
</ul>
</div>
</div>
<div class="row o_wprofile_detail">
<div class="col o_wprofile_content_abstract">
<t t-if="user.rank_id">
<div class="row">
<div class="col-lg-12 pt16 o_wprofile_rank">
<table><tbody><tr>
<th><span class="font-weight-bold text-muted">Current <a href="/profile/ranks">Rank</a> : </span></th>
<th><span class="float-right" t-field="user.rank_id"/></th>
</tr></tbody></table>
<t t-call="website_profile.profile_next_rank_card">
<t t-set="img_max_width">40%</t>
</t>
<hr/>
</div>
<div class="o_wprofile_content container">
<div class="row">
<!-- ========== SIDEBAR ========== -->
<div class="col-12 col-md-4 col-lg-3 mt-3 mt-md-0">
<div class="bg-white px-3 py-2 py-md-3 mb-3 mb-md-5">
<div class="o_wprofile_sidebar_top d-flex justify-content-between">
<div t-if="user.rank_id" class="d-flex align-items-center">
<small class="font-weight-bold mr-2">Rank:</small>
<img t-attf-src="/web/image/gamification.karma.rank/#{user.rank_id.id}/image_small" height="16" alt="" class="mr-1"/>
<a href="/profile/ranks" t-field="user.rank_id"/>
</div>
</t>
<div class="row">
<div class="col-lg-12 pt16 pb16 o_wprofile_abstract_info o_wprofile_bb_grey">
<table>
<tbody>
<tr>
<th style="width: 30%"><span class="font-weight-bold text-muted">Joined</span></th>
<th style="width: 70%"><span t-field="user.create_date" t-options='{"format": "d MMM Y"}'/></th>
</tr>
<tr>
<th style="width: 30%"><span class="font-weight-bold text-muted">Badges</span></th>
<th style="width: 70%">
<t t-if="user.badge_ids">
<span t-esc="len(user.badge_ids)"/>
</t>
<t t-else="">
<span>0</span>
</t>
</th>
</tr>
<t t-if="user.website">
<tr>
<th style="width: 30%"><span class="font-weight-bold text-muted">Website</span></th>
<th style="width: 70%"><span t-field="user.website"/></th>
</tr>
</t>
<t t-if="user.city or user.country_id">
<tr>
<th style="width: 30%"><span class="font-weight-bold text-muted">Location</span></th>
<th style="width: 70%">
<span t-field="user.city"/><t t-if="user.country_id"> (</t><span t-field="user.country_id"/><t t-if="user.country_id">)</t>
</th>
</tr>
</t>
<tr id="profile_abstract_info_company">
<th style="width: 30%"><span class="font-weight-bold text-muted">Company</span></th>
<th style="width: 70%"><span t-field="user.company_id"/></th>
</tr>
</tbody>
</table>
<button class="btn btn-sm d-md-none bg-white border" type="button" data-toggle="collapse" data-target="#o_wprofile_sidebar_collapse" aria-expanded="false" aria-controls="o_wprofile_sidebar_collapse">More info</button>
</div>
<div t-if="user.rank_id" class="collapse d-md-block" id="o_wprofile_sidebar_collapse">
<div class="mb-3">
<small class="font-weight-bold mt-1">Next rank:</small>
<t t-call="website_profile.profile_next_rank_card">
<t t-set="img_max_width">40%</t>
</t>
</div>
<table class="table table-sm w-100" id="o_wprofile_sidebar_table">
<tbody>
<tr>
<th><small class="font-weight-bold">Joined</small></th>
<td><span t-field="user.create_date" t-options='{"format": "d MMM Y"}'/></td>
</tr>
<tr>
<th><small class="font-weight-bold">Badges</small></th>
<td t-if="user.badge_ids" t-esc="len(user.badge_ids)"/>
<td t-else="">0</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-8 mt24 ml32 o_wprofile_content_detail">
<div class="tab-content mt16" id="profile_extra_info_tabcontent">
<div role="tabpanel" class="tab-pane active" id="profile_tab_content_about">
<div id="profile_about_badge" class="mb32">
<h4><i class="fa fa-certificate"/> Badges</h4>
<t t-call="website_profile.user_badges"></t>
</div>
<div t-if="user.partner_id.website_description" class="mb32">
<h4><i class="fa fa-pencil"/> Biography</h4>
<span t-field="user.partner_id.website_description"/>
</div>
</div>
<!-- ========== PROFILE CONTENT ========== -->
<div class="col-12 col-md-8 col-lg-9">
<ul class="nav nav-tabs o_wprofile_nav_tabs flex-nowrap" role="tablist" id="profile_extra_info_tablist">
<li class="nav-item">
<a role="tab" aria-controls="about" href="#profile_tab_content_about" class="nav-link active" data-toggle="tab">About</a>
</li>
</ul>
<div class="tab-content py-4 o_wprofile_tabs_content mb-4" id="profile_extra_info_tabcontent">
<div role="tabpanel" class="tab-pane active" id="profile_tab_content_about">
<div id="profile_about_badge" class="mb32">
<h5 class="border-bottom pb-1">Badges</h5>
<t t-call="website_profile.user_badges"></t>
</div>
<div t-if="user.partner_id.website_description" class="mb32">
<h5 class="border-bottom pb-1">Biography</h5>
<span t-field="user.partner_id.website_description"/>
</div>
</div>
</div>
@@ -278,30 +252,26 @@
</template>
<template id="user_badges" name="User Bagdes">
<t t-if="user.badge_ids">
<div class="row">
<div class="col-lg-3 o_user_badges" t-foreach="user.badge_ids" t-as="badge">
<div class="card-body o_wprofile_bb_grey">
<table><tbody><tr>
<th>
<img class="o_wprofile_img_thumb" t-attf-src="/web/image/gamification.badge/#{badge.badge_id.id}/image_small"/>
</th>
<th style="">
<span class="font-weight-bold" t-field="badge.badge_id.name"/>
</th>
</tr></tbody></table>
<div t-if="user.badge_ids" class="row mx-n1">
<div class="col px-1 mb-2 col-xl-4" t-foreach="user.badge_ids" t-as="badge">
<div class="card">
<div class="card-body p-2 pr-3">
<div class="media align-items-center">
<img height="38" t-attf-src="/web/image/gamification.badge/#{badge.badge_id.id}/image_small" class="mr-2"/>
<div class="media-body text-nowrap">
<h6 class="my-0" t-field="badge.badge_id.name"/>
</div>
</div>
</div>
</div>
</div>
</t>
<div class="mb16" t-if="not user.badge_ids">
<span class="font-weight-bold">No badge yet!</span><br/>
<t t-if="badge_category">
<a t-attf-href="/profile/badge?category=#{badge_category}" class="fa fa-arrow-right"> Check available badges</a>
</t>
<t t-else="">
<a t-attf-href="/profile/badge" class="fa fa-arrow-right"> Check available badges</a>
</t>
</div>
<div class="mb-3" t-if="not user.badge_ids">
<p class="text-muted">No badge yet</p>
</div>
<div class="text-right">
<a t-if="not user.badge_ids and badge_category" t-attf-href="/profile/badge?category=#{badge_category}"><i class="fa fa-arrow-right"/> Check available badges</a>
<a t-else="" href="/profile/badge" class="btn btn-link btn-sm"><i class="fa fa-arrow-right mr-1"/>Check all available badges</a>
</div>
</template>
@@ -309,36 +279,39 @@
<template id="rank_main" name="Ranks Page">
<t t-call="website.layout">
<div class="container mb32 mt48">
<h1 class="o_page_header">
Ranks &amp; Badges
</h1>
<p>
Keep learning with <t t-esc="user.company_id.name"/>. Collect points on the forum or on the eLearning platform. Those points will make you reach new ranks.
</p>
<p>
<span class="font-weight-bold">How do I earn badges?</span> When you finish a course or reach milestones, you're awarded badges.
</p>
<p>
<span class="font-weight-bold">How do I score more points?</span> You can score more points by answering quizzes at the end of each course content. Points can also be earned on the forum. Follow this link to the guidelines of the forum.
</p>
<div class="row justify-content-between">
<div class="col-12 col-md-6">
<h1>Ranks &amp; Badges</h1>
<p class="lead mb-4">Keep learning with <t t-esc="user.company_id.name"/>. Collect points on the forum or on the eLearning platform. Those points will make you reach new ranks.</p>
<h5>How do I earn badges?</h5>
<p>When you finish a course or reach milestones, you're awarded badges.</p>
<h5>How do I score more points?</h5>
<p>You can score more points by answering quizzes at the end of each course content. Points can also be earned on the forum. Follow this link to the guidelines of the forum.</p>
</div>
<div class="col-12 col-md-5 col-lg-4">
<t t-call="website_profile.rank_content"/>
</div>
</div>
</div>
<t t-call="website_profile.rank_content">
</t>
</t>
</template>
<template id="rank_content" name="Rank Page content">
<div class="o_wprofile_ranks_presentation mt16 mb32 pt16 pb48">
<div class="container mb32 mt48">
<h3>Ranks</h3>
<div class="row">
<div class="o_wprofile_rank_tile" t-foreach="ranks" t-as="rank">
<div><img class="mb-3" t-attf-src="/web/image/gamification.karma.rank/#{rank.id}/image"/></div>
<div><span class="font-weight-bold" t-field="rank.name"/></div>
<div><span style="color: #00A09D;"><span t-field="rank.karma_min"/> point<span t-if="rank.karma_min">s</span></span></div>
<h5 class="text-muted my-2">Ranks</h5>
<div class="row flex-column">
<t t-foreach="ranks" t-as="rank">
<t t-set="order_inverse" t-value="6 - rank.id"/>
<div t-attf-class="col order-#{order_inverse}">
<div class="media align-items-center py-2 border-top">
<img height="50" t-attf-src="/web/image/gamification.karma.rank/#{rank.id}/image" class="mr-2" alt="Rank badge"/>
<div class="media-body">
<h5 class="mt-0 mb-0" t-field="rank.name"/>
<span class="badge badge-success"><span t-field="rank.karma_min"/></span> point<span t-if="rank.karma_min">s</span>
</div>
</div>
</div>
</div>
</t>
</div>
</template>
@@ -353,26 +326,23 @@
</template>
<template id="badge_content" name="Badges Page content">
<h1 class="o_page_header">
Badges
</h1>
<p>
<h1>Badges</h1>
<p class="lead">
Besides gaining reputation with your questions and answers,
you receive badges for being especially helpful. Badges
you receive badges for being especially helpful.<br/>Badges
appear on your profile page, and your posts.
</p>
<table class="table mt32 mb64">
<table class="table table-sm mt32 mb64">
<tr t-foreach="badges" t-as="badge">
<td>
<span class="badge badge-pill float-left">
<span t-if="badge.level == 'gold'"><i class="fa fa-trophy badge-gold"/> <span t-field="badge.name" class="font-weight-bold text-white bg-gold badge-pill"/></span>
<span t-if="badge.level == 'silver'"><i class="fa fa-trophy badge-silver"/> <span t-field="badge.name" class="font-weight-bold text-white bg-silver badge-pill"/></span>
<span t-if="badge.level == 'bronze'"><i class="fa fa-trophy badge-bronze"/> <span t-field="badge.name" class="font-weight-bold text-white bg-bronze badge-pill"/></span>
</span>
</td><td>
<span class="font-weight-bold" t-esc="badge.stat_count_distinct"/>
<td class="align-middle">
<img t-attf-src="/website_profile/static/src/img/badge_#{badge.level}.svg" class="my-1" style="height:2.5em" alt=""/>
<h6 t-field="badge.name" class="d-inline my-0"/>
</td>
<td class="align-middle d-none d-md-table-cell">
<b t-esc="badge.stat_count_distinct"/>
<i class="text-muted"> awarded users</i>
</td><td>
</td>
<td class="align-middle">
<span t-field="badge.description"/>
</td>
</tr>
@@ -396,79 +366,73 @@
-->
<template id="users_page_main" name="Users Page">
<t t-call="website.layout">
<t t-call="website_profile.users_page_header"></t>
<t t-call="website_profile.users_page_content"></t>
<div id="wrap" class="o_wprofile_wrap pb-5">
<t t-call="website_profile.users_page_header"/>
<t t-call="website_profile.users_page_content"/>
</div>
</t>
</template>
<template id="users_page_header" name="Users Page Header">
<div class="row o_wprofile_all_users_header">
<div class="col-lg-12">
<h2 class="row">Users</h2>
<div class="o_wprofile_all_users_header o_wprofile_gradient text-white">
<div class="container">
<h1 class="py-5">All Users</h1>
</div>
</div>
</template>
<template id="users_page_content">
<div class="row o_wprofile_all_user_content">
<div class="container mb32 mt48">
<div class="row">
<div class="col-lg-4 mb32" t-foreach="top3_users" t-as="user" t-attf-onclick="location.href='/profile/user/#{user['id']}';">
<t t-call="website_profile.top3_user_card"></t>
</div>
</div>
<div class="row">
<div class="col-lg-12" t-foreach="users" t-as="user" t-attf-onclick="location.href='/profile/user/#{user['id']}';">
<t t-call="website_profile.all_user_card"></t>
</div>
</div>
<div class="float-left">
<t t-call="website.pager"/>
<div class="container mb32">
<div class="row mb-3">
<div class="col-md-4" t-foreach="top3_users" t-as="user" t-attf-onclick="location.href='/profile/user/#{user['id']}';">
<t t-call="website_profile.top3_user_card"></t>
</div>
</div>
<table class="table table-sm">
<tr t-foreach="users" t-as="user" t-attf-onclick="location.href='/profile/user/#{user['id']}';" class="o_wprofile_pointer bg-white">
<t t-call="website_profile.all_user_card"/>
</tr>
</table>
<div class="float-left">
<t t-call="website.pager"/>
</div>
</div>
</template>
<template id="top3_user_card" name="Top 3 User Card">
<div class="card o_wprofile_all_user_card_top3 o_wprofile_bb_grey">
<div class="card text-center mb-2 border-bottom-0 o_wprofile_pointer">
<div class="card-body">
<div>
<img class="mb-3 rounded-circle o_wprofile_img_medium" t-att-src="'/profile/avatar/%s?field=image_medium%s' % (user['id'], '&amp;res_model=%s&amp;res_id=%s' % (record._name, record.id) if record else '')"/>
<div t-if="user['position'] == 1" class="o_wprofile_top3_first"><span>1st</span></div>
<div t-if="user['position'] == 2" class="o_wprofile_top3_second"><span>2nd</span></div>
<div t-if="user['position'] == 3" class="o_wprofile_top3_third"><span>3rd</span></div>
</div>
<div><h3 t-esc="user['name']"></h3></div>
<div><span t-esc="user['rank']"></span></div>
<div class="row">
<div class="col" style="border-right: 1px solid lightgrey"><span><span t-esc="user['karma']"/> XP</span></div>
<div id="top3_user_badge_count" class="col"><span><span t-esc="user['badge_count']"/> Badges</span></div>
<div class="d-inline-block position-relative">
<img class="rounded-circle img-fluid" t-att-src="'/profile/avatar/%s?field=image_medium%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['position']}.svg" alt="User rank" style="bottom: 0; right: -10px"/>
</div>
<h3 class="mt-2 mb-0" t-esc="user['name']"></h3>
<strong class="text-muted" t-esc="user['rank']"/>
</div>
<div class="row mx-0 o_wprofile_top3_card_footer text-nowrap">
<div class="col py-3"><b t-esc="user['karma']"/> <span class="text-muted">XP</span></div>
<div class="col py-3"><b t-esc="user['badge_count']"/> <span class="text-muted">Badges</span></div>
</div>
</div>
</template>
<template id="all_user_card" name="All User Card">
<div class="card o_wprofile_all_users_card o_wprofile_bb_grey">
<div class="row">
<div class="col-lg-4">
<div class="row">
<div><span><span t-esc="user['position']"/>th</span></div>
<div><img class="rounded-circle o_wprofile_img_small" t-att-src="'/profile/avatar/%s?field=image_medium%s' % (user['id'], '&amp;res_model=%s&amp;res_id=%s' % (record._name, record.id) if record else '')"/></div>
<div>
<span class="font-weight-bold" t-esc="user['name']"/><br/>
<span t-esc="user['rank']"></span>
</div>
</div>
</div>
<div class="card-body col-lg-8">
<div class="row">
<div class="col"><span><span t-esc="user['karma']"/> XP</span></div>
<div id="all_user_badge_count" class="col"><span><span t-esc="user['badge_count']"/> Badges</span></div>
</div>
</div>
</div>
</div>
<td class="align-middle text-right text-muted" style="width: 0">
<span t-esc="user['position']"/>
</td>
<td class="align-middle d-none d-sm-table-cell">
<img class="rounded-circle o_wprofile_img_small" height="30" t-att-src="'/profile/avatar/%s?field=image_medium%s' % (user['id'], '&amp;res_model=%s&amp;res_id=%s' % (record._name, record.id) if record else '')"/>
</td>
<td class="align-middle w-md-75">
<span class="font-weight-bold" t-esc="user['name']"/><br/>
<span class="text-muted font-weight-bold" t-esc="user['rank']"></span>
</td>
<td class="align-middle font-weight-bold text-right text-nowrap">
<b t-esc="user['karma']"/> <span class="text-muted small font-weight-bold">XP</span>
</td>
<td class="align-middle font-weight-bold text-right pr-3 text-nowrap all_user_badge_count">
<b t-esc="user['badge_count']"/> <span class="text-muted small font-weight-bold">Badges</span>
</td>
</template>
</data></odoo>
addons/website_slides/static/src/scss/website_slides_profile.scss
-39
View File
@@ -1,43 +1,4 @@
.o_wprofile_slides_card {
padding: 8px;
max-height: 68px;
min-width: 350px;
}
.o_wprofile_slides_title {
top: -15px;
padding-left: 76px;
}
// Quest - Course Card
.o_wprofile_slides_course_card_body {
cursor: pointer;
height: 66px;
.o_wprofile_slides_course_img {
position: absolute;
padding: 0px;
top: 8px;
left: 8px;
width: 66px;
height: 66px;
}
.o_wprofile_slide_course_rating {
position: absolute;
top: 13px;
right: 16px;
}
.o_wprofile_slide_course_progress {
position: absolute;
bottom: 4px;
width: 100%;
padding-left: 88px;
.o_wprofile_slide_course_progress_bar {
background-color: lightgray;
top: 2px;
padding: 0px;
}
.o_wprofile_slide_course_progress_value {
min-width: 70px;
text-align: right;
}
}
}
addons/website_slides/views/website_slides_templates_profile.xml
+35 -36
View File
@@ -13,26 +13,18 @@
<xpath expr="//div[@id='profile_about_badge']" position="before">
<t t-if="channel">
<div class="mb32">
<h4><i class="fa fa-graduation-cap"/> Completed Courses</h4>
<t t-if="courses_completed">
<t t-call="website_slides.display_course">
<t t-set="courses" t-value="courses_completed"></t>
</t>
</t>
<t t-else="">
<span class="font-weight-bold">No completed course yet!</span>
<h5 class="border-bottom pb-1">Completed Courses</h5>
<t t-if="courses_completed" t-call="website_slides.display_course">
<t t-set="courses" t-value="courses_completed"></t>
</t>
<p t-else="" class="text-muted">No completed course yet</p>
</div>
<div class="mb32">
<h4><i class="fa fa-book"/> Followed Courses</h4>
<t t-if="courses_ongoing">
<t t-call="website_slides.display_course">
<t t-set="courses" t-value="courses_ongoing"></t>
</t>
</t>
<t t-else="">
<span class="font-weight-bold">No followed course!</span>
<h5 class="border-bottom pb-1">Followed Courses</h5>
<t t-if="courses_ongoing" t-call="website_slides.display_course">
<t t-set="courses" t-value="courses_ongoing"></t>
</t>
<p t-else="" class="text-muted">No followed course yet</p>
</div>
</t>
</xpath>
@@ -40,27 +32,34 @@
<template id="display_course">
<div class="row">
<div class="col-lg-6 o_wprofile_slides_card" t-foreach="courses" t-as="course">
<div class="card-body o_wprofile_slides_course_card_body o_wprofile_bb_grey" t-attf-onclick="location.href='/slides/#{slug(course.channel_id)}';">
<div class="row">
<div class="o_wprofile_slides_course_img">
<img class="o_wprofile_img_small" t-attf-src="/web/image/slide.channel/#{course.channel_id.id}/image_small"/>
</div>
<div class="col-10 o_wprofile_slides_title">
<span class="font-weight-bold" t-field="course.channel_id.name"/>
</div>
<div class="o_wprofile_slide_course_rating">
<t t-call="website_rating.rating_widget_stars_static">
<t t-set="rating_avg" t-value="course.channel_id.rating_avg"/>
<t t-set="rating_count" t-value="course.channel_id.rating_count"/>
</t>
</div>
<div class="row o_wprofile_slide_course_progress">
<div class="col progress o_wprofile_slide_course_progress_bar">
<div class="progress-bar" style="background-color: #00A09D !important"
t-att-style="'width: '+ str(course.completion)+'%'"></div>
<div class="col-12 col-lg-6" t-foreach="courses" t-as="course">
<div class="card mb-2">
<div class="card-body o_wprofile_slides_course_card_body p-0 d-flex"
t-attf-onclick="location.href='/slides/#{slug(course.channel_id)}';">
<div class="pl-5 pr-4 rounded-left" t-attf-style="background-image:url(/web/image/slide.channel/#{course.channel_id.id}/image); background-size: cover; background-position: center"/>
<div class="p-2 w-100">
<h5 class="mt-0 mb-1" t-field="course.channel_id.name"/>
<div class="overflow-hidden mb-1" style="height:24px">
<t t-foreach="course.channel_id.tag_ids" t-as="tag">
<a t-att-href="'/slides/all?channel_tag_id=%s' % tag.id" class="badge badge-light" t-esc="tag.name"/>
</t>
<t t-foreach="course.channel_id.tag_ids" t-as="tag">
<a t-att-href="'/slides/all?channel_tag_id=%s' % tag.id" class="badge badge-light" t-esc="tag.name"/>
</t>
<t t-foreach="course.channel_id.tag_ids" t-as="tag">
<a t-att-href="'/slides/all?channel_tag_id=%s' % tag.id" class="badge badge-light" t-esc="tag.name"/>
</t>
</div>
<div class="d-flex align-items-center">
<div class="progress flex-grow-1" style="height:0.5em">
<div class="progress-bar bg-primary" t-att-style="'width: '+ str(course.completion)+'%'"/>
</div>
<small class="font-weight-bold pl-2"><span t-field="course.completion"/> %</small>
</div>
<span class="col-3 text-primary o_wprofile_slide_course_progress_value"><span t-field="course.completion"/> %</span>
</div>
</div>
</div>
addons/website_slides_survey/views/website_profile.xml
+8 -6
View File
@@ -4,7 +4,7 @@
<xpath expr="//div[@id='profile_about_badge']" position="before">
<t t-if="channel">
<div class="mb32">
<h4><i class="fa fa-trophy"/> Certifications</h4>
<h5 class="border-bottom pb-1">Certifications</h5>
<t t-call="website_slides_survey.display_certificate"/>
</div>
</t>
@@ -38,19 +38,21 @@
</div>
</t>
<t t-else="">
<b>No certifications yet!</b>
<p class="text-muted">No certifications yet!</p>
</t>
</template>
<template id="top3_user_card" inherit_id="website_profile.top3_user_card">
<xpath expr="//div[@id='top3_user_badge_count']" position="after">
<div class="col" style="border-left: 1px solid lightgrey"><span><span t-esc="user['certification_count']"/> Certifications</span></div>
<xpath expr="//div[hasclass('o_wprofile_top3_card_footer')]//div[last()]" position="after">
<div class="col py-3"><b t-esc="user['certification_count']"/> <span class="text-muted">Certifications</span></div>
</xpath>
</template>
<template id="all_user_card" inherit_id="website_profile.all_user_card">
<xpath expr="//div[@id='all_user_badge_count']" position="after">
<div class="col"><span><span t-esc="user['certification_count']"/> Certifications</span></div>
<xpath expr="//td[hasclass('all_user_badge_count')]" position="after">
<td class="align-middle text-right pr-3 text-nowrap all_user_certification_count">
<b t-esc="user['certification_count']"/> <span class="text-muted small font-weight-bold">Certifications</span>
</td>
</xpath>
</template>
</data></odoo>