Resolved #6243 - Survey margins + fixed #6571 (#6581)

* Resolved #6243 - Survey margins + fixed #6571 * Work for #6243 - Survey margins - updated etalons * Work for #6243 - Survey margins - updated etalons * work for #6243 Survey margins. - fix f-tests * work for #6243 Survey margins. - updated etalons * Work for #6243 Survey margins - fixed remarks * Work for #6243 Survey margins - fixed remarks - try to keep width * Work for #6243 Survey margins - updated etalons * Work for #6243 Survey margins - fix constants in tests * Work for #6243 Survey margins - fix constants in tests * Work for #6243 Survey margins - fix constants in tests * Work for #6243 Survey margins - fix panel top margin * Work for #6243 Survey margins - updated etalons * Work for #6243 Survey margins - updated etalons * Work for #6243 Survey margins - updated etalons * Work for #6243 Survey margins - updated etalons * Work for #6243 Survey margins - fix row top margin in Angular * Work for #6243 Survey margins - body box sizing * Work for #6243 Survey margins - fix row top margin in Angular * Work for #6243 Survey margins - updated etalons * Work for #6243 Survey margins - fix row top margin in Angular - revert * Work for #6243 Survey margins - updated etalons * Work for #6243 Survey margins - updated etalons * Work for #6243 Survey margins - fix responsive mode * Work for #6243 Survey margins - updated etalons * Work for #6243 Survey margins - fix row top margin in Angular * Work for #6243 Survey margins - fix row top margin in Angular * Work for #6243 Survey margins - fix row top margin * Work for #6243 Survey margins - fix row top margin --------- Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>
surveyjs · Aug 9, 2023 · 284b546 · 284b546
1 parent e5ff33a
commit 284b546
Show file tree

Hide file tree

Showing 124 changed files with 114 additions and 56 deletions.
diff --git a/src/defaultV2-theme/blocks/mixins.scss b/src/defaultV2-theme/blocks/mixins.scss
@@ -15,7 +15,7 @@
   color: $font-pagedescription-color;
   position: static;
   line-height: multiply(1.5, $font-pagedescription-size);
-  margin: calcSize(0.5) 0px;
+  margin: 0 0 calcSize(1) 0;
 }
 
 @mixin num_inline {

diff --git a/src/defaultV2-theme/blocks/sd-body.scss b/src/defaultV2-theme/blocks/sd-body.scss
@@ -11,35 +11,79 @@
   }
 
   &.sd-body--static {
-    max-width: calcSize(84);
+    max-width: calcSize(90);
     margin-left: auto;
     margin-right: auto;
+    padding-top: calcSize(6);
+    padding-bottom: calcSize(10);
+
     .sd-body__timer,
     .sd-body__navigation,
     .sd-body__page {
       margin-left: 0;
       margin-right: 0;
     }
+
+    .sd-body__navigation {
+      padding-top: calcSize(4);
+    }
+
+    .sd-body__navigation.sd-action-bar {
+      padding-left: calcSize(5);
+      padding-right: calcSize(5);
+    }
   }
 
   &.sd-body--responsive {
     max-width: initial;
+    padding: calcSize(5) calcSize(5) calcSize(3);
+    box-sizing: border-box;
+
+    .sd-page {
+      padding: 0;
+
+      &.sd-page__empty-header {
+        padding-top: calcSize(3);
+      }
+    }
 
     .sd-body__timer,
     .sd-body__navigation {
-      padding: calcSize(2) var(--sd-page-vertical-padding);
+      padding: calcSize(2) 0;
+    }
+
+    .sd-body__navigation {
+      padding-top: calcSize(4);
     }
+
     &.sd-body--with-timer {
-      max-width: calc(100% + var(--sd-timer-size) * ( -1  - 64 / 144 ) + 6 * #{$base-unit});
+      max-width: calc(100% + var(--sd-timer-size) * (-1 - 64 / 144) + 6 * #{$base-unit});
       margin-left: auto;
       margin-right: auto;
     }
   }
 }
-.sd-root-modern--mobile .sd-body.sd-body--with-timer.sd-body--responsive {
-  max-width: initial;
-  margin-left: 0;
-  margin-right: 0;
+
+.sd-root-modern--mobile {
+  .sd-body {
+
+    &.sd-body--with-timer.sd-body--responsive {
+      max-width: initial;
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    &.sd-body--responsive,
+    &.sd-body--static {
+      padding: calcSize(3);
+
+      .sd-body__navigation {
+        padding-left: 0;
+        padding-right: 0;
+        padding-bottom: 0;
+      }
+    }
+  }
 }
 
 .sd-body__navigation.sd-action-bar {
@@ -52,6 +96,7 @@
 .sd-body__progress {
   margin-bottom: calcSize(4);
 }
+
 .sd-body__progress--top {
   position: sticky;
   top: 0;
@@ -64,11 +109,12 @@
   padding-top: 180px;
   box-sizing: border-box;
 }
+
 .sd-root_background-image {
   background-position-x: center;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-}
+}
diff --git a/src/defaultV2-theme/blocks/sd-page.scss b/src/defaultV2-theme/blocks/sd-page.scss
@@ -1,28 +1,22 @@
-.sd-body--responsive {
-  .sd-page {
-    padding: calcSize(5) var(--sd-page-vertical-padding) calcSize(2);
-
-    &.sd-page__empty-header {
-      padding-top: calcSize(3);
-    }
-  }
-}
-.sd-root-modern--mobile .sd-page {
-  padding-top: calcSize(2);
-}
-
 .sd-page {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: calcSize(5) calcSize(2) calcSize(2);
+  padding: 0 calcSize(5);
   width: 100%;
   box-sizing: border-box;
 }
+
+.sd-root-modern--mobile .sd-page {
+  padding: 0;
+}
+
 .sd-page .sd-page__title {
   @include page_title();
+  margin-top: 0;
 }
+
 .sd-page .sd-page__description {
   @include page_description();
-}
+}
diff --git a/src/defaultV2-theme/blocks/sd-panel.scss b/src/defaultV2-theme/blocks/sd-panel.scss
@@ -1,19 +1,20 @@
 .sd-panel {
   position: relative;
 }
+
 .sd-panel.sd-panel--as-page {
-  margin-top: calcSize(-2);
-  & > .sd-panel__content {
-    padding-top: 0;
-  }
-  & > .sd-panel__header.sd-panel__header {
+
+  &>.sd-panel__header.sd-panel__header {
     padding-top: 0;
     padding-bottom: 0;
+
     &:after {
       content: none;
     }
+
     .sd-panel__title {
       @include page_title();
+
       span {
         font-family: inherit;
         font-size: inherit;
@@ -22,13 +23,22 @@
         line-height: inherit;
       }
     }
+
     .sd-panel__description {
       @include page_description();
     }
   }
+
+  .sd-panel__header+.sd-panel__content {
+    margin-top: calcSize(2);
+  }
+
+  &>.sd-panel__content {
+    padding-top: 0;
+  }
 }
 
-.sd-row ~ .sd-row {
+.sd-row~.sd-row {
   .sd-panel--as-page {
     padding-top: calcSize(5);
   }
@@ -37,6 +47,7 @@
 .sd-panel__required-text {
   color: $red;
 }
+
 .sd-panel__footer {
   box-sizing: border-box;
   padding-left: calc(var(--sd-base-padding) - 3 * #{$base-unit});
@@ -47,6 +58,7 @@
   border-top: 1px solid $border-light;
   padding-top: calc(0.5 * var(--sd-base-vertical-padding));
 }
+
 .sd-panel__content {
   padding-top: var(--sd-base-vertical-padding);
-}
+}
diff --git a/src/defaultV2-theme/blocks/sd-row.scss b/src/defaultV2-theme/blocks/sd-row.scss
@@ -5,11 +5,18 @@
   box-sizing: border-box;
   margin-top: var(--sd-base-vertical-padding);
 }
+
+.sd-row.sd-page__row {
+  margin-top: calcSize(2);
+}
+
 .sd-row:first-of-type {
   margin-top: 0;
 }
-.sd-row.sd-page__row {
+
+.sd-page__title~.sd-row.sd-page__row {
   margin-top: calcSize(2);
+
   &.sd-row--compact {
     margin-top: var(--sd-base-vertical-padding);
   }
@@ -21,7 +28,7 @@
   width: calc(100% + var(--sd-base-padding));
   flex-wrap: wrap;
 
-  > div {
+  >div {
     box-sizing: border-box;
     padding-left: var(--sd-base-padding);
   }
@@ -31,17 +38,20 @@
   padding: var(--sd-base-vertical-padding) var(--sd-base-padding) var(--sd-base-padding) 0;
   margin-left: 0;
   width: 100%;
+
   &:not(.sd-row--compact) {
     background: $question-background;
     box-shadow: $shadow-small;
     border-radius: calcCornerRadius(1);
   }
+
   &.sd-row--compact {
     padding: 0;
     width: calc(100% + var(--sd-base-padding));
     margin-left: calc(-1 * var(--sd-base-padding));
   }
 }
+
 .sd-row__panel {
   box-sizing: border-box;
   width: 100%;
@@ -51,4 +61,4 @@
   box-sizing: border-box;
   width: 100%;
   white-space: nowrap;
-}
+}
diff --git a/src/defaultV2-theme/defaultV2.fontless.scss b/src/defaultV2-theme/defaultV2.fontless.scss
@@ -95,10 +95,6 @@ body {
   }
 }
 
-.sd-container-modern {
-  margin-bottom: calcSize(10);
-}
-
 .sd-root-modern--mobile {
   --sd-timer-size: calc(9 * #{$base-unit});
 }
@@ -161,4 +157,4 @@ body {
   .sv-popup__body-content {
     background-color: $background-dim;
   }
-}
+}
diff --git a/testCafe/questions/dropdown.js b/testCafe/questions/dropdown.js
@@ -11,7 +11,7 @@ const questionValueHint = Selector(".sv_q_dropdown__hint-suffix");
 
 const clearButton = Selector(".sv_q_dropdown_clean-button");
 
-const questionOffsetTopConst = 184;
+const questionOffsetTopConst = 176;
 
 frameworks.forEach((framework) => {
   fixture`${framework} ${title}`.page`${url}${framework}`.beforeEach(
@@ -1415,7 +1415,7 @@ frameworks.forEach((framework) => {
       .wait(500)
       .expect(dropdown1.offsetTop).lt(200)
       .expect(dropdown1.find(".sv-popup__scrolling-content").offsetHeight).within(680, 700)
-      .expect(dropdown1.find(".sv-list").scrollTop).within(560, 570)
+      .expect(dropdown1.find(".sv-list").scrollTop).within(550, 560)
       .expect(dropdown1.find(".sv-list").scrollHeight).within(2400, 2500)
       .expect(listItems.filterVisible().count).eql(51)
 
@@ -1436,7 +1436,7 @@ frameworks.forEach((framework) => {
       .wait(500)
       .expect(dropdown2.find(".sv-list__empty-container").visible).notOk()
       .expect(dropdown2.offsetTop).eql(0)
-      .expect(dropdown2.find(".sv-popup__scrolling-content").offsetHeight).within(700, 720)
+      .expect(dropdown2.find(".sv-popup__scrolling-content").offsetHeight).within(700, 710)
       .expect(dropdown2.find(".sv-list").scrollTop).eql(0)
       .expect(dropdown2.find(".sv-list").scrollHeight).within(1350, 1500)
       .expect(listItems.filterVisible().count).eql(31)
@@ -1445,7 +1445,7 @@ frameworks.forEach((framework) => {
       .wait(500)
       .expect(dropdown2.find(".sv-list__empty-container").visible).notOk()
       .expect(dropdown2.offsetTop).eql(0)
-      .expect(dropdown2.find(".sv-popup__scrolling-content").offsetHeight).within(700, 720)
+      .expect(dropdown2.find(".sv-popup__scrolling-content").offsetHeight).within(700, 710)
       .expect(dropdown2.find(".sv-list").scrollTop).within(750, 850)
       .expect(dropdown2.find(".sv-list").scrollHeight).within(2600, 2650)
       .expect(listItems.filterVisible().count).eql(55)
@@ -1568,13 +1568,13 @@ frameworks.forEach((framework) => {
       .expect(dropdown2.visible).ok()
       .expect(listItems.filterVisible().count).eql(10)
       .expect(dropdown2.find(".sv-list__empty-container").visible).notOk()
-      .expect(dropdown2.offsetTop).within(230, 240)
+      .expect(dropdown2.offsetTop).within(220, 230)
       .expect(dropdown2.find(".sv-popup__scrolling-content").offsetHeight).within(470, 480)
 
       .pressKey("3")
       .expect(listItems.filterVisible().count).eql(1)
       .expect(dropdown2.find(".sv-list__empty-container").visible).notOk()
-      .expect(dropdown2.offsetTop).eql(776)
+      .expect(dropdown2.offsetTop).eql(768)
       .expect(dropdown2.find(".sv-popup__scrolling-content").offsetHeight).eql(48)
 
       .pressKey("enter")