AS1024
/
Kanboard-Prod
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve filter box design

This commit is contained in:
Frederic Guillot 2016-02-14 17:44:25 -05:00
parent 07e3f51edb
commit 337a5fd6ab
11 changed files with 120 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ChangeLog
View File

@ -10,6 +10,7 @@ New features:
Improvements:
* Improve filter box design
* Improve image thumbnails and files table
* Add confirmation inline popup to remove custom filter
* Increase client_max_body_size value for Nginx

2
Makefile
View File

@ -1,6 +1,6 @@
BUILD_DIR = /tmp
CSS_APP = $(addprefix assets/css/src/, $(addsuffix .css, base links title table form button alert tooltip header board task comment subtask markdown listing activity dashboard pagination popover confirm sidebar responsive dropdown upload filters gantt project files))
CSS_APP = $(addprefix assets/css/src/, $(addsuffix .css, base links title table form button alert tooltip header board task comment subtask markdown listing activity dashboard pagination popover confirm sidebar responsive dropdown upload filters gantt project files views))
CSS_PRINT = $(addprefix assets/css/src/, $(addsuffix .css, print links table board task comment subtask markdown))
CSS_VENDOR = $(addprefix assets/css/vendor/, $(addsuffix .css, jquery-ui.min jquery-ui-timepicker-addon.min chosen.min fullcalendar.min font-awesome.min c3.min))

4
app/Template/app/filters_helper.php
View File

@ -1,6 +1,6 @@
<?= $this->hook->render('template:app:filters-helper:before', isset($project) ? array('project' => $project) : array()) ?>
<div class="dropdown filters">
<i class="fa fa-caret-down"></i> <a href="#" class="dropdown-menu"><?= t('Filters') ?></a>
<div class="dropdown">
<a href="#" class="dropdown-menu dropdown-menu-link-icon" title="<?= t('Default filters') ?>"><i class="fa fa-filter fa-fw"></i><i class="fa fa-caret-down"></i></a>
<ul>
<li><a href="#" class="filter-helper filter-reset" data-filter="<?= isset($reset) ? $reset : '' ?>" title="<?= t('Keyboard shortcut: "%s"', 'r') ?>"><?= t('Reset filters') ?></a></li>
<li><a href="#" class="filter-helper" data-filter="status:open assignee:me"><?= t('My tasks') ?></a></li>

5
app/Template/app/overview.php
View File

@ -1,11 +1,10 @@
<div class="search">
<div class="filter-box">
<form method="get" action="<?= $this->url->dir() ?>" class="search">
<?= $this->form->hidden('controller', array('controller' => 'search')) ?>
<?= $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') ?>
</form>
<?= $this->render('app/filters_helper') ?>
</div>
<?= $this->render('app/projects', array('paginator' => $project_paginator, 'user' => $user)) ?>

3
app/Template/project_header/header.php
View File

@ -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(

74
app/Template/project_header/search.php
View File

@ -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>

5
app/Template/search/index.php
View File

@ -8,14 +8,13 @@
</ul>
</div>
<div class="search">
<div class="filter-box">
<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') ?>
</form>
<?= $this->render('app/filters_helper') ?>
</div>
<?php if (empty($values['search'])): ?>

2
assets/css/app.css
View File

File diff suppressed because one or more lines are too long

87
assets/css/src/filters.css
View File

@ -1,68 +1,57 @@
.toolbar {
font-size: 0.9em;
padding-top: 5px;
.project-header {
margin-top: 8px;
margin-bottom: 20px;
}
.views {
.filter-box {
display: inline-block;
margin-right: 10px;
font-size: 0.9em;
position: relative;
font-size: 0;
margin-bottom: 20px;
}
.views li {
border: 1px solid #eee;
padding-left: 8px;
padding-right: 8px;
padding-top: 5px;
padding-bottom: 5px;
display: inline;
.project-header .filter-box {
margin: 0;
}
.menu-inline li.active a,
.views li.active a {
font-weight: bold;
color: #000;
text-decoration: none;
.filter-box form {
margin: 0;
}
.views li:first-child {
border-right: none;
.filter-box input[type="text"] {
margin: 0;
font-size: 16px;
height: 26px;
border-color: #dedede;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
vertical-align: top;
}
.views li:last-child {
.filter-box input[type="text"]:focus {
color: #000;
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
}
.filter-box div.dropdown {
display: inline-block;
font-size: 16px;
border: 1px solid #dedede;
border-left: none;
margin: 0;
padding: 0;
padding-left: 5px;
padding-right: 8px;
height: 27px;
}
.filter-box div.dropdown:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.filters {
display: inline-block;
border: 1px solid #eee;
border-radius: 5px;
padding: 5px;
padding-right: 10px;
margin-left: 8px;
}
.filters ul {
font-size: 0.8em;
}
.page-header .filters ul {
font-size: 0.9em;
}
form.search {
display: inline;
}
div.search {
margin-bottom: 20px;
}
.filter-dropdowns {
font-size: 0.9em;
display: inline-block;
.filter-box div.dropdown a {
line-height: 27px;
}

20
assets/css/src/responsive.css
View File

@ -1,14 +1,3 @@
@media only screen and (max-width: 1080px) {
div.filter-dropdowns .filters {
margin-left: 0;
}
div.filter-dropdowns {
display: block;
margin-top: 5px;
}
}
@media only screen and (max-width: 1024px) {
body {
@ -32,15 +21,6 @@
max-width: 150px;
}
.task-time-form label {
display: block;
}
.task-time-form input[type="submit"] {
margin-top: 10px;
display: block;
}
.page-header .form-input-large {
width: 300px;
}

34
assets/css/src/views.css Normal file
View File

@ -0,0 +1,34 @@
.views {
display: inline-block;
margin-left: 10px;
margin-right: 10px;
font-size: 0.9em;
}
.views li {
border: 1px solid #eee;
padding-left: 8px;
padding-right: 8px;
padding-top: 5px;
padding-bottom: 5px;
display: inline;
}
.menu-inline li.active a,
.views li.active a {
font-weight: bold;
color: #000;
text-decoration: none;
}
.views li:first-child {
border-right: none;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.views li:last-child {
border-left: none;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}