[IMP] website_event[_track|_meet|_exhibitor]: improve various frontend event layouts

PURPOSE

This commit generally improves some of the event application layouts.

SPECS

- Add new rules to handle long text properly.
- Set a maximum height for the dropdown menu.
- Minor margin and padding adjustments.
- Reduce border radius of status badge.
- Remove the rounded corners of the cards.
- Remove the "wishlist" terminology.
- Fix the href attribute of the event name.
- Fix image distortion of the sponsor cards (backend).
- Hide viewer count when there is no viewer.
- Limiting the expansion of the meeting room aside block.
- Various other minor changes coming from user testing

LINKS

Task-2347597
COM PR odoo/odoo#69102
ENT PR odoo/enterprise#17612

X-original-commit: cfbe1096ec34411a7abe9a9510dc4289e15db1cb
This commit is contained in:
Julien Banken
2021-04-12 10:39:58 +00:00
committed by Thibault Delavallée
parent c2b099ef76
commit 98f46907c2
16 changed files with 42 additions and 44 deletions
@@ -72,6 +72,8 @@
.dropdown-menu {
margin-top: $navbar-padding-y;
min-width: 12rem;
max-height: 250px;
overflow-y: auto;
}
.dropdown-item {
&.active .badge { // Invert badge display when the item is active
@@ -137,13 +139,6 @@
}
.o_wevent_online_page_container {
// Widescreen mode
@include media-breakpoint-up(md) {
&:not(.container) {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
}
// Main panel
.o_wevent_online_page_main {
@@ -163,10 +163,10 @@
<!-- List -->
<div t-foreach="event_ids" t-as="event" t-attf-class=" #{opt_event_size} mb-4">
<a t-attf-href="/event/#{ slug(event) }/#{(not event.menu_id) and 'register'}" class="text-decoration-none">
<article t-attf-class="h-100 #{opt_events_list_cards and 'card border-0 shadow-sm'}" itemscope="itemscope" itemtype="http://schema.org/Event">
<article t-attf-class="h-100 #{opt_events_list_cards and 'card rounded-0 border-0 shadow-sm'}" itemscope="itemscope" itemtype="http://schema.org/Event">
<div class="h-100 row no-gutters">
<!-- Header -->
<header t-attf-class="overflow-hidden bg-secondary #{opt_events_list_columns and 'col-12 rounded-top' or 'col-sm-4 col-lg-3 rounded-left'} #{(not opt_events_list_cards) and 'rounded shadow'} #{(not opt_events_list_cards and not opt_events_list_columns) and 'rounded-top'}">
<header t-attf-class="overflow-hidden bg-secondary #{opt_events_list_columns and 'col-12' or 'col-sm-4 col-lg-3'} #{(not opt_events_list_cards) and 'shadow'}">
<!-- Image + Link -->
<div class="d-block h-100 w-100">
<t t-call="website.record_cover">
@@ -39,7 +39,7 @@
<t t-else="">
<nav class="navbar navbar-light border-top shadow-sm navbar-expand-md">
<div class="container align-items-baseline">
<a href="#" t-field="event.name" class="navbar-brand h4 my-0 mr-0 mr-md-4"/>
<a t-att-href="event.website_url" t-field="event.name" class="navbar-brand h4 my-0 mr-0 mr-md-4"/>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#o_wevent_event_submenu" aria-controls="o_wevent_event_submenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
@@ -150,11 +150,11 @@
<!-- ============================================================ -->
<template id="exhibitor_card" name="Exhibitor Card">
<article t-att-class="'h-100 card border-0 shadow-sm o_wesponsor_card %s' % ('o_wesponsor_card_unpublished' if not sponsor.is_published else '')"
<article t-att-class="'h-100 card rounded-0 border-0 shadow-sm o_wesponsor_card %s' % ('o_wesponsor_card_unpublished' if not sponsor.is_published else '')"
itemscope="itemscope" itemtype="http://schema.org/Event">
<div class="h-100 row no-gutters">
<t t-set="sponsor_image_url" t-value="sponsor.website_image_url"/>
<header t-att-class="'overflow-hidden col-12 rounded-top %s' % ('bg-secondary' if not sponsor_image_url else '')">
<header t-att-class="'overflow-hidden col-12 %s' % ('bg-secondary' if not sponsor_image_url else '')">
<div class="d-block h-100 w-100 o_wesponsor_js_connect"
t-att-data-sponsor-url="sponsor.website_url"
t-attf-data-register-url="/event/#{slug(event)}/register?from_sponsor_id=#{sponsor.id}"
@@ -202,8 +202,8 @@
<div class="col-12 h-100">
<main class="card-body">
<!-- Title -->
<h5 class="card-title mt-0 mb-0 text-truncate d-flex align-items-top">
<span t-field="sponsor.name" itemprop="name"/>
<h5 class="card-title mt-0 mb-0 d-flex align-items-start">
<span t-field="sponsor.name" itemprop="name" class="text-break"/>
<span t-if="sponsor.is_in_opening_hours and sponsor.chat_room_id"
class="ml-auto badge badge-danger">Live
</span>
@@ -89,10 +89,10 @@
</t>
</div>
<!-- SPONSOR DESCRIPTION -->
<span class="h5 d-inline-block mx-3 mt-3 mb-0">
<div class="h5 m-3">
About <t t-esc="sponsor.name"/>
</span>
<hr class="mt-2 mb-0"/>
</div>
<hr class="my-0"/>
<div class="ml-3 clearfix">
<div class="float-left pt-3">
<span t-if="sponsor.image_512" t-field="sponsor.image_512" class="o_wevent_online_page_avatar"
@@ -149,7 +149,7 @@
<!-- ============================================================ -->
<template id="exhibitor_aside" name="Exhibitor: Aside">
<div t-att-class="'col-12 pl-0 pr-0 pr-md-3 o_wevent_online_page_aside o_wesponsor_exhibitor_aside %s' % ('col-md-3 col-lg-2' if option_widescreen else 'col-md-4 col-lg-3')">
<div t-att-class="'col-12 pl-0 pr-0 o_wevent_online_page_aside o_wesponsor_exhibitor_aside %s' % ('col-md-3 col-lg-2' if option_widescreen else 'col-md-4 col-lg-3')">
<div class="bg-white o_wevent_online_page_aside_content">
<div class="d-flex align-items-center justify-content-between mx-2">
<span class="h5 mb-0 pt-0 pt-md-3 pb-0 pb-md-2">Other exhibitors</span>
@@ -162,9 +162,11 @@
<templates>
<t t-name="kanban-box">
<div class="oe_kanban_global_click overflow-hidden">
<div class="row my-auto">
<img t-att-src="kanban_image('event.sponsor', 'image_128', record.id.raw_value)" alt="Sponsor image" class="col-4"/>
<div class="col-8 d-flex flex-column">
<div class="d-flex align-items-center">
<div class="w-25 d-flex justify-content-center">
<img t-att-src="kanban_image('event.sponsor', 'image_128', record.id.raw_value)" class="img-fluid" alt="Sponsor image"/>
</div>
<div class="w-75 d-flex flex-column ml-3">
<h1 class="o_kanban_record_title"><field name="name"/></h1>
<strong>Level: <field name="sponsor_type_id"/></strong>
<span class="text-muted"><field name="exhibitor_type"/></span>
@@ -135,10 +135,10 @@ class WebsiteEventMeetController(EventCommunityController):
)
def _event_meeting_room_page_get_values(self, event, meeting_room):
# search for meeting room list
# search for meeting room list. Set a limit to 6 because it is better than 5 or 7
meeting_rooms_other = request.env['event.meeting.room'].sudo().search([
('event_id', '=', event.id), ('id', '!=', meeting_room.id), ('is_published', '=', True),
])
], limit=6)
if not request.env.user.has_group("event.group_event_manager"):
# only the event manager can see meeting rooms which are full
@@ -114,7 +114,7 @@
t-att-data-meeting-room-id="meeting_room.id"
t-att-data-open-room="opened"
t-att-data-is-event-manager="int(is_event_user)"
t-attf-class="card o_wevent_meeting_room_card w-100 my-2 bg-light d-block text-decoration-none"
t-attf-class="card o_wevent_meeting_room_card w-100 my-2 bg-light d-block text-decoration-none rounded-0"
t-att-href="meeting_room_href"
t-att-data-toggle="meeting_room_data_toggle"
t-att-data-target="meeting_room_data_target">
@@ -81,11 +81,12 @@
</div>
<!-- ROOM DESCRIPTION -->
<div class="mx-3">
<span class="h5 d-inline-block mt-3 mb-1" t-esc="meeting_room.name"/>
<br/>
<span class="text-muted">A chat among <span class="font-weight-bold" t-esc="meeting_room.target_audience"/></span>
<div class="h5 my-3" t-esc="meeting_room.name"/>
<div t-if="meeting_room.room_participant_count > 0" class="text-muted mb-3">
A chat among <t t-esc="meeting_room.room_participant_count"/> <span class="font-weight-bold" t-esc="meeting_room.target_audience"/>
</div>
</div>
<hr class="mt-2 mb-0"/>
<hr class="my-0"/>
<div t-field="meeting_room.summary" class="my-2 mx-3 oe_no_empty"/>
</div>
</template>
@@ -95,9 +96,9 @@
<!-- ============================================================ -->
<template id="meeting_room_aside" name="Meeting Room: Aside">
<div t-att-class="'col-12 pl-0 pr-0 pr-md-3 o_wevent_online_page_aside %s' % ('col-md-3 col-lg-2' if option_widescreen else 'col-md-4 col-lg-3')">
<div t-att-class="'col-12 pl-0 pr-0 o_wevent_online_page_aside %s' % ('col-md-3 col-lg-2' if option_widescreen else 'col-md-4 col-lg-3')">
<div class="bg-white o_wevent_online_page_aside_content">
<div class="d-flex align-items-center justify-content-between mx-2 py-1">
<div class="d-flex align-items-center justify-content-between mx-2">
<span class="h5 mb-0 pt-0 pt-md-3 pb-0 pb-md-2">Other Rooms</span>
<a href="#collapse_meet_room_aside" data-toggle="collapse" class="d-lg-none p-2 text-decoration-none o_wevent_online_page_aside_collapse collapsed">
<i class="fa fa-chevron-down d-lg-none"/>
@@ -353,11 +353,11 @@ class EventTrackController(http.Controller):
@http.route("/event/track/toggle_reminder", type="json", auth="public", website=True)
def track_reminder_toggle(self, track_id, set_reminder_on):
""" Set a reminder a track for current visitor. Track visitor is created or updated
if it already exists. Exception made if un-wishlisting and no track_visitor
if it already exists. Exception made if un-favoriting and no track_visitor
record found (should not happen unless manually done).
:param boolean set_reminder_on:
If True, set as a wishlist, otherwise un-wishlist track;
If True, set as a favorite, otherwise un-favorite track;
If the track is a Key Track (wishlisted_by_default):
if set_reminder_on = False, blacklist the track_partner
otherwise, un-blacklist the track_partner
@@ -134,7 +134,7 @@ class Track(models.Model):
groups="event.group_event_user")
wishlisted_by_default = fields.Boolean(
string='Always Wishlisted',
help="""If set, the talk will be starred for each attendee registered to the event. The attendee won't be able to un-star this talk.""")
help="""If set, the talk will be set as favorite for each attendee registered to the event.""")
# Call to action
website_cta = fields.Boolean('Magic Button',
help="Display a Call to Action button to your Attendees while they watch your Track.")
@@ -21,7 +21,7 @@ class TrackVisitor(models.Model):
'event.track', string='Track',
index=True, required=True, ondelete='cascade')
is_wishlisted = fields.Boolean(string="Is Wishlisted")
is_blacklisted = fields.Boolean(string="Is reminder off", help="As key track cannot be un-wishlisted, this field store the partner choice to remove the reminder for key tracks.")
is_blacklisted = fields.Boolean(string="Is reminder off", help="As key track cannot be un-favorited, this field store the partner choice to remove the reminder for key tracks.")
@api.depends('visitor_id')
def _compute_partner_id(self):
@@ -1,7 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<!-- Add a shortcut to wishlist / talks after registration -->
<!-- Add a shortcut to favorites / tracks after registration -->
<template id="registration_complete" inherit_id="website_event.registration_complete">
<xpath expr="//div[hasclass('row')][last()]" position="after">
<div t-if="event.website_track" class="row mt-5 mb256">
@@ -43,7 +43,7 @@
</nav>
</template>
<!-- Option: Tracks display: optional wishlist -->
<!-- Option: Tracks display: optional favorites -->
<template id="agenda_topbar_wishlist"
inherit_id="website_event_track.agenda_topbar"
name="Allow Wishlists"
@@ -157,13 +157,13 @@
<div class="d-flex flex-column h-100">
<div class="d-flex justify-content-end flex-wrap-reverse align-items-center o_weagenda_track_badges">
<small t-if="track.is_track_live and not track.is_track_done and track.website_published"
class="mx-1 badge badge-danger">Live
class="mx-1 badge badge-danger rounded-sm">Live
</small>
<small t-if="not track.website_published and is_event_user and track.stage_id.is_accepted"
title="Unpublished"
class="ml-1 badge badge-danger o_wevent_online_badge_unpublished">Unpublished</small>
class="ml-1 badge badge-danger o_wevent_online_badge_unpublished rounded-sm">Unpublished</small>
<small t-if="not track.stage_id.is_accepted" title="Not Accepted"
class="ml-1 badge badge-danger o_wevent_online_badge_unpublished">Not Accepted</small>
class="ml-1 badge badge-danger o_wevent_online_badge_unpublished rounded-sm">Not Accepted</small>
<span t-if="option_track_wishlist">
<t t-call="website_event_track.track_widget_reminder">
<t t-set="reminder_light" t-value="True"/>
@@ -292,10 +292,10 @@
<template id="tracks_cards_track" name="Track Card">
<a t-att-href="'/event/%s/track/%s' % (slug(track.event_id), slug(track))" class="text-decoration-none">
<article t-att-class="'h-100 card border-0 shadow-sm o_wesession_track_card %s' % ('o_wesession_track_card_unpublished' if not track.is_published else '')"
<article t-att-class="'h-100 card rounded-0 border-0 shadow-sm o_wesession_track_card %s' % ('o_wesession_track_card_unpublished' if not track.is_published else '')"
itemscope="itemscope" itemtype="http://schema.org/Event">
<div class="h-100 row no-gutters">
<header class="overflow-hidden bg-secondary col-12 rounded-top">
<header class="overflow-hidden bg-secondary col-12">
<small t-if="not track.is_published" class="o_wesession_track_card_header_badge bg-danger">
<i class="fa fa-ban mr-2"/>Unpublished
</small>
@@ -362,7 +362,7 @@
<div class="d-flex align-items-center mb-3">
<span t-if="search_wishlist"
class="align-items-baseline border d-inline-flex pl-2 mt-3 rounded ml16 mb-2 bg-white">
<i class="fa fa-bell mr-2 text-muted"/> Wishlisted Talks
<i class="fa fa-bell mr-2 text-muted"/> Favorite Talks
<a t-att-href="'/event/%s/track?%s' % (slug(event), keep_query('*', search_wishlist=''))"
class="btn border-0 py-1">
&#215;
@@ -7,7 +7,7 @@
<field name="domain">[('event_track_wishlisted_ids', 'in', [active_id])]</field>
<field name="help" type="html">
<p class="o_view_nocontent_smiling_face">
Wait for visitors to wishlist your tracks
Wait for visitors to add this track to their list of favorites
</p>
</field>
</record>
@@ -292,7 +292,7 @@
<field name="domain">[('wishlist_visitor_ids', 'in', [active_id])]</field>
<field name="help" type="html">
<p class="o_view_nocontent_empty_folder">
No track wishlisted by this visitor
No track favorited by this visitor
</p>
</field>
</record>