From efac55c23cc2724f17f6335b47e0ebfcad1bfea8 Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Tue, 2 Sep 2014 13:52:56 -0400
Subject: [PATCH] Further sidebar optimizations for mobile

---
 server/files/stylesheets/semantic.css         |  2 ++
 src/definitions/behaviors/state.js            | 13 ++++++------
 src/definitions/elements/button.less          |  2 ++
 src/definitions/modules/sidebar.js            |  2 +-
 src/definitions/modules/sidebar.less          | 21 ++++++++-----------
 .../default/elements/button.variables         |  1 +
 .../default/modules/sidebar.variables         |  2 +-
 7 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css
index 56128b023..4a133f4a3 100755
--- a/server/files/stylesheets/semantic.css
+++ b/server/files/stylesheets/semantic.css
@@ -219,6 +219,7 @@ a:hover {
   top: 0px;
   left: -1px;
   min-width: 320px;
+  width: calc(100% - 15px);
   z-index: 900;
 
   -webkit-box-sizing: border-box;
@@ -1149,6 +1150,7 @@ body#example.index {
   padding: 1em 0em;
 /*  clear: both;*/
   position: relative;
+  -webkit-tap-highlight-color: transparent;
 }
 #example .example .grid i.code {
   right: 25%;
diff --git a/src/definitions/behaviors/state.js b/src/definitions/behaviors/state.js
index 980e2e412..675e2f188 100755
--- a/src/definitions/behaviors/state.js
+++ b/src/definitions/behaviors/state.js
@@ -18,6 +18,7 @@ $.fn.state = function(parameters) {
 
     moduleSelector  = $allModules.selector || '',
 
+    hasTouch        = ('ontouchstart' in document.documentElement),
     time            = new Date().getTime(),
     performance     = [],
 
@@ -26,12 +27,12 @@ $.fn.state = function(parameters) {
     queryArguments  = [].slice.call(arguments, 1),
 
     // shortcuts
-    error         = settings.error,
-    metadata      = settings.metadata,
-    className     = settings.className,
-    namespace     = settings.namespace,
-    states        = settings.states,
-    text          = settings.text,
+    error           = settings.error,
+    metadata        = settings.metadata,
+    className       = settings.className,
+    namespace       = settings.namespace,
+    states          = settings.states,
+    text            = settings.text,
 
     eventNamespace  = '.' + namespace,
     moduleNamespace = namespace + '-module',
diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less
index b183785fd..7c4392e98 100755
--- a/src/definitions/elements/button.less
+++ b/src/definitions/elements/button.less
@@ -54,6 +54,8 @@
   user-select: none;
   box-sizing: border-box;
   transition: @transition;
+
+  -webkit-tap-highlight-color: @tapColor;
 }
 
 
diff --git a/src/definitions/modules/sidebar.js b/src/definitions/modules/sidebar.js
index 0c3894151..1d8c0e438 100755
--- a/src/definitions/modules/sidebar.js
+++ b/src/definitions/modules/sidebar.js
@@ -660,7 +660,7 @@ $.fn.sidebar.settings = {
   performance     : true,
 
   animation       : 'scale down',
-  mobileAnimation : 'slide along',
+  mobileAnimation : 'reveal',
 
   context         : 'body',
   useCSS          : true,
diff --git a/src/definitions/modules/sidebar.less b/src/definitions/modules/sidebar.less
index 404e7899e..0e07620e7 100755
--- a/src/definitions/modules/sidebar.less
+++ b/src/definitions/modules/sidebar.less
@@ -47,6 +47,7 @@
 
 /* Sets 3D Perspective */
 .pushable {
+  background: @canvasBackground !important;
   position: relative;
   height: 100%;
   overflow: hidden;
@@ -58,6 +59,7 @@
 
 .pushable > .pusher {
   position: relative;
+  background: @canvasBackground;
   left: 0;
   height: 100%;
   transition: transform @animationDuration;
@@ -108,18 +110,6 @@
      Pushed
 ---------------*/
 
-/* Add Canvas BG */
-.pushable.pushed,
-.pushable.hide,
-.pushable.show {
-  background: @canvasBackground !important;
-}
-
-/* Remove Scroll */
-.pushable.pushed > .pusher > .page {
-  // overflow: hidden;
-}
-
 /* Show Dimmer */
 .pushable.pushed > .pusher > .page:after {
   width: 100% !important;
@@ -133,6 +123,13 @@
   transition: none !important;
 }
 
+/* Remove Scroll on Page
+.pushable.pushed > .pusher > .page {
+  // overflow: hidden;
+}
+*/
+
+
 /*--------------
      Visible
 ---------------*/
diff --git a/src/themes/packages/default/elements/button.variables b/src/themes/packages/default/elements/button.variables
index d6cc6b5c1..7ed7ddce1 100755
--- a/src/themes/packages/default/elements/button.variables
+++ b/src/themes/packages/default/elements/button.variables
@@ -9,6 +9,7 @@
 @verticalMargin: 0em;
 @horizontalMargin: 0.25em;
 @textTransform: none;
+@tapColor: transparent;
 
 @fontWeight: bold;
 @textColor: rgba(0, 0, 0, 0.6);
diff --git a/src/themes/packages/default/modules/sidebar.variables b/src/themes/packages/default/modules/sidebar.variables
index 0d3337025..65d2d1dc2 100755
--- a/src/themes/packages/default/modules/sidebar.variables
+++ b/src/themes/packages/default/modules/sidebar.variables
@@ -2,7 +2,7 @@
              Sidebar
 *******************************/
 
-@sidebarWidth: 300px;
+@sidebarWidth: 280px;
 @sidebarBackground: @black;
 @sidebarTransition: transform 0.5s ease;