Improve user interface for tablets

assets/css/app.css

@@ -145,7 +145,7 @@ input[type="text"] {
     color: #888;
     border: 1px solid #ccc;
     width: 400px;
-    max-width: 99%;
+    max-width: 95%;
     font-size: 1.0em;
     height: 25px;
     padding-bottom: 0;
@@ -176,11 +176,16 @@ input[type="number"] {
 textarea {
     border: 1px solid #ccc;
     width: 400px;
+    max-width: 95%;
     height: 200px;
     font-size: 1.0em;
     font-family: sans-serif;
 }
 
+select {
+    max-width: 95%;
+}
+
 ::-webkit-input-placeholder {
     color: #bbb;
     padding-top: 2px;
@@ -471,11 +476,11 @@ nav .active a {
     font-weight: bold;
 }
 
-.username {
+.username a {
     color: #000;
 }
 
-.username:hover {
+.username a:hover {
     color: red;
     text-decoration: underline;
 }
@@ -1009,7 +1014,7 @@ tr td.task-orange,
     border-left: 3px solid #000;
     margin-left: 35px;
     padding-bottom: 10px;
-    width: 700px;
+    max-width: 700px;
 }
 
 .project-listing li {
@@ -1099,25 +1104,27 @@ tr td.task-orange,
         display: none;
     }
 
-    .form-column {
-        float: none;
-        margin: 0;
-        padding: 0;
-    }
-
-    #board {
-        font-size: 0.85em;
+    body {
+        font-size: 0.9em;
     }
 
     .project-menu {
-        font-size: 0.7em;
+        font-size: 0.8em;
+    }
+
+    .task-board-title {
+        font-size: 1.5em;
     }
 }
 
 @media only screen and (max-width : 768px) {
 
-    header {
-        font-size: 0.8em;
+    .hide-tablet {
+        display: none;
+    }
+
+    body {
+        font-size: 0.85em;
     }
 
     .logo,
@@ -1125,20 +1132,36 @@ tr td.task-orange,
         display: none;
     }
 
-    nav ul {
-        text-align: left;
-    }
-
     nav li:first-child {
         padding-left: 0;
     }
 
-    #board {
-        margin-top: 10px;
-        font-size: 0.85em;
+    .username {
+        display: block;
+        text-align: right;
     }
 
-    .task-board .task-score {
+    .user-show-sidebar,
+    .project-show-sidebar,
+    .task-show-sidebar {
+        width: 200px;
+    }
+
+    .user-show-main,
+    .project-show-main,
+    .task-show-main {
+        margin-left: 230px;
+    }
+
+    table input[type="text"] {
+        width: 150px;
+    }
+
+    .task-score {
         display: none;
     }
+
+    .task-board-title {
+        font-size: 1.5em;
+    }
 }

assets/js/app.js

@@ -82,6 +82,8 @@ Kanboard.Board = (function() {
     {
         // Drag and drop
         $(".column").sortable({
+            delay: 300,
+            distance: 5,
             connectWith: ".column",
             placeholder: "draggable-placeholder",
             stop: function(event, ui) {
@@ -273,7 +275,7 @@ Kanboard.Project = (function() {
 
 // Initialization
 $(function() {
-
+//alert($(window).width());
     if ($("#board").length) {
         Kanboard.Board.Init();
     }

assets/js/jquery.ui.touch-punch.min.js

@@ -1,11 +1,3 @@
-/*!
- * jQuery UI Touch Punch 0.2.3
- *
- * Copyright 2011–2014, Dave Furfero
- * Dual licensed under the MIT or GPL Version 2 licenses.
- *
- * Depends:
- *  jquery.ui.widget.js
- *  jquery.ui.mouse.js
- */
-!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);
+(function(b){function c(a,b){if(!(1<a.originalEvent.touches.length)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null);a.target.dispatchEvent(d)}}var f=!1,g,h;b.support.touch="ontouchend"in document;b.support.mspointer=window.navigator.msPointerEnabled;if(b.support.touch||b.support.mspointer){var d=b.ui.mouse.prototype,k=d._mouseInit,l=d._mouseDestroy,e;d._touchStart=
+function(a){!e&&this._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,f=!1,g=+new Date,c(a,"mouseover"),c(a,"mousemove"),c(a,"mousedown"))};d._touchMove=function(a){e&&(f=!0,c(a,"mousemove"))};d._touchEnd=function(a){e&&(h=+new Date,c(a,"mouseup"),c(a,"mouseout"),(!f||300>h-g)&&c(a,"click"),e=!1)};d._mouseInit=function(){b.support.mspointer&&(this.element[0].style.msTouchAction="none");this.element.bind({touchstart:b.proxy(this,"_touchStart"),touchmove:b.proxy(this,"_touchMove"),touchend:b.proxy(this,
+"_touchEnd")});k.call(this)};d._mouseDestroy=function(){this.element.unbind({touchstart:b.proxy(this,"_touchStart"),touchmove:b.proxy(this,"_touchMove"),touchend:b.proxy(this,"_touchEnd")});l.call(this)}}})(jQuery);