Improve filter box design

2 files changed, 39 insertions, 38 deletions

diff --git a/app/Template/project_header/header.php b/app/Template/project_header/header.php
index eca9b327..f6e5af9e 100644
--- a/app/Template/project_header/header.php
+++ b/app/Template/project_header/header.php
@@ -1,5 +1,6 @@
-<div class="page-header">
+<div class="project-header">
     <?= $this->hook->render('template:project:header:before', array('project' => $project)) ?>
+
     <?= $this->render('project_header/dropdown', array('project' => $project, 'is_board' => isset($is_board))) ?>
     <?= $this->render('project_header/views', array('project' => $project, 'filters' => $filters)) ?>
     <?= $this->render('project_header/search', array(
diff --git a/app/Template/project_header/search.php b/app/Template/project_header/search.php
index 032e3343..2b2a2c39 100644
--- a/app/Template/project_header/search.php
+++ b/app/Template/project_header/search.php
@@ -1,45 +1,45 @@
-<form method="get" action="<?= $this->url->dir() ?>" class="search">
-    <?= $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').'"'), 'form-input-large') ?>
-</form>
+<div class="filter-box">
+    <form method="get" action="<?= $this->url->dir() ?>" class="search">
+        <?= $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').'"')) ?>
 
-<div class="filter-dropdowns">
-    <?= $this->render('app/filters_helper', array('reset' => 'status:open', 'project' => $project)) ?>
+        <?= $this->render('app/filters_helper', array('reset' => 'status:open', 'project' => $project)) ?>
 
-    <?php if (isset($custom_filters_list) && ! empty($custom_filters_list)): ?>
-        <div class="dropdown filters">
-        <i class="fa fa-caret-down"></i> <a href="#" class="dropdown-menu"><?= t('My filters') ?></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->e($filter['filter']) ?>'><?= $this->e($filter['name']) ?></a></li>
-            <?php endforeach ?>
-        </ul>
+        <?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->e($filter['filter']) ?>'><?= $this->e($filter['name']) ?></a></li>
+                <?php endforeach ?>
+            </ul>
         </div>
-    <?php endif ?>
+        <?php endif ?>
 
-    <?php if (isset($users_list)): ?>
-        <div class="dropdown filters">
-        <i class="fa fa-caret-down"></i> <a href="#" class="dropdown-menu"><?= t('Users') ?></a>
-        <ul>
-            <li><a href="#" class="filter-helper" data-append-filter="assignee:nobody"><?= t('Not assigned') ?></a></li>
-            <?php foreach ($users_list as $user): ?>
-                <li><a href="#" class="filter-helper" data-append-filter='assignee:"<?= $this->e($user) ?>"'><?= $this->e($user) ?></a></li>
-            <?php endforeach ?>
-        </ul>
+        <?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-append-filter="assignee:nobody"><?= t('Not assigned') ?></a></li>
+                <?php foreach ($users_list as $user): ?>
+                    <li><a href="#" class="filter-helper" data-append-filter='assignee:"<?= $this->e($user) ?>"'><?= $this->e($user) ?></a></li>
+                <?php endforeach ?>
+            </ul>
         </div>
-    <?php endif ?>
+        <?php endif ?>
 
-    <?php if (isset($categories_list) && ! empty($categories_list)): ?>
-        <div class="dropdown filters">
-        <i class="fa fa-caret-down"></i> <a href="#" class="dropdown-menu"><?= t('Categories') ?></a>
-        <ul>
-            <li><a href="#" class="filter-helper" data-append-filter="category:none"><?= t('No category') ?></a></li>
-            <?php foreach ($categories_list as $category): ?>
-                <li><a href="#" class="filter-helper" data-append-filter='category:"<?= $this->e($category) ?>"'><?= $this->e($category) ?></a></li>
-            <?php endforeach ?>
-        </ul>
+        <?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-append-filter="category:none"><?= t('No category') ?></a></li>
+                <?php foreach ($categories_list as $category): ?>
+                    <li><a href="#" class="filter-helper" data-append-filter='category:"<?= $this->e($category) ?>"'><?= $this->e($category) ?></a></li>
+                <?php endforeach ?>
+            </ul>
         </div>
-    <?php endif ?>
+        <?php endif ?>
+    </form>
 </div>