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

Improve filter box design

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

1
ChangeLog
View File

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

2
Makefile
View File

@@ -1,6 +1,6 @@
BUILD_DIR = /tmp 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_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)) 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()) ?> <?= $this->hook->render('template:app:filters-helper:before', isset($project) ? array('project' => $project) : array()) ?>
<div class="dropdown filters"> <div class="dropdown">
<i class="fa fa-caret-down"></i> <a href="#" class="dropdown-menu"><?= t('Filters') ?></a> <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> <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 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> <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"> <form method="get" action="<?= $this->url->dir() ?>" class="search">
<?= $this->form->hidden('controller', array('controller' => 'search')) ?> <?= $this->form->hidden('controller', array('controller' => 'search')) ?>
<?= $this->form->hidden('action', array('action' => 'index')) ?> <?= $this->form->hidden('action', array('action' => 'index')) ?>
<?= $this->form->text('search', array(), array(), array('placeholder="'.t('Search').'"'), 'form-input-large') ?> <?= $this->form->text('search', array(), array(), array('placeholder="'.t('Search').'"'), 'form-input-large') ?>
<?= $this->render('app/filters_helper') ?>
</form> </form>
<?= $this->render('app/filters_helper') ?>
</div> </div>
<?= $this->render('app/projects', array('paginator' => $project_paginator, 'user' => $user)) ?> <?= $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->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/dropdown', array('project' => $project, 'is_board' => isset($is_board))) ?>
<?= $this->render('project_header/views', array('project' => $project, 'filters' => $filters)) ?> <?= $this->render('project_header/views', array('project' => $project, 'filters' => $filters)) ?>
<?= $this->render('project_header/search', array( <?= $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"> <div class="filter-box">
<?= $this->form->hidden('controller', $filters) ?> <form method="get" action="<?= $this->url->dir() ?>" class="search">
<?= $this->form->hidden('action', $filters) ?> <?= $this->form->hidden('controller', $filters) ?>
<?= $this->form->hidden('project_id', $filters) ?> <?= $this->form->hidden('action', $filters) ?>
<?= $this->form->text('search', $filters, array(), array('placeholder="'.t('Filter').'"'), 'form-input-large') ?> <?= $this->form->hidden('project_id', $filters) ?>
</form> <?= $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)): ?> <?php if (isset($custom_filters_list) && ! empty($custom_filters_list)): ?>
<div class="dropdown filters"> <div class="dropdown">
<i class="fa fa-caret-down"></i> <a href="#" class="dropdown-menu"><?= t('My filters') ?></a> <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> <ul>
<?php foreach ($custom_filters_list as $filter): ?> <?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> <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 ?> <?php endforeach ?>
</ul> </ul>
</div> </div>
<?php endif ?> <?php endif ?>
<?php if (isset($users_list)): ?> <?php if (isset($users_list)): ?>
<div class="dropdown filters"> <div class="dropdown">
<i class="fa fa-caret-down"></i> <a href="#" class="dropdown-menu"><?= t('Users') ?></a> <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> <ul>
<li><a href="#" class="filter-helper" data-append-filter="assignee:nobody"><?= t('Not assigned') ?></a></li> <li><a href="#" class="filter-helper" data-append-filter="assignee:nobody"><?= t('Not assigned') ?></a></li>
<?php foreach ($users_list as $user): ?> <?php foreach ($users_list as $user): ?>
<li><a href="#" class="filter-helper" data-append-filter='assignee:"<?= $this->e($user) ?>"'><?= $this->e($user) ?></a></li> <li><a href="#" class="filter-helper" data-append-filter='assignee:"<?= $this->e($user) ?>"'><?= $this->e($user) ?></a></li>
<?php endforeach ?> <?php endforeach ?>
</ul> </ul>
</div> </div>
<?php endif ?> <?php endif ?>
<?php if (isset($categories_list) && ! empty($categories_list)): ?> <?php if (isset($categories_list) && ! empty($categories_list)): ?>
<div class="dropdown filters"> <div class="dropdown">
<i class="fa fa-caret-down"></i> <a href="#" class="dropdown-menu"><?= t('Categories') ?></a> <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> <ul>
<li><a href="#" class="filter-helper" data-append-filter="category:none"><?= t('No category') ?></a></li> <li><a href="#" class="filter-helper" data-append-filter="category:none"><?= t('No category') ?></a></li>
<?php foreach ($categories_list as $category): ?> <?php foreach ($categories_list as $category): ?>
<li><a href="#" class="filter-helper" data-append-filter='category:"<?= $this->e($category) ?>"'><?= $this->e($category) ?></a></li> <li><a href="#" class="filter-helper" data-append-filter='category:"<?= $this->e($category) ?>"'><?= $this->e($category) ?></a></li>
<?php endforeach ?> <?php endforeach ?>
</ul> </ul>
</div> </div>
<?php endif ?> <?php endif ?>
</form>
</div> </div>

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

@@ -8,14 +8,13 @@
</ul> </ul>
</div> </div>
<div class="search"> <div class="filter-box">
<form method="get" action="<?= $this->url->dir() ?>" class="search"> <form method="get" action="<?= $this->url->dir() ?>" class="search">
<?= $this->form->hidden('controller', $values) ?> <?= $this->form->hidden('controller', $values) ?>
<?= $this->form->hidden('action', $values) ?> <?= $this->form->hidden('action', $values) ?>
<?= $this->form->text('search', $values, array(), array(empty($values['search']) ? 'autofocus' : '', 'placeholder="'.t('Search').'"'), 'form-input-large') ?> <?= $this->form->text('search', $values, array(), array(empty($values['search']) ? 'autofocus' : '', 'placeholder="'.t('Search').'"'), 'form-input-large') ?>
<?= $this->render('app/filters_helper') ?>
</form> </form>
<?= $this->render('app/filters_helper') ?>
</div> </div>
<?php if (empty($values['search'])): ?> <?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 { .project-header {
font-size: 0.9em; margin-top: 8px;
padding-top: 5px; margin-bottom: 20px;
} }
.views { .filter-box {
display: inline-block; display: inline-block;
margin-right: 10px; position: relative;
font-size: 0.9em; font-size: 0;
margin-bottom: 20px;
} }
.views li { .project-header .filter-box {
border: 1px solid #eee; margin: 0;
padding-left: 8px;
padding-right: 8px;
padding-top: 5px;
padding-bottom: 5px;
display: inline;
} }
.menu-inline li.active a, .filter-box form {
.views li.active a { margin: 0;
font-weight: bold;
color: #000;
text-decoration: none;
} }
.views li:first-child { .filter-box input[type="text"] {
border-right: none; margin: 0;
font-size: 16px;
height: 26px;
border-color: #dedede;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-bottom-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; 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-top-right-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
} }
.filters { .filter-box div.dropdown a {
display: inline-block; line-height: 27px;
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;
} }

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) { @media only screen and (max-width: 1024px) {
body { body {
@@ -32,15 +21,6 @@
max-width: 150px; 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 { .page-header .form-input-large {
width: 300px; 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;
}