Make morris.js responsive

production/css/custom.css

@@ -4234,17 +4234,12 @@ ul.project_files li a i {
 }
 .avatar-view {
   display: block;
-  height: 220px;
-  width: 220px;
   border: 3px solid #fff;
   border-radius: 5px;
   box-shadow: 0 0 5px rgba(0, 0, 0, .15);
   cursor: pointer;
   overflow: hidden;
 }
-.avatar-view img {
-  width: 100%;
-}
 .avatar-body {
   padding-right: 15px;
   padding-left: 15px;

production/index3.html

@@ -869,8 +869,9 @@
                       <h4>Goal</h4>
                       <canvas width="150" height="80" id="foo2" class="" style="width: 160px; height: 100px;"></canvas>
                       <div class="goal-wrapper">
+                        <span class="gauge-value pull-left">$</span>
                         <span id="gauge-text2" class="gauge-value pull-left">3,200</span>
-                        <span id="goal-text2" class="goal-value pull-right">5,000</span>
+                        <span id="goal-text2" class="goal-value pull-right">$5,000</span>
                       </div>
                     </div>
                   </div>
@@ -879,6 +880,7 @@
             </div>
           </div>
         </div>
+      </div>
 
         <!-- footer content -->
         <footer>
@@ -1143,39 +1145,38 @@
   <!-- moris js -->
   <script src="js/moris/raphael-min.js"></script>
   <script src="js/moris/morris.min.js"></script>
+  
   <script>
     $(function() {
-      var day_data = [{
-        "period": "Jan",
-        "Hours worked": 80
-      }, {
-        "period": "Feb",
-        "Hours worked": 125
-      }, {
-        "period": "Mar",
-        "Hours worked": 176
-      }, {
-        "period": "Apr",
-        "Hours worked": 224
-      }, {
-        "period": "May",
-        "Hours worked": 265
-      }, {
-        "period": "Jun",
-        "Hours worked": 314
-      }];
       Morris.Bar({
         element: 'graph_bar',
-        data: day_data,
+        data: [
-        hideHover: 'always',
+          { "period": "Jan", "Hours worked": 80 }, 
+          { "period": "Feb", "Hours worked": 125 }, 
+          { "period": "Mar", "Hours worked": 176 }, 
+          { "period": "Apr", "Hours worked": 224 }, 
+          { "period": "May", "Hours worked": 265 }, 
+          { "period": "Jun", "Hours worked": 314 }, 
+          { "period": "Jul", "Hours worked": 347 }, 
+          { "period": "Aug", "Hours worked": 287 }, 
+          { "period": "Sep", "Hours worked": 240 }, 
+          { "period": "Oct", "Hours worked": 211 }
+        ],
         xkey: 'period',
+        hideHover: 'auto',
         barColors: ['#26B99A', '#34495E', '#ACADAC', '#3498DB'],
         ykeys: ['Hours worked', 'sorned'],
         labels: ['Hours worked', 'SORN'],
-        xLabelAngle: 60
+        xLabelAngle: 60,
+        resize: true
+      });
+
+      $MENU_TOGGLE.on('click', function() {
+        $(window).resize();
       });
     });
   </script>
+
   <!-- skycons -->
   <script>
     var icons = new Skycons({

production/js/custom.js

@@ -4,15 +4,18 @@
  * and open the template in the editor.
  */
 
+var URL = window.location,
+    $BODY = $('body'),
+    $MENU_TOGGLE = $('#menu_toggle'),
+    $SIDEBAR_MENU = $('#sidebar-menu'),
+    $SIDEBAR_FOOTER = $('.sidebar-footer'),
+    $LEFT_COL = $('.left_col'),
+    $RIGHT_COL = $('.right_col'),
+    $NAV_MENU = $('.nav_menu'),
+    $FOOTER = $('footer');
+
 // Sidebar
 $(function () {
-    var URL = window.location,
-        $BODY = $('body'),
-        $SIDEBAR_MENU = $('#sidebar-menu'),
-        $MENU_TOGGLE = $('#menu_toggle');
-        $SIDEBAR_FOOTER = $('.sidebar-footer');
-        $LEFT_COL = $('.left_col');
-
     $SIDEBAR_MENU.find('li ul').slideUp();
     $SIDEBAR_MENU.find('li').removeClass('active');
 

production/js/moris/example.js

@@ -1,29 +1,5 @@
 $(function () {
 
-    /* data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type */
-    var day_data = [
-        {"period": "2016-10-01", "licensed": 807, "sorned": 660},
-        {"period": "2016-09-30", "licensed": 1251, "sorned": 729},
-        {"period": "2016-09-29", "licensed": 1769, "sorned": 1018},
-        {"period": "2016-09-20", "licensed": 2246, "sorned": 1461},
-        {"period": "2016-09-19", "licensed": 2657, "sorned": 1967},
-        {"period": "2016-09-18", "licensed": 3148, "sorned": 2627},
-        {"period": "2016-09-17", "licensed": 3471, "sorned": 3740},
-        {"period": "2016-09-16", "licensed": 2871, "sorned": 2216},
-        {"period": "2016-09-15", "licensed": 2401, "sorned": 1656},
-        {"period": "2016-09-10", "licensed": 2115, "sorned": 1022}
-    ];
-    Morris.Bar({
-        element: 'graph_bar_group',
-        data: day_data,
-        xkey: 'period',
-        barColors: ['#26B99A', '#34495E', '#ACADAC', '#3498DB'],
-        ykeys: ['licensed', 'sorned'],
-        labels: ['Licensed', 'SORN'],
-        hideHover: 'auto',
-        xLabelAngle: 60
-    });
-
     Morris.Bar({
         element: 'graph_bar',
         data: [
@@ -44,7 +20,31 @@ $(function () {
         barRatio: 0.4,
         barColors: ['#26B99A', '#34495E', '#ACADAC', '#3498DB'],
         xLabelAngle: 35,
-        hideHover: 'auto'
+        hideHover: 'auto',
+        resize: true
+    });
+
+    Morris.Bar({
+        element: 'graph_bar_group',
+        data: [
+            {"period": "2016-10-01", "licensed": 807, "sorned": 660},
+            {"period": "2016-09-30", "licensed": 1251, "sorned": 729},
+            {"period": "2016-09-29", "licensed": 1769, "sorned": 1018},
+            {"period": "2016-09-20", "licensed": 2246, "sorned": 1461},
+            {"period": "2016-09-19", "licensed": 2657, "sorned": 1967},
+            {"period": "2016-09-18", "licensed": 3148, "sorned": 2627},
+            {"period": "2016-09-17", "licensed": 3471, "sorned": 3740},
+            {"period": "2016-09-16", "licensed": 2871, "sorned": 2216},
+            {"period": "2016-09-15", "licensed": 2401, "sorned": 1656},
+            {"period": "2016-09-10", "licensed": 2115, "sorned": 1022}
+        ],
+        xkey: 'period',
+        barColors: ['#26B99A', '#34495E', '#ACADAC', '#3498DB'],
+        ykeys: ['licensed', 'sorned'],
+        labels: ['Licensed', 'SORN'],
+        hideHover: 'auto',
+        xLabelAngle: 60,
+        resize: true
     });
 
     Morris.Bar({
@@ -59,7 +59,8 @@ $(function () {
         ykeys: ['y', 'z', 'a'],
         barColors: ['#26B99A', '#34495E', '#ACADAC', '#3498DB'],
         hideHover: 'auto',
-        labels: ['Y', 'Z', 'A']
+        labels: ['Y', 'Z', 'A'],
+        resize: true
     }).on('click', function (i, row) {
         console.log(i, row);
     });
@@ -83,7 +84,8 @@ $(function () {
         lineColors: ['#26B99A', '#34495E', '#ACADAC', '#3498DB'],
         labels: ['iPhone', 'iPad', 'iPod Touch'],
         pointSize: 2,
-        hideHover: 'auto'
+        hideHover: 'auto',
+        resize: true
     });
 
 
@@ -97,11 +99,12 @@ $(function () {
         ],
         colors: ['#26B99A', '#34495E', '#ACADAC', '#3498DB'],
         formatter: function (y) {
-            return y + "%"
+            return y + "%";
-        }
+        },
+        resize: true
     });
 
-    new Morris.Line({
+    Morris.Line({
         element: 'graph_line',
         xkey: 'year',
         ykeys: ['value'],
@@ -114,7 +117,11 @@ $(function () {
             {year: '2014', value: 5},
             {year: '2015', value: 5},
             {year: '2016', value: 20}
-        ]
+        ],
+        resize: true
     });
 
+    $MENU_TOGGLE.on('click', function() {
+        $(window).resize();
+    });
 });

production/profile.html

@@ -368,9 +368,7 @@
                       <!-- end of image cropping -->
                       <div id="crop-avatar">
                         <!-- Current avatar -->
-                        <div class="avatar-view" title="Change the avatar">
+                        <img class="img-responsive avatar-view" src="images/picture.jpg" alt="Avatar" title="Change the avatar">
-                          <img src="images/picture.jpg" alt="Avatar">
-                        </div>
 
                         <!-- Cropping modal -->
                         <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
@@ -717,49 +715,35 @@
 
   <script>
     $(function() {
-      var day_data = [{
-        "period": "Jan",
-        "Hours worked": 80
-      }, {
-        "period": "Feb",
-        "Hours worked": 125
-      }, {
-        "period": "Mar",
-        "Hours worked": 176
-      }, {
-        "period": "Apr",
-        "Hours worked": 224
-      }, {
-        "period": "May",
-        "Hours worked": 265
-      }, {
-        "period": "Jun",
-        "Hours worked": 314
-      }, {
-        "period": "Jul",
-        "Hours worked": 347
-      }, {
-        "period": "Aug",
-        "Hours worked": 287
-      }, {
-        "period": "Sep",
-        "Hours worked": 240
-      }, {
-        "period": "Oct",
-        "Hours worked": 211
-      }];
       Morris.Bar({
         element: 'graph_bar',
-        data: day_data,
+        data: [
+          { "period": "Jan", "Hours worked": 80 }, 
+          { "period": "Feb", "Hours worked": 125 }, 
+          { "period": "Mar", "Hours worked": 176 }, 
+          { "period": "Apr", "Hours worked": 224 }, 
+          { "period": "May", "Hours worked": 265 }, 
+          { "period": "Jun", "Hours worked": 314 }, 
+          { "period": "Jul", "Hours worked": 347 }, 
+          { "period": "Aug", "Hours worked": 287 }, 
+          { "period": "Sep", "Hours worked": 240 }, 
+          { "period": "Oct", "Hours worked": 211 }
+        ],
         xkey: 'period',
         hideHover: 'auto',
         barColors: ['#26B99A', '#34495E', '#ACADAC', '#3498DB'],
         ykeys: ['Hours worked', 'sorned'],
         labels: ['Hours worked', 'SORN'],
-        xLabelAngle: 60
+        xLabelAngle: 60,
+        resize: true
+      });
+
+      $MENU_TOGGLE.on('click', function() {
+        $(window).resize();
       });
     });
   </script>
+
   <!-- datepicker -->
   <script type="text/javascript">
     $(document).ready(function() {