diff options
| author | Priyanka Kakadiya <pka@odoo.com> | 2019-02-05 06:16:03 +0000 |
|---|---|---|
| committer | Adrien Dieudonne <adr@odoo.com> | 2019-02-22 13:19:56 +0000 |
| commit | f1da58c718bc4e07500c9583ff8aa7d88b18e58e (patch) | |
| tree | 185e9dbacc57888a2e531e46a912973058764200 | |
| parent | 5028507ea208c77816c1101f8097ddf8a03ea7d2 (diff) | |
[IMP] base: better onboarding bars on small devices
In small devices, onboarding bars are displayed vertial, which
takes too much screen space, and user has to scroll down
a lot to view actual content.
This commit improves the behavior by showing onboarding bars
horizontally (with scrolling) in small devices also, and thus
occupying minimal screen space.
task: 1929048
closes odoo/odoo#30823
| -rw-r--r-- | odoo/addons/base/static/src/scss/onboarding.scss | 18 | ||||
| -rw-r--r-- | odoo/addons/base/views/onboarding_views.xml | 4 |
2 files changed, 15 insertions, 7 deletions
diff --git a/odoo/addons/base/static/src/scss/onboarding.scss b/odoo/addons/base/static/src/scss/onboarding.scss index 26866c4b62c..2fb27a7c55c 100644 --- a/odoo/addons/base/static/src/scss/onboarding.scss +++ b/odoo/addons/base/static/src/scss/onboarding.scss @@ -35,6 +35,10 @@ $o-onboarding-violet-ui-2: #FBEEC8; .o_onboarding_wrap { padding: $o-horizontal-padding*2 $o-horizontal-padding; + + @include media-breakpoint-down(sm) { + overflow-x: auto; + } } .o_onboarding_step_title, a.o_onboarding_all_done { cursor: pointer; @@ -76,10 +80,6 @@ $o-onboarding-violet-ui-2: #FBEEC8; .o_onboarding_steps { flex-flow: row nowrap; justify-content: initial; - - @include media-breakpoint-down(sm) { - flex-flow: column nowrap; - } } .o_onboarding_step { @@ -91,7 +91,7 @@ $o-onboarding-violet-ui-2: #FBEEC8; opacity: 0.6; @include media-breakpoint-down(sm) { - text-align: left; + flex: 1 0 auto; margin-bottom: 16px; align-items: baseline; @@ -114,6 +114,10 @@ $o-onboarding-violet-ui-2: #FBEEC8; @include media-breakpoint-up(lg) { min-width: 230px; } + /* Progressbar should not break in mobile view */ + @include media-breakpoint-down(sm) { + min-width: 230px; + } max-width: 230px; padding: 0 10px; @@ -140,6 +144,10 @@ $o-onboarding-violet-ui-2: #FBEEC8; } .o_onboarding_dot { + @include media-breakpoint-down(sm) { + margin-left: auto; + margin-right: auto; + } width: $o-onboarding-dot-size; height: $o-onboarding-dot-size; color: transparent; diff --git a/odoo/addons/base/views/onboarding_views.xml b/odoo/addons/base/views/onboarding_views.xml index ea948d3d981..2132584dc66 100644 --- a/odoo/addons/base/views/onboarding_views.xml +++ b/odoo/addons/base/views/onboarding_views.xml @@ -53,10 +53,10 @@ <template id="onboarding_step"> <div t-att-class="'o_onboarding_step ' + ('o_onboarding_done' if state in ('done', 'just_done') else 'o_onboarding_current') + (' o_onboarding_just_done' if state == 'just_done' else '')"> <t t-call="base.onboarding_confetti" /> - <div class="o_onboarding_progress d-none d-md-inline-block progress"> + <div class="o_onboarding_progress d-inline-block progress"> <div class="progress-bar"></div> </div> - <span class="o_onboarding_dot d-none d-md-inline-block fa fa-check" /> + <span class="o_onboarding_dot d-inline-block fa fa-check" /> <div class="o_onboarding_step_content"> <div class="o_onboarding_step_content_info"> <h4 class="o_onboarding_step_title mt16"> |