Merge pull request #7190 from surveyjs/feature/7181-adv-header-mobile

Implemented #7181 - Advanced header mobile view

packages/survey-angular-ui/src/components/header/header.component.html

@@ -1,5 +1,5 @@
 <ng-template #template>
-  <div *ngIf="(survey.headerView === 'advanced' && survey.renderedHasHeader)" [class]="model.coverClasses" [style]="{ height: model.renderedHeight }">
+  <div *ngIf="(survey.headerView === 'advanced' && survey.renderedHasHeader)" [class]="model.headerClasses" [style]="{ height: model.renderedHeight }">
     <div *ngIf="!!model.backgroundImage" [style]="model.backgroundImageStyle" [class]="model.backgroundImageClasses"></div>
     <div *ngIf="!survey.isMobile" [class]="model.contentClasses" [style.width]="model.maxWidth">
       <ng-container *ngFor="let cell of model.cells">

packages/survey-vue3-ui/src/components/header/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="model.coverClasses" :style="{ 'height': model.renderedHeight }">
+  <div :class="model.headerClasses" :style="{ 'height': model.renderedHeight }">
     <div v-if="!!model.backgroundImage" :class="model.backgroundImageClasses" :style="model.backgroundImageStyle"></div>
     <div v-if="!survey.isMobile" :class="model.contentClasses" :style="{ maxWidth: model.maxWidth }">
     <sv-header-cell

src/defaultV2-theme/blocks/header.scss

@@ -3,25 +3,25 @@
   background-color: $cover-backcolor;
 }
 
-.sv-header--mobile {
-  padding: calcSize(3);
-}
-
-.sv-conver__overlap {
+.sv-header__overlap {
   margin-bottom: calcSize(-14);
   padding-bottom: calcSize(8);
 }
 
-.sv-conver__overlap.sv-conver__without-background {
+.sv-header__overlap.sv-header__without-background {
   margin-bottom: 0;
   padding-bottom: 0;
 }
 
-.sv-conver__without-background .sv-conver__content {
-  padding-bottom: 0;
+.sv-header__without-background {
+
+  .sv-header--mobile,
+  .sv-header__content {
+    padding-bottom: 0;
+  }
 }
 
-.sv-conver__content {
+.sv-header__content {
   padding: calcSize(5);
   box-sizing: border-box;
   height: 100%;
@@ -33,7 +33,7 @@
   grid-auto-rows: 1fr 1fr 1fr;
 }
 
-.sv-conver__content--static {
+.sv-header__content--static {
   max-width: calcSize(88);
   margin-left: auto;
   margin-right: auto;
@@ -122,6 +122,20 @@
   color: $cover-description-forecolor;
 }
 
-.sv-conver__content .sd-header__text h3 {
+.sv-header__content .sd-header__text h3 {
   margin: 0;
+}
+
+.sv-header--mobile {
+  padding: calcSize(3);
+  position: relative;
+  z-index: 1;
+
+  .sv-header__logo~.sv-header__title {
+    margin-top: calcSize(3);
+  }
+
+  .sv-header__logo img {
+    max-width: 100%;
+  }
 }

src/header.ts

@@ -75,20 +75,20 @@ export class Cover extends Base {
     }
     return backgroundImageFit;
   }
-  private updateCoverClasses(): void {
-    this.coverClasses = new CssClassBuilder()
+  private updateHeaderClasses(): void {
+    this.headerClasses = new CssClassBuilder()
       .append("sv-header")
-      .append("sv-conver__without-background", (!this.backgroundColor || this.backgroundColor === "trasparent") && !this.backgroundImage)
-      .append("sv-conver__overlap", this.overlapEnabled)
+      .append("sv-header__without-background", (!this.backgroundColor || this.backgroundColor === "trasparent") && !this.backgroundImage)
+      .append("sv-header__overlap", this.overlapEnabled)
       .toString();
   }
   private updateContentClasses(): void {
     const surveyWidthMode = !!this.survey && this.survey.calculateWidthMode();
     this.maxWidth = this.inheritWidthFrom === "survey" && !!surveyWidthMode && surveyWidthMode === "static" && this.survey.renderedWidth;
     this.contentClasses = new CssClassBuilder()
-      .append("sv-conver__content")
-      .append("sv-conver__content--static", this.inheritWidthFrom === "survey" && !!surveyWidthMode && surveyWidthMode === "static")
-      .append("sv-conver__content--responsive", this.inheritWidthFrom === "container" || (!!surveyWidthMode && surveyWidthMode === "responsive"))
+      .append("sv-header__content")
+      .append("sv-header__content--static", this.inheritWidthFrom === "survey" && !!surveyWidthMode && surveyWidthMode === "static")
+      .append("sv-header__content--responsive", this.inheritWidthFrom === "container" || (!!surveyWidthMode && surveyWidthMode === "responsive"))
       .toString();
   }
   private updateBackgroundImageClasses(): void {
@@ -111,7 +111,7 @@ export class Cover extends Base {
     ["top", "middle", "bottom"].forEach((positionY: VerticalAlignment) =>
       ["left", "center", "right"].forEach((positionX: HorizontalAlignment) => this.cells.push(new CoverCell(this, positionX, positionY)))
     );
-    this.updateCoverClasses();
+    this.updateHeaderClasses();
     this.updateContentClasses();
     this.updateBackgroundImageClasses();
   }
@@ -144,7 +144,7 @@ export class Cover extends Base {
   @property() logoStyle: { gridColumn: number, gridRow: number };
   @property() titleStyle: { gridColumn: number, gridRow: number };
   @property() descriptionStyle: { gridColumn: number, gridRow: number };
-  @property() coverClasses: string;
+  @property() headerClasses: string;
   @property() contentClasses: string;
   @property() maxWidth: string;
   @property() backgroundImageClasses: string;
@@ -183,7 +183,7 @@ export class Cover extends Base {
   protected propertyValueChanged(name: string, oldValue: any, newValue: any): void {
     super.propertyValueChanged(name, oldValue, newValue);
     if (name === "backgroundColor" || name === "backgroundImage" || name === "overlapEnabled") {
-      this.updateCoverClasses();
+      this.updateHeaderClasses();
     }
     if (name === "inheritWidthFrom") {
       this.updateContentClasses();

src/knockout/components/header/index.html

@@ -1,5 +1,5 @@
 <!-- ko if: (survey.headerView === 'advanced' && survey.renderedHasHeader) -->
-<div data-bind="css: model.coverClasses, style: { height: model.renderedHeight }">
+<div data-bind="css: model.headerClasses, style: { height: model.renderedHeight }">
   <!-- ko if: !!model.backgroundImage -->
   <div data-bind="style: model.backgroundImageStyle, css: model.backgroundImageClasses"></div>
   <!-- /ko -->

src/react/components/header.tsx

@@ -108,7 +108,7 @@ export class Header extends SurveyElementBase<ILayoutElementProps<Cover>, any> {
     }
 
     return (
-      <div className={this.model.coverClasses} style={{ height: this.model.renderedHeight }}>
+      <div className={this.model.headerClasses} style={{ height: this.model.renderedHeight }}>
         {this.model.backgroundImage ? <div style={this.model.backgroundImageStyle} className={this.model.backgroundImageClasses}></div> : null}
         {headerContent}
       </div>

src/vue/components/header/header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="model.coverClasses" :style="{ 'height': model.renderedHeight }">
+  <div :class="model.headerClasses" :style="{ 'height': model.renderedHeight }">
     <div v-if="!!model.backgroundImage" :class="model.backgroundImageClasses" :style="model.backgroundImageStyle"></div>
     <div v-if="!survey.isMobile" :class="model.contentClasses" :style="{ maxWidth: model.maxWidth }">
     <sv-header-cell

tests/headerTests.ts

@@ -81,16 +81,16 @@ QUnit.test("contentClasses",
 
     assert.equal(cover.survey.widthMode, "auto", "default widthMode");
     assert.equal(cover.inheritWidthFrom, "survey", "default inheritWidthFrom");
-    assert.equal(cover.contentClasses, "sv-conver__content sv-conver__content--static", "default contentClasses");
+    assert.equal(cover.contentClasses, "sv-header__content sv-header__content--static", "default contentClasses");
 
     cover.survey.widthMode = "responsive";
-    assert.equal(cover.contentClasses, "sv-conver__content sv-conver__content--responsive", "survey.widthMode is responsive");
+    assert.equal(cover.contentClasses, "sv-header__content sv-header__content--responsive", "survey.widthMode is responsive");
 
     cover.survey.widthMode = "static";
-    assert.equal(cover.contentClasses, "sv-conver__content sv-conver__content--static", "survey.widthMode is static");
+    assert.equal(cover.contentClasses, "sv-header__content sv-header__content--static", "survey.widthMode is static");
 
     cover.inheritWidthFrom = "container";
-    assert.equal(cover.contentClasses, "sv-conver__content sv-conver__content--responsive", "inheritWidthFrom is container");
+    assert.equal(cover.contentClasses, "sv-header__content sv-header__content--responsive", "inheritWidthFrom is container");
   }
 );
 

visualRegressionTests/tests/defaultV2/survey.ts

@@ -145,6 +145,36 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("survey-advanced-header-mobile-default.png", Selector(".sd-root-modern"), t, comparer);
     });
   });
+  test("Check survey advanced header mobile view with background", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(500, 600);
+      await initSurvey(framework, {
+        title: "Survey Title",
+        description: "Survey description",
+        logo: "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg",
+        widthMode: "responsive",
+        questions: [
+          {
+            type: "text",
+            title: "Question title",
+            name: "q1"
+          }
+        ]
+      });
+      await ClientFunction(() => {
+        (<any>window).survey.headerView = "advanced";
+        (<any>window).survey.applyTheme({
+          cssVariables: {
+            "--sjs-cover-backcolor": "green"
+          },
+          header: {
+          }
+        });
+        (<any>window).survey.setIsMobile(true);
+      })();
+      await takeElementScreenshot("survey-advanced-header-mobile-background.png", Selector(".sd-root-modern"), t, comparer);
+    });
+  });
   test("Check survey with progress top", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);