[FIX] website_event_track_online: make agenda card more mobile-friendly

SPECIFICATIONS

Currently agenda does not display well on mobile. This commit improves display
of card in order to have a cleaner display.

When displaying tags, track name, reminder, speaker name: ensure that mobile
uses more vertical space than horizontal one, leading to a better result.

Fix: remove fa-user if no speaker on agenda card

LINKS

Coming from internal feedback while deploying online support
Task ID-2314778
PR #55634

X-original-commit: d8b35ece9e3627953700c281057fbf09f973cdd0
This commit is contained in:
David Beguin
2020-08-14 12:06:10 +00:00
committed by Thibault Delavallée
parent 6382b00a70
commit 07f2eab889
2 changed files with 26 additions and 20 deletions
@@ -71,7 +71,7 @@
background-color: #d3d3d36e;
}
th:not(.active), td.active {
width: 150px;
width: 100px;
}
th.position-sticky {
left: 0;
@@ -93,6 +93,10 @@
}
.badge {
height: fit-content;
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
&.invisible {
visibility: visible !important;
@@ -150,24 +150,19 @@
<template id="agenda_main_track" name="Track Agenda: Track">
<div class="d-flex flex-column h-100">
<div class="d-flex justify-content-between align-items-center">
<div class="text-muted">
<small t-if="track.partner_id"><i class="fa fa-user mr-2"/><t t-esc="track.partner_id.sudo().name"/></small>
<small t-if="not track.partner_id"><i class="fa fa-user mr-2"/><t t-esc="track.partner_name"/></small>
</div>
<div class="d-flex o_weagenda_track_badges">
<small t-if="not track.website_published and user_event_manager and track.stage_id.is_accepted"
class="ml-1 badge badge-danger o_wevent_online_badge_unpublished">Unpublished</small>
<small t-if="not track.stage_id.is_accepted"
class="ml-1 badge badge-danger o_wevent_online_badge_unpublished">Not Accepted</small>
<span t-if="option_track_wishlist">
<t t-call="website_event_track_online.track_widget_reminder">
<t t-set="reminder_light" t-value="True"/>
<t t-set="reminder_small" t-value="True"/>
<t t-set="light_theme" t-value="True"/>
</t>
</span>
</div>
<div class="d-flex justify-content-end flex-wrap-reverse o_weagenda_track_badges">
<small t-if="not track.website_published and user_event_manager and track.stage_id.is_accepted"
title="Unpublished"
class="ml-1 badge badge-danger o_wevent_online_badge_unpublished">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>
<span t-if="option_track_wishlist">
<t t-call="website_event_track_online.track_widget_reminder">
<t t-set="reminder_light" t-value="True"/>
<t t-set="reminder_small" t-value="True"/>
<t t-set="light_theme" t-value="False"/>
</t>
</span>
</div>
<div class="o_we_agenda_card_content d-flex flex-column justify-content-center my-1">
@@ -178,7 +173,7 @@
</div>
<div class="d-flex justify-content-center flex-wrap">
<t t-foreach="track.tag_ids" t-as="tag">
<span t-if="tag.color"
<span t-if="tag.color" t-att-title="tag.name"
t-attf-class="mr-1 mt-1 badge #{'o_tag_color_'+str(tag.color)}" t-esc="tag.name"
t-attf-onclick="
var value = '#{tag.name}' ;
@@ -190,6 +185,13 @@
</t>
</div>
</div>
<div>
<div class="text-muted text-right">
<small t-if="track.partner_id or track.partner_name">
<i class="fa fa-user mr-2"/><t t-esc="track.partner_id.sudo().name or track.partner_name"/></small>
</div>
</div>
</div>
</template>