Make Demo page responsive

Author: lcdsantos

public/demo.html

@@ -11,6 +11,8 @@
   <link rel="stylesheet" href="customoptions.css">
   <link rel="stylesheet" href="lib/prism.css">
 
+  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
+
   <meta property="og:title"       content="jQuery Selectric">
   <meta property="og:type"        content="website">
   <meta property="og:description" content="Fast, simple and light jQuery plugin to customize HTML selects">
@@ -264,6 +266,8 @@ <h3>Custom markup for items box</h3>
         <pre data-src="customoptions.css"></pre>
       </div>
     </div>
+
+    <div class="demo-spacer"></div>
   </div>
 
   <div class="theme-roller">
@@ -381,7 +385,7 @@ <h3>Sizes</h3>
     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
     })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
-    ga('create', 'UA-42240250-1', 'lcdsantos.github.io');
+    ga('create', 'UA-42240250-1', 'auto');
     ga('require', 'displayfeatures');
     ga('send', 'pageview');
   </script>

public/lib/demo.js

@@ -50,6 +50,10 @@
     $('#button-round-slider').data('key', 'buttonRadius');
     $('#button-position-slider').data('key', 'buttonPosition');
 
+    if ( /android|ip(hone|od|ad)/i.test(navigator.userAgent) ) {
+      $('#presets').find('option[value="custom"]').remove();
+    }
+
     $('#presets').change(function(e) {
       e.preventDefault();
 
@@ -152,6 +156,8 @@
     /*======================================
       Demos
     ======================================*/
+    $.fn.selectric.defaults.disableOnMobile = false;
+
     $('#basic').selectric();
 
     /*------------------------------------*/

public/style.css

@@ -318,8 +318,9 @@ table code {
 }
 
 .demo .view {
-  width: 40%;
+  width: 38%;
   float: left;
+  margin-right: 2%;
 }
 
 .demo .code {
@@ -868,6 +869,62 @@ table code {
   .bottom-spacer {
     height: 40px;
   }
+
+  /* Demo page */
+  .theme-roller {
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: auto;
+    width: auto;
+    border-radius: 0;
+    border: none;
+    border-top: 1px solid #CCC;
+    padding: 10px;
+    box-shadow: 0 -1px 10px -6px #000;
+  }
+
+  .theme-roller h2 {
+    font-size: 16px;
+  }
+
+  .theme-roller form {
+    float: left;
+    width: 50%;
+  }
+
+  .theme-roller select {
+    height: 34px;
+  }
+
+  .theme-roller .bt-download {
+    float: right;
+    width: 46%;
+    margin-top: 0;
+  }
+
+  .theme-roller .bt-view-raw {
+    clear: both;
+    position: absolute;
+    top: 4px;
+    right: 10px;
+  }
+
+  .demo .view,
+  .demo .code {
+    float: none;
+    width: auto;
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  .demo .code {
+    margin-top: 10px;
+  }
+
+  .demo-spacer {
+    height: 88px;
+  }
 }
 
 @media screen and (max-width: 540px) {