Make filter box and project header more responsive

5 files changed, 81 insertions, 49 deletions

diff --git a/app/Template/dashboard/show.php b/app/Template/dashboard/show.php
index 637b60f8..cb18b79d 100644
--- a/app/Template/dashboard/show.php
+++ b/app/Template/dashboard/show.php
@@ -2,8 +2,13 @@
     <form method="get" action="<?= $this->url->dir() ?>" class="search">
         <?= $this->form->hidden('controller', array('controller' => 'SearchController')) ?>
         <?= $this->form->hidden('action', array('action' => 'index')) ?>
-        <?= $this->form->text('search', array(), array(), array('placeholder="'.t('Search').'"'), 'form-input-large') ?>
-        <?= $this->render('app/filters_helper') ?>
+
+        <div class="input-addon">
+            <?= $this->form->text('search', array(), array(), array('placeholder="'.t('Search').'"'), 'input-addon-field') ?>
+            <div class="input-addon-item">
+                <?= $this->render('app/filters_helper') ?>
+            </div>
+        </div>
     </form>
 </div>
 
diff --git a/app/Template/project_header/header.php b/app/Template/project_header/header.php
index aaa8137b..6c91e38b 100644
--- a/app/Template/project_header/header.php
+++ b/app/Template/project_header/header.php
@@ -1,15 +1,21 @@
 <div class="project-header">
     <?= $this->hook->render('template:project:header:before', array('project' => $project)) ?>
 
-    <?= $this->render('project_header/dropdown', array('project' => $project, 'board_view' => $board_view)) ?>
-    <?= $this->render('project_header/views', array('project' => $project, 'filters' => $filters)) ?>
-    <?= $this->render('project_header/search', array(
-        'project' => $project,
-        'filters' => $filters,
-        'custom_filters_list' => isset($custom_filters_list) ? $custom_filters_list : array(),
-        'users_list' => isset($users_list) ? $users_list : array(),
-        'categories_list' => isset($categories_list) ? $categories_list : array(),
-    )) ?>
+    <div class="dropdown-component">
+        <?= $this->render('project_header/dropdown', array('project' => $project, 'board_view' => $board_view)) ?>
+    </div>
+    <div class="views-switcher-component">
+        <?= $this->render('project_header/views', array('project' => $project, 'filters' => $filters)) ?>
+    </div>
+    <div class="filter-box-component">
+        <?= $this->render('project_header/search', array(
+            'project' => $project,
+            'filters' => $filters,
+            'custom_filters_list' => isset($custom_filters_list) ? $custom_filters_list : array(),
+            'users_list' => isset($users_list) ? $users_list : array(),
+            'categories_list' => isset($categories_list) ? $categories_list : array(),
+        )) ?>
+    </div>
 
     <?= $this->hook->render('template:project:header:after', array('project' => $project)) ?>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/Template/project_header/search.php b/app/Template/project_header/search.php
index 8885d9c9..512e88d7 100644
--- a/app/Template/project_header/search.php
+++ b/app/Template/project_header/search.php
@@ -3,43 +3,54 @@
         <?= $this->form->hidden('controller', $filters) ?>
         <?= $this->form->hidden('action', $filters) ?>
         <?= $this->form->hidden('project_id', $filters) ?>
-        <?= $this->form->text('search', $filters, array(), array('placeholder="'.t('Filter').'"')) ?>
 
-        <?= $this->render('app/filters_helper', array('reset' => 'status:open', 'project' => $project)) ?>
+        <div class="input-addon">
+            <?= $this->form->text('search', $filters, array(), array('placeholder="'.t('Filter').'"'), 'input-addon-field') ?>
+            <div class="input-addon-item">
+                <?= $this->render('app/filters_helper', array('reset' => 'status:open', 'project' => $project)) ?>
+            </div>
 
-        <?php if (isset($custom_filters_list) && ! empty($custom_filters_list)): ?>
-        <div class="dropdown">
-            <a href="#" class="dropdown-menu dropdown-menu-link-icon" title="<?= t('Custom filters') ?>"><i class="fa fa-bookmark fa-fw"></i><i class="fa fa-caret-down"></i></a>
-            <ul>
-                <?php foreach ($custom_filters_list as $filter): ?>
-                    <li><a href="#" class="filter-helper" data-<?php if ($filter['append']): ?><?= 'append-' ?><?php endif ?>filter='<?= $this->text->e($filter['filter']) ?>'><?= $this->text->e($filter['name']) ?></a></li>
-                <?php endforeach ?>
-            </ul>
-        </div>
-        <?php endif ?>
+            <?php if (isset($custom_filters_list) && ! empty($custom_filters_list)): ?>
+            <div class="input-addon-item">
+                <div class="dropdown">
+                    <a href="#" class="dropdown-menu dropdown-menu-link-icon" title="<?= t('Custom filters') ?>"><i class="fa fa-bookmark fa-fw"></i><i class="fa fa-caret-down"></i></a>
+                    <ul>
+                        <?php foreach ($custom_filters_list as $filter): ?>
+                            <li><a href="#" class="filter-helper" data-<?php if ($filter['append']): ?><?= 'append-' ?><?php endif ?>filter='<?= $this->text->e($filter['filter']) ?>'><?= $this->text->e($filter['name']) ?></a></li>
+                        <?php endforeach ?>
+                    </ul>
+                </div>
+            </div>
+            <?php endif ?>
 
-        <?php if (isset($users_list)): ?>
-        <div class="dropdown">
-            <a href="#" class="dropdown-menu dropdown-menu-link-icon" title="<?= t('User filters') ?>"><i class="fa fa-users fa-fw"></i> <i class="fa fa-caret-down"></i></a>
-            <ul>
-                <li><a href="#" class="filter-helper" data-unique-filter="assignee:nobody"><?= t('Not assigned') ?></a></li>
-                <?php foreach ($users_list as $user): ?>
-                    <li><a href="#" class="filter-helper" data-unique-filter='assignee:"<?= $this->text->e($user) ?>"'><?= $this->text->e($user) ?></a></li>
-                <?php endforeach ?>
-            </ul>
-        </div>
-        <?php endif ?>
+            <?php if (isset($users_list)): ?>
+            <div class="input-addon-item">
+                <div class="dropdown">
+                    <a href="#" class="dropdown-menu dropdown-menu-link-icon" title="<?= t('User filters') ?>"><i class="fa fa-users fa-fw"></i> <i class="fa fa-caret-down"></i></a>
+                    <ul>
+                        <li><a href="#" class="filter-helper" data-unique-filter="assignee:nobody"><?= t('Not assigned') ?></a></li>
+                        <?php foreach ($users_list as $user): ?>
+                            <li><a href="#" class="filter-helper" data-unique-filter='assignee:"<?= $this->text->e($user) ?>"'><?= $this->text->e($user) ?></a></li>
+                        <?php endforeach ?>
+                    </ul>
+                </div>
+            </div>
+            <?php endif ?>
 
-        <?php if (isset($categories_list) && ! empty($categories_list)): ?>
-        <div class="dropdown">
-            <a href="#" class="dropdown-menu dropdown-menu-link-icon" title="<?= t('Category filters') ?>"><i class="fa fa-tags fa-fw"></i><i class="fa fa-caret-down"></i></a>
-            <ul>
-                <li><a href="#" class="filter-helper" data-unique-filter="category:none"><?= t('No category') ?></a></li>
-                <?php foreach ($categories_list as $category): ?>
-                    <li><a href="#" class="filter-helper" data-unique-filter='category:"<?= $this->text->e($category) ?>"'><?= $this->text->e($category) ?></a></li>
-                <?php endforeach ?>
-            </ul>
+            <?php if (isset($categories_list) && ! empty($categories_list)): ?>
+            <div class="input-addon-item">
+                <div class="dropdown">
+                    <a href="#" class="dropdown-menu dropdown-menu-link-icon" title="<?= t('Category filters') ?>"><i class="fa fa-tags fa-fw"></i><i class="fa fa-caret-down"></i></a>
+                    <ul>
+                        <li><a href="#" class="filter-helper" data-unique-filter="category:none"><?= t('No category') ?></a></li>
+                        <?php foreach ($categories_list as $category): ?>
+                            <li><a href="#" class="filter-helper" data-unique-filter='category:"<?= $this->text->e($category) ?>"'><?= $this->text->e($category) ?></a></li>
+                        <?php endforeach ?>
+                    </ul>
+                </div>
+            </div>
+            <?php endif ?>
         </div>
-        <?php endif ?>
+
     </form>
 </div>
diff --git a/app/Template/search/activity.php b/app/Template/search/activity.php
index 9abc7d7e..1dfd9234 100644
--- a/app/Template/search/activity.php
+++ b/app/Template/search/activity.php
@@ -12,8 +12,13 @@
         <form method="get" action="<?= $this->url->dir() ?>" class="search">
             <?= $this->form->hidden('controller', $values) ?>
             <?= $this->form->hidden('action', $values) ?>
-            <?= $this->form->text('search', $values, array(), array(empty($values['search']) ? 'autofocus' : '', 'placeholder="'.t('Search').'"'), 'form-input-large') ?>
-            <?= $this->render('activity/filter_dropdown') ?>
+
+            <div class="input-addon">
+                <?= $this->form->text('search', $values, array(), array(empty($values['search']) ? 'autofocus' : '', 'placeholder="'.t('Search').'"'), 'input-addon-field') ?>
+                <div class="input-addon-item">
+                    <?= $this->render('app/filters_helper') ?>
+                </div>
+            </div>
         </form>
     </div>
 
diff --git a/app/Template/search/index.php b/app/Template/search/index.php
index bc528af7..c59a5c99 100644
--- a/app/Template/search/index.php
+++ b/app/Template/search/index.php
@@ -12,8 +12,13 @@
         <form method="get" action="<?= $this->url->dir() ?>" class="search">
             <?= $this->form->hidden('controller', $values) ?>
             <?= $this->form->hidden('action', $values) ?>
-            <?= $this->form->text('search', $values, array(), array(empty($values['search']) ? 'autofocus' : '', 'placeholder="'.t('Search').'"'), 'form-input-large') ?>
-            <?= $this->render('app/filters_helper') ?>
+
+            <div class="input-addon">
+                <?= $this->form->text('search', $values, array(), array(empty($values['search']) ? 'autofocus' : '', 'placeholder="'.t('Search').'"'), 'input-addon-field') ?>
+                <div class="input-addon-item">
+                    <?= $this->render('app/filters_helper') ?>
+                </div>
+            </div>
         </form>
     </div>