From 4a890e1f92a665dd53f17ee57b4e7792c33da7db Mon Sep 17 00:00:00 2001 From: "Morgane (morm)" Date: Tue, 24 Oct 2023 16:08:40 +0200 Subject: [PATCH] [IMP] website_event: frontend redesign This commit improves the overall design of all the views in the Frontend side of the module Event. The design was outdated and was not consistent between the different pages. task-3083658 List of changes: - events: cleaning of scss, filters consistency and responsive (with off-canvas). - submenu: design and responsive behavior (dropdown) - registration page : overall design and the ticket list is inside a modal, to help with cases like having a lot of tickets. To be improved, on a separate page instead of a modal. - talks and agenda: design, cleaning of scss, filters consistency and responsive (with off-canvas). - sponsor template: minor design modification - exhibitors: design, cleaning of scss, filters consistency and responsive (with off-canvas). - location: minor design modification to be consistent with others pages, but need improvement in the near future. - meet: design, cleaning of scss - booth selection: overall design Part-of: odoo/odoo#137729 --- .../data/event_booth_category_data.xml | 57 +- .../src/js/tours/wevent_performance_tour.js | 3 + .../src/js/tours/wevent_register_tour.js | 17 +- addons/website_event/data/event_demo.xml | 16 +- .../src/js/website_event_ticket_details.js | 19 - .../src/scss/event_templates_common.scss | 118 +--- .../static/src/scss/event_templates_list.scss | 40 +- .../static/src/scss/event_templates_page.scss | 38 +- .../static/tests/tours/tickets_questions.js | 10 +- .../views/event_templates_list.xml | 208 ++++--- .../views/event_templates_page.xml | 113 ++-- .../views/event_templates_page_misc.xml | 4 +- .../event_templates_page_registration.xml | 508 +++++++++--------- .../views/event_templates_widgets.xml | 4 +- .../website_event/views/snippets/s_events.xml | 4 +- .../static/src/scss/website_event_booth.scss | 102 ++-- .../event_booth_registration_templates.xml | 23 +- .../event_booth_registration_templates.xml | 6 +- .../views/event_booth_templates.xml | 102 ++-- .../tours/website_event_booth_exhibitor.js | 2 +- .../event_booth_registration_templates.xml | 2 +- .../views/event_booth_templates.xml | 24 +- .../exhibitor_connect_closed_dialog.xml | 2 +- .../static/src/js/event_sponsor_search.js | 6 + .../src/scss/event_exhibitor_templates.scss | 8 +- .../src/scss/event_templates_sponsor.scss | 3 - .../views/event_exhibitor_templates_list.xml | 158 ++++-- .../views/event_exhibitor_templates_page.xml | 38 +- .../views/event_templates_sponsor.xml | 12 +- .../views/snippets.xml | 2 +- .../static/src/scss/event_meet_templates.scss | 4 - .../views/event_meet_templates_list.xml | 85 +-- .../views/event_meet_templates_page.xml | 33 +- .../views/event_meet_templates.xml | 28 +- .../helpers/WebsiteEventSaleTourMethods.js | 8 + .../static/tests/tours/website_event_sale.js | 4 + .../tours/website_event_sale_last_ticket.js | 6 +- .../tours/website_event_sale_pricelists.js | 11 +- .../views/website_event_templates.xml | 24 +- .../views/website_sale_templates.xml | 2 +- .../static/src/js/event_track_reminder.js | 11 - .../src/scss/event_track_templates.scss | 16 +- .../scss/event_track_templates_online.scss | 21 +- .../views/event_track_templates_agenda.xml | 48 +- .../views/event_track_templates_list.xml | 321 ++++++----- .../views/event_track_templates_page.xml | 95 ++-- .../views/event_track_templates_proposal.xml | 104 ++-- .../views/event_track_templates_reminder.xml | 13 +- .../views/event_track_templates_list.xml | 8 +- .../static/src/scss/event_quiz.scss | 1 - .../views/event_leaderboard_templates.xml | 6 +- .../views/event_track_templates_page.xml | 2 +- 52 files changed, 1249 insertions(+), 1251 deletions(-) diff --git a/addons/event_booth/data/event_booth_category_data.xml b/addons/event_booth/data/event_booth_category_data.xml index fc9c1bcb159..d20865f3b2a 100644 --- a/addons/event_booth/data/event_booth_category_data.xml +++ b/addons/event_booth/data/event_booth_category_data.xml @@ -6,28 +6,23 @@ 1 -
-
-

Standard

-
-
    -
  • - 1 Branded Booth -
    • -
  • - 4m² -
    • -
  • - 46" display screen -
    • -
  • - 1 desk -
    • -
  • - Logo & link on website -
    • -
-
+
    +
  • + 1 Branded Booth +
    • +
  • + 4m² +
    • +
  • + 46" display screen +
    • +
  • + 1 desk +
    • +
  • + Logo & link on website +
    • +
@@ -36,16 +31,12 @@ 2 -
-
-

Premium

-
  • 1 Branded Booth
    • -
  • - 4m² +
  • + 4m²
  • 46" display screen @@ -63,7 +54,6 @@ 10 + 1 passes
-
@@ -72,16 +62,12 @@ 3 -
-
-

VIP

-
  • 2 Branded Booth
    • -
  • - 8m² +
  • + 8m²
  • 2 x 46" display screens @@ -99,7 +85,6 @@ 10 + 1 passes
-
diff --git a/addons/test_event_full/static/src/js/tours/wevent_performance_tour.js b/addons/test_event_full/static/src/js/tours/wevent_performance_tour.js index 640688aa4da..e774ca96bfe 100644 --- a/addons/test_event_full/static/src/js/tours/wevent_performance_tour.js +++ b/addons/test_event_full/static/src/js/tours/wevent_performance_tour.js @@ -4,6 +4,9 @@ import { registry } from "@web/core/registry"; import wsTourUtils from '@website_sale/js/tours/tour_utils'; var registerSteps = [{ + content: "Open ticket modal", + trigger: 'button.btn-primary:contains("Register")', +}, { content: "Select 2 units of 'Ticket1' ticket type", trigger: '#o_wevent_tickets_collapse .row.o_wevent_ticket_selector[name="Ticket1"] select', run: 'text 2', diff --git a/addons/test_event_full/static/src/js/tours/wevent_register_tour.js b/addons/test_event_full/static/src/js/tours/wevent_register_tour.js index d5c3caf9a8b..c8ed49572d2 100644 --- a/addons/test_event_full/static/src/js/tours/wevent_register_tour.js +++ b/addons/test_event_full/static/src/js/tours/wevent_register_tour.js @@ -31,25 +31,23 @@ var discoverTalkSteps = function (talkName, fromList, reminderOn, toggleReminder steps = steps.concat([{ content: `Check Favorite for ${talkName} was already on`, trigger: 'div.o_wetrack_js_reminder i.fa-bell', - extra_trigger: 'span.o_wetrack_js_reminder_text:contains("Favorite On")', run: function () {}, // it's a check }]); } else { steps = steps.concat([{ content: `Check Favorite for ${talkName} was off`, - trigger: 'span.o_wetrack_js_reminder_text:contains("Set Favorite")', + trigger: 'div.o_wetrack_js_reminder i.fa-bell-o', run: function () {}, // it's a check }]); if (toggleReminder) { steps = steps.concat([{ content: "Set Favorite", - trigger: 'span.o_wetrack_js_reminder_text', + trigger: 'div.o_wetrack_js_reminder', run: 'click', }, { content: `Check Favorite for ${talkName} is now on`, trigger: 'div.o_wetrack_js_reminder i.fa-bell', - extra_trigger: 'span.o_wetrack_js_reminder_text:contains("Favorite On")', run: function () {}, // it's a check }]); } @@ -81,9 +79,12 @@ var discoverRoomSteps = function (roomName) { var registerSteps = [{ content: 'Go on Register', trigger: 'a.btn-primary:contains("Register")', +}, { + content: 'Open ticket modal', + trigger: 'button.btn-primary:contains("Register")', }, { content: "Select 2 units of 'Standard' ticket type", - trigger: '#o_wevent_tickets_collapse .row:has(.o_wevent_registration_multi_select:contains("Free")) select', + trigger: '.o_wevent_ticket_selector select', run: 'text 2', }, { content: "Click on 'Register' button", @@ -119,7 +120,7 @@ var registerSteps = [{ trigger: 'a:contains("register to your favorites talks now")', run: 'click', }, { - trigger: 'h1:contains("Book your talks")', + trigger: 'h4:contains("Book your talks")', run: function() {}, }]; @@ -139,7 +140,7 @@ var browseTalksSteps = [{ trigger: 'a:contains("Talks")', }, { content: 'Check we are on the talk list page', - trigger: 'h1:contains("Book your talks")', + trigger: 'h4:contains("Book your talks")', run: function () {} // check }]; @@ -148,7 +149,7 @@ var browseMeetSteps = [{ trigger: 'a:contains("Community")', }, { content: 'Check we are on the community page', - trigger: 'span:contains("Join a room")', + trigger: 'h3:contains("Join a room")', run: function () {} // check }]; diff --git a/addons/website_event/data/event_demo.xml b/addons/website_event/data/event_demo.xml index 0f12a338c79..94323558ec8 100644 --- a/addons/website_event/data/event_demo.xml +++ b/addons/website_event/data/event_demo.xml @@ -34,7 +34,7 @@

Every year we invite our community, partners and end-users to come and meet us! It's the ideal event to get together and present new features, roadmap of future versions, achievements of the software, workshops, training sessions, etc....

This event is also an opportunity to showcase our partners' case studies, methodology or developments. Be there and see directly from the source the features of the version 12!

-
+

This event and all the conferences are in English!

What's new?
@@ -51,11 +51,11 @@
  • Business Room - To discuss implementation methodologies, best sales practices, etc.
  • Workshop Room - Mainly for developers.
    • -
    +

    If you wish to make a presentation, please send your topic proposal as soon as possible for approval to Mr. Famke Jenssens at ngh (a) yourcompany (dot) com. The presentations should be, for example, a presentation of a community module, a case study, methodology feedback, technical, etc. Each presentation must be in English.

    For any additional information, please contact us at events@yourcompany.com.

    -
    +

    OpenElec Applications reserves the right to cancel, re-name or re-locate the event or change the dates on which it is held.

    @@ -79,7 +79,7 @@

    Around one hundred ballons will simultaneously take flight and turn the sky into a beautiful canvas of colours.

    This is the perfect place for spending a nice day with your family, we guarantee you will be leaving with beautiful everlasting memories!

    For any additional information, please contact us at events@yourcompany.com.

    -
    +

    We reserve the right to cancel, re-name or re-locate the event or change the dates on which it is held in case the weather fails us.

    The safety of our attendees and our aeronauts comes first!

    @@ -116,7 +116,7 @@

    For any additional information, please contact us at events@odoo.com

    -
    +
    SPEAKER
    @@ -148,7 +148,7 @@

    Bands like Bar Fighters, Led Slippers and Link Floyd will offer you the show of the century during our three day event.

    This is the perfect place for spending a nice time with your friends while listening to some of the most iconic rock songs of all times!

    For any additional information, please contact us at events@yourcompany.com.

    -
    +

    We reserve the right to cancel, re-name or re-locate the event or change the dates on which it is held in case the weather fails us.

    @@ -181,7 +181,7 @@ to chat with experienced players and trainers once the tournament is over!

    For any additional information, please contact us at events@yourcompany.com.

    -
    +

    We reserve the right to cancel, re-name or re-locate the event or change the dates on which it is held in case the weather fails us.

    @@ -215,7 +215,7 @@ Special discount codes will be handed out during the various streams, make sure to be there on time.

    For any additional information, please contact us at events@penwood.example.com.

    -
    +

    This event is fully online and FREE, if you have paid for tickets, you should get a refund.
    It will require a good Internet connection to get the best video quality.

    diff --git a/addons/website_event/static/src/js/website_event_ticket_details.js b/addons/website_event/static/src/js/website_event_ticket_details.js index b001141c1b9..9de1a28de4f 100644 --- a/addons/website_event/static/src/js/website_event_ticket_details.js +++ b/addons/website_event/static/src/js/website_event_ticket_details.js @@ -4,7 +4,6 @@ publicWidget.registry.ticketDetailsWidget = publicWidget.Widget.extend({ selector: '.o_wevent_js_ticket_details', events: { - 'click .o_wevent_registration_btn': '_onTicketDetailsClick', 'change .form-select': '_onTicketQuantityChange' }, start: function (){ @@ -30,24 +29,6 @@ //-------------------------------------------------------------------------- // Handlers //-------------------------------------------------------------------------- - - /** - * When the "Fold Tickets Details" option is active, this will be called each - * time the user expand or fold the tickets (o_wevent_registration_btn). This - * allows to show/hide elements depending on the folding state. - * - * @private - * @param {*} ev - */ - _onTicketDetailsClick: function (ev){ - ev.preventDefault(); - if (this.foldedByDefault){ - let $target = $(ev.currentTarget); - $target.toggleClass('btn-primary'); - $target.children().toggleClass('d-none'); - $target.siblings('.o_wevent_registration_title, .o_wevent_price_range').toggleClass('d-none'); - } - }, /** * @private */ diff --git a/addons/website_event/static/src/scss/event_templates_common.scss b/addons/website_event/static/src/scss/event_templates_common.scss index 3e448e20602..478a4104cef 100644 --- a/addons/website_event/static/src/scss/event_templates_common.scss +++ b/addons/website_event/static/src/scss/event_templates_common.scss @@ -4,21 +4,6 @@ $o-wevent-bg-color-light: mix($o-wevent-bg-color-base, #E9ECEF); $o-wevent-bg-color-dark: mix($o-wevent-bg-color-base, #24363a); $o-wevent-color: $body-color; -.o_wevent_theme_bg_base { - background-color: $o-wevent-bg-color-base !important; - color: $o-wevent-color; -} - -.o_wevent_theme_bg_light { - background-color: $o-wevent-bg-color-light !important; - color: $o-wevent-color; -} - -.o_wevent_theme_bg_dark { - background-color: $o-wevent-bg-color-dark !important; - color: $o-wevent-color; -} - .o_wevent_index, .o_wevent_event { // Simple colored tags according to assigned background color @@ -73,36 +58,12 @@ $o-wevent-color: $body-color; */ .o_wevent_index_topbar_filters { - .dropdown-toggle { - border: $border-width solid mix(map-get($theme-colors, 'primary'), map-get($grays, '400')); - @extend .o_wevent_theme_bg_light; - @include border-radius($dropdown-border-radius); - &:hover, &:focus { - border-color: map-get($theme-colors, 'primary'); - color: map-get($theme-colors, 'primary'); - text-decoration: none; - } - &:after { - margin-left: 1.2em; - } - .fa { - margin-right: .4em; - color: $o-wevent-color; - } - } .dropdown-menu { - margin-top: $navbar-padding-y; - min-width: 12rem; max-height: 250px; overflow-y: auto; - @extend .o_wevent_theme_bg_light; } } - .o_wevent_event_searchbar_form > input { - @extend .o_wevent_theme_bg_light; - } - /* * COMMON TO ALL ONLINE-* PAGES */ @@ -112,39 +73,35 @@ $o-wevent-color: $body-color; .o_wevent_online_badge_unpublished{ opacity: 0.4; } + .o_wesession_list_item{ + margin: 1rem 0; + border: 1px solid; + border-left: 10px solid; + } // background color-based for new styling - .event_color_1 { - background-color: rgba(240, 96, 80, 0.2); + @for $size from 2 through length($o-colors) { + .event_color_#{$size - 1} { + &.event_track{ + $-bg: adjust-color(nth($o-colors, $size), $lightness: 40%, $saturation: 15%); + @include o-print-color($-bg, background-color, bg-opacity); + > div{ + border-top: 3px solid adjust-color(nth($o-colors, $size), $lightness: 10%, $saturation: 15%); + } + } + &.o_wesession_list_item{ + border-color: adjust-color(nth($o-colors, $size), $lightness: 30%, $saturation: 15%); + background-color: unset; + } + } } - .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_color_0 { + background-color: unset; + &.event_track{ + border-top: 1px solid lighten($o-wevent-bg-color-base-contrast, 50%); + } + &.o_wesession_list_item{ + border-color: $o-wevent-bg-color-light; + } } .o_wevent_online_page_container { @@ -156,27 +113,6 @@ $o-wevent-color: $body-color; max-width: 96px; } } - - // Left panel - .o_wevent_online_page_aside { - @extend .o_wevent_theme_bg_base; - // Left panel: content display - .o_wevent_online_page_aside_content { - 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); - } - } - } } } diff --git a/addons/website_event/static/src/scss/event_templates_list.scss b/addons/website_event/static/src/scss/event_templates_list.scss index ddd907c7a78..be8c69c59f6 100644 --- a/addons/website_event/static/src/scss/event_templates_list.scss +++ b/addons/website_event/static/src/scss/event_templates_list.scss @@ -20,34 +20,19 @@ .o_wevent_index { // Events List .o_wevent_events_list { - header { - a { - transition: all .25s ease-in-out; - &:hover, &:focus { - transform: scale(1.05); - } - } - } - @include media-breakpoint-up(sm) { - #o_wevent_index_main_col article div.col { - min-width: 0; - } - } .opt_events_list_columns { - header { + .card-header { height: 200px; } } .opt_events_list_rows { - @include media-breakpoint-down(md) { - header { - height: 200px; - } + .card-header { + min-height: 130px; } } .o_wevent_badge_event { - @include o-position-absolute($top: 0, $left: 0); - @include border-start-radius(0); + @include o-position-absolute($top: 0, $right: 0); + @include border-end-radius(0); padding: ($spacer * .5) $card-spacer-x; transform: translateY(-50%); } @@ -74,18 +59,11 @@ font-weight: $font-weight-bold; text-transform: uppercase; } + &.left{ + left: $card-spacer-x; + } } - .o_wevent_participating, - .o_wevent_unpublished { - position: absolute; - bottom: 0; - width: 100%; - padding: $card-spacer-y $card-spacer-x; - text-align: right; - } - article { - background-color: $o-wevent-bg-color-base; - color: $o-wevent-color; + a { .card-body { background-color: $o-wevent-bg-color-base !important; color: $o-wevent-color; diff --git a/addons/website_event/static/src/scss/event_templates_page.scss b/addons/website_event/static/src/scss/event_templates_page.scss index 0da01fdaf3a..e86aeb075d3 100644 --- a/addons/website_event/static/src/scss/event_templates_page.scss +++ b/addons/website_event/static/src/scss/event_templates_page.scss @@ -1,5 +1,5 @@ .o_wevent_event { - min-height: calc(98vh - 70px); + min-height: calc(95vh - 70px); // Multi-line event title, even in mobile mode nav > div > a.navbar-brand { @@ -13,11 +13,15 @@ #o_wevent_event_submenu { li.nav-item { white-space: nowrap; + + a{ + padding: 0; + padding-right: 1rem; + } } } .o_wevent_event_title { - margin: 3rem 0; .o_wevent_event_name { font-weight: $display-font-weight; @@ -52,45 +56,17 @@ flex: 0 0 33%; } } - - .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; + color: white; .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; - } - } } } diff --git a/addons/website_event/static/tests/tours/tickets_questions.js b/addons/website_event/static/tests/tours/tickets_questions.js index 61fe72d108c..7a10b0ab2b9 100644 --- a/addons/website_event/static/tests/tours/tickets_questions.js +++ b/addons/website_event/static/tests/tours/tickets_questions.js @@ -7,17 +7,21 @@ registry.category("web_tour.tours").add('test_tickets_questions', { steps: () => [{ content: "Click on the Design Fair event", trigger: 'article:contains("Design Fair New York")', +}, { + content: "Click on Register modal tickets button", + trigger: 'button:contains("Register")', + run: 'click' }, { content: "Check Register button is disabled when no ticket selected", trigger: 'button:disabled:contains("Register")', isCheck: true, }, { content: "Select 2 'Free' tickets to buy", - trigger: 'div.row:contains("Free") select.form-select', + trigger: 'div.o_wevent_ticket_selector:contains("Free") select.form-select', run: 'text 2' }, { - content: "Click on Register tickets button", - trigger: 'button:contains("Register")', + content: "Click on Register (to fill tickets data) button", + trigger: 'div.modal-footer button:contains("Register")', run: 'click' }, { trigger: 'div:contains("Ticket #1").modal-body input[name*="name"]', diff --git a/addons/website_event/views/event_templates_list.xml b/addons/website_event/views/event_templates_list.xml index de2a5ed2063..e0b2275ec41 100644 --- a/addons/website_event/views/event_templates_list.xml +++ b/addons/website_event/views/event_templates_list.xml @@ -21,12 +21,10 @@
    -
    - -
    +
    -
    -
    +
    +
    @@ -49,15 +47,12 @@