Merge pull request #384 from surveyjs/feature/mobile-layout

Added some fixex for mobile layout improvements - surveyjs/service#1744

src/filterInfo.ts

@@ -27,7 +27,7 @@ export class FilterInfo {
 
   public update(selection: { value: any, text: string }) {
     if (selection !== undefined && selection.value !== undefined) {
-      this._htmlElement.style.display = "inline-block";
+      this._htmlElement.style.display = "inline-flex";
       this.text.innerText = localization.getString("filter") + ": [" + selection.text + "]";
     } else {
       this._htmlElement.style.display = "none";

src/layoutEngine.ts

@@ -55,7 +55,7 @@ export class MuuriLayoutEngine extends LayoutEngine {
   private _muuri: any = undefined;
   private _layoutingTimer: any = undefined;
 
-  constructor(allowed: boolean, private _selector: string) {
+  constructor(allowed: boolean, private _selector: string, private dragEnabled = true) {
     super(allowed);
   }
 
@@ -65,7 +65,7 @@ export class MuuriLayoutEngine extends LayoutEngine {
         handle: ".sa-question__title--draggable",
       },
       items: this._selector,
-      dragEnabled: true,
+      dragEnabled: this.dragEnabled,
     });
     this._muuri.on(
       "dragReleaseEnd",

src/plotly/rating.ts

@@ -53,16 +53,20 @@ export class PlotlyGaugeAdapter {
       },
     ];
 
+    const chartMargin = this.model.chartType === "bullet" ? 60 : 30;
     var layout: any = {
+      height: 250,
+      margin: {
+        l: chartMargin,
+        r: chartMargin,
+        b: chartMargin,
+        t: chartMargin,
+        pad: 5
+      },
       plot_bgcolor: this.model.backgroundColor,
       paper_bgcolor: this.model.backgroundColor,
     };
 
-    if (this.model.chartType === "bullet") {
-      layout.height = 250;
-      layout.width = 600;
-    }
-
     const config = {
       displayModeBar: true,
       locale: localization.currentLocale,

src/selectBase.ts

@@ -207,7 +207,7 @@ export class SelectBase
         ((this.chartType == "pie" || this.chartType == "doughnut") &&
           this.topN > 0)
       ) {
-        this.choicesOrderSelector.style.display = "inline-block";
+        this.choicesOrderSelector.style.display = "inline-flex";
       } else {
         this.choicesOrderSelector.style.display = "none";
       }

src/visualizationPanel.scss

@@ -66,9 +66,14 @@
   color: $text-color;
   line-height: 34px;
   margin-bottom: 25px;
-  & > *:not(:first-child) {
-    margin-left: 10px;
-  }
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+.sa-toolbar.sa-toolbar > * {
+  display: inline-flex;
+  line-height: 1em;
 }
 
 .sa-toolbar__button {
@@ -123,7 +128,7 @@
 .sa-question__select-wrapper {
   position: relative;
   display: inline-block;
-  min-width: 200px;
+  min-width: 100px;
   max-width: 300px;
 
   .sa-question__select {
@@ -180,6 +185,7 @@
 .sa-question__filter-text {
   vertical-align: middle;
   margin-top: 1px;
+  line-height: 32px;
 }
 
 .sa-commercial {

src/visualizationPanel.ts

@@ -290,7 +290,8 @@ export class VisualizationPanel extends VisualizerBase {
       options.layoutEngine ||
       new MuuriLayoutEngine(
         this.allowDynamicLayout,
-        "." + questionLayoutedElementClassName
+        "." + questionLayoutedElementClassName,
+        this.allowDragDrop
       );
     this._layoutEngine.onMoveCallback = (fromIndex: number, toIndex: number) =>
       this.moveVisibleElement(fromIndex, toIndex);
@@ -650,6 +651,9 @@ export class VisualizationPanel extends VisualizerBase {
    * Returns the [`allowDragDrop`](https://surveyjs.io/dashboard/documentation/api-reference/ivisualizationpaneloptions#allowDragDrop) property value of the [`IVisualizationPanelOptions`](https://surveyjs.io/dashboard/documentation/api-reference/ivisualizationpaneloptions) object.
    */
   public get allowDragDrop() {
+    if(SurveyCore.IsTouch) {
+      return false;
+    }
     return (
       this.options.allowDragDrop === undefined ||
       this.options.allowDragDrop === true