Skip to content
Permalink
Browse files

[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
  • Loading branch information...
pka-odoo authored and adr-odoo committed Feb 5, 2019
1 parent 83e6faf commit 4538416743be5593acc4c42b2f813406203b5a6c
Showing with 15 additions and 7 deletions.
  1. +13 −5 odoo/addons/base/static/src/scss/onboarding.scss
  2. +2 −2 odoo/addons/base/views/onboarding_views.xml
@@ -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;
@@ -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">

0 comments on commit 4538416

Please sign in to comment.
You can’t perform that action at this time.