From a0892ad39e27eba2956c7d59b370e396d98d80e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thibault=20Delavall=C3=A9e?= <tde@odoo.com>
Date: Fri, 17 Jul 2020 16:08:16 +0000
Subject: [PATCH] [IMP] website_event_online: add some CSS tools / fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

RATIONALE

Events are sometimes held online, gathering a community. In this merge we
improve Event application to better support full-online events with improved
tracks, wishlists, chat rooms, ...

SPECIFICATIONS

Add some common CSS to be used in several new modules that will use a "aside
panel / main content" like display. This will be used for

  * exhibitor: display exhibitors list (cards) / page view (main content of
    exhibitor with jitsi + suggestions on left);
  * tracks: display track list (cards + list) / page view (main content of
    track, with youtube and/or quiz + suggestions on left);
  * community: display room list (cards) / page view (main content of room
    with jitsi + suggestions on left);

Incoming modules will soon use this SCSS.

LINKS

Community PR #53540
Enterprise PR odoo/enterprise#11384

Task ID-2252655 (Main Online Event task)
Task ID-2283796 (Event B2Basics / Registration Flow)
Task ID-2299857 (Event Design Review)
Task ID-2284043 (Visitor-based track wishlist)
Task ID-2283738 (Sponsors -> Exhibitors upgrade)
Task ID-2283735 (Talks -> Session upgrade)
Task ID-2283742 (Community gathering on chat rooms)

Co-Authored-By: Aurélien Warnon <awa@odoo.com>
Co-Authored-By: David Beguin <dbe@odoo.com>
Co-Authored-By: Thibault Delavallée <tde@odoo.com>
---
 .../src/scss/website_event_templates.scss     | 79 +++++++++++++++++++
 1 file changed, 79 insertions(+)

diff --git a/addons/website_event_online/static/src/scss/website_event_templates.scss b/addons/website_event_online/static/src/scss/website_event_templates.scss
index 55e714cce79..e0bef5a6c54 100644
--- a/addons/website_event_online/static/src/scss/website_event_templates.scss
+++ b/addons/website_event_online/static/src/scss/website_event_templates.scss
@@ -2,6 +2,14 @@
 
 .o_wevent_index, .o_wevent_event {
 
+    // Text Ellipsis for Event title in mobile mode
+    nav > div > a.navbar-brand {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        max-width: calc(100% - 80px);
+    }
+
     // Simple colored tags according to assigned background color
     @for $size from 1 through length($o-colors) {
         .o_tag_color_#{$size - 1} {
@@ -48,4 +56,75 @@
             }
         }
     }
+
+    /*
+     * COMMON TO ALL ONLINE-* PAGES
+     */
+
+    .o_wevent_online {
+        // unpublished badge: put opacity to distinguish form other badges
+        .o_wevent_online_badge_unpublished{
+            opacity: 0.4;
+        }
+
+        &.o_wevent_online_bg {
+            @if (color('body') == $o-portal-default-body-bg) {
+                @extend .bg-100;
+            }
+        }
+
+        .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 {
+                border: 1px solid $border-color;
+
+                @include media-breakpoint-up(md) {
+                    border-top-width: 0;
+                }
+
+                .o_wevent_online_page_avatar {
+                    min-width: 64px;
+
+                    img {
+                        max-width: 96px;
+                    }
+                }
+            }
+
+            // Left panel
+            .o_wevent_online_page_aside {
+
+                // Left panel: content display
+                .o_wevent_online_page_aside_content {
+                    border: 1px solid $border-color;
+
+                    @include media-breakpoint-up(md) {
+                        border-top-width: 0;
+                    }
+
+                    li:not(.nav-item) {
+                        border-bottom: 1px solid $border-color;
+                        &:first-child {
+                            border-top: 1px solid $border-color;
+                        }
+                        &:last-child {
+                            border-bottom: 0px;
+                        }
+                    }
+
+                    .o_wevent_online_page_aside_collapse:not(.collapsed) {
+                        transform: rotate(180deg);
+                    }
+                }
+            }
+        }
+    }
 }