Work for #7723: implement styles for totals on mobile (#7740)

* Work for #7723: implement styles for totals on mobile * Update etalon
surveyjs · Feb 2, 2024 · 5370861 · 5370861
1 parent 17c8d5a
commit 5370861
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 12 deletions.
diff --git a/src/defaultV2-theme/blocks/sd-table.scss b/src/defaultV2-theme/blocks/sd-table.scss
@@ -337,6 +337,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;
@@ -519,18 +520,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);
       }
     }
   }
@@ -598,6 +609,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;
@@ -649,6 +661,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);
+    });
+  });
 });