initial commit 2

2 files changed, 415 insertions, 0 deletions

diff --git a/addons/website_event/static/src/scss/website_event.scss b/addons/website_event/static/src/scss/website_event.scss
new file mode 100644
index 00000000..4cb8bbb9
--- /dev/null
+++ b/addons/website_event/static/src/scss/website_event.scss
@@ -0,0 +1,254 @@
+.o_wevent_index_topbar_filters {
+    .dropdown-toggle {
+        border: $border-width solid gray('400');
+        @include o-bg-color(gray('white'), $with-extras: false);
+        @include border-radius($dropdown-border-radius);
+        @include hover-focus {
+            border-color: theme-color('primary');
+            color: theme-color('primary');
+            text-decoration: none;
+        }
+        &:after {
+            margin-left: 1.2em;
+        }
+        .fa {
+            margin-right: .4em;
+            color: theme-color('primary');
+        }
+    }
+    .dropdown-menu {
+        margin-top: $navbar-padding-y;
+        min-width: 12rem;
+    }
+    .dropdown-item  {
+        &.active .badge { // Invert badge display when the item is active
+            background-color: color-yiq(theme-color('primary'));
+            color: theme-color('primary');
+        }
+    }
+}
+
+.o_wevent_social_link {
+    $o_link_size: 3em;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    @include size($o_link_size);
+    margin: 0 ($spacer * .25) ($spacer * .5) ($spacer * .25);
+    line-height: $o_link_size;
+    background-color: gray('100');
+    border: $border-width solid $border-color;
+    border-radius: 50%;
+    text-align: center;
+    @include hover-focus {
+        background-color: gray('300');
+    }
+}
+
+.o_wevent_badge {
+    padding: ($spacer * .5) $spacer;
+    border-radius: 10rem;
+    font-weight: $font-weight-normal;
+}
+
+// Index
+.o_wevent_index {
+    // Events List
+    .o_wevent_events_list {
+        header {
+            a {
+                transition: all .25s ease-in-out;
+                @include hover-focus {
+                    transform: scale(1.05);
+                }
+            }
+        }
+        &.opt_event_list_cards_bg {
+            @if (color('body') == $o-portal-default-body-bg) {
+                @extend .bg-200;
+            }
+        }
+        .opt_events_list_columns {
+            header {
+                height: 200px;
+            }
+        }
+        .opt_events_list_rows {
+            @include media-breakpoint-down(sm) {
+                header {
+                    height: 200px;
+                }
+            }
+        }
+        .o_wevent_badge_event {
+            @include o-position-absolute($top: 0, $left: 0);
+            @include border-left-radius(0);
+            padding: ($spacer * .5) $card-spacer-x;
+            transform: translateY(-50%);
+        }
+        .o_wevent_event_date {
+            top: $card-spacer-x;
+            right: $card-spacer-x;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            @include size(4rem);
+            border-radius: 50%;
+            text-align: center;
+
+            .o_wevent_event_day {
+                font-size: 1.125rem;
+                font-weight: 300;
+                line-height: 1;
+            }
+            .o_wevent_event_month {
+                font-size: 0.75rem;
+                font-weight: $font-weight-bold;
+                text-transform: uppercase;
+            }
+        }
+        .o_wevent_participating,
+        .o_wevent_unpublished {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            padding: $card-spacer-y $card-spacer-x;
+            text-align: right;
+        }
+        .card-title {
+            color: $body-color;
+        }
+    }
+    .o_wevent_sidebar_title {
+        margin: 0 0 ($spacer * 1.5) 0;
+        border-bottom: $border-width solid $border-color;
+        padding: 0 0 ($spacer * .5) 0;
+        font-weight: $font-weight-bold;
+        text-transform: uppercase;
+    }
+    .o_wevent_sidebar_block {
+        margin: 0 0 ($spacer * 2.5) 0;
+    }
+    .o_wevent_sidebar_figure {
+        position: relative;
+
+        .figure-img {
+            margin-bottom: 0;
+        }
+        .figure-caption {
+            @include o-position-absolute($left: 0, $bottom: 0);
+            width: 100%;
+            padding: $spacer;
+            background-color: rgba($color: #000, $alpha: 0.5);
+            @include border-bottom-radius($border-radius);
+            color: #fff;
+        }
+    }
+    #o_wevent_index_main_col .form-inline {
+        width: 100%;
+    }
+}
+
+.o_wevent_event {
+    // Multi-line event title, even in mobile mode
+    nav > div > a.navbar-brand {
+        text-overflow: revert;
+        white-space: normal;
+        overflow: hidden;
+        max-width: calc(100% - 80px);
+    }
+
+    // Ensure menu labels are not split
+    #o_wevent_event_submenu {
+        li.nav-item {
+            white-space: nowrap;
+        }
+    }
+
+    .o_wevent_event_title {
+        margin: 3rem 0;
+
+        .o_wevent_event_name {
+            font-weight: $display4-weight;
+            line-height: $display-line-height;
+            @include font-size($display4-size);
+        }
+        .o_wevent_event_subtitle {
+            font-weight: $lead-font-weight;
+            @include font-size($lead-font-size);
+        }
+    }
+
+    .o_wevent_registration_single {
+        .o_wevent_nowrap {
+            white-space: nowrap;
+        }
+    }
+
+    .o_wevent_registration_btn {
+        flex: 0 0 100%;
+
+        &.collapsed {
+            flex: 0 0 33%;
+
+            .close {
+                display: none;
+            }
+        }
+        .close {
+            display: block;
+        }
+        &:not(.collapsed) {
+            box-shadow: none;
+            font-weight: $font-weight-bold;
+            text-transform: uppercase;
+            transition: none;
+        }
+    }
+
+    .o_wevent_sidebar_title {
+        margin-bottom: $spacer;
+        opacity: .5;
+        text-transform: uppercase;
+    }
+
+    .o_wevent_sidebar_block {
+        padding: $spacer * 3;
+        border-bottom: $border-width solid $border-color;
+
+        &:last-child {
+            border-bottom: 0;
+        }
+    }
+}
+
+.o_wevent_event {
+    .o_record_cover_container {
+        overflow: hidden;
+        z-index: 0;
+
+        .o_record_cover_component {
+            z-index: -1;
+        }
+        &.o_record_has_cover {
+            .o_record_cover_image {
+                background-attachment: fixed;
+
+                &::after {
+                    content: "";
+                    display: block;
+                    @include o-position-absolute(0,0,50%,0);
+                }
+            }
+            .o_wevent_event_title {
+                color: white;
+            }
+        }
+    }
+}
+
+.modal-open {
+    > .modal-backdrop {
+        z-index: $zindex-dropdown - 1;
+    }
+}
diff --git a/addons/website_event/static/src/scss/website_event_templates.scss b/addons/website_event/static/src/scss/website_event_templates.scss
new file mode 100644
index 00000000..49a9f8ae
--- /dev/null
+++ b/addons/website_event/static/src/scss/website_event_templates.scss
@@ -0,0 +1,161 @@
+// Color tags according to assigned background color.
+
+.o_wevent_index, .o_wevent_event {
+
+    // Simple colored tags according to assigned background color
+    @for $size from 1 through length($o-colors) {
+        .o_tag_color_#{$size - 1} {
+            @if $size == 1 {
+                & {
+                    background-color: white;
+                    color: nth($o-colors, $size);
+                    box-shadow: inset 0 0 0 2px nth($o-colors, $size);
+                }
+                &::after {
+                    background-color: nth($o-colors, $size);
+                }
+            } @else {
+                &, &::after {
+                    background-color: nth($o-colors, $size);
+                    color: $white;
+                }
+            }
+        }
+    }
+
+    // Complex colored tags according to assigned background color with hover effect
+    @for $size from 1 through length($o-colors) {
+        .o_tag_color_hovered_#{$size - 1} {
+            $background-color: white;
+            // no color selected
+            @if $size == 1 {
+                & {
+                    color: black;
+                    background-color: $background-color;
+                    box-shadow: inset 0 0 0 1px nth($o-colors, $size);
+                }
+            } @else {
+                $background-color: nth($o-colors, $size);
+                & {
+                    color: white;
+                    background-color: $background-color;
+                }
+            }
+            @at-root a#{&} {
+                &:hover {
+                    background-color: darken($background-color, 20%);
+                }
+            }
+        }
+    }
+
+    /*
+     * 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;
+            }
+        }
+
+        // background color-based for new styling
+        .event_color_0 {
+            // bg-100 background but DO NOT extend bg-100 as it messes with text-muted colors
+            background-color: #F8F9FA;
+        }
+        .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);
+        }
+
+        .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);
+                    }
+                }
+            }
+        }
+    }
+}