Start to improve the ui for tablets

app/Locale/fr_FR/translations.php

@@ -186,7 +186,7 @@ return array(
     'Page not found' => 'Page introuvable',
     'Complexity' => 'Complexité',
     'limit' => 'limite',
-    'Task limit' => 'Nombre maximum de tâches',
+    'Task limit' => 'Tâches Max.',
     'Task count' => 'Nombre de tâches',
     'This value must be greater than %d' => 'Cette valeur doit être plus grande que %d',
     'Edit project access list' => 'Modifier l\'accès au projet',

app/Template/board/edit.php

@@ -16,7 +16,7 @@
         </tr>
         <?php foreach ($columns as $column): ?>
         <tr>
-            <td><?= Helper\form_label(t('Column %d', ++$i), 'title['.$column['id'].']', array('title="column_id='.$column['id'].'"')) ?></td>
+            <td><?= Helper\form_label(++$i, 'title['.$column['id'].']', array('title="column_id='.$column['id'].'"')) ?></td>
             <td><?= Helper\form_text('title['.$column['id'].']', $values, $errors, array('required')) ?></td>
             <td><?= Helper\form_number('task_limit['.$column['id'].']', $values, $errors, array('placeholder="'.t('limit').'"')) ?></td>
             <td>
@@ -44,7 +44,7 @@
         <input type="submit" value="<?= t('Update') ?>" class="btn btn-blue"/>
     </div>
 </form>
-
+<hr/>
 <h3><?= t('Add a new column') ?></h3>
 <form method="post" action="<?= Helper\u('board', 'add', array('project_id' => $project['id'])) ?>" autocomplete="off">
 

app/Template/layout.php

@@ -44,7 +44,7 @@
                     <?php endif ?>
                     <li>
                         <?= Helper\a(t('Logout'), 'user', 'logout', array(), true) ?>
-                        <span class="username">(<?= Helper\a(Helper\escape(Helper\get_username()), 'user', 'show', array('user_id' => Helper\get_user_id())) ?>)</span>
+                        <span class="username hide-tablet">(<?= Helper\a(Helper\escape(Helper\get_username()), 'user', 'show', array('user_id' => Helper\get_user_id())) ?>)</span>
                     </li>
                 </ul>
             </nav>

assets/css/app.css

@@ -24,6 +24,7 @@ body {
     -webkit-font-smoothing: antialiased;
     font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
+    -webkit-text-size-adjust: 100%;
 }
 
 ul.no-bullet li {
@@ -183,7 +184,6 @@ label {
 input[type="number"],
 input[type="date"],
 input[type="email"],
-input[type="tel"],
 input[type="password"],
 input[type="text"] {
     color: #888;
@@ -202,7 +202,6 @@ input[type="text"] {
 input[type="number"]:focus,
 input[type="date"]:focus,
 input[type="email"]:focus,
-input[type="tel"]:focus,
 input[type="password"]:focus,
 input[type="text"]:focus,
 textarea:focus {
@@ -1284,14 +1283,14 @@ tr td.task-orange,
 }
 
 .sidebar-content {
-    margin-left: 330px;
+    margin-left: 280px;
 }
 
 .sidebar {
     position: absolute;
     left: 0px;
     top: 0;
-    width: 250px;
+    max-width: 250px;
     padding: 10px;
     padding-top: 0;
     border: 1px solid #ddd;
@@ -1315,6 +1314,10 @@ tr td.task-orange,
         font-size: 0.85em;
     }
 
+    .sidebar-content {
+        margin-left: 255px;
+    }
+
     .form-tab {
         max-width: 404px;
     }
@@ -1327,6 +1330,41 @@ tr td.task-orange,
     .form-inline-group input[type="submit"] {
         margin-top: 20px;
     }
+
+    td > input[type="text"] {
+        max-width: 150px;
+    }
+}
+
+@media only screen and (max-width: 1024px) and (orientation: landscape) {
+
+    body {
+        font-size: 0.7em;
+    }
+
+    header {
+        padding-bottom: 4px;
+    }
+
+    .sidebar {
+        max-width: 220px;
+    }
+
+    .sidebar-content {
+        margin-left: 225px;
+    }
+
+    div.chosen-container {
+        font-size: 0.9em;
+    }
+
+    input[type="number"],
+    input[type="date"],
+    input[type="email"],
+    input[type="password"],
+    input[type="text"] {
+        height: 18px;
+    }
 }
 /*!
  *  Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome

assets/css/base.css

@@ -23,6 +23,7 @@ body {
     -webkit-font-smoothing: antialiased;
     font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
+    -webkit-text-size-adjust: 100%;
 }
 
 ul.no-bullet li {

assets/css/form.css

@@ -12,7 +12,6 @@ label {
 input[type="number"],
 input[type="date"],
 input[type="email"],
-input[type="tel"],
 input[type="password"],
 input[type="text"] {
     color: #888;
@@ -31,7 +30,6 @@ input[type="text"] {
 input[type="number"]:focus,
 input[type="date"]:focus,
 input[type="email"]:focus,
-input[type="tel"]:focus,
 input[type="password"]:focus,
 input[type="text"]:focus,
 textarea:focus {

assets/css/responsive.css

@@ -10,6 +10,10 @@
         font-size: 0.85em;
     }
 
+    .sidebar-content {
+        margin-left: 255px;
+    }
+
     .form-tab {
         max-width: 404px;
     }
@@ -22,4 +26,39 @@
     .form-inline-group input[type="submit"] {
         margin-top: 20px;
     }
+
+    td > input[type="text"] {
+        max-width: 150px;
+    }
+}
+
+@media only screen and (max-width: 1024px) and (orientation: landscape) {
+
+    body {
+        font-size: 0.7em;
+    }
+
+    header {
+        padding-bottom: 4px;
+    }
+
+    .sidebar {
+        max-width: 220px;
+    }
+
+    .sidebar-content {
+        margin-left: 225px;
+    }
+
+    div.chosen-container {
+        font-size: 0.9em;
+    }
+
+    input[type="number"],
+    input[type="date"],
+    input[type="email"],
+    input[type="password"],
+    input[type="text"] {
+        height: 18px;
+    }
 }

assets/css/sidebar.css

@@ -5,14 +5,14 @@
 }
 
 .sidebar-content {
-    margin-left: 330px;
+    margin-left: 280px;
 }
 
 .sidebar {
     position: absolute;
     left: 0px;
     top: 0;
-    width: 250px;
+    max-width: 250px;
     padding: 10px;
     padding-top: 0;
     border: 1px solid #ddd;