[IMP] website: improve dashboard design

4 files changed, 222 insertions, 106 deletions

diff --git a/addons/website/static/src/img/website_dashboard_visit_demo.png b/addons/website/static/src/img/website_dashboard_visit_demo.png
index 27e04ec5e46..7945ac173b0 100644
--- a/addons/website/static/src/img/website_dashboard_visit_demo.png
+++ b/addons/website/static/src/img/website_dashboard_visit_demo.png
diff --git a/addons/website/static/src/js/website.backendDashboard.js b/addons/website/static/src/js/website.backendDashboard.js
index ed241fd2215..ee962e43e86 100644
--- a/addons/website/static/src/js/website.backendDashboard.js
+++ b/addons/website/static/src/js/website.backendDashboard.js
@@ -105,7 +105,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
     render_dashboards: function() {
         var self = this;
         _.each(this.dashboards_templates, function(template) {
-            self.$el.append(QWeb.render(template, {widget: self}));
+            self.$('.o_website_dashboard').append(QWeb.render(template, {widget: self}));
         });
     },
 
@@ -129,7 +129,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
             chart.xAxis
                 .tickFormat(function(d) { return d3.time.format("%m/%d/%y")(new Date(d)); })
                 .tickValues(_.map(tick_values, function(d) { return self.getDate(d); }))
-                .rotateLabels(-30);
+                .rotateLabels(-45);
 
             chart.yAxis
                 .tickFormat(d3.format('.02f'));
@@ -156,7 +156,6 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
     },
 
     render_graph_analytics: function(client_id) {
-
         if (!this.dashboards_data.visits || !this.dashboards_data.visits.ga_client_id) {
           return;
         }
@@ -203,7 +202,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
 
         var self = this;
         $.when(this.fetch_data()).then(function() {
-            self.$el.empty();
+            self.$('.o_website_dashboard').empty();
             self.render_dashboards();
             self.render_graphs();
         });
@@ -292,7 +291,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
         } else if (this.date_range === 'year') {
             start_date = '365daysAgo';
         }
-        var $analytics_chart_2 = $('<div>').addClass('col-md-6');
+        var $analytics_chart_2 = $('<div>').addClass('col-md-6 col-xs-12');
         var breakdownChart = new gapi.analytics.googleCharts.DataChart({
             query: {
                 'dimensions': 'ga:date',
@@ -312,7 +311,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
         $analytics_chart_2.appendTo($analytics_components);
 
         // 5. Chart table
-        var $analytics_chart_1 = $('<div>').addClass('col-md-6');
+        var $analytics_chart_1 = $('<div>').addClass('col-md-6 col-xs-12');
         var mainChart = new gapi.analytics.googleCharts.DataChart({
             query: {
                 'dimensions': 'ga:medium',
diff --git a/addons/website/static/src/less/website.backendDashboard.less b/addons/website/static/src/less/website.backendDashboard.less
index fe4680e2d8e..faef016c415 100644
--- a/addons/website/static/src/less/website.backendDashboard.less
+++ b/addons/website/static/src/less/website.backendDashboard.less
@@ -1,113 +1,228 @@
-.o_website_dashboard {
+.o_dashboards {
+    background-color: #ececec;
 
-    background-color: @odoo-webclient-background-color;
+    .o_website_dashboard {
+        background-color: #ececec;
+        padding: 16px;
 
-    svg {
-        padding-top: 2px;
-        float: left;
-    }
+        > div {
+            margin-right: 0px;
+            margin-left: 0px;
+        }
 
-    div.o_box {
-        .clearfix();
-        padding: 10px;
-        color: @odoo-main-text-color;
-        background-color: @odoo-view-background-color;
-        background-size: cover;
-        margin-top: @odoo-horizontal-padding;
-        margin-bottom: @odoo-horizontal-padding;
-        position: relative;
-    }
+        div.o_box {
+            .clearfix();
+            color: @odoo-main-color-muted;
+            background-color: @odoo-view-background-color;
+            background-size: cover;
+            margin-bottom: @odoo-horizontal-padding;
+            position: static;
+            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+            padding: 25px 16px;
+
+            h2, h4 {
+                text-transform: uppercase;
+                margin-top: 0;
+            }
 
-    .o_dashboard_visits {
+            h4 { margin: 0 0 0 8px; }
+
+            h2 { color: @odoo-brand-primary; }
+            
+            .col-md-6 {
+                padding: 15px;
+
+                .js_field_selection {
+                    width: 30%;
+                    margin: 0 0 20px 0;
+                    float: right;
+                    border-radius: 0;
+                }
+
+                .table-responsive {
+                    border: none;
+                }
+
+                table {
+
+                    tr:nth-child(even) {
+                        background: #f5f6f7;
+                    }
+
+                    th {
+                        text-transform: uppercase;
+                        color: @odoo-brand-optional;
+                        border-top-width: 0px;
+                    }
+                    td, th {
+                        text-align: right;
+                        border-left: none;
+
+                        &:first-child {
+                            text-align: left;
+                        }
+                    }
+                }
+
+                /*------------------------------------------*/
+                /*              Chart design                */
+                /*------------------------------------------*/
+
+                .gapi-analytics-data-chart svg g path, svg [class*="nv-series-"] {
+                    stroke: @odoo-main-color-muted !important;
+                }
+
+                svg {
+                    padding-top: 2px;
+                    float: left;
+
+                    g.nvd3.nv-wrap.nv-lineChart {
+                        .translate(45; 30) !important;
+                    }
+
+                    g.nv-y.nv-axis, g.nv-x.nv-axis, g.nv-y.nv-axis .nv-axisMaxMin {
+                        text {
+                            opacity: .3 !important;
+                        }
+                    }
+
+                    g.nv-x.nv-axis .tick > line {
+                        opacity: 0 !important;
+                    }
+
+                    [class*="nv-series-"] {
+                        stroke-width: 3 !important;
+                        fill: @odoo-main-color-muted !important;
+                    }
+
+                    .nv-groups .nv-point, g circle {
+                        fill: @odoo-brand-optional;                        
+                    }
+
+                    .nv-groups .nv-point {
+                        fill-opacity: 1 !important;
+                        stroke-opacity: 1 !important;
+                        stroke: @odoo-brand-optional;
+                    }
+
+                    .nv-groups .nv-point.hover, .nv-group.nv-noninteractive .nv-point.hover {
+                        stroke: darken(@odoo-brand-optional, 10%);
+                    }
+                }
+
+                .nvtooltip {
+                    border-radius: 0;
+                    border: 1px solid @gray-lighter;
+                    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+
+                    .legend-color-guide > div {
+                        border: none;
+                    }
+                    tr:first-child .legend-color-guide > div {
+                        background-color: @odoo-brand-optional !important;
+                    }
+                    tr:last-child .legend-color-guide > div {
+                        background-color: darken(@odoo-brand-optional, 10%) !important;
+                    }
+                }
+            }
+        }
 
-        .o_demo_background {
+        .o_dashboard_visits {
+
+            .o_demo_background {
+
+                margin-top: 16px;
+                height: 300px;
+                background-size: 100% !important;
+                background: url("/website/static/src/img/website_dashboard_visit_demo.png");
+                position: relative;
+
+                .o_buttons {
+                    position: relative;
+                    z-index: 10;
+
+                    > button {
+                        display: block;
+                    }
+                }
+
+                .o_layer {
+                    background-color: rgba(255,255,255,.3);
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                }
+            }
 
-            margin-top: 16px;
-            height: 300px;
-            background: url("/website/static/src/img/website_dashboard_visit_demo.png");
-            position: relative;
+            .o_properties_selection {
 
-            > button {
-                position: absolute;
-                top: 50%;
-                left: 40%;
+                @media (min-width: @screen-md-min) {
+                    .o-flex-display();
+                }
+
+                margin-top: 10px;
+                margin-bottom: 10px;
             }
 
-            .o_layer {
-                background-color: rgba(0,0,0,.4);
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
+            .gapi-analytics-auth-styles-signinbutton {
+                cursor: pointer;
             }
-        }
 
-        .o_properties_selection {
-            .o-flex-display();
-            margin-top: 10px;
-            margin-bottom: 10px;
-        }
+            .ActiveUsers {
+                position: relative;
+                float: right;
+                top: -60px;
+                right: 10px;
+                border: 1px solid @gray-lighter;
+                font-weight: 300;
+                white-space: nowrap;
+                padding: .5em 1.5em;
+                margin: .5em;
+                text-transform: uppercase;
+            }
 
-        .gapi-analytics-auth-styles-signinbutton {
-            cursor: pointer;
-        }
+            .ActiveUsers-value {
+              display: inline-block;
+              font-weight: 300;
+              margin-right: -.25em;
+            }
 
-        .ActiveUsers {
-            position: absolute;
-            top: 0;
-            right: 0;
-            background: hsl(30,10%,95%);
-            border: 1px solid #d4d2d0;
-            border-radius: 4px;
-            font-weight: 300;
-            white-space: nowrap;
-            padding: .5em 1.5em;
-            margin: .5em;
-        }
+            .ActiveUsers.is-increasing {
+              animation: increase 3s;
+            }
 
-        .ActiveUsers-value {
-          display: inline-block;
-          font-weight: 600;
-          margin-right: -.25em;
-        }
+            .ActiveUsers.is-decreasing {
+              animation: decrease 3s;
+            }
 
-        .ActiveUsers.is-increasing {
-          animation: increase 3s;
-        }
+            @keyframes increase {
+              10% {
+                background-color: lighten(@odoo-brand-optional, 30%);
+                border-color: @odoo-brand-optional;
+                color: @odoo-brand-optional;
+              }
+            }
 
-        .ActiveUsers.is-decreasing {
-          animation: decrease 3s;
+            @keyframes decrease {
+              10% {
+                background-color: lighten(@odoo-brand-optional, 30%);
+                border-color: @odoo-brand-optional;
+                color: @odoo-brand-optional;
+              }
+            }
         }
 
-        @keyframes increase {
-          0% {}
-          10% {
-            background-color: hsl(120, 100%, 96%);
-            border-color: hsla(120, 100%, 25%, .5);
-            color: hsla(120, 100%, 25%, 1);
-          }
-          100% {}
+        tr.o_product_template {
+            cursor: pointer;
         }
 
-        @keyframes decrease {
-          0% {}
-          10% {
-            background-color: hsl(0, 100%, 96%);
-            border-color: hsla(0, 100%, 50%, .5);
-            color: hsl(0, 100%, 50%);
-          }
-          100% {}
+        .o_loader {
+            text-align: center;
+            width: 100%;
+            height: 20em;
         }
     }
-
-    tr.o_product_template {
-        cursor: pointer;
-    }
-
-    .o_loader {
-        text-align: center;
-        width: 100%;
-        height: 20em;
-    }
 }
diff --git a/addons/website/static/src/xml/website.backend.xml b/addons/website/static/src/xml/website.backend.xml
index 39e181865c2..55c9c7803ad 100644
--- a/addons/website/static/src/xml/website.backend.xml
+++ b/addons/website/static/src/xml/website.backend.xml
@@ -6,7 +6,9 @@
     </div>
 
     <t t-name="website.WebsiteDashboardMain">
-        <div class="container o_website_dashboard">
+        <div class="o_dashboards">
+            <div class="container-fluid o_website_dashboard">
+            </div>
         </div>
     </t>
 
@@ -14,25 +16,25 @@
         <div class="row o_dashboard_visits">
             <div class="col-xs-12 o_box">
                 <h2>Visits</h2>
-
-                <div t-if="widget.dashboards_data.visits &amp;&amp; widget.dashboards_data.visits.ga_client_id" class="row js_analytics_components">
+                <div t-if="widget.dashboards_data.visits &amp;&amp; widget.dashboards_data.visits.ga_client_id">
+                    <div class="row js_analytics_components"/>
+                    <a href="#" class="js_link_analytics_settings">Edit my Analytics Client ID</a>
                 </div>
-
-                <div t-if="!(widget.dashboards_data.visits &amp;&amp; widget.dashboards_data.visits.ga_client_id)">
+                <div t-if="!(widget.dashboards_data.visits &amp;&amp; widget.dashboards_data.visits.ga_client_id)" class="col-md-12">
                     <div class="o_demo_background">
                         <div class="o_layer">
                         </div>
-                        <button class="btn btn-sm btn-primary js_link_analytics_settings">Link my Analytics Account</button>
+                        <div class="o_buttons text-center">
+                            <h3>Currently there is no data available.</h3>
+                            <button class="btn btn-sm btn-primary js_link_analytics_settings center-block mb8">Link my Analytics Account</button>
+                        </div>
                     </div>
                 </div>
-
-                <a href="#" class="js_link_analytics_settings">Edit my Analytics Client ID</a>
-
             </div>
         </div>
     </t>
 
-    <div t-name="website.unauthorized_analytics" class="col-xs-12 js_unauthorized_message">
+    <div t-name="website.unauthorized_analytics" class="col-xs-12 js_unauthorized_message mb16">
         <span t-if="reason === 'not_connected'">You need to log in to your Google Account before: </span>
         <span t-if="reason === 'no_right'">You do not seem to have access to this Analytics Account.</span>
     </div>