pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] base: better onboarding bars on small devices

Browse Source 
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
This commit is contained in:
Priyanka Kakadiya
2019-02-22 13:19:56 +00:00
committed by Adrien Dieudonne
parent 5028507ea2
commit f1da58c718
2 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
odoo/addons/base/static/src/scss/onboarding.scss
+13 -5
View File
@@ -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;
odoo/addons/base/views/onboarding_views.xml
+2 -2
View File
@@ -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">