Merge pull request PrestaShop#22427 from NeOMakinG/issue22422

Add scroll on kpis on mobile and adjust some sizes
lfymcc · Dec 18, 2020 · 6f4693a · 6f4693a
2 parents 56abbb2 + cc84b5f
commit 6f4693a
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 6 deletions.
diff --git a/admin-dev/themes/new-theme/scss/components/layout/_kpi.scss b/admin-dev/themes/new-theme/scss/components/layout/_kpi.scss
@@ -8,6 +8,57 @@
   background: #fff;
   @include border-radius($card-border-radius);
 
+  @include media-breakpoint-down(sm) {
+    background: none;
+
+    &:not(.box-stats) {
+      padding: 0;
+    }
+
+    &.box-stats {
+      min-width: 13rem;
+      padding: 1rem;
+      background-color: #fff;
+      box-shadow: 0 8px 16px 0 rgba(#000, 0.1);
+      @include border-radius($card-border-radius);
+    }
+
+    .kpi-content {
+      padding-left: 35px;
+
+      .title {
+        font-size: 0.875rem;
+      }
+
+      .kpi-description {
+        .value {
+          font-size: 0.875rem;
+        }
+      }
+    }
+
+    > .row {
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      // stylelint-disable
+      justify-content: flex-start !important;
+      padding: 1.1rem 0;
+      padding-top: 0.5rem;
+      margin: 0 -0.5rem !important;
+      overflow: scroll;
+      // stylelint-enable
+
+      > div {
+        margin: 0 0.5rem;
+
+        i {
+          font-size: 1.5rem;
+        }
+      }
+    }
+  }
+
   &:hover {
     text-decoration: none;
   }
@@ -18,6 +69,12 @@
   top: 0;
   right: 0;
   z-index: 1;
+
+  @include media-breakpoint-down(sm) {
+    button {
+      display: none;
+    }
+  }
 }
 
 .kpi-content {
@@ -94,3 +151,11 @@
     padding-left: 1rem;
   }
 }
+
+.card-kpis {
+  @include media-breakpoint-down(sm) {
+    background-color: inherit;
+    border: none;
+    box-shadow: inherit;
+  }
+}
diff --git a/admin-dev/themes/new-theme/scss/theme.scss b/admin-dev/themes/new-theme/scss/theme.scss
@@ -24,11 +24,11 @@
 // Components
 @import "components/layout/content_div";
 @import "components/layout/header_toolbar";
-@import "components/layout/kpi";
 @import "components/layout/main_header";
 @import "components/layout/nav_bar";
 @import "components/layout/non_responsive";
 @import "components/cards";
+@import "components/layout/kpi";
 @import "components/category_tree";
 @import "components/dropzone";
 @import "components/modulescards";

diff --git a/.../Resources/views/Admin/Improve/International/Translations/translations_settings.html.twig b/.../Resources/views/Admin/Improve/International/Translations/translations_settings.html.twig
@@ -29,7 +29,7 @@
 {% block content %}
   <div class="row justify-content-center">
     <div class="col-xl-10">
-      <div class="card">
+      <div class="card card-kpis">
         {% block translations_kpis_row %}
           <div class="row">
             {{ render(controller(

diff --git a/src/PrestaShopBundle/Resources/views/Admin/Sell/Catalog/Categories/index.html.twig b/src/PrestaShopBundle/Resources/views/Admin/Sell/Catalog/Categories/index.html.twig
@@ -41,7 +41,7 @@
   {% block categories_kpis %}
     <div class="row">
       <div class="col">
-        <div class="card">
+        <div class="card card-kpis">
           <div class="row">
             {{ render(controller(
               'PrestaShopBundle:Admin\\Common:renderKpiRow',

diff --git a/src/PrestaShopBundle/Resources/views/Admin/Sell/Customer/index.html.twig b/src/PrestaShopBundle/Resources/views/Admin/Sell/Customer/index.html.twig
@@ -50,7 +50,7 @@
   {% block customers_kpis %}
     <div class="row">
       <div class="col-md-12">
-        <div class="card">
+        <div class="card card-kpis">
           <div class="row">
             {{ render(controller(
               'PrestaShopBundle:Admin\\Common:renderKpiRow',

diff --git a/src/PrestaShopBundle/Resources/views/Admin/Sell/Order/Cart/view.html.twig b/src/PrestaShopBundle/Resources/views/Admin/Sell/Order/Cart/view.html.twig
@@ -29,7 +29,7 @@
   {% block cart_kpis %}
     <div class="row">
       <div class="col-md-12">
-        <div class="card">
+        <div class="card card-kpis">
           <div class="row">
             {{ render(controller(
               'PrestaShopBundle:Admin\\Common:renderKpiRow',

diff --git a/src/PrestaShopBundle/Resources/views/Admin/Sell/Order/Order/index.html.twig b/src/PrestaShopBundle/Resources/views/Admin/Sell/Order/Order/index.html.twig
@@ -35,7 +35,7 @@
   {% block orders_kpi %}
     <div class="row">
       <div class="col-md-12">
-        <div class="card">
+        <div class="card card-kpis">
           <div class="row orders-kpi">
             {{ render(controller(
               'PrestaShopBundle:Admin\\Common:renderKpiRow',