initial commit 2

3 files changed, 368 insertions, 0 deletions

diff --git a/addons/website_event_track/static/src/scss/event_track_templates.scss b/addons/website_event_track/static/src/scss/event_track_templates.scss
new file mode 100644
index 00000000..6338bdec
--- /dev/null
+++ b/addons/website_event_track/static/src/scss/event_track_templates.scss
@@ -0,0 +1,244 @@
+// small hack to hide sponsors on specific views
+.o_wevent_hide_sponsors .container.mt32.mb16.d-none.d-md-block.d-print-none {
+    // Not a very accurate way to target the 'sponsors' block -> improve in master
+    display: none !important;
+}
+
+/*
+ * EVENT TOOL: REMINDER WIDGET
+ */
+.o_wevent_event .o_wetrack_js_reminder {
+    // Icon only
+    &.btn-link {
+        padding: 0;
+    }
+
+    // Ensure width for size coherency
+    &:not(.btn-link) {
+        min-width: 100px;
+    }
+
+    i {
+        &.fa-bell {
+            color: gold;
+        }
+        &.fa-bell-o {
+            color: black;
+        }
+    }
+}
+
+
+/*
+ * AGENDA
+ */
+.o_we_online_agenda {
+    overflow-x: auto;
+
+    table {
+        border-collapse: separate;
+        border-spacing: 0em 0em;
+        tr {
+            height: 15px;
+            line-height: 1em;
+            &.active {
+                td.active {
+                    padding: 0em 0.5em;
+                    font-size: smaller;
+                    border-top: 1px solid lightgrey;
+                }
+            }
+        }
+        th.active, td:not(.active) {
+            background-color: rgba(211, 211, 211, 0.1);
+            border: 0px;
+            border-right: 1em solid white;
+            vertical-align: middle;
+            span {
+                word-break: break-word;
+            }
+        }
+        th:not(.active), td.active {
+            width: 100px;
+        }
+        th.position-sticky {
+            left: 0;
+        }
+        td {
+            border: 0px;
+
+            @for $size from 1 through 20 {
+                @if #{$size} != 1 {
+                    &.o_location_size_#{$size} {
+                        width: calc(100% / (#{$size} - 1));
+                        min-width: 150px;
+                    }
+                } @else {
+                    width: calc(100%);
+                }
+            }
+
+            &.active {
+                z-index: 1;
+                position: sticky;
+                left: 0;
+                min-width: 100px;
+                background-color: white;
+            }
+            div.o_we_agenda_card_content {
+                height: 100%;
+                span {
+                    cursor: pointer;
+                }
+                .o_we_agenda_card_title, small {
+                    word-break: break-word;
+                }
+            }
+            .badge {
+                height: fit-content;
+                max-width: 100%;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: xx-small;
+                padding: 0.2em 0.5em;
+                border-radius: 1em;
+                line-height: 10px;
+            }
+            &.invisible {
+                visibility: visible !important;
+                opacity: 0.3;
+            }
+            &.o_we_agenda_time_slot_main, &.o_we_agenda_time_slot_half {
+                padding: 0;
+                position: relative;
+                > div {
+                    position: absolute;
+                    top: 0;
+                    width: 100%;
+                }
+            }
+            &.o_we_agenda_time_slot_main > div {
+                padding: 0.3em;
+                border-top: 1px solid lightgrey;
+            }
+            &.o_we_agenda_time_slot_half > div {
+                padding: 0.3em;
+                border-top: 1px dashed lightgrey;
+            }
+            &.event_track {
+                position: relative;
+                padding: 0;
+                &::before {
+                    content: "";
+                    display: block;
+                    width: 100%;
+                    position: absolute;
+                    top: 0;
+                    border-top: 1px solid lightgrey;
+                }
+                > div {
+                    padding: 0.3em;
+                }
+
+            }
+            // Remove me in master
+            &.event_color_0 {
+                background-color: rgba(211, 211, 211, 0.5);
+            }
+            &.event_color_1 {
+                background-color: rgba(240, 96, 80, 0.2);
+            }
+            &.event_color_2 {
+                background-color: rgba(244, 164, 96, 0.2);
+            }
+            &.event_color_3 {
+                background-color: rgba(247, 205, 31, 0.2);
+            }
+            &.event_color_4 {
+                background-color: rgba(108,193,237,0.2);
+            }
+            &.event_color_5 {
+                background-color: rgba(129,73,104,0.2);
+            }
+            &.event_color_6 {
+                background-color: rgba(235,126,127,0.2);
+            }
+            &.event_color_7 {
+                background-color: rgba(44,131,151,0.2);
+            }
+            &.event_color_8 {
+                background-color: rgba(71,85,119,0.2);
+            }
+            &.event_color_9 {
+                background-color: rgba(214,20,95,0.2);
+            }
+            &.event_color_10 {
+                background-color: rgba(48,195,129,0.2);
+            }
+            &.event_color_11 {
+                background-color: rgba(147,101,184,0.2);
+            }
+        }
+    }
+}
+
+/*
+ * EVENT TOOL: SPONSOR WIDGET
+ */
+.o_wevent_event .o_wevent_sponsor_card {
+    position: relative;
+    width: 100px;
+    height: 100px;
+    border: 1px solid $gray-200;
+    background-color: $white;
+    margin: 0 -1px -1px 0;
+
+    .ribbon-wrapper {
+        width: 50px;
+        height: 50px;
+    }
+
+    .ribbon {
+        font: bold 10px Sans-Serif;
+        padding: 2px 0;
+        top: 10px;
+        width: 70px;
+        background-image: none; // not needed if colors for ribbons (Gold,Silver,Bronze) is removed in website_event_track.css
+
+        &.ribbon_Gold {
+            background-color: #e3aa24;
+            color:$white;
+        }
+
+        &.ribbon_Silver {
+            background-color: #adb5bd;
+            color: $white;
+        }
+
+        &.ribbon_Bronze {
+            background-color: #c7632a;
+            color: $white;
+        }
+    }
+
+    &:before {
+        content: "";
+        display: block;
+        @include o-position-absolute(0,0,0,0);
+        background-color: $black;
+        opacity: 0;
+        transition: opacity .3s;
+    }
+
+    &:hover:before {
+        opacity:.1;
+    }
+}
+
+/*
+ * EVENT TOOL: DATE
+ */
+.o_wevent_event .o_we_track_day_header > div > span.h1 {
+    font-size: xx-large;
+}
diff --git a/addons/website_event_track/static/src/scss/event_track_templates_online.scss b/addons/website_event_track/static/src/scss/event_track_templates_online.scss
new file mode 100644
index 00000000..170bc4c8
--- /dev/null
+++ b/addons/website_event_track/static/src/scss/event_track_templates_online.scss
@@ -0,0 +1,89 @@
+.o_wesession_index {
+
+    /*
+     * COMMON
+     */
+
+    .o_wesession_gradient {
+        background-image: linear-gradient(120deg, #875A7B, darken(#875A7B, 10%));
+        opacity: 0.8;
+    }
+
+    /*
+     * MAIN PAGE: LIST
+     */
+
+    // Track card
+    .o_wesession_track_card {
+        .card-body {
+            padding: 1rem;
+        }
+
+        .card-footer {
+            padding: 0.75rem 1rem;
+        }
+
+        .o_wesession_track_card_header_badge {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            padding: $card-spacer-y $card-spacer-x;
+            text-align: right;
+        }
+        &.o_wesession_track_card_unpublished {
+            opacity: 0.8;
+        }
+    }
+
+    /*
+     * TRACK PAGE: VIEW
+     */
+
+    .o_wevent_online_page_container {
+        // Main panel: current track
+        .o_wesession_track_main {
+            // Force side panel min-width to account for potential Youtube chat
+            // And adapt main panel max-width accordingly.
+            @include media-breakpoint-up(md) {
+                max-width: calc(100% - 22rem);
+            }
+
+            @media screen and (min-width: 1900px) {
+                // return to bootstrap value for col-lg-9 / 10 breakpoint if screen is big enough
+                &.col-lg-9 {
+                    max-width: 75%;
+                }
+
+                &.col-lg-10 {
+                    max-width: 83.33333333%;
+                }
+            }
+        }
+
+        // Left panel: other tracks
+        .o_wesession_track_aside {
+            // Force side panel min-width to account for potential Youtube chat
+            @include media-breakpoint-up(md) {
+                min-width: 22rem;
+            }
+
+            @media screen and (min-width: 1900px) {
+                min-width: auto;
+            }
+
+            // Navigation: keel layout simple
+            .o_wesession_track_aside_nav {
+                .nav-link {
+                    background-color: transparent;
+                    border: 0;
+                    color: $gray-600;
+
+                    &.active {
+                        color: $gray-800;
+                        font-weight: 500;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/addons/website_event_track/static/src/scss/pwa_frontend.scss b/addons/website_event_track/static/src/scss/pwa_frontend.scss
new file mode 100644
index 00000000..f1328902
--- /dev/null
+++ b/addons/website_event_track/static/src/scss/pwa_frontend.scss
@@ -0,0 +1,35 @@
+@media all and (display-mode: standalone) {
+    #wrapwrap.event {
+        #top,
+        #bottom {
+            display: none;
+        }
+    }
+}
+
+#wrapwrap.event {
+    .o_pwa_install_banner {
+        position: fixed;
+        display: flex;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        margin: 0;
+        justify-content: space-between;
+        align-items: center;
+        background-color: rgba(255, 255, 255, 1);
+        border-top: 1px solid $gray-200;
+        box-shadow: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+        font-size: 1rem;
+        z-index: $zindex-tooltip;
+
+        .o_btn_close {
+            margin-left: 0;
+            margin-right: auto;
+        }
+
+        .o_btn_install {
+            margin-left: auto;
+        }
+    }
+}