Work for #7723: implement styles for totals on mobile

surveyjs · Jan 25, 2024 · 81170e3 · 81170e3
1 parent 4239e08
commit 81170e3
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 12 deletions.
diff --git a/src/defaultV2-theme/blocks/sd-table.scss b/src/defaultV2-theme/blocks/sd-table.scss
@@ -110,6 +110,7 @@
     .sd-table__row:first-of-type>.sd-table__cell {
       border-top: calcSize(1) solid transparent;
     }
+
     .sd-table__row:last-of-type>.sd-table__cell {
       border-bottom: calcSize(1) solid transparent;
     }
@@ -331,6 +332,7 @@
 .sd-table__cell--actions:not(.sd-table__cell--vertical),
 .sd-table__cell--empty,
 .sd-table__cell--row-text,
+.sd-table__cell--footer-total,
 .sd-matrix__cell:first-of-type,
 .sd-matrix tr>td:first-of-type {
   position: sticky;
@@ -513,18 +515,28 @@
       padding-bottom: calcSize(0);
     }
 
-    tr:not(.sd-table__row--expanded) {
-      &::after {
-        z-index: 12;
-        content: " ";
-        display: block;
-        position: relative;
-        height: 1px;
-        background-color: $border-light;
-        left: calcSize(-2);
-        bottom: calcSize(0);
-        width: calc(100% + 4 * #{$base-unit});
-        z-index: 12;
+    tfoot tr::before,
+    tr:not(.sd-table__row--expanded)::after {
+      z-index: 12;
+      content: " ";
+      display: block;
+      position: relative;
+      height: 1px;
+      background-color: $border-light;
+      left: calcSize(-2);
+      width: calc(100% + 4 * #{$base-unit});
+      z-index: 12;
+    }
+
+    tr:not(.sd-table__row--expanded)::after {
+      bottom: 0;
+    }
+
+    tfoot tr {
+      padding-top: calcSize(5);
+
+      &::before {
+        top: calcSize(-2);
       }
     }
   }
@@ -592,6 +604,7 @@
   .sd-matrix__cell,
   .sd-table__cell--actions,
   .sd-table__cell--row-text,
+  .sd-table__cell--footer-total,
   .sd-table__cell--error {
     &::before {
       content: none;
@@ -643,6 +656,7 @@
     margin-bottom: calcSize(-2);
   }
 
+  .sd-table__cell--footer-total:not(.sd-matrix__cell),
   .sd-table__cell--row-text:not(.sd-matrix__cell) {
     color: $foreground-light;
   }

diff --git a/...egressionTests/tests/defaultV2/etalons/responsiveness-matrixdropdown-totals.png b/...egressionTests/tests/defaultV2/etalons/responsiveness-matrixdropdown-totals.png
diff --git a/visualRegressionTests/tests/defaultV2/responsiveness.ts b/visualRegressionTests/tests/defaultV2/responsiveness.ts
@@ -734,4 +734,52 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("responsiveness-matrixdropdown-text-fields.png", Selector(".sd-question"), t, comparer);
     });
   });
+
+  test("check matrixdropdown with totals in mobile mode", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(600, 1920);
+      await initSurvey(framework,
+        {
+          "pages": [
+            {
+              "name": "page1",
+              "elements": [
+                {
+                  "type": "matrixdropdown",
+                  "name": "question1",
+                  "columns": [
+                    {
+                      "name": "Column 1",
+                      "totalType": "sum"
+                    },
+                    {
+                      "name": "Column 2",
+                      "totalType": "count"
+                    },
+                    {
+                      "name": "Column 3",
+                      "totalType": "max"
+                    }
+                  ],
+                  "choices": [
+                    1,
+                    2,
+                    3,
+                    4,
+                    5
+                  ],
+                  "rows": [
+                    "Row 1",
+                    "Row 2"
+                  ],
+                  "totalText": "Total:"
+                }
+              ]
+            }
+          ]
+        }
+      );
+      await takeElementScreenshot("responsiveness-matrixdropdown-totals.png", Selector(".sd-question"), t, comparer);
+    });
+  });
 });