From 5933a829b7e0201fefe4198672612c0ae77000d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Guillot?= <fred@kanboard.net>
Date: Sat, 6 Dec 2014 14:42:53 -0500
Subject: [PATCH] Minors layout improvements

---
 app/Template/analytic/cfd.php  | 16 +++++--
 app/Template/app/subtasks.php  |  2 +-
 app/Template/board/filters.php |  8 ++--
 assets/css/app.css             | 85 ++++++++--------------------------
 assets/css/form.css            |  4 ++
 assets/css/responsive.css      | 77 +++++-------------------------
 assets/css/table.css           |  4 ++
 assets/js/analytic.js          | 10 ++--
 assets/js/app.js               | 10 ++--
 9 files changed, 64 insertions(+), 152 deletions(-)

diff --git a/app/Template/analytic/cfd.php b/app/Template/analytic/cfd.php
index 46cee47e3..d8dd55172 100644
--- a/app/Template/analytic/cfd.php
+++ b/app/Template/analytic/cfd.php
@@ -16,11 +16,17 @@
 
     <?= Helper\form_csrf() ?>
 
-    <?= Helper\form_label(t('Start Date'), 'from') ?>
-    <?= Helper\form_text('from', $values, array(), array('required', 'placeholder="'.Helper\in_list($date_format, $date_formats).'"'), 'form-date') ?>
+    <div class="form-inline-group">
+        <?= Helper\form_label(t('Start Date'), 'from') ?>
+        <?= Helper\form_text('from', $values, array(), array('required', 'placeholder="'.Helper\in_list($date_format, $date_formats).'"'), 'form-date') ?>
+    </div>
 
-    <?= Helper\form_label(t('End Date'), 'to') ?>
-    <?= Helper\form_text('to', $values, array(), array('required', 'placeholder="'.Helper\in_list($date_format, $date_formats).'"'), 'form-date') ?>
+    <div class="form-inline-group">
+        <?= Helper\form_label(t('End Date'), 'to') ?>
+        <?= Helper\form_text('to', $values, array(), array('required', 'placeholder="'.Helper\in_list($date_format, $date_formats).'"'), 'form-date') ?>
+    </div>
 
-    <input type="submit" value="<?= t('Execute') ?>" class="btn btn-blue"/>
+    <div class="form-inline-group">
+        <input type="submit" value="<?= t('Execute') ?>" class="btn btn-blue"/>
+    </div>
 </form>
diff --git a/app/Template/app/subtasks.php b/app/Template/app/subtasks.php
index f51ef1db0..fb4510681 100644
--- a/app/Template/app/subtasks.php
+++ b/app/Template/app/subtasks.php
@@ -4,7 +4,7 @@
 <?php else: ?>
     <table class="table-fixed">
         <tr>
-            <th class="column-10"><?= Helper\order(t('Task Id'), 'tasks.id', $pagination) ?></th>
+            <th class="column-10"><?= Helper\order('Id', 'tasks.id', $pagination) ?></th>
             <th class="column-20"><?= Helper\order(t('Project'), 'project_name', $pagination) ?></th>
             <th class="column-15"><?= Helper\order(t('Status'), 'status', $pagination) ?></th>
             <th><?= Helper\order(t('Subtask'), 'title', $pagination) ?></th>
diff --git a/app/Template/board/filters.php b/app/Template/board/filters.php
index 76cbca2d9..a913f7be5 100644
--- a/app/Template/board/filters.php
+++ b/app/Template/board/filters.php
@@ -1,14 +1,14 @@
 <div class="page-header">
-    <ul>
-        <li>
+    <ul class="board-filters">
+        <li class="hide-tablet">
             <?= t('Filter by user') ?>
             <?= Helper\form_select('user_id', $users) ?>
         </li>
-        <li>
+        <li class="hide-tablet">
             <?= t('Filter by category') ?>
             <?= Helper\form_select('category_id', $categories) ?>
         </li>
-        <li>
+        <li class="hide-tablet">
             <a href="#" id="filter-due-date"><?= t('Filter by due date') ?></a>
         </li>
         <li>
diff --git a/assets/css/app.css b/assets/css/app.css
index c239153ce..2ce277c73 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -121,6 +121,10 @@ th a:hover {
     white-space: nowrap;
 }
 
+.table-fixed th {
+    overflow: hidden;
+}
+
 .table-fixed td {
     white-space: nowrap;
     overflow: hidden;
@@ -298,6 +302,10 @@ ul.form-errors li {
     display: none;
 }
 
+.form-inline-group {
+    display: inline;
+}
+
 input.form-date {
     width: 150px;
 }
@@ -1294,35 +1302,9 @@ tr td.task-orange,
     margin-left: 30px;
     line-height: 1.8em;
 }/* responsive design */
-@media only screen and (min-width : 769px) and (max-width : 1024px) {
-
-    .hide-tablet {
-        display: none;
-    }
-
-    body {
-        font-size: 0.9em;
-    }
-
-    .project-menu {
-        font-size: 0.8em;
-    }
-
-    .task-board-title {
-        font-size: 1.5em;
-    }
-
-    .form-tab {
-        max-width: 662px;
-    }
-
-    input.form-date ~ div.form-help {
-        max-width: 150px;
-    }
-}
-
-@media only screen and (max-width : 768px) {
+@media only screen and (max-width: 1024px) {
 
+    li.hide-tablet,
     .hide-tablet {
         display: none;
     }
@@ -1331,47 +1313,18 @@ tr td.task-orange,
         font-size: 0.85em;
     }
 
-    .logo,
-    .project-menu {
-        display: none;
-    }
-
-    nav li:first-child {
-        padding-left: 0;
-    }
-
-    .username {
-        display: block;
-        text-align: right;
-    }
-
-    .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;
-    }
-
     .form-tab {
         max-width: 404px;
     }
+
+    .form-inline-group input[type="submit"],
+    .form-inline-group label {
+        display: block;
+    }
+
+    .form-inline-group input[type="submit"] {
+        margin-top: 20px;
+    }
 }
 /*!
  *  Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome
diff --git a/assets/css/form.css b/assets/css/form.css
index 125223e21..ec5666841 100644
--- a/assets/css/form.css
+++ b/assets/css/form.css
@@ -131,6 +131,10 @@ ul.form-errors li {
     display: none;
 }
 
+.form-inline-group {
+    display: inline;
+}
+
 input.form-date {
     width: 150px;
 }
diff --git a/assets/css/responsive.css b/assets/css/responsive.css
index b1977b013..38a575936 100644
--- a/assets/css/responsive.css
+++ b/assets/css/responsive.css
@@ -1,33 +1,7 @@
 /* responsive design */
-@media only screen and (min-width : 769px) and (max-width : 1024px) {
-
-    .hide-tablet {
-        display: none;
-    }
-
-    body {
-        font-size: 0.9em;
-    }
-
-    .project-menu {
-        font-size: 0.8em;
-    }
-
-    .task-board-title {
-        font-size: 1.5em;
-    }
-
-    .form-tab {
-        max-width: 662px;
-    }
-
-    input.form-date ~ div.form-help {
-        max-width: 150px;
-    }
-}
-
-@media only screen and (max-width : 768px) {
+@media only screen and (max-width: 1024px) {
 
+    li.hide-tablet,
     .hide-tablet {
         display: none;
     }
@@ -36,45 +10,16 @@
         font-size: 0.85em;
     }
 
-    .logo,
-    .project-menu {
-        display: none;
-    }
-
-    nav li:first-child {
-        padding-left: 0;
-    }
-
-    .username {
-        display: block;
-        text-align: right;
-    }
-
-    .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;
-    }
-
     .form-tab {
         max-width: 404px;
     }
+
+    .form-inline-group input[type="submit"],
+    .form-inline-group label {
+        display: block;
+    }
+
+    .form-inline-group input[type="submit"] {
+        margin-top: 20px;
+    }
 }
diff --git a/assets/css/table.css b/assets/css/table.css
index 1a1e52a76..7c7be56bf 100644
--- a/assets/css/table.css
+++ b/assets/css/table.css
@@ -48,6 +48,10 @@ th a:hover {
     white-space: nowrap;
 }
 
+.table-fixed th {
+    overflow: hidden;
+}
+
 .table-fixed td {
     white-space: nowrap;
     overflow: hidden;
diff --git a/assets/js/analytic.js b/assets/js/analytic.js
index e8cffdc7b..14cbc8150 100644
--- a/assets/js/analytic.js
+++ b/assets/js/analytic.js
@@ -31,7 +31,7 @@ Kanboard.Analytic.CFD = (function() {
     {
         var series = prepareSeries(metrics, labels);
 
-        var svg = dimple.newSvg("#chart", 800, 380);
+        var svg = dimple.newSvg("#chart", "100%", 380);
         var chart = new dimple.chart(svg, series);
 
         var x = chart.addCategoryAxis("x", labels['day']);
@@ -81,13 +81,13 @@ Kanboard.Analytic.TaskRepartition = (function() {
     {
         var series = prepareSeries(metrics, labels);
 
-        var svg = dimple.newSvg("#chart", 700, 350);
+        var svg = dimple.newSvg("#chart", "100%", 350);
 
         var chart = new dimple.chart(svg, series);
         chart.addMeasureAxis("p", labels["nb_tasks"]);
         var ring = chart.addSeries(labels["column_title"], dimple.plot.pie);
         ring.innerRadius = "50%";
-        chart.addLegend(0, 0, 100, 100, "left");
+        chart.addLegend(0, 0, 100, "100%", "left");
         chart.draw();
     }
 
@@ -126,13 +126,13 @@ Kanboard.Analytic.UserRepartition = (function() {
     {
         var series = prepareSeries(metrics, labels);
 
-        var svg = dimple.newSvg("#chart", 700, 350);
+        var svg = dimple.newSvg("#chart", "100%", 350);
 
         var chart = new dimple.chart(svg, series);
         chart.addMeasureAxis("p", labels["nb_tasks"]);
         var ring = chart.addSeries(labels["user"], dimple.plot.pie);
         ring.innerRadius = "50%";
-        chart.addLegend(0, 0, 100, 100, "left");
+        chart.addLegend(0, 0, 100, "100%", "left");
         chart.draw();
     }
 
diff --git a/assets/js/app.js b/assets/js/app.js
index 5e13d0130..0be4fca4d 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -462,7 +462,7 @@ Kanboard.Analytic.CFD = (function() {
     {
         var series = prepareSeries(metrics, labels);
 
-        var svg = dimple.newSvg("#chart", 800, 380);
+        var svg = dimple.newSvg("#chart", "100%", 380);
         var chart = new dimple.chart(svg, series);
 
         var x = chart.addCategoryAxis("x", labels['day']);
@@ -512,13 +512,13 @@ Kanboard.Analytic.TaskRepartition = (function() {
     {
         var series = prepareSeries(metrics, labels);
 
-        var svg = dimple.newSvg("#chart", 700, 350);
+        var svg = dimple.newSvg("#chart", "100%", 350);
 
         var chart = new dimple.chart(svg, series);
         chart.addMeasureAxis("p", labels["nb_tasks"]);
         var ring = chart.addSeries(labels["column_title"], dimple.plot.pie);
         ring.innerRadius = "50%";
-        chart.addLegend(0, 0, 100, 100, "left");
+        chart.addLegend(0, 0, 100, "100%", "left");
         chart.draw();
     }
 
@@ -557,13 +557,13 @@ Kanboard.Analytic.UserRepartition = (function() {
     {
         var series = prepareSeries(metrics, labels);
 
-        var svg = dimple.newSvg("#chart", 700, 350);
+        var svg = dimple.newSvg("#chart", "100%", 350);
 
         var chart = new dimple.chart(svg, series);
         chart.addMeasureAxis("p", labels["nb_tasks"]);
         var ring = chart.addSeries(labels["user"], dimple.plot.pie);
         ring.innerRadius = "50%";
-        chart.addLegend(0, 0, 100, 100, "left");
+        chart.addLegend(0, 0, 100, "100%", "left");
         chart.draw();
     }