From b5ffca3dd724a014c0b1f316d9bc15d6fc05dda0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thibault=20Delavall=C3=A9e?= Date: Mon, 16 Nov 2020 14:57:14 +0000 Subject: [PATCH] [REF] website_event(_exhibitor): split and reorganize css PURPOSE Purpose of this task is to allow to use and display sponsors on an Event front page without using tracks. Moreover online and chat capabilities should be part of a sponsor feature, located within website_event_exhibitor module. SPECIFICATIONS Purpose of this commit is simply to try to reorganize css currently splitted in two files without any real clear difference between those files. We now have 3 files: a common for all event-related webpages, a file for event list view (displaying events in frontend) and event page view (display a sepcific event details in frontend). Sponsor specific CSS is moved into website_event_exhibitor so that it contains its own specific CSS LINKS Task ID-2326433 COM PR odoo/odoo#61781 ENT pr odoo/enterprise#14752 UPG PR odoo/upgrade#19311 --- ...lates.scss => event_templates_common.scss} | 193 +++----------- .../static/src/scss/event_templates_list.scss | 112 ++++++++ .../static/src/scss/event_templates_page.scss | 152 +++++++++++ .../static/src/scss/website_event.scss | 252 ------------------ addons/website_event/views/assets.xml | 5 +- .../website_event_exhibitor/__manifest__.py | 1 + .../src/scss/event_templates_sponsor.scss | 99 +++++++ .../website_event_exhibitor/views/assets.xml | 8 + 8 files changed, 418 insertions(+), 404 deletions(-) rename addons/website_event/static/src/scss/{website_event_templates.scss => event_templates_common.scss} (52%) create mode 100644 addons/website_event/static/src/scss/event_templates_list.scss create mode 100644 addons/website_event/static/src/scss/event_templates_page.scss delete mode 100644 addons/website_event/static/src/scss/website_event.scss create mode 100644 addons/website_event_exhibitor/static/src/scss/event_templates_sponsor.scss create mode 100644 addons/website_event_exhibitor/views/assets.xml diff --git a/addons/website_event/static/src/scss/website_event_templates.scss b/addons/website_event/static/src/scss/event_templates_common.scss similarity index 52% rename from addons/website_event/static/src/scss/website_event_templates.scss rename to addons/website_event/static/src/scss/event_templates_common.scss index e33572a9fb0..a4184f34d60 100644 --- a/addons/website_event/static/src/scss/website_event_templates.scss +++ b/addons/website_event/static/src/scss/event_templates_common.scss @@ -1,5 +1,3 @@ -// Color tags according to assigned background color. - .o_wevent_index, .o_wevent_event { // Simple colored tags according to assigned background color @@ -49,6 +47,40 @@ } } + /* + * COMMON MENU STYLING + */ + + .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'); + } + } + } + /* * COMMON TO ALL ONLINE-* PAGES */ @@ -158,155 +190,16 @@ } } } +} - /* - * EVENT PAGE VIEW - */ +.o_wevent_badge { + padding: ($spacer * .5) $spacer; + border-radius: 10rem; + font-weight: $font-weight-normal; +} - .o_wevent_event .event_color_0 { - background-color: white; - color: #5a5a5a; - } - .o_wevent_event .event_color_1 { - background-color: #cccccc; - color: #424242; - } - .o_wevent_event .event_color_2 { - background-color: #ffc7c7; - color: #7a3737; - } - .o_wevent_event .event_color_3 { - background-color: #fff1c7; - color: #756832; - } - .o_wevent_event .event_color_4 { - background-color: #e3ffc7; - color: #5d6937; - } - .o_wevent_event .event_color_5 { - background-color: #c7ffd5; - color: #1a7759; - } - .o_wevent_event .event_color_6 { - background-color: #c7ffff; - color: #1a5d83; - } - .o_wevent_event .event_color_7 { - background-color: #c7d5ff; - color: #3b3e75; - } - .o_wevent_event .event_color_8 { - background-color: #e3c7ff; - color: #4c3668; - } - .o_wevent_event .event_color_9 { - background-color: #ffc7f1; - color: #6d2c70; - } - - /* - * SPONSORS - */ - - // 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; - } - - .o_wevent_event .o_wevent_sponsor { - position: relative; - display: inline-block; - overflow: hidden; - } - - .o_wevent_event .o_ribbon { - font: 12px Sans-Serif; - color: #404040; - padding-top: 2px; - padding-bottom: 2px; - -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); - box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); - } - - .o_wevent_event .ribbon_Gold { - background-color: #FDE21B; - background-image: -webkit-gradient(linear, left top, left bottom, from(#E9CE0C), to(#FDE21B)); - background-image: -webkit-linear-gradient(top, #E9CE0C, #FDE21B); - background-image: -moz-linear-gradient(top, #E9CE0C, #FDE21B); - background-image: -ms-linear-gradient(top, #E9CE0C, #FDE21B); - background-image: -o-linear-gradient(top, #E9CE0C, #FDE21B); - } - - .o_wevent_event .ribbon_Silver { - background-color: #CCCCCC; - background-image: -webkit-gradient(linear, left top, left bottom, from(#BBBBBB), to(#CCCCCC)); - background-image: -webkit-linear-gradient(top, #BBBBBB, #CCCCCC); - background-image: -moz-linear-gradient(top, #BBBBBB, #CCCCCC); - background-image: -ms-linear-gradient(top, #BBBBBB, #CCCCCC); - background-image: -o-linear-gradient(top, #BBBBBB, #CCCCCC); - } - - .o_wevent_event .ribbon_Bronze { - background-color: #DB9141; - background-image: -webkit-gradient(linear, left top, left bottom, from(#C2792A), to(#DB9141)); - background-image: -webkit-linear-gradient(top, #C2792A, #DB9141); - background-image: -moz-linear-gradient(top, #C2792A, #DB9141); - background-image: -ms-linear-gradient(top, #C2792A, #DB9141); - background-image: -o-linear-gradient(top, #C2792A, #DB9141); - } - - /* - * 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; - } +.modal-open { + > .modal-backdrop { + z-index: $zindex-dropdown - 1; } } diff --git a/addons/website_event/static/src/scss/event_templates_list.scss b/addons/website_event/static/src/scss/event_templates_list.scss new file mode 100644 index 00000000000..54a5002ad7f --- /dev/null +++ b/addons/website_event/static/src/scss/event_templates_list.scss @@ -0,0 +1,112 @@ +.o_wevent_social_link { + $o_link_size: 3em; + display: inline-block; + @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'); + } +} + +// 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%; + } +} diff --git a/addons/website_event/static/src/scss/event_templates_page.scss b/addons/website_event/static/src/scss/event_templates_page.scss new file mode 100644 index 00000000000..abc2e5a6289 --- /dev/null +++ b/addons/website_event/static/src/scss/event_templates_page.scss @@ -0,0 +1,152 @@ +.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; + } + } + } +} + +/* + * EVENT PAGE VIEW + */ + +.o_wevent_event .event_color_0 { + background-color: white; + color: #5a5a5a; +} +.o_wevent_event .event_color_1 { + background-color: #cccccc; + color: #424242; +} +.o_wevent_event .event_color_2 { + background-color: #ffc7c7; + color: #7a3737; +} +.o_wevent_event .event_color_3 { + background-color: #fff1c7; + color: #756832; +} +.o_wevent_event .event_color_4 { + background-color: #e3ffc7; + color: #5d6937; +} +.o_wevent_event .event_color_5 { + background-color: #c7ffd5; + color: #1a7759; +} +.o_wevent_event .event_color_6 { + background-color: #c7ffff; + color: #1a5d83; +} +.o_wevent_event .event_color_7 { + background-color: #c7d5ff; + color: #3b3e75; +} +.o_wevent_event .event_color_8 { + background-color: #e3c7ff; + color: #4c3668; +} +.o_wevent_event .event_color_9 { + background-color: #ffc7f1; + color: #6d2c70; +} + +/* + * SPONSORS + */ + +// 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; +} diff --git a/addons/website_event/static/src/scss/website_event.scss b/addons/website_event/static/src/scss/website_event.scss deleted file mode 100644 index 48b2342b806..00000000000 --- a/addons/website_event/static/src/scss/website_event.scss +++ /dev/null @@ -1,252 +0,0 @@ -.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-block; - @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/views/assets.xml b/addons/website_event/views/assets.xml index cbf9e23a6bf..508d915038f 100644 --- a/addons/website_event/views/assets.xml +++ b/addons/website_event/views/assets.xml @@ -9,8 +9,9 @@