From 5b563549fa6d962f561678fdfc68f0fc5e8b52c8 Mon Sep 17 00:00:00 2001 From: qha-odoo Date: Wed, 16 Jan 2019 09:58:17 +0000 Subject: [PATCH] [IMP] website_event, *: refactor website events layouts * base, portal, website, website_event_sale, website_event_track - The previous event registration form was not clear on mobile - Review some layouts to match the new design general idea, using cards (see forum refactoring of https://github.com/odoo/odoo/pull/29235) - Use correct bootstrap components (like a menu instead of a breadcrumb on event pages) - Review options to be able to disable the left / right column and choose the exact options you want to appear in them task-1858034 closes odoo/odoo#30559 --- addons/portal/static/src/scss/portal.scss | 21 - .../static/src/scss/primary_variables.scss | 2 + addons/website/static/src/scss/website.scss | 17 + addons/website_event/data/event_demo.xml | 47 +- .../static/src/scss/website_event.scss | 13 + .../website_event/views/event_templates.xml | 635 ++++++++++-------- .../views/event_templates.xml | 3 +- .../views/event_track_templates.xml | 43 +- .../base/views/ir_qweb_widget_templates.xml | 4 +- 9 files changed, 427 insertions(+), 358 deletions(-) create mode 100644 addons/website_event/static/src/scss/website_event.scss diff --git a/addons/portal/static/src/scss/portal.scss b/addons/portal/static/src/scss/portal.scss index e3c11d8f26d..190a9c23fa9 100644 --- a/addons/portal/static/src/scss/portal.scss +++ b/addons/portal/static/src/scss/portal.scss @@ -145,9 +145,6 @@ ol ol ol ol ol ol ol { li > p { margin: 0; } -hr { - padding: 4px 0; -} // Bootstrap hacks %o-double-container-no-padding { @@ -211,24 +208,6 @@ img.o_we_custom_image { ::selection { background: rgba(150, 150, 220, 0.3); } -.oe_demo { - position: relative; - img { - width: 100%; - } - div { - @include o-position-absolute($left: 0, $bottom: 0); - background-color: rgba(0, 0, 0, 0.4); - opacity: 0.85; - width: 100%; - padding: 7px; - color: white; - font-weight: bold; - a { - color: white; - } - } -} .oe_search_box { padding-right: 23px; } diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss index 1eea604bcb8..835acc6b3f9 100644 --- a/addons/website/static/src/scss/primary_variables.scss +++ b/addons/website/static/src/scss/primary_variables.scss @@ -38,6 +38,8 @@ $o-social-colors: ( 'google-plus': #DD4B39, ); +$o-theme-figcaption-opacity: 0.6; + //------------------------------------------------------------------------------ // Fonts //------------------------------------------------------------------------------ diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss index 3b7091b0e3c..3c506db48ac 100644 --- a/addons/website/static/src/scss/website.scss +++ b/addons/website/static/src/scss/website.scss @@ -1058,6 +1058,23 @@ table.table_desc tr td { } } } +// Figure with special style +.o_figure_relative_layout { + position: relative; + + .figure-img { + margin-bottom: 0; + } + .figure-caption { + @include o-position-absolute(auto, 0, 0, 0); + @include o-bg-color(rgba(theme-color('dark'), $o-theme-figcaption-opacity)); + padding: $tooltip-padding-y $tooltip-padding-x; + font-weight: $font-weight-bold; + a { + color: inherit; + } + } +} @each $color, $value in $theme-colors { .bg-#{$color}-light { diff --git a/addons/website_event/data/event_demo.xml b/addons/website_event/data/event_demo.xml index e7d3c88ad3b..85b3a6d33ea 100644 --- a/addons/website_event/data/event_demo.xml +++ b/addons/website_event/data/event_demo.xml @@ -22,29 +22,27 @@
-
-
+

Course Summary

-
+

This course is dedicated to developers who need to grasp knowledge of the business applications development process. This course is for new developers or for IT professionals eager to learn more about technical aspects.

-
-
+

What you will learn?

-
-
+
+
-

Day 1

+

Day 1

-

Introduction to Javascript

+

Introduction to Javascript

  • Hello World
    • @@ -59,8 +57,8 @@
-
-
+
+

Day 2

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

Day 3

@@ -105,11 +103,11 @@
-
+

Requirements

-
+

Objectives:

Having attended this course, participants should be able to:

@@ -139,7 +137,9 @@
-
+
+
+

Read Great Contents

@@ -147,18 +147,23 @@

What do people say about this course?

-
-
-

I did not expect such a great learning experience. I feel like I can develop anything now.

+
+
+ +

I did not expect such a great learning experience. I feel like I can develop anything now.

John Doe, CEO
-
-
-

This course help me build my first application within a month. Definetly worth its price.

+
+
+ +

This course help me build my first application within a month. Definetly worth its price.

John Doe, CEO
+
+
+
]]> 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 00000000000..05c436a140a --- /dev/null +++ b/addons/website_event/static/src/scss/website_event.scss @@ -0,0 +1,13 @@ +.o_wevent_participating_container { + position: relative; + + &::before { + content: ""; + @include o-position-absolute(0, auto, 0, 0); + width: 3px; + background-color: theme-color('info'); + } +} +.o_wevent_registration_list_attendees:nth-child(2n) { + background-color: gray('200'); +} diff --git a/addons/website_event/views/event_templates.xml b/addons/website_event/views/event_templates.xml index 0d8d28bc4be..59cec6e4322 100644 --- a/addons/website_event/views/event_templates.xml +++ b/addons/website_event/views/event_templates.xml @@ -1,8 +1,11 @@ -