Improve user interface for tablets

This commit is contained in:
Frédéric Guillot
2014-09-10 21:13:13 +02:00
parent bb1a9f52ca
commit 917e6cab74
6 changed files with 72 additions and 60 deletions

View File

@@ -233,6 +233,9 @@ class Board extends Base
$this->notfound(); $this->notfound();
} }
$board_selector = $projects;
unset($board_selector[$project_id]);
$this->response->html($this->template->layout('board_index', array( $this->response->html($this->template->layout('board_index', array(
'users' => $this->project->getUsersList($project_id, true, true), 'users' => $this->project->getUsersList($project_id, true, true),
'filters' => array('user_id' => $user_id), 'filters' => array('user_id' => $user_id),
@@ -243,7 +246,7 @@ class Board extends Base
'categories' => $this->category->getList($project_id, true, true), 'categories' => $this->category->getList($project_id, true, true),
'menu' => 'boards', 'menu' => 'boards',
'title' => $projects[$project_id], 'title' => $projects[$project_id],
'board_selector' => $projects, 'board_selector' => $board_selector,
))); )));
} }

View File

@@ -38,7 +38,7 @@
<a class="logo" href="?">kanboard</a> <a class="logo" href="?">kanboard</a>
<ul> <ul>
<?php if (isset($board_selector)): ?> <?php if (isset($board_selector) && ! empty($board_selector)): ?>
<li> <li>
<select id="board-selector" data-placeholder="<?= t('Display another project') ?>"> <select id="board-selector" data-placeholder="<?= t('Display another project') ?>">
<option value=""></option> <option value=""></option>
@@ -58,13 +58,13 @@
<a href="?controller=user"><?= t('Users') ?></a> <a href="?controller=user"><?= t('Users') ?></a>
</li> </li>
<?php if (Helper\is_admin()): ?> <?php if (Helper\is_admin()): ?>
<li <?= isset($menu) && $menu === 'config' ? 'class="active"' : '' ?>> <li class="hide-tablet <?= isset($menu) && $menu === 'config' ? 'active' : '' ?>">
<a href="?controller=config"><?= t('Settings') ?></a> <a href="?controller=config"><?= t('Settings') ?></a>
</li> </li>
<?php endif ?> <?php endif ?>
<li> <li>
<a href="?controller=user&amp;action=logout<?= Helper\param_csrf() ?>"><?= t('Logout') ?></a> <a href="?controller=user&amp;action=logout<?= Helper\param_csrf() ?>"><?= t('Logout') ?></a>
(<a class="username" href="?controller=user&amp;action=show&amp;user_id=<?= Helper\get_user_id() ?>"><?= Helper\escape(Helper\get_username()) ?></a>) <span class="username">(<a href="?controller=user&amp;action=show&amp;user_id=<?= Helper\get_user_id() ?>"><?= Helper\escape(Helper\get_username()) ?></a>)</span>
</li> </li>
</ul> </ul>
</nav> </nav>

View File

@@ -10,33 +10,25 @@
<?= Helper\form_csrf() ?> <?= Helper\form_csrf() ?>
<div class="form-column"> <?= Helper\form_label(t('Username'), 'username') ?>
<?= Helper\form_text('username', $values, $errors, array('autofocus', 'required')) ?><br/>
<?= Helper\form_label(t('Username'), 'username') ?> <?= Helper\form_label(t('Name'), 'name') ?>
<?= Helper\form_text('username', $values, $errors, array('autofocus', 'required')) ?><br/> <?= Helper\form_text('name', $values, $errors) ?><br/>
<?= Helper\form_label(t('Name'), 'name') ?> <?= Helper\form_label(t('Email'), 'email') ?>
<?= Helper\form_text('name', $values, $errors) ?><br/> <?= Helper\form_email('email', $values, $errors) ?><br/>
<?= Helper\form_label(t('Email'), 'email') ?> <?= Helper\form_label(t('Password'), 'password') ?>
<?= Helper\form_email('email', $values, $errors) ?><br/> <?= Helper\form_password('password', $values, $errors, array('required')) ?><br/>
</div> <?= Helper\form_label(t('Confirmation'), 'confirmation') ?>
<?= Helper\form_password('confirmation', $values, $errors, array('required')) ?><br/>
<div class="form-column"> <?= Helper\form_label(t('Default project'), 'default_project_id') ?>
<?= Helper\form_select('default_project_id', $projects, $values, $errors) ?><br/>
<?= Helper\form_label(t('Password'), 'password') ?> <?= Helper\form_checkbox('is_admin', t('Administrator'), 1, isset($values['is_admin']) && $values['is_admin'] == 1 ? true : false) ?>
<?= Helper\form_password('password', $values, $errors, array('required')) ?><br/>
<?= Helper\form_label(t('Confirmation'), 'confirmation') ?>
<?= Helper\form_password('confirmation', $values, $errors, array('required')) ?><br/>
<?= Helper\form_label(t('Default project'), 'default_project_id') ?>
<?= Helper\form_select('default_project_id', $projects, $values, $errors) ?><br/>
<?= Helper\form_checkbox('is_admin', t('Administrator'), 1, isset($values['is_admin']) && $values['is_admin'] == 1 ? true : false) ?>
</div>
<div class="form-actions"> <div class="form-actions">
<input type="submit" value="<?= t('Save') ?>" class="btn btn-blue"/> <input type="submit" value="<?= t('Save') ?>" class="btn btn-blue"/>

View File

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

View File

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

View File

@@ -1,11 +1,3 @@
/*! (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=
* jQuery UI Touch Punch 0.2.3 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);
* Copyright 20112014, 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);