Files
odoo_source/addons/website_profile/views/website_profile.xml
T
Umesh Gupta bc0716e767 [IMP] website_{slides, profile}: improve karma card and misc usability
Currently, there are severlar issues with the karma card, like:
1/ improve karma display
2/ images of the rank and badges are can be changed by user, but
   after saving the changes are discarded

Apart from that, in the course navbar, the hard-coded white
text color is given, due to which in some themes the text
becomes invisible. And in the courses cards below navbar,
the course title is not editable.

This commit improves the following points:

1/ Makes the next rank card (on course home page) a bit bigger, adds a
   tooltip on the progress bar that shows gained xp out of minimum xp
   needed for next rank (ex: "2500/10000 xp") if there is next rank,
   and improves the text below rank image that now shows xp to gain for
   next rank or if there isn't next rank, simply displays the earned xp.
2/ Makes the images editable (in karma card as well as in the
   user profile and in '/profile/ranks_badges' page)
3/ Makes the rank title editable
4/ Removes the hard-coded white text color from the course
   navbar and make the course title editable

taskID-2853264

closes odoo/odoo#92871

Signed-off-by: Warnon Aurélien (awa) <awa@odoo.com>
2022-09-27 13:48:42 +02:00

662 lines
40 KiB
XML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<?xml version="1.0" encoding="utf-8"?>
<odoo><data>
<!-- Sub nav -->
<template id="user_profile_sub_nav" name="User profile subnav">
<div class="o_wprofile_all_users_nav">
<div class="container">
<div class="row align-items-center justify-content-between">
<!-- Desktop Mode -->
<nav aria-label="breadcrumb" class="col d-none d-md-flex">
<ol class="breadcrumb bg-transparent mb-0 ps-0 py-0">
<li t-attf-class="breadcrumb-item #{'active' if not view_user else ''}">
<a href="/profile/users">Users</a>
</li>
<li t-if="view_user" class="breadcrumb-item active">
<a><t t-esc="view_user"/></a>
</li>
</ol>
</nav>
<div class="col d-none d-md-flex flex-row align-items-center justify-content-end">
<!-- search -->
<form t-attf-action="/profile/users" role="search" method="get">
<div class="input-group o_wprofile_course_nav_search ms-1 position-relative">
<button class="btn btn-link text-white border-1 rounded-0 pe-1 me-2" type="submit" aria-label="Search" title="Search">
<i class="fa fa-search border-1"></i>
</button>
<input type="text" class="form-control border-0 rounded-0 bg-transparent text-white ms-auto" name="search" placeholder="Search users"/>
</div>
</form>
</div>
<!-- Mobile Mode -->
<div class="col d-md-none py-1 o_wprofile_user_profile_sub_nav_mobile_col">
<div class="btn-group w-100 position-relative" role="group" aria-label="Mobile sub-nav">
<div class="btn-group w-100 ms-2">
<a class="btn bg-black-25 text-white dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Nav</a>
<ul class="dropdown-menu">
<a class="dropdown-item" t-att-href="home_url or '/'">Home</a>
<a class="dropdown-item" href="/profile/users">&#9492; Users</a>
<a t-if="view_user" class="dropdown-item">&#9492; <t t-esc="view_user"/></a>
</ul>
</div>
<div class="btn-group ms-1 position-static me-2">
<a class="btn bg-black-25 text-white dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-search"></i></a>
<div class="dropdown-menu dropdown-menu-end w-100" style="right: 10px;">
<form class="px-3" t-attf-action="/profile/users" role="search" method="get">
<div class="input-group">
<input type="text" class="form-control" name="search" placeholder="Search courses"/>
<button class="btn btn-primary" type="submit" aria-label="Search" title="Search">
<i class="fa fa-search"/>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<!--
Single User Profile Page
-->
<!-- Edit Profile Page -->
<template id="user_profile_edit_main" name="Edit Profile">
<t t-set="body_classname" t-value="'o_wprofile_body'"/>
<t t-call="website.layout">
<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>
<template id="user_profile_edit_content" name="Edit Profile">
<h1 class="o_page_header">Edit Profile</h1>
<div>
<form t-attf-action="/profile/user/save" method="post" role="form" class="o_wprofile_editor_form js_website_submit_form row" enctype="multipart/form-data">
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
<input type="file" class="d-none o_forum_file_upload" name="ufile" accept="image/*"/>
<input type="hidden" name="url_param" t-att-value="request.params.get('url_param')"/>
<div class="col-3">
<div class="card o_card_people">
<div class="card-body">
<img class="o_forum_avatar_img w-100 mb-3" t-att-src="website.image_url(user, 'avatar_128')"/>
<div class="text-center">
<a href="#" class="o_forum_profile_pic_edit btn btn-primary" aria-label="Edit">
<i class="fa fa-pencil fa-1g float-sm-none float-md-start" title="Edit"></i>
</a>
<a href="#" title="Clear" aria-label="Clear" class="btn border-primary o_forum_profile_pic_clear">
<i class="fa fa-trash-o float-sm-none float-md-end"></i>
</a>
</div>
<div class="my-3 mb-0 pt-2 border-top">
<label class="text-primary" for="user_website_published" t-if="user.id == uid"><span class="fw-bold">Public profile</span></label>
<div class=" mb-0 float-end" t-if="user.id == uid">
<input type="checkbox" class="mt8" name="website_published" id="user_website_published" value="True" t-if="not user.website_published"/>
<input type="checkbox" class="mt8" name="website_published" id="user_website_published" value="True" checked="checked" t-if="user.website_published"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-9 mb-3">
<div class="card">
<div class="card-body">
<div class="row">
<input name="user_id" t-att-value="user.id" type="hidden"/>
<div class="mb-3 col-12">
<label class="text-primary mb-1 d-block" for="user_name"><span class="fw-bold">Name</span></label>
<div>
<input type="text" class="form-control" name="name" id="user_name" required="True" t-attf-value="#{user.name}"/>
</div>
</div>
<div class="mb-3 col-6">
<label class="mb-1 text-primary" for="user_website"><span class="fw-bold">Website</span></label>
<div>
<input type="text" class="form-control" name="website" id="user_website" t-attf-value="#{user.partner_id.website or ''}"/>
</div>
</div>
<div class="mb-3 col-6">
<div t-if="email_required" class="alert alert-danger alert-dismissable oe_email_required" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<p>Please enter a valid email address in order to receive notifications from answers or comments.</p>
</div>
<label class="mb-1 text-primary" for="user_email"><span class="fw-bold">Email</span></label>
<div>
<input type="text" class="form-control" name="email" id="user_email" required="True" t-attf-value="#{user.partner_id.email}"/>
</div>
</div>
<div class="mb-3 col-6">
<label class="mb-1 text-primary" for="user_city"><span class="fw-bold">City</span></label>
<div>
<input type="text" class="form-control" name="city" id="user_city" t-attf-value="#{user.partner_id.city or ''}"/>
</div>
</div>
<div class="mb-3 col-6">
<label class="mb-1 text-primary"><span class="fw-bold">Country</span></label>
<div>
<select class="form-select" name="country">
<option value="">Country...</option>
<t t-foreach="countries or []" t-as="country">
<option t-att-value="country.id" t-att-selected="country.id == user.partner_id.country_id.id"><t t-esc="country.name"/></option>
</t>
</select>
</div>
</div>
<div class="mb-3 col-12">
<label class="mb-1 text-primary" for="description"><span class="fw-bold">Biography</span></label>
<textarea name="description" id="description" style="min-height: 120px"
class="form-control o_wysiwyg_loader"><t t-esc="user.partner_id.website_description"/></textarea>
</div>
<div class="col">
<button type="submit" class="btn btn-primary o_wprofile_submit_btn">Update</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</template>
<!-- Profile Page -->
<template id="user_profile_main" name="Profile Page">
<t t-set="body_classname" t-value="'o_wprofile_body'"/>
<t t-call="website.layout">
<div id="wrap" class="o_wprofile_wrap mt-0">
<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="o_wprofile_header o_wprofile_gradient position-relative text-white">
<t t-call="website_profile.user_profile_sub_nav">
<t t-set="view_user"><t t-esc="user.name"/></t>
</t>
<div class="container pb-3 pb-md-0 pt-2 pt-md-5">
<div class="row">
<!-- ==== Header Left ==== -->
<div class="col-12 col-md-4 col-lg-3">
<div t-attf-class="d-flex align-items-start h-100 #{'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(#{website.image_url(user, 'avatar_1024')});"/>
<a class="btn btn-primary d-inline-block d-md-none"
t-if="request.env.user == user and user.karma != 0"
t-attf-href="/profile/edit?url_param=#{edit_button_url_param}&amp;user_id=#{user.id}">
<i class="fa fa-pencil me-1"/>EDIT
</a>
</div>
</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">
<span t-field="user.name"/><small t-if="user.karma == 0"> (not verified)</small>
</h1>
<a class="btn btn-primary d-none d-md-inline-block" t-if="request.env.user == user and user.karma != 0 or request.env.user._is_admin()" t-attf-href="/profile/edit?url_param=#{edit_button_url_param}&amp;user_id=#{user.id}">
<i class="fa fa-pencil me-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.partner_id.company_name" class="lead mb-2">
<i class="fa fa-building-o fa-fw me-1"/><span t-field="user.partner_id.company_name"/>
</div>
<div t-if="user.city or user.country_id" class="lead mb-2">
<i class="fa fa-map-marker fa-fw me-1"/>
<span t-field="user.city"/><span class="text-nowrap ms-1" t-if="user.country_id">(<span t-field="user.country_id"/>)</span>
</div>
<div t-if="user.website" class="lead mb-2">
<i class="fa fa-globe fa-fw me-1"/><span t-field="user.website"/>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<template id="user_profile_content" name="Profile Page Content">
<div class="container">
<div class="row">
<!-- ========== SIDEBAR ========== -->
<div class="col-12 col-md-4 col-lg-3 mt-3 mt-md-0">
<div class="o_wprofile_sidebar 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="fw-bold me-2">Current rank:</small>
<img t-att-src="website.image_url(user.rank_id, 'image_128')" width="16" height="16" alt="" class="o_object_fit_cover me-1"/>
<a t-attf-href="/profile/ranks_badges?url_origin=#{request.httprequest.path}&amp;name_origin=#{user.name}" t-field="user.rank_id"/>
</div>
<button class="btn btn-sm d-md-none bg-white border" type="button" data-bs-toggle="collapse" data-bs-target="#o_wprofile_sidebar_collapse" aria-expanded="false" aria-controls="o_wprofile_sidebar_collapse">More info</button>
</div>
<div class="collapse d-md-block" id="o_wprofile_sidebar_collapse">
<t t-set="next_rank_id" t-value="user._get_next_rank()"/>
<small t-if="next_rank_id" class="fw-bold mt-1">Next rank:</small>
<t t-if="next_rank_id or user.rank_id" t-call="website_profile.profile_next_rank_card">
<t t-set="img_max_width" t-value="'40%'"/>
</t>
<table class="table table-sm w-100" id="o_wprofile_sidebar_table">
<tbody>
<tr>
<th><small class="fw-bold">Joined</small></th>
<td><span t-field="user.create_date" t-options='{"format": "d MMM Y"}'/></td>
</tr>
<tr>
<th><small class="fw-bold">Badges</small></th>
<td t-if="user.badge_ids" t-esc="len(user.badge_ids.filtered(lambda b: b.badge_id.website_published))"/>
<td t-else="">0</td>
</tr>
</tbody>
</table>
</div>
</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" t-attf-class="nav-link #{'active' if not active_tab or active_tab == 'about' else ''}" data-bs-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" t-attf-class="tab-pane #{ 'show active' if not active_tab or active_tab == 'about' else '' }" id="profile_tab_content_about">
<div class="o_wprofile_email_validation_container mb16 mt16">
<t t-call="website_profile.email_validation_banner">
<t t-set="redirect_url" t-value="'/profile/user/%s' % user.id"/>
<t t-set="additional_validation_email_message"/>
</t>
</div>
<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>
</div>
</div>
</div>
</template>
<template id="profile_next_rank_card" name="Profile Next Rank Card">
<div class="o_wprofile_progress_circle">
<svg viewBox="0 0 36 36" class="o_pc_circular_chart">
<t t-set="next_rank_id" t-value="next_rank_id or user._get_next_rank()"/>
<t t-if="next_rank_id and user.rank_id">
<t t-if="(next_rank_id.karma_min - user.rank_id.karma_min) > 0">
<t t-set="user_points" t-value="int(100*(user.karma - user.rank_id.karma_min)/(next_rank_id.karma_min - user.rank_id.karma_min))"/>
</t>
<t t-else="">
<t t-set="user_points" t-value="0"/>
</t>
</t>
<t t-elif="user.rank_id">
<t t-set="user_points" t-value="100"/>
</t>
<t t-else="">
<t t-set="user_points" t-value="0"/>
</t>
<g data-bs-toggle="tooltip" data-bs-delay="0"
t-attf-title="{{ '%s/%s xp' % (user.karma, next_rank_id.karma_min) if next_rank_id else ''}}">
<path class="o_pc_circle_bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="o_pc_circle" t-attf-stroke-dasharray="#{user_points}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" stroke="url(#gradient)" mask="url(#mask)"/>
</g>
<mask id="mask">
<polygon points="0,0 17.2,0 17.2,10 18,10 18,0 36,0 36,36 0,36" fill="white"/>
</mask>
<linearGradient id="gradient">
<stop offset="0%" stop-color="var(--o-pc-color-stop-1)"/>
<stop offset="100%" stop-color="var(--o-pc-color-stop-2)"/>
</linearGradient>
</svg>
<div class="o_pc_overlay d-flex flex-column align-items-center justify-content-center">
<t t-set="rank_id" t-value="next_rank_id if next_rank_id else user.rank_id"/>
<div t-field="rank_id.image_1920"
t-attf-style="max-width: {{img_max_width or '50%'}};"
t-options="{'widget': 'image', 'preview_image': 'image_128'}"/>
<h4 class="text-center" t-field="rank_id.name"/>
<small class="w-50 text-center">
<t t-set="karma_value" t-value="next_rank_id.karma_min - user.karma if next_rank_id else user.karma"/>
<t t-if="next_rank_id">
Get
<span class="fw-bold text-primary" t-out="karma_value" t-options="{'widget': 'integer', 'format_decimalized_number': True, 'precision_digits': 2}"/> xp
to level up!
</t>
<t t-else="">
<span class="fw-bold text-primary" t-out="karma_value" t-options="{'widget': 'integer', 'format_decimalized_number': True, 'precision_digits': 2}"/> xp
</t>
</small>
</div>
</div>
</template>
<template id="user_badges" name="User Bagdes">
<div t-if="user.badge_ids" class="row mx-n1">
<t t-foreach="user.badge_ids" t-as="badge">
<t t-if="badge.badge_id.website_published">
<div class="col px-1 mb-2 col-xl-4">
<div class="card">
<div class="card-body p-2 pe-3">
<div class="d-flex align-items-center">
<div t-if="badge.badge_id.image_1920 and badge.badge_id.level" t-field="badge.badge_id.image_1920"
t-options="{'widget': 'image', 'preview_image': 'image_128', 'class': 'o_object_fit_cover me-0', 'style': 'height: 38px; width: 38px'}"/>
<img t-else=""
width="38" height="38"
t-attf-src="/website_profile/static/src/img/badge_#{badge.badge_id.level}.svg"
class="o_object_fit_cover me-0"
t-att-alt="badge.badge_id.name"/>
<div class="flex-grow-1 col-md-10 p-0">
<h6 class="my-0 ps-1 text-truncate" t-field="badge.badge_id.name"/>
</div>
</div>
</div>
</div>
</div>
</t>
</t>
</div>
<div class="mb-3 d-inline-block" t-if="not user.badge_ids">
<p class="text-muted">No badges yet!</p>
</div>
<div class="text-end d-inline-block pull-right">
<a t-if="not user.badge_ids and badge_category" t-attf-href="/profile/ranks_badges?badge_category=#{badge_category}&amp;url_origin=#{request.httprequest.path}&amp;name_origin=#{user.name}"
class="btn btn-link btn-sm"><i class="fa fa-arrow-right"/> All Badges</a>
<a t-else="" t-attf-href="/profile/ranks_badges?url_origin=#{request.httprequest.path}&amp;name_origin=#{user.name}"
class="btn btn-link btn-sm"><i class="fa fa-arrow-right me-1"/>All Badges</a>
</div>
</template>
<!-- About Ranks and badges Page -->
<template id="rank_badge_main" name="Ranks Page">
<t t-call="website.layout">
<div class="container mb32 mt48">
<nav t-if="request.params.get('url_origin') and request.params.get('name_origin')" aria-label="breadcrumb">
<ol class="breadcrumb p-0 bg-white">
<li class="breadcrumb-item">
<a t-att-href="(request.website.domain or '') + '/' + request.params.get('url_origin').lstrip('/')" t-esc="request.params.get('name_origin')"/>
</li>
<li class="breadcrumb-item">Badges</li>
</ol>
</nav>
<div class="row justify-content-between" t-if="ranks">
<div class="col-12 col-md-6 col-lg-5">
<h1>Ranks</h1>
<p class="lead mb-4">Keep learning with <t t-esc="website.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">
<div class="card">
<div class="card-header border-bottom-0">Ranks</div>
<ul class="list-group list-group-flush">
<t t-foreach="ranks" t-as="rank">
<li t-attf-class="list-group-item">
<div class="d-flex align-items-center">
<div t-field="rank.image_1920"
t-options="{'widget': 'image', 'preview_image': 'image_128', 'class': 'me-2 o_image_40_cover'}"/>
<div class="flex-grow-1">
<h5 class="mt-0 mb-0" t-field="rank.name"/>
<span class="badge text-bg-success"><span t-field="rank.karma_min"/></span> point<span t-if="rank.karma_min">s</span>
</div>
</div>
</li>
</t>
</ul>
</div>
</div>
</div>
<t t-call="website_profile.badge_content"/>
</div>
</t>
</template>
<template id="badge_content" name="Badges Page content">
<div id="website_profile_badges">
<div class="row">
<div class="col-12">
<h1 class="mt-4 mt-lg-2">Badges</h1>
<p class="lead">
Besides gaining reputation with your questions and answers,
you receive badges for being especially helpful.<br class="d-none d-lg-inline-block"/>Badges
appear on your profile page, and your posts.
</p>
</div>
</div>
<div class="row col-12 align-items-center p-0" t-foreach="badges" t-as="badge">
<div class="col-3 d-flex align-items-center">
<t t-call="website_profile.badge_header"/>
</div>
<div class="col-6">
<span t-field="badge.description"/>
</div>
<div class="col-3 text-end">
<b t-esc="badge.granted_users_count"/>
<i class="text-muted"> awarded users</i>
</div>
</div>
</div>
</template>
<template id="badge_header">
<img t-if="not badge.image_1920 and badge.level" t-attf-src="/website_profile/static/src/img/badge_#{badge.level}.svg"
class="my-1 me-1 wprofile_badge_img" t-att-alt="badge.name"/>
<div t-else="" t-field="badge.image_1920"
t-options="{'widget': 'image', 'preview_image': 'image_1024', 'class': 'my-1 me-1 wprofile_badge_img'}"/>
<a t-if="badge_url" t-att-href="badge_url">
<h6 t-field="badge.name" class="d-inline my-0"/>
</a>
<h6 t-else="" t-field="badge.name" class="d-inline my-0"/>
</template>
<!--Private profile-->
<template id="private_profile" name="Private Profile Page">
<t t-call="website.layout">
<div class="container mb32 mt48">
<h1 class="mt32">This profile is private!</h1>
<div id="private_profile_return_link_container">
<p><a t-attf-href="/">Return to the website.</a></p>
</div>
</div>
</t>
</template>
<!--
All Users Page
-->
<template id="users_page_main" name="Users Page">
<t t-set="body_classname" t-value="'o_wprofile_body'"/>
<t t-call="website.layout">
<div class="h-100 d-flex flex-column">
<div id="wrap" class="o_wprofile_wrap mt-0 pb-5 ">
<t t-call="website_profile.users_page_header"/>
<t t-if="users">
<t t-call="website_profile.users_page_content"/>
</t>
</div>
<t t-if="not users">
<h2 class="text-black m-auto">No Leaderboard Yet :(</h2>
</t>
</div>
</t>
</template>
<template id="users_page_header" name="Users Page Header">
<div class="o_wprofile_all_users_header o_wprofile_gradient mb-n5 pb-5">
<t t-call="website_profile.user_profile_sub_nav"/>
<div class="container">
<h1 class="py-4 text-white d-inline-block">All Users</h1>
<div class="py-4 float-end">
<strong class="mb-3 text-white me-2">Rank by :</strong>
<div class="mb-3 btn-group">
<a t-attf-class="btn btn-secondary #{ 'active' if group_by == 'week' else ''}"
t-att-href="'/profile/users?' + keep_query('search', group_by='week')">This week</a>
<a t-attf-class="btn btn-secondary #{ 'active' if group_by == 'month' else ''}"
t-att-href="'/profile/users?' + keep_query('search', group_by='month')">This month</a>
<a t-attf-class="btn btn-secondary #{ 'active' if group_by == 'all' else ''}"
t-att-href="'/profile/users?' + keep_query('search')">All time</a>
</div>
</div>
</div>
</div>
</template>
<template id="users_page_content">
<div class="container mb32">
<div class="row mb-3">
<div class="col-md-4 d-flex flex-grow-1" 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" t-if='users'>
<t t-foreach="users" t-as="user">
<tr t-attf-onclick="location.href='/profile/user/#{user['id']}';" t-attf-class="o_wprofile_pointer bg-white #{user['id'] == user_id.id and 'o_wprofile_border_focus'}">
<t t-call="website_profile.all_user_card"/>
</tr>
</t>
<t t-if="my_user">
<!-- keep same table to avoid missaligment -->
<tr>
<td colspan="7"></td>
</tr>
<t t-set='user' t-value='my_user'/>
<tr t-attf-onclick="location.href='/profile/user/#{user['id']}';" t-attf-class="o_wprofile_pointer bg-white o_wprofile_border_focus">
<t t-call="website_profile.all_user_card">
</t>
</tr>
</t>
</table>
<t t-if='search and not users'>
<div class='alert alert-warning'>No user found for <strong><t t-esc="search"/></strong>. Try another search.</div>
</t>
<div class="d-flex justify-content-center">
<t t-call="website_profile.pager_nobox"/>
</div>
</div>
</template>
<template id="top3_user_card" name="Top 3 User Card">
<div class="card w-100 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"
style="width: 128px; height: 128px; object-fit: cover;"
t-att-src="'/profile/avatar/%s?field=avatar_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>
<span class="badge text-bg-danger fw-normal px-2" t-if="not user['website_published']">Unpublished</span>
<strong class="text-muted" t-esc="user['rank']"/>
<div class="h3 my-2" t-if="user['karma_gain']">
<span class="badge rounded-pill text-bg-success px-3 py-2" >+ <t t-esc="user['karma_gain']"/> XP</span>
</div>
</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">
<td class="align-middle text-end text-muted" style="width: 0">
<span t-esc="user['position']"/>
</td>
<td class="align-middle d-none d-sm-table-cell">
<img class="o_object_fit_cover rounded-circle o_wprofile_img_small" width="30" height="30" t-att-src="'/profile/avatar/%s?field=avatar_128%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="fw-bold" t-esc="user['name']"/><br/>
<span class="text-muted fw-bold" t-esc="user['rank']"></span>
</td>
<td class="align-middle text-nowrap">
<t t-if="user['karma_gain']">
<span class="badge rounded-pill text-bg-success d-inline">+ <t t-esc="user['karma_gain']"/> XP</span>
<span class="text-muted ps-2 pe-3">
<t t-if="group_by == 'week'">this week</t>
<t t-elif="group_by == 'month'">this month</t>
<t t-else="">All time </t>
</span>
</t>
</td>
<td class="align-middle fw-bold text-end text-nowrap">
<span t-if="not user['website_published']" class="badge text-bg-danger fw-normal px-2 py-1 m-1">Unpublished</span>
</td>
<td class="align-middle fw-bold text-end text-nowrap">
<b t-esc="user['karma']"/> <span class="text-muted small fw-bold">XP</span>
</td>
<td class="align-middle fw-bold text-end pe-3 text-nowrap all_user_badge_count">
<b t-esc="user['badge_count']"/> <span class="text-muted small fw-bold">Badges</span>
</td>
</template>
<!-- Custom Pager: lighter than existing one, no box around number, first / end displayed -->
<template id="pager_nobox" name="Pager (not box display)">
<ul t-if="pager['page_count'] > 1" t-attf-class="o_wprofile_pager fw-bold pagination m-0">
<li t-attf-class="page-item o_wprofile_pager_arrow #{'disabled' if pager['page']['num'] == 1 else ''}">
<a t-att-href=" pager['page_first']['url'] if pager['page']['num'] != 1 else None" class="page-link"><i class="fa fa-step-backward"/></a>
</li>
<li t-attf-class="page-item o_wprofile_pager_arrow #{'disabled' if pager['page']['num'] == 1 else ''}">
<a t-att-href=" pager['page_previous']['url'] if pager['page']['num'] != 1 else None" class="page-link"><i class="fa fa-caret-left"/></a>
</li>
<t t-foreach="pager['pages']" t-as="page">
<li t-attf-class="page-item #{'active disabled bg-primary rounded-circle' if page['num'] == pager['page']['num'] else ''}"> <a t-att-href="page['url']" class="page-link" t-out="page['num']"/></li>
</t>
<li t-attf-class="page-item o_wprofile_pager_arrow #{'disabled' if pager['page']['num'] == pager['page_count'] else ''}">
<a t-att-href="pager['page_next']['url'] if pager['page']['num'] != pager['page_count'] else None" class="page-link"><i class="fa fa-caret-right"/></a>
</li>
<li t-attf-class="page-item o_wprofile_pager_arrow #{'disabled' if pager['page']['num'] == pager['page_count'] else ''}">
<a t-att-href=" pager['page_last']['url'] if pager['page']['num'] != pager['page_count'] else None" class="page-link"><i class="fa fa-step-forward"/></a>
</li>
</ul>
</template>
<template id="email_validation_banner">
<t t-set="send_alert_classes" t-value="send_alert_classes if send_alert_classes else 'alert alert-danger alert-dismissable'"/>
<t t-set="done_alert_classes" t-value="done_alert_classes if done_alert_classes else 'alert alert-success alert-dismissable'"/>
<t t-set="my_account_redirect" t-value="'/my/account?redirect='+redirect_url"/>
<div t-if="not is_public_user and not user.email" t-att-class="send_alert_classes" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
Your account does not have an email set up. Please set it up on <a class="alert-link" t-att-href="my_account_redirect">your account settings</a>.
</div>
<div t-elif="not validation_email_sent and not is_public_user and user.karma == 0" t-att-class="send_alert_classes" role="alert">
<button type="button" class="close validation_email_close" data-bs-dismiss="alert" aria-label="Close">×</button>
Your Account has not yet been verified.<br/>
Click <a class="send_validation_email alert-link" href="#" t-att-data-redirect_url="redirect_url"><u>here</u></a> to receive a verification email<t t-esc="additional_validation_email_message"/>!
</div>
<div t-elif="validation_email_sent and not validation_email_done" t-att-class="done_alert_classes">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
Verification Email sent to <i t-esc="user.email"></i>!<br/>
Did not receive it? <a class="alert-link" t-att-href="my_account_redirect"><u>Correct your email address</u></a>
or <a class="send_validation_email alert-link" href="#" t-att-data-redirect_url="redirect_url"><u>Send Again</u></a>.
</div>
<div t-if="validation_email_done" t-att-class="done_alert_classes" role="status">
<button type="button" class="close validated_email_close" data-bs-dismiss="alert" aria-label="Close">×</button>
<span id="email_validated_message">Congratulations! Your email has just been validated.</span>
<span t-esc="additional_validated_email_message"/>
</div>
</template>
</data></odoo>