Fix panel paddings

surveyjs · Aug 23, 2023 · f61e5a0 · f61e5a0
1 parent 7cb458a
commit f61e5a0
Show file tree

Hide file tree

Showing 61 changed files with 24 additions and 22 deletions.
diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts
@@ -163,6 +163,7 @@ export var defaultV2Css = {
     contentLeft: "sd-question__content--left",
     titleNumInline: "sd-element__title--num-inline",
     titleLeftRoot: "sd-question--left",
+    titleTopRoot: "sd-question--top",
     titleOnAnswer: "sd-question__title--answer",
     titleOnError: "sd-question__title--error",
     title: "sd-title sd-element__title sd-question__title",

diff --git a/src/defaultV2-theme/blocks/sd-element.scss b/src/defaultV2-theme/blocks/sd-element.scss
@@ -201,6 +201,10 @@
     }
   }
 
+  &>.sd-element__header--location-top {
+    margin-top: 0;
+  }
+
   &.sd-element--with-frame {
     padding-top: 0;
     padding-bottom: 0;
@@ -210,10 +214,6 @@
       padding-bottom: calcSize(2);
       border-radius: $panel-corner-radius;
     }
-
-    &>.sd-element__header--location-top {
-      margin-top: 0;
-    }
   }
 
   &>.sd-element__header:focus-within,
@@ -237,6 +237,17 @@
     }
   }
 
+  &.sd-question--table:not(.sd-element--collapsed) {
+    &.sd-question--top {
+      margin-top: calcSize(-1);
+
+      &>.sd-question__erbox--above-question {
+        margin-top: calcSize(1);
+        margin-bottom: var(--sd-base-vertical-padding);
+      }
+    }
+  }
+
   &.sd-element--collapsed {
 
     &>.sd-element__header:hover,
@@ -300,5 +311,4 @@
   border-radius: $panel-corner-radius;
   box-shadow: none;
   background-color: transparent;
-}
-
+}
diff --git a/src/defaultV2-theme/blocks/sd-panel.scss b/src/defaultV2-theme/blocks/sd-panel.scss
@@ -3,7 +3,6 @@
 }
 
 .sd-panel.sd-panel--as-page {
-
   &>.sd-panel__header.sd-panel__header {
     padding-top: 0;
     padding-bottom: 0;
@@ -60,5 +59,5 @@
 }
 
 .sd-panel__content {
-  padding-top: var(--sd-base-vertical-padding);
+  padding-top: var(--sd-base-padding);
 }
diff --git a/src/defaultV2-theme/blocks/sd-paneldynamic.scss b/src/defaultV2-theme/blocks/sd-paneldynamic.scss
@@ -20,20 +20,14 @@
             display: none;
         }
 
-        padding-top: calc(0.5 * var(--sd-base-vertical-padding) + #{$base-unit});
+        padding-top: var(--sd-base-vertical-padding);
 
         &>.sd-panel__title {
             color: $foreground-light;
         }
     }
 }
 
-.sd-question__content:first-child>.sd-paneldynamic {
-    &>.sd-paneldynamic__panel-wrapper>.sd-panel>.sd-panel__header {
-        padding-top: var(--sd-base-vertical-padding);
-    }
-}
-
 .sd-paneldynamic__separator {
     display: block;
     position: absolute;
@@ -135,6 +129,7 @@
         padding-bottom: var(--sd-base-padding);
     }
 }
+
 .sd-paneldynamic__buttons-container .sd-action-bar {
     width: 100%;
     margin: 0 calcSize(-3);

diff --git a/src/defaultV2-theme/blocks/sd-question.scss b/src/defaultV2-theme/blocks/sd-question.scss
@@ -20,7 +20,7 @@
 }
 
 .sd-question__erbox--above-question {
-  margin-bottom: calc(var(--sd-base-vertical-padding) - #{$base-unit});
+  margin-bottom: var(--sd-base-vertical-padding);
 }
 
 .sd-question__erbox--below-question {
@@ -47,6 +47,7 @@
 }
 
 .sd-question__header--location-top {
+  margin-top: calc(-1 * 0.25 * var(--sd-base-vertical-padding));
   padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
 }
 
@@ -63,11 +64,6 @@
 
   &>.sd-question__erbox--above-question {
     margin-top: calc(-1 * var(--sd-base-padding));
-    margin-bottom: var(--sd-base-vertical-padding);
-  }
-
-  &>.sd-question__header--location-top {
-    margin-top: calcSize(-1);
   }
 
   &>.sd-question__content>.sd-question__header--location--bottom {

diff --git a/src/defaultV2-theme/blocks/sd-row.scss b/src/defaultV2-theme/blocks/sd-row.scss
@@ -39,7 +39,7 @@
 }
 
 .sd-page__row.sd-row--multiple {
-  padding: var(--sd-base-vertical-padding) var(--sd-base-padding) var(--sd-base-padding) 0;
+  padding: var(--sd-base-padding) var(--sd-base-padding) var(--sd-base-padding) 0;
   margin-left: 0;
   width: 100%;
 

diff --git a/src/question.ts b/src/question.ts
@@ -827,6 +827,7 @@ export class Question extends SurveyElement<Question>
       .append(this.isFlowLayout && !this.isDesignMode
         ? cssClasses.flowRoot
         : cssClasses.mainRoot)
+      .append(cssClasses.titleTopRoot, this.hasTitleOnTop)
       .append(cssClasses.titleLeftRoot, !this.isFlowLayout && this.hasTitleOnLeft)
       .append(cssClasses.hasError, this.errors.length > 0)
       .append(cssClasses.small, !this.width)

diff --git a/...ressionTests/tests/defaultV2/etalons/collapsed-questions-inside-panel-hover.png b/...ressionTests/tests/defaultV2/etalons/collapsed-questions-inside-panel-hover.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/collapsed-questions-inside-panel.png b/visualRegressionTests/tests/defaultV2/etalons/collapsed-questions-inside-panel.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/complex-question.png b/visualRegressionTests/tests/defaultV2/etalons/complex-question.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/dropdown-question-empty-value.png b/visualRegressionTests/tests/defaultV2/etalons/dropdown-question-empty-value.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/dropdown-question-noempty-value.png b/visualRegressionTests/tests/defaultV2/etalons/dropdown-question-noempty-value.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/file-question-placeholder-mobile.png b/visualRegressionTests/tests/defaultV2/etalons/file-question-placeholder-mobile.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/image-question-row.png b/visualRegressionTests/tests/defaultV2/etalons/image-question-row.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/imagepicker-responsive-min.png b/visualRegressionTests/tests/defaultV2/etalons/imagepicker-responsive-min.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/inner-panel-single-page.png b/visualRegressionTests/tests/defaultV2/etalons/inner-panel-single-page.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/multiple-row-overflow.png b/visualRegressionTests/tests/defaultV2/etalons/multiple-row-overflow.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/panel-elements-one-row.png b/visualRegressionTests/tests/defaultV2/etalons/panel-elements-one-row.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/panel-expand.png b/visualRegressionTests/tests/defaultV2/etalons/panel-expand.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/panel-in-row.png b/visualRegressionTests/tests/defaultV2/etalons/panel-in-row.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/panel-invisible.png b/visualRegressionTests/tests/defaultV2/etalons/panel-invisible.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/panel-with-question-errors-above.png b/visualRegressionTests/tests/defaultV2/etalons/panel-with-question-errors-above.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/panel-with-question-errors-below.png b/visualRegressionTests/tests/defaultV2/etalons/panel-with-question-errors-below.png
diff --git a/...sts/tests/defaultV2/etalons/panel-with-question-title-left-and-errors-above.png b/...sts/tests/defaultV2/etalons/panel-with-question-title-left-and-errors-above.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/panel.png b/visualRegressionTests/tests/defaultV2/etalons/panel.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/paneldynamic-list.png b/visualRegressionTests/tests/defaultV2/etalons/paneldynamic-list.png
diff --git a/...onTests/tests/defaultV2/etalons/paneldynamic-progress-top-legacy-navigation.png b/...onTests/tests/defaultV2/etalons/paneldynamic-progress-top-legacy-navigation.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/paneldynamic-progress-top.png b/visualRegressionTests/tests/defaultV2/etalons/paneldynamic-progress-top.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/paneldynamic-tabs-hover-tab.png b/visualRegressionTests/tests/defaultV2/etalons/paneldynamic-tabs-hover-tab.png
diff --git a/...ressionTests/tests/defaultV2/etalons/paneldynamic-tabs-responsiveness-hover.png b/...ressionTests/tests/defaultV2/etalons/paneldynamic-tabs-responsiveness-hover.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/paneldynamic-tabs-responsiveness.png b/visualRegressionTests/tests/defaultV2/etalons/paneldynamic-tabs-responsiveness.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/paneldynamic-tabs-with-title.png b/visualRegressionTests/tests/defaultV2/etalons/paneldynamic-tabs-with-title.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/paneldynamic-tabs-without-title.png b/visualRegressionTests/tests/defaultV2/etalons/paneldynamic-tabs-without-title.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/paneldynamic-with-custom-actions.png b/visualRegressionTests/tests/defaultV2/etalons/paneldynamic-with-custom-actions.png
diff --git a/...lRegressionTests/tests/defaultV2/etalons/paneldynamic-without-remove-button.png b/...lRegressionTests/tests/defaultV2/etalons/paneldynamic-without-remove-button.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/popup-into-modal-popup.png b/visualRegressionTests/tests/defaultV2/etalons/popup-into-modal-popup.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/question-matrix-detail-hover.png b/visualRegressionTests/tests/defaultV2/etalons/question-matrix-detail-hover.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/question-matrix-detail.png b/visualRegressionTests/tests/defaultV2/etalons/question-matrix-detail.png
diff --git a/...RegressionTests/tests/defaultV2/etalons/responsiveness-checkbox-col-count-2.png b/...RegressionTests/tests/defaultV2/etalons/responsiveness-checkbox-col-count-2.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/responsiveness-multiple-row.png b/visualRegressionTests/tests/defaultV2/etalons/responsiveness-multiple-row.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/responsiveness-multipletext.png b/visualRegressionTests/tests/defaultV2/etalons/responsiveness-multipletext.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/responsiveness-paneldynamic-list.png b/visualRegressionTests/tests/defaultV2/etalons/responsiveness-paneldynamic-list.png
diff --git a/...ssionTests/tests/defaultV2/etalons/responsiveness-paneldynamic-progress-top.png b/...ssionTests/tests/defaultV2/etalons/responsiveness-paneldynamic-progress-top.png
diff --git a/...ssionTests/tests/defaultV2/etalons/responsiveness-question-with-error-below.png b/...ssionTests/tests/defaultV2/etalons/responsiveness-question-with-error-below.png
diff --git a/...lRegressionTests/tests/defaultV2/etalons/responsiveness-question-with-error.png b/...lRegressionTests/tests/defaultV2/etalons/responsiveness-question-with-error.png
diff --git a/...alRegressionTests/tests/defaultV2/etalons/responsiveness-ranking-hover-item.png b/...alRegressionTests/tests/defaultV2/etalons/responsiveness-ranking-hover-item.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/responsiveness-ranking.png b/visualRegressionTests/tests/defaultV2/etalons/responsiveness-ranking.png
diff --git a/...lRegressionTests/tests/defaultV2/etalons/responsiveness-simple-question-rtl.png b/...lRegressionTests/tests/defaultV2/etalons/responsiveness-simple-question-rtl.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/responsiveness-simple-question.png b/visualRegressionTests/tests/defaultV2/etalons/responsiveness-simple-question.png
diff --git a/...lRegressionTests/tests/defaultV2/etalons/responsiveness-survey-layout-page1.png b/...lRegressionTests/tests/defaultV2/etalons/responsiveness-survey-layout-page1.png
diff --git a/...lRegressionTests/tests/defaultV2/etalons/responsiveness-survey-layout-page2.png b/...lRegressionTests/tests/defaultV2/etalons/responsiveness-survey-layout-page2.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-compact.png b/visualRegressionTests/tests/defaultV2/etalons/survey-compact.png
diff --git a/...alRegressionTests/tests/defaultV2/etalons/survey-page-without-title-compact.png b/...alRegressionTests/tests/defaultV2/etalons/survey-page-without-title-compact.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-with-panel-compact.png b/visualRegressionTests/tests/defaultV2/etalons/survey-with-panel-compact.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/tagbox-contrast-input.png b/visualRegressionTests/tests/defaultV2/etalons/tagbox-contrast-input.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/tagbox-focused.png b/visualRegressionTests/tests/defaultV2/etalons/tagbox-focused.png
diff --git a/...ssionTests/tests/defaultV2/etalons/tagbox-question-overlay-tablet-popup-big.png b/...ssionTests/tests/defaultV2/etalons/tagbox-question-overlay-tablet-popup-big.png
diff --git a/...ionTests/tests/defaultV2/etalons/tagbox-question-overlay-tablet-popup-small.png b/...ionTests/tests/defaultV2/etalons/tagbox-question-overlay-tablet-popup-small.png
diff --git a/...egressionTests/tests/defaultV2/etalons/tagbox-question-overlay-tablet-popup.png b/...egressionTests/tests/defaultV2/etalons/tagbox-question-overlay-tablet-popup.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/two-paneldynamic-in-one-row.png b/visualRegressionTests/tests/defaultV2/etalons/two-paneldynamic-in-one-row.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/two-panels-one-row-small-screen.png b/visualRegressionTests/tests/defaultV2/etalons/two-panels-one-row-small-screen.png