Responsive Design fixes (#332)

* Increased chart width on mobile

* Updates to charts css

* removed added widths

* Reduced the paddings and added multiline support

* Smaller labels and text wrap on titles

* Updated x-tickcount for line charts

* Updated x-tickcount for line charts

Author: tanvirchahal

ckanext/querytool/fanstatic/css/main.css

@@ -178,7 +178,14 @@ ckan.module('querytool-viz-preview', function() {
               optionalFilter: optionalFilter,
             });
             options.title = {
-                text: titleVal
+                text: titleVal,
+                position: "upper-left",
+                padding: {
+                    left: 0,
+                    right: 0,
+                    bottom: 15,
+                    top:0
+                }
             }
 
             options.legend = {
@@ -252,14 +259,15 @@ ckan.module('querytool-viz-preview', function() {
                             rotate: yrotate
                         },
                         padding: {
-                            top: parseInt(padding_top),
+                            top: 200,
                             bottom: parseInt(padding_bottom)
                         }
                     },
                     x: {
                         tick: {
                             rotate: x_text_rotate,
-                            multiline: x_text_multiline
+                            multiline: true,
+                            multilineMax: 2,
                         }
                     }
                 }
@@ -338,37 +346,73 @@ ckan.module('querytool-viz-preview', function() {
                     }
                 }
 
-                options.axis = {
-                    y: {
-                        tick: {
-                            count: tick_count,
-                            format: function(value) {
-                                var dataf = this.sortFormatData(y_tick_format, value);
-                                return dataf;
-                            }.bind(this),
-                            rotate: yrotate
+                //Tick count on x-axis for line charts
+                if (this.options.chart_type === 'line') {
+                    options.axis = {
+                        y: {
+                            tick: {
+                                count: tick_count,
+                                format: function(value) {
+                                    var dataf = this.sortFormatData(y_tick_format, value);
+                                    return dataf;
+                                }.bind(this),
+                                rotate: yrotate
+                            },
+                            padding: {
+                                top: 200,
+                                bottom: parseInt(padding_bottom)
+                            },
+                            label: {
+                              text: y_label || measure_label || '',
+                              position: 'outer-middle',
+                            }
                         },
-                        padding: {
-                            top: parseInt(padding_top),
-                            bottom: parseInt(padding_bottom)
+                        x: {
+                            type: 'category',
+                            categories: categories,
+                            tick: {
+                                count:5,
+                                rotate: x_text_rotate,
+                                multiline: true,
+                                multilineMax: 2
+                            }
                         },
-                        label: {
-                          text: y_label || measure_label || '',
-                          position: 'outer-middle',
-                        }
-                    },
-                    x: {
-                        type: 'category',
-                        categories: categories,
-                        tick: {
-                            rotate: x_text_rotate,
-                            multiline: x_text_multiline,
-                            fit: true
-                        }
-                    },
-                    rotated: rotate,
-                };
+                        rotated: rotate,
+                    };
+                } else {
+                  //no Tick count on x-axis for bar 
+                  options.axis = {
+                      y: {
+                          tick: {
+                              count: tick_count,
+                              format: function(value) {
+                                  var dataf = this.sortFormatData(y_tick_format, value);
+                                  return dataf;
+                              }.bind(this),
+                              rotate: yrotate
+                          },
+                          padding: {
+                              top: 200,
+                              bottom: parseInt(padding_bottom)
+                          },
+                          label: {
+                            text: y_label || measure_label || '',
+                            position: 'outer-middle',
+                          }
+                      },
+                      x: {
+                          type: 'category',
+                          categories: categories,
+                          tick: {
+                              rotate: x_text_rotate,
+                              multiline: true,
+                              multilineMax: 2
+                          }
+                      },
+                      rotated: rotate,
+                  };
 
+                }
                 options.point = {
                   r: 3,
                 }

ckanext/querytool/fanstatic/css/public-query-tool.css

@@ -277,5 +277,47 @@
             copyText.select();
             document.execCommand("Copy");
         });
+
+
     });
+
+    $(window).load(function(){
+      //Only running on mobile phones
+      if ($(window).width() <= 500) {
+          setTimeout(function() { splitTitles(); }, 1000);
+      }
+    })
+
+    function splitTitles(){
+      $(".c3-title").each(function(){
+        //Fetching the HTML
+        var text =  $(this).html().split(" ");
+
+        //Getting word length
+        var words = text.length;
+
+        var html = "";
+        var y = 10;
+        if(words>10){
+          for(var i=1;i<=words;i++){
+            //Splitting the string every 10 words and adding tspan
+            if((i%10)==0) {
+              html += "<tspan x=0 y="+y+">"+text.slice(i-10, i).join(" ") + "</tspan><tspan x=0 y="+(y+13)+">"+text.slice(i, i+10).join(" ") + "</tspan>";
+              y = y+13;
+            }
+          }
+          $(this).html(html);
+        }
+
+
+
+
+        console.log("words is: "+words)
+      });
+
+      //Custom Function to split headers
+      $(".c3-title").each(function(){
+
+      });
+    }
 })($);

ckanext/querytool/fanstatic/css/public-story-tool.css

@@ -195,6 +195,51 @@
       flex: auto;
     }
   }
+
+  .size-lg.chart {
+    .item-content{
+        height:500px !important;
+    }
+  }
+
+  /* Mobile updates to charts */
+  .public-query {
+    .item.chart {
+      margin-right:0;
+      padding-left:10px !important;
+      padding-right:10px !important;
+    }
+
+    .item {
+      margin-left:0 !important;
+    }
+
+    .item-content.c3 {
+      min-height:460px;
+    }
+
+    .c3-title {
+      font-size:12px !important;
+    }
+  }
+
+  .public-query {
+    .visualizations {
+        padding-right:0px !important;
+    }
+  }
+
+  .c3-axis-y text
+  {
+    font-size: 10px;
+    font-weight: 300;
+  }
+
+  .c3-axis-x text
+  {
+    font-size: 10px;
+    font-weight: 300;
+  }
 }
 
 /* Landscape phone to portrait tablet */