fix(reports): refactor styles to work fine in traffic sources

FromDoppler · Jul 26, 2019 · a9be5f1 · a9be5f1
1 parent 725d9ac
commit a9be5f1
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 35 deletions.
diff --git a/assets/scss/templates/_reportes.scss b/assets/scss/templates/_reportes.scss
@@ -145,6 +145,30 @@
           }
       }
     }
+  .box-border--bottom {
+    position: relative;
+    &::after {
+      content: "";
+      position: absolute;
+      border-bottom: 3px solid #33ad73;
+      width: 125px;
+      padding-top: 30px;
+      left:0;
+      display: block;
+    }
+  }
+  .title-reports-box {
+    padding: $dp-spaces--lv5;
+    display: inline-block;
+    font-size: $dp-sizing--lvl2;
+    color: $dp-color-darkgrey;
+    text-transform: uppercase;
+    line-height: $dp-spaces--lv3;
+    small {
+      display: block;
+      text-transform: none;
+    }
+  }
 }
 
 .number-kpi {
@@ -173,14 +197,6 @@
   margin: 5em 0 3em;
   position: relative;
   color:$dp-color-grey;
-
-  &:before {
-      content:"";
-      position: absolute;
-      border-bottom: 3px solid $dp-color-green;
-      width: 127px;
-      top: -25px;
-  }
 }
 .group-options {
   display: flex;
@@ -213,15 +229,15 @@
   .number-kpi {
     color:$dp-color-red;
   }
-  .text-kpi {
-    &:before {
-      border-bottom: 3px solid $dp-color-red;
+  .box-border--bottom {
+    &::after {
+      border-color: $dp-color-red;
     }
   }
 }
 
 /* Top ranking */
-.wrapper-ranking {
+.wrapper-reports-box {
   max-width: $dp-wrapper-max-width;
   margin: $dp-spaces--lv4 auto;
   font-family: $dp-font-family;
@@ -233,20 +249,6 @@
     position: relative;
     padding: $dp-spaces--lv0;
   }
-  .title-ranking {
-    padding: $dp-spaces--lv7 $dp-spaces--lv5;
-    display: inline-block;
-    font-size: $dp-sizing--lvl2;
-    color: $dp-color-darkgrey;
-    text-transform: uppercase;
-    line-height: $dp-spaces--lv3;
-
-      small {
-        display: block;
-        text-transform: none;
-      }
-
-  }
   .page-ranking--item {
     border-top: 1px solid $dp-color-silver;
     border-bottom: 1px solid $dp-color-silver;

diff --git a/assets/templates/reports-filters.html b/assets/templates/reports-filters.html
@@ -81,9 +81,11 @@ <h3>Optimiza tu estrategia de Marketing Digital</h3>
     <section class="container-reports">
     <div class="wrapper-kpi">
       <div class="reports-box warning--kpi">
-        <h3 class="number-kpi">0</h3>
-        <h6 class="subtitle-kpi">SUSCRIPTORES NUEVOS</h6>
-        <small class="date-range">12/02/2019 a 12/03/2019</small>
+        <div class="box-border--bottom">
+          <h3 class="number-kpi">0</h3>
+          <h6 class="subtitle-kpi">SUSCRIPTORES NUEVOS</h6>
+          <small class="date-range">12/02/2019 a 12/03/2019</small>
+        </div>
         <p class="text-kpi">Suscriptores añadidos a través de tus automations por comportamiento en Sitio.</p>
           <ul class="group-options">
             <li class="group-item"><a href="#"><span class="ms-icon icon-sensor icon-kpi"></span>inicia un automation</a></li>
@@ -102,19 +104,21 @@ <h6 class="subtitle-kpi">SUSCRIPTORES NUEVOS</h6>
           </ul>
       </div><!-- reports-box -->
       <div class="reports-box">
-        <h3 class="number-kpi">324.845</h3>
-        <h6 class="subtitle-kpi">contactos nuevos</h6>
-        <small class="date-range">12/05/2019 a 12/03/2019</small>
+        <div class="box-border--bottom">
+          <h3 class="number-kpi">324.845</h3>
+          <h6 class="subtitle-kpi">contactos nuevos</h6>
+          <small class="date-range">12/05/2019 a 12/03/2019</small>
+        </div>
         <p class="text-kpi">Visitantes que aún no han dejado su email. Incorpora un captador y aumenta tu base de datos.</p>
         <ul class="group-options">
           <li class="group-item"><a href="#"><span class="ms-icon icon-sensor icon-kpi"></span>crear captador</a></li>
           <li class="group-item"><a href="#"><span class="ms-icon icon-suggestions icon-kpi"></span>sugerencia de aparición</a></li>
         </ul>
       </div><!-- reports-box -->
     </div>
-    <div class="wrapper-ranking">
+    <div class="wrapper-reports-box">
       <div class="reports-box">
-        <small class="title-ranking">Top paginas mas visitadas</small>
+        <small class="title-reports-box">Top paginas mas visitadas</small>
         <div class="page-ranking--item">
           <p class="text-ranking">1</p>
           <a class="link-ranking" href="https://www.fromdoppler.com/email-marketing" target="_blank">https://www.fromdoppler.com/email-marketing</a>
@@ -126,7 +130,7 @@ <h6 class="subtitle-kpi">contactos nuevos</h6>
           <p class="text-ranking"><strong>350.758</strong> Visitas Totales</p>
         </div>
       </div><!-- reports-box -->
-    </div><!-- wrapper-ranking -->
+    </div><!-- wrapper-reports-box -->
     </section><!-- container-kpi -->
     <!-- build:js:dist js/app.js -->
     <script src="./js/main.js"></script>