many small UI (css) improvements

js_src/buttonbehaviors.js

@@ -169,11 +169,16 @@ function initButtonBehavior() {
 //    console.log("btnSettings touchend");
 //  });
 
-  btnInfo.mouseup(function(e) {
+  // 29-okt-2013 - we're not doing help for smartphones at the moment
-    e.preventDefault();
+  if (clientInfo.isSmartphone) {
-    console.log("btnInfo mouse up");
+    btnInfo.addClass("disabled");
-    if (!clientInfo.isSmartphone) helpTours.startTour(helpTours.WELCOMETOUR);
+  } else {
-  });
+    btnInfo.mouseup(function(e) {
+      e.preventDefault();
+      console.log("btnInfo mouse up");
+      helpTours.startTour(helpTours.WELCOMETOUR);
+    });
+  }
 
   // DEBUG
   /*

js_src/canvasDrawing.js

@@ -166,7 +166,7 @@ function clearDoodle() {
 
 function redrawDoodle(recalcBoundsAndTransforms) {
   if (recalcBoundsAndTransforms == undefined) recalcBoundsAndTransforms = false;
-  console.log("f:redrawDoodle() >> recalcBoundsAndTransforms = " + recalcBoundsAndTransforms);
+//  console.log("f:redrawDoodle() >> recalcBoundsAndTransforms = " + recalcBoundsAndTransforms);
 
   if (recalcBoundsAndTransforms == true) {
     doodleBounds = [-1, -1, -1, -1]; // left, top, right, bottom

js_src/init_layout.js

@@ -13,7 +13,7 @@ function doOnResize() {
   canvasWidth = canvas.width;
   canvasHeight = canvas.height;
 
-  console.log("   preview.width: " + preview.width + ", $preview.width(): " + $preview.width());
+//  console.log("   preview.width: " + preview.width + ", $preview.width(): " + $preview.width());
 
   calcPreviewCanvasProperties();
 

js_src/libs/jquery-joyride-2-1.js

@@ -353,6 +353,8 @@
 
       // detect phones with media queries if supported.
       is_phone : function () {
+        return false; // 2013-10-29 Adriaan Wormgoor - hard-falsed this
+
         if (Modernizr) {
           return Modernizr.mq('only screen and (max-width: 767px)');
         }

js_src/previewRendering.js

@@ -38,7 +38,7 @@ function initPreviewRendering() {
 }
 
 function calcPreviewCanvasProperties() {
-  console.log("f:calcPreviewCanvasProperties()");
+//  console.log("f:calcPreviewCanvasProperties()");
 
   globalScale = preview.width / canvasWidth;
   layerCX			= (canvasWidth / 2) * globalScale;  // defined in canvasDrawing_v01.js

less/base.less

@@ -3,6 +3,8 @@
   GLOBAL CONTAINER
 
 */
+
+
 body {
   background-color: #fcfcfc;
   user-select: none; /* disable cut copy paste */
@@ -110,6 +112,13 @@ img {
 }
 
 
+// http://blogs.msdn.com/b/askie/archive/2013/01/06/how-to-implement-the-ms-touch-action-none-property-to-disable-double-tap-zoom-on-touch-devices.aspx
+//a, input, button {
+//  -ms-touch-action: none !important;
+//}
+
+
+
 
 /*
 

less/base_rightpanel.less

@@ -80,7 +80,7 @@
   box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
 
   transition: right .40s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-  right: -60%;
+  right: -70%;
   margin: 5% 0%;
 }
 
@@ -126,7 +126,7 @@
   box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
 
   transition: right .50s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-  right: -55%;
+  right: -65%;
 }
 
 #thermometerCanvas {

less/help_joyride-2.1.less

@@ -31,20 +31,6 @@
   padding: 10px 10px 15px 15px;
 }
 
-// Mobile
-//@media only screen and (max-width: 767px) {
-//  .joyride-tip-guide {
-//    width: 95% !important;
-//    -moz-border-radius: 0;
-//    -webkit-border-radius: 0;
-//    border-radius: 0;
-//    left: 2.5% !important;
-//  }
-//  .joyride-tip-guide-wrapper {
-//    width: 100%;
-//  }
-//}
-
 
 /* Add a little css triangle pip, older browser just miss out on the fanciness of it */
 .joyride-tip-guide span.joyride-nub {
@@ -144,7 +130,7 @@
 
 .joyride-tip-guide {
   h1, h2, h3, h4, h5, h6 {
-    line-height: 1.25;
+    line-height: 1.25em;
     margin: 0;
     font-weight: bold;
 //    color: #2DDF34;
@@ -153,20 +139,20 @@
   }
 }
 
-.joyride-tip-guide h1 { font-size: 30px; }
+.joyride-tip-guide h1 { font-size: 1.85em; }
-.joyride-tip-guide h2 { font-size: 26px; }
+.joyride-tip-guide h2 { font-size: 1.7em; }
-.joyride-tip-guide h3 { font-size: 22px; }
+.joyride-tip-guide h3 { font-size: 1.55em; }
-.joyride-tip-guide h4 { font-size: 18px; }
+.joyride-tip-guide h4 { font-size: 1.4em; }
-.joyride-tip-guide h5 { font-size: 16px; }
+.joyride-tip-guide h5 { font-size: 1.25em; }
-.joyride-tip-guide h6 { font-size: 14px; }
+.joyride-tip-guide h6 { font-size: 1.1em; }
 
 
 .joyride-tip-guide {
   p {
   //  margin: 0 0 18px 0;
     margin: 5px 0 25px;
-    font-size: 14px;
+    font-size: 1.1em;
-    line-height: 18px;
+    line-height: 1.3em;
   }
 
   a {
@@ -318,3 +304,33 @@
   left: 0;
   border-radius: 5px;
 }
+
+// Mobile
+@media only screen and (max-width: 767px) {
+  .joyride-tip-guide {
+  //    width: 75% !important;
+//    border-radius: 0;
+    p {
+      margin: 5px 0 18px;
+      font-size: 1.0em;
+    }
+
+    .joyride-next-tip {
+//      width: auto;
+//      padding: 6px 18px 4px;
+      font-size: 1.0em;
+    }
+
+    h1 { font-size: 1.60em; }
+    h2 { font-size: 1.48em; }
+    h3 { font-size: 1.36em; }
+    h4 { font-size: 1.24em; }
+    h5 { font-size: 1.12em; }
+    h6 { font-size: 1.0em; }
+
+  }
+  .joyride-tip-guide-wrapper {
+    width: 80%;
+  }
+}
+

less/mobile.less

@@ -32,17 +32,20 @@
   }
 }
 
+// sets width for both right and left panel
+@mobilePanelsWidth: 92px;
+
 /*
   LEFT
 */
 .leftpanel {
-  width: 100px;
+  width: @mobilePanelsWidth;
   background-color: #fff;
   z-index: 50;
   transition: left .3s ease-out;
 }
 .hideleft {
-  left: -101px;
+  left: -(@mobilePanelsWidth+1);
 }
 .shadowright {
 	box-shadow: 2px 0 4px rgba(42, 42, 41, 0.6);
@@ -64,13 +67,13 @@
   RIGHT
 */
 .rightpanel {
-  width: 100px;
+  width: @mobilePanelsWidth;
   background-color: #fff;
   z-index: 50;
   transition: right .3s ease-out;
 }
 .hideright {
-  right: -101px;
+  right: -(@mobilePanelsWidth+1);
 }
 .shadowleft {
 	box-shadow: -2px 0 4px rgba(42, 42, 41, 0.6);

less/portrait.less

@@ -7,8 +7,8 @@
 }
 
 .vertImage {
-  margin:  0px;
+  margin:  0;
-  padding: 0px;
+  padding: 0;
 /*border: 2px solid #f0f;*/
   max-width: 100%;
   height: auto;

less/settingsPopup.less

@@ -60,6 +60,7 @@
         margin: .5%;
         overflow-y: scroll;
         overflow-x: hidden;
+        -webkit-overflow-scrolling: touch;
         border: 1px solid rgb(187, 187, 187);
         border-radius: 5px;
       }