Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change design for questions in one row #6803

Merged
merged 4 commits into from
Aug 31, 2023
Merged

Change design for questions in one row #6803

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
05c0df7
Change design for questions in one row
Aug 25, 2023
2145e52
#6799 - fix gaps and adaptivity
Aug 25, 2023
4857432
Change design for questions in one row
Aug 25, 2023
632c25c
#6799 - fixed compact mode
novikov82 Aug 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 18 additions & 11 deletions src/defaultV2-theme/blocks/sd-row.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,27 +32,34 @@
width: calc(100% + var(--sd-base-padding));
flex-wrap: wrap;

>div {
&>div {
box-sizing: border-box;
padding-left: var(--sd-base-padding);
padding-left: calcSize(2);
}
}

.sd-page__row.sd-row--multiple {
padding: var(--sd-base-padding) var(--sd-base-padding) var(--sd-base-padding) 0;
margin-left: 0;
width: 100%;
.sd-panel {
.sd-row--multiple {
&>div {
padding-left: var(--sd-base-padding);
}
}
}

&:not(.sd-row--compact) {
background: $question-background;
box-shadow: $shadow-small;
border-radius: calcCornerRadius(1);
.sd-row--multiple.sd-row--compact {
&>div {
padding-left: var(--sd-base-padding);
}
}
.sd-page__row.sd-row--multiple {
margin-left: calcSize(-2);
width: calc(100% + 2 * var(--sjs-base-unit, var(--base-unit, 8px)));


&.sd-row--compact {
padding: 0;
width: calc(100% + var(--sd-base-padding));
margin-left: calc(-1 * var(--sd-base-padding));
width: calc(100% + var(--sd-base-padding));
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/survey-element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -810,10 +810,10 @@ export class SurveyElement<E = any> extends SurveyElementCore implements ISurvey
}

protected getHasFrameV2() : boolean {
return this.shouldAddRunnerStyles() && (!this.hasParent && this.isSingleInRow);
return this.shouldAddRunnerStyles() && (!this.hasParent);
}
protected getIsNested(): boolean {
return this.shouldAddRunnerStyles() && (this.hasParent || !this.isSingleInRow);
return this.shouldAddRunnerStyles() && (this.hasParent);
}
protected getCssRoot(cssClasses: { [index: string]: string }): string {
return new CssClassBuilder()
Expand Down
4 changes: 2 additions & 2 deletions tests/markup/snapshots/page-swnl-title-v2.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div style="flex:1 1 50%; max-width:100%; min-width:300px;">
<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="question0" id="testid0">
<div class="sd-element sd-element--with-frame sd-question sd-row__question sd-row__question--small" data-name="question0" id="testid0">
<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
<h5 class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
Expand All @@ -13,7 +13,7 @@ <h5 class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle"
</div>
</div>
<div style="flex:1 1 50%; max-width:100%; min-width:300px;">
<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="question1" id="testid1">
<div class="sd-element sd-element--with-frame sd-question sd-row__question sd-row__question--small" data-name="question1" id="testid1">
<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
<h5 class="sd-element__title sd-question__title sd-title" id="testid1_ariaTitle">
<span aria-hidden="true" class="sd-element__num" style="position:static;">2.</span>
Expand Down
8 changes: 4 additions & 4 deletions tests/markup/snapshots/page-swnl-v2.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<div style="flex: 1 1 50%; max-width: 100%; min-width: 300px;">
<div aria-invalid="false" aria-required="false" class="sd-element--nested sd-question sd-question--html sd-row__question" data-name="question0" id="testid0" role="textbox">
<div style="flex:1 1 50%; max-width:100%; min-width:300px;">
<div aria-invalid="false" aria-required="false" class="sd-question sd-question--html sd-row__question" data-name="question0" id="testid0" role="textbox">
<div class="sd-question__content" role="presentation">
<div class="sd-html">HTML1</div>
</div>
</div>
</div>
<div style="flex: 1 1 50%; max-width: 100%; min-width: 300px;">
<div aria-invalid="false" aria-required="false" class="sd-element--nested sd-question sd-question--html sd-row__question" data-name="question1" id="testid1" role="textbox">
<div style="flex:1 1 50%; max-width:100%; min-width:300px;">
<div aria-invalid="false" aria-required="false" class="sd-question sd-question--html sd-row__question" data-name="question1" id="testid1" role="textbox">
<div class="sd-question__content" role="presentation">
<div class="sd-html">HTML2</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions tests/markup/snapshots/panel-page-swnl-title-v2.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div style="flex:1 1 50%; max-width:100%; min-width:300px;">
<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="question0" id="testid0">
<div class="sd-element sd-element--with-frame sd-question sd-row__question sd-row__question--small" data-name="question0" id="testid0">
<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
<h5 class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
Expand All @@ -13,7 +13,7 @@ <h5 class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle"
</div>
</div>
<div style="flex:1 1 50%; max-width:100%; min-width:auto;">
<div class="sd-element sd-element--complex sd-element--nested sd-panel sd-row__panel" id="testidp0">
<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
<div class="sd-panel__content" id="testidp0_content">
<div class="sd-clearfix sd-row">
<div style="flex:1 1 100%; max-width:100%; min-width:300px;">
Expand Down
10 changes: 5 additions & 5 deletions tests/markup/snapshots/panel-page-swnl-v2.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<div style="flex: 1 1 50%; max-width: 100%; min-width: 300px;">
<div aria-invalid="false" aria-required="false" class="sd-element--nested sd-question sd-question--html sd-row__question" data-name="question0" id="testid0" role="textbox">
<div style="flex:1 1 50%; max-width:100%; min-width:300px;">
<div aria-invalid="false" aria-required="false" class="sd-question sd-question--html sd-row__question" data-name="question0" id="testid0" role="textbox">
<div class="sd-question__content" role="presentation">
<div class="sd-html">HTML1</div>
</div>
</div>
</div>
<div style="flex: 1 1 50%; max-width: 100%; min-width: auto;">
<div class="sd-element sd-element--complex sd-element--nested sd-panel sd-row__panel" id="testidp0">
<div style="flex:1 1 50%; max-width:100%; min-width:auto;">
<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
<div class="sd-panel__content" id="testidp0_content">
<div class="sd-clearfix sd-row">
<div style="flex: 1 1 100%; max-width: 100%; min-width: 300px;">
<div style="flex:1 1 100%; max-width:100%; min-width:300px;">
<div aria-invalid="false" aria-required="false" class="sd-element--nested sd-question sd-question--html sd-row__question" data-name="question1" id="testid1" role="textbox">
<div class="sd-question__content" role="presentation">
<div class="sd-html">HTML2</div>
Expand Down
Binary file modified visualRegressionTests/tests/defaultV2/etalons/image-question-row.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified visualRegressionTests/tests/defaultV2/etalons/multiple-row-overflow.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified visualRegressionTests/tests/defaultV2/etalons/multiple-row.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified visualRegressionTests/tests/defaultV2/etalons/panel-in-row.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified visualRegressionTests/tests/defaultV2/etalons/responsiveness-multiple-row.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion visualRegressionTests/tests/defaultV2/question.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ frameworks.forEach(framework => {
test("Check questions in one row (overflow content)", async (t) => {
await wrapVisualTest(t, async (t, comparer) => {

await t.resizeWindow(1000, 1080);
await t.resizeWindow(900, 1080);
await initSurvey(framework, {
questions: [
{
Expand Down