From 86bc091f21911eee328514534af88973b4922063 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Guillot?= <fred@kanboard.net>
Date: Fri, 23 May 2014 13:41:57 -0400
Subject: [PATCH] Improve responsive design

---
 app/Templates/board_index.php   |  4 +--
 app/Templates/project_index.php | 10 ++++---
 assets/css/app.css              | 48 ++++++++++++++++++++++++++++++++-
 3 files changed, 55 insertions(+), 7 deletions(-)

diff --git a/app/Templates/board_index.php b/app/Templates/board_index.php
index 989c2e068..8e6642198 100644
--- a/app/Templates/board_index.php
+++ b/app/Templates/board_index.php
@@ -18,11 +18,11 @@
     <div class="project-menu">
         <ul>
             <li>
-                <?= t('Filter by user') ?>
+                <span class="hide-tablet"><?= t('Filter by user') ?></span>
                 <?= Helper\form_select('user_id', $users, $filters) ?>
             </li>
             <li>
-                <?= t('Filter by category') ?>
+                <span class="hide-tablet"><?= t('Filter by category') ?></span>
                 <?= Helper\form_select('category_id', $categories, $filters) ?>
             </li>
             <li><a href="#" id="filter-due-date"><?= t('Filter by due date') ?></a></li>
diff --git a/app/Templates/project_index.php b/app/Templates/project_index.php
index df153fe77..1a3dbd49d 100644
--- a/app/Templates/project_index.php
+++ b/app/Templates/project_index.php
@@ -31,21 +31,23 @@
                     <?= $project['is_active'] ? t('Active') : t('Inactive') ?>
                 </td>
                 <td>
+                    <ul>
                     <?php if ($project['nb_tasks'] > 0): ?>
 
                         <?php if ($project['nb_active_tasks'] > 0): ?>
-                            <a href="?controller=board&amp;action=show&amp;project_id=<?= $project['id'] ?>"><?= t('%d tasks on the board', $project['nb_active_tasks']) ?></a>,
+                            <li><a href="?controller=board&amp;action=show&amp;project_id=<?= $project['id'] ?>"><?= t('%d tasks on the board', $project['nb_active_tasks']) ?></a></li>
                         <?php endif ?>
 
                         <?php if ($project['nb_inactive_tasks'] > 0): ?>
-                            <a href="?controller=project&amp;action=tasks&amp;project_id=<?= $project['id'] ?>"><?= t('%d closed tasks', $project['nb_inactive_tasks']) ?></a>,
+                            <li><a href="?controller=project&amp;action=tasks&amp;project_id=<?= $project['id'] ?>"><?= t('%d closed tasks', $project['nb_inactive_tasks']) ?></a></li>
                         <?php endif ?>
 
-                        <?= t('%d tasks in total', $project['nb_tasks']) ?>
+                        <li><?= t('%d tasks in total', $project['nb_tasks']) ?></li>
 
                     <?php else: ?>
-                        <?= t('no task for this project') ?>
+                        <li><?= t('no task for this project') ?></li>
                     <?php endif ?>
+                    </ul>
                 </td>
                 <td>
                     <ul>
diff --git a/assets/css/app.css b/assets/css/app.css
index fcfe6b1ac..cf5331615 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -83,6 +83,7 @@ td {
     padding-bottom: 0.5em;
     padding-left: 3px;
     padding-right: 3px;
+    vertical-align: top;
 }
 
 th {
@@ -420,7 +421,7 @@ header {
 
 header ul {
     text-align: right;
-    font-size: 90%;
+    font-size: 0.9em;
 }
 
 header li {
@@ -932,3 +933,48 @@ tr td.task-orange,
     padding: 15px;
     background: #fff;
 }
+
+/* responsive design */
+@media only screen and (min-width : 600px) and (max-width : 1024px) {
+
+    .hide-tablet {
+        display: none;
+    }
+
+    .form-column {
+        float: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    #board {
+        font-size: 0.85em;
+    }
+
+    .project-menu {
+        font-size: 0.7em;
+    }
+
+    table input[type="text"] {
+        width: 200px;
+    }
+}
+
+@media only screen and (max-width : 600px) {
+
+    header {
+        font-size: 0.8em;
+    }
+
+    .project-menu {
+        display: none;
+    }
+
+    #board {
+        margin-top: 10px;
+    }
+
+    .task-board .task-score {
+        display: none;
+    }
+}