Improves responsiveness of KPI widgets on new all websites dashboard (#…

…22837)

* Make AWD layout responsive

* Adds UI tests

* Improve responsiveness for i18n

* update UI tests

* fix responsive layout when there is no revenue kpi

* small layout tweaks

* apply review feedback

plugins/MultiSites/tests/UI/AllWebsitesDashboard_spec.js

@@ -293,4 +293,67 @@ describe('AllWebsitesDashboard', function () {
             expect(await page.screenshotSelector('#main')).to.matchImage('evolution_change');
         });
     });
+
+    describe('Responsive View', function () {
+        this.title = parentSuite.title; // to make sure the screenshot prefix is the same
+
+        it('should display correctly in tablet view', async function () {
+            await page.webpage.setViewport({ width: 768, height: 1024 });
+            await page.goto(dashboardUrl);
+            await page.waitForNetworkIdle();
+
+            await page.evaluate(() => {
+              window.CoreHome.Matomo.on('MultiSites.DashboardKPIs.updated', function(data) {
+                data.kpis.badges.hits = '<strong>Plan:</strong> 600K hits/month';
+                data.kpis.badges.pageviews = 'Weird Pageview Badge';
+                data.kpis.badges.revenue = 'Awesome Revenue Badge';
+                data.kpis.badges.visits = 'Terrific Visits Badge';
+              })
+            });
+
+            // change period to trigger reload of KPIS
+            await page.click('.move-period-prev');
+            await page.click('.move-period-next');
+            await page.waitForNetworkIdle();
+
+            expect(await page.screenshotSelector('#main')).to.matchImage('dashboard_tablet');
+        });
+
+        it('should display correctly in mobile view', async function () {
+            await page.webpage.setViewport({ width: 352, height: 1024 });
+
+            expect(await page.screenshotSelector('#main')).to.matchImage('dashboard_mobile');
+        });
+
+        it('should display correctly in tablet view without revenue', async function () {
+            testEnvironment.pluginsToUnload = ['Goals'];
+            testEnvironment.save();
+
+            await page.webpage.setViewport({ width: 768, height: 1024 });
+            await page.goto(dashboardUrl);
+            await page.waitForNetworkIdle();
+
+            await page.evaluate(() => {
+              window.CoreHome.Matomo.on('MultiSites.DashboardKPIs.updated', function(data) {
+                data.kpis.badges.hits = '<strong>Plan:</strong> 600K hits/month';
+                data.kpis.badges.pageviews = 'Weird Pageview Badge';
+                data.kpis.badges.revenue = 'Awesome Revenue Badge';
+                data.kpis.badges.visits = 'Terrific Visits Badge';
+              })
+            });
+
+            // change period to trigger reload of KPIS
+            await page.click('.move-period-prev');
+            await page.click('.move-period-next');
+            await page.waitForNetworkIdle();
+
+            expect(await page.screenshotSelector('#main')).to.matchImage('dashboard_tablet_no_revenue');
+        });
+
+        it('should display correctly in mobile view without revenue', async function () {
+            await page.webpage.setViewport({ width: 352, height: 1024 });
+
+            expect(await page.screenshotSelector('#main')).to.matchImage('dashboard_mobile_no_revenue');
+        });
+    });
 });

plugins/MultiSites/vue/src/AllWebsitesDashboard/AllWebsitesDashboard.less

@@ -129,23 +129,15 @@
     align-items: flex-start;
     display: flex;
     justify-content: space-between;
-    margin: 0 40px 20px 40px;
+    margin: 0 0 20px;
     overflow-x: auto;
 
     .kpiCard {
+      display: grid;
       flex-basis: 0;
       flex-grow: 1;
       margin: 20px 0;
-      padding: 0 40px;
-      white-space: nowrap;
-
-      &:first-child {
-        padding-left: 0;
-      }
-
-      &:last-child {
-        padding-right: 0;
-      }
+      padding: 0 3vw;
     }
 
     .kpiCardLoading {
@@ -191,16 +183,25 @@
     }
 
     .kpiCardEvolution {
+      display: table;
       color: #76838f;
       font-size: 0.9rem;
+      line-height: 1rem;
+
+      &>span {
+        display: table-cell;
+      }
     }
 
     .kpiCardEvolutionIcon {
       font-size: 0.7rem;
     }
 
     .kpiCardEvolutionTrend {
+      width: 1%;
       font-size: 1rem;
+      white-space: nowrap;
+      vertical-align: middle;
     }
 
     .kpiTrendNegative {
@@ -226,6 +227,7 @@
       height: 1.5rem;
       margin-top: 0.5rem;
       padding: 0 0.35rem;
+      width: fit-content;
     }
   }
 
@@ -352,7 +354,50 @@
     }
   }
 
+  @media all and (max-width: 1350px) {
+    .kpiCardContainer {
+      flex-wrap: wrap;
+
+      .kpiCard {
+        flex-basis: calc(~'50% - 1px');
+        max-width: calc(~'50% - 1px');
+        padding: 0 7vw;
+      }
+
+      .kpiCardDivider {
+        &:nth-child(4) {
+          display: none;
+        }
+      }
+    }
+  }
+
   @media all and (max-width: 600px) {
+    .dashboardHeader {
+      margin-bottom: 12px;
+    }
+
+    .kpiCardContainer {
+      .kpiCard {
+        flex-basis: 100%;
+        max-width: 100%;
+        padding: 0!important;
+        justify-items: flex-start;
+
+        .kpiCardValue {
+          font-size: 2rem;
+        }
+      }
+
+      .kpiCardDivider {
+        display: block!important;
+        background-image: url('plugins/MultiSites/images/kpi_divider_horizontal.svg');
+        height: 1px;
+        width: 100%;
+        margin: 4px 0;
+      }
+    }
+
     #periodString {
       width: 100%;
     }
@@ -380,10 +425,5 @@
         width: 100%;
       }
     }
-
-    .kpiCardContainer {
-      margin-left: 20px;
-      margin-right: 20px;
-    }
   }
 }

plugins/MultiSites/vue/src/AllWebsitesDashboard/KPICard.vue

@@ -20,9 +20,9 @@
       <template v-if="kpi.evolutionValue !== ''">
         <span :class="`kpiCardEvolutionTrend ${evolutionTrendClass}`">
           <span :class="`kpiCardEvolutionIcon ${evolutionTrendIcon}`" />
-          {{ kpi.evolutionValue }}
+          {{ kpi.evolutionValue }}&nbsp;
         </span>
-        {{ translate(evolutionTrendFrom) }}
+        <span>{{ translate(evolutionTrendFrom) }}</span>
       </template>
 
       <template v-else>