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

Make filter box and project header more responsive

Browse Source
This commit is contained in:
Frederic Guillot
2016-08-08 21:54:45 -04:00
parent fd0bea2187
commit 195fae86d6
17 changed files with 193 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/Template/dashboard/show.php
View File

@@ -2,8 +2,13 @@
<form method="get" action="<?= $this->url->dir() ?>" class="search"> <form method="get" action="<?= $this->url->dir() ?>" class="search">
<?= $this->form->hidden('controller', array('controller' => 'SearchController')) ?> <?= $this->form->hidden('controller', array('controller' => 'SearchController')) ?>
<?= $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->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> </form>
</div> </div>

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

@@ -1,15 +1,21 @@
<div class="project-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, 'board_view' => $board_view)) ?> <div class="dropdown-component">
<?= $this->render('project_header/views', array('project' => $project, 'filters' => $filters)) ?> <?= $this->render('project_header/dropdown', array('project' => $project, 'board_view' => $board_view)) ?>
<?= $this->render('project_header/search', array( </div>
'project' => $project, <div class="views-switcher-component">
'filters' => $filters, <?= $this->render('project_header/views', array('project' => $project, 'filters' => $filters)) ?>
'custom_filters_list' => isset($custom_filters_list) ? $custom_filters_list : array(), </div>
'users_list' => isset($users_list) ? $users_list : array(), <div class="filter-box-component">
'categories_list' => isset($categories_list) ? $categories_list : array(), <?= $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)) ?> <?= $this->hook->render('template:project:header:after', array('project' => $project)) ?>
</div> </div>

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

@@ -3,43 +3,54 @@
<?= $this->form->hidden('controller', $filters) ?> <?= $this->form->hidden('controller', $filters) ?>
<?= $this->form->hidden('action', $filters) ?> <?= $this->form->hidden('action', $filters) ?>
<?= $this->form->hidden('project_id', $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)): ?> <?php if (isset($custom_filters_list) && ! empty($custom_filters_list)): ?>
<div class="dropdown"> <div class="input-addon-item">
<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> <div class="dropdown">
<ul> <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>
<?php foreach ($custom_filters_list as $filter): ?> <ul>
<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 foreach ($custom_filters_list as $filter): ?>
<?php endforeach ?> <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>
</ul> <?php endforeach ?>
</ul>
</div>
</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="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> </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($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>
</div>
<?php endif ?>
</form> </form>
</div> </div>

9
app/Template/search/activity.php
View File

@@ -12,8 +12,13 @@
<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->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> </form>
</div> </div>

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

@@ -12,8 +12,13 @@
<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->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> </form>
</div> </div>

2
assets/css/app.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
assets/sass/_dropdown.sass
View File

@@ -23,7 +23,7 @@ ul.dropdown-submenu-open
display: block display: block
margin: 0 margin: 0
padding: 8px 10px padding: 8px 10px
font-size: $dropdown-text-size font-size: size('compact')
border-bottom: 1px solid #f8f8f8 border-bottom: 1px solid #f8f8f8
cursor: pointer cursor: pointer
&.no-hover &.no-hover

43
assets/sass/_filter_box.sass
View File

@@ -1,43 +1,2 @@
@import variables
.filter-box .filter-box
display: inline-block max-width: 800px
position: relative
font-size: 0
margin-bottom: 20px
.project-header .filter-box
margin: 0
.filter-box
form
margin: 0
input[type="text"]
margin: 0
font-size: 16px
height: 28px
border-color: #ddd
border-top-left-radius: 5px
border-bottom-left-radius: 5px
vertical-align: top
&:focus
color: color('dark')
border-color: rgba(82, 168, 236, 0.8)
outline: 0
box-shadow: 0 0 8px rgba(82, 168, 236, 0.6)
div.dropdown
background: #fafafa
display: inline-block
font-size: 16px
border: 1px solid #ddd
border-left: none
margin: 0
padding: 0
padding-left: 5px
padding-right: 8px
height: 29px
&:last-child
border-top-right-radius: 5px
border-bottom-right-radius: 5px
a
line-height: 27px

2
assets/sass/_form.sass
View File

@@ -9,7 +9,7 @@ label
margin-top: 10px margin-top: 10px
input input
&[type="number"], &[type="date"], &[type="email"], &[type="password"], &[type="text"] &[type="number"], &[type="date"], &[type="email"], &[type="password"], &[type="text"]:not(.input-addon-field)
color: color('light') color: color('light')
border: 1px solid #ccc border: 1px solid #ccc
width: 300px width: 300px

30
assets/sass/_input_addon.sass Normal file
View File

@@ -0,0 +1,30 @@
.input-addon
display: flex
.input-addon-field
flex: 1
font-size: size('normal')
color: color('light')
.input-addon-item
background-color: rgba(147, 128, 108, 0.1)
color: #666
font: inherit
font-weight: normal
.dropdown
.fa-caret-down
display: none
.input-addon-field, .input-addon-item
border: 1px solid rgba(147, 128, 108, 0.25)
padding: 4px 0.75em
&:not(:first-child)
border-left: 0
.input-addon-field:first-child, .input-addon-item:first-child
border-radius: 5px 0 0 5px
.input-addon-field:last-child, .input-addon-item:last-child
border-radius: 0 5px 5px 0

4
assets/sass/_mixins.sass
View File

@@ -1,5 +1,9 @@
@import variables @import variables
@mixin custom-device($width)
@media (max-width: #{$width})
@content
@mixin xs-device @mixin xs-device
@media (max-width: #{$xs-device-width}) @media (max-width: #{$xs-device-width})
@content @content

4
assets/sass/_page_header.sass
View File

@@ -33,3 +33,7 @@
li li
display: inline display: inline
padding-right: 15px padding-right: 15px
.active a
font-weight: bold
color: color('dark')
text-decoration: none

36
assets/sass/_project_header.sass Normal file
View File

@@ -0,0 +1,36 @@
.project-header
@include grid(100)
.dropdown-component
@include grid_width(5/100)
@include md-device
@include grid_width(8/100)
@include sm-device
@include grid_width(1)
.views-switcher-component
@include grid_width(38/100)
@include custom-device(1300px)
@include grid_width(45/100)
@include md-device
@include grid_width(92/100)
@include sm-device
@include grid_width(1)
.filter-box-component
margin: 0
@include grid_width(55/100)
@include custom-device(1300px)
@include grid_width(50/100)
@include md-device
@include grid_width(1)
margin-top: 10px
.filter-box
max-width: 100%
@include sm-device
@include grid_width(1)
margin-top: 10px
.filter-box
max-width: 100%
form
margin: 0

52
assets/sass/_project_views_switcher.sass
View File

@@ -1,37 +1,43 @@
@import variables @import variables
@import mixins
$breakdown-switcher: 560px
.views .views
display: inline-block display: inline-block
margin-left: 10px
margin-right: 10px margin-right: 10px
font-size: size('compact')
@include custom-device($breakdown-switcher)
width: 100%
@include sm-device
margin-top: 10px
font-size: size('normal')
li li
white-space: nowrap
background: #fafafa background: #fafafa
border-left: 1px solid #ddd border: 1px solid #ddd
border-top: 1px solid #ddd border-right: none
border-bottom: 1px solid #ddd padding: 4px 8px
padding: 5px 8px
display: inline display: inline
@include custom-device($breakdown-switcher)
display: block
margin-top: 5px
border-radius: 5px
border: 1px solid #ddd
&.active a
font-weight: bold
color: color('dark')
text-decoration: none
&:first-child
border-top-left-radius: 5px
border-bottom-left-radius: 5px
&:last-child
border-right: 1px solid #ddd
border-top-right-radius: 5px
border-bottom-right-radius: 5px
a a
color: color('medium') color: color('medium')
text-decoration: none text-decoration: none
&:hover &:hover
color: color('primary') color: color('primary')
text-decoration: underline text-decoration: underline
.menu-inline li.active a
font-weight: bold
color: color('dark')
text-decoration: none
.views li
&.active a
font-weight: bold
color: color('dark')
text-decoration: none
&:first-child
border-top-left-radius: 5px
border-bottom-left-radius: 5px
&:last-child
border-right: 1px solid #ddd
border-top-right-radius: 5px
border-bottom-right-radius: 5px

2
assets/sass/_task_board.sass
View File

@@ -6,7 +6,7 @@
border: 1px solid #000 border: 1px solid #000
padding: 2px padding: 2px
word-wrap: break-word word-wrap: break-word
font-size: $board-text-size font-size: size('compact')
div div
&.task-board-recent &.task-board-recent

5
assets/sass/_variables.sass
View File

@@ -17,12 +17,9 @@ $button-hover-colors: ('default': #000, 'red': #fff, 'blue': #fff)
$button-hover-background-colors: ('default': #fafafa, 'red': #c53727, 'blue': #357ae8) $button-hover-background-colors: ('default': #fafafa, 'red': #c53727, 'blue': #357ae8)
$button-hover-border-colors: ('default': #bbb, 'red': #b0281a, 'blue': #3079ed) $button-hover-border-colors: ('default': #bbb, 'red': #b0281a, 'blue': #3079ed)
$font-sizes: ('normal': 1.0em, 'tiny': 0.7em, 'small': 0.8em, 'medium': 1.2em, 'large': 1.4em, 'xlarge': 1.6em, 'title': 1.5em) $font-sizes: ('normal': 1.0em, 'tiny': 0.7em, 'small': 0.8em, 'compact': 0.9em, 'medium': 1.2em, 'large': 1.4em, 'xlarge': 1.6em, 'title': 1.5em)
$text-font: 'Helvetica Neue', Helvetica, Arial, sans-serif $text-font: 'Helvetica Neue', Helvetica, Arial, sans-serif
$dropdown-text-size: 0.9em
$board-text-size: 0.9em
$board-task-limit-color: #DF5353 $board-task-limit-color: #DF5353
@function size($key) @function size($key)

2
assets/sass/app.sass
View File

@@ -4,6 +4,7 @@
@import title @import title
@import table @import table
@import form @import form
@import input_addon
@import alert @import alert
@import button @import button
@import tooltip @import tooltip
@@ -23,6 +24,7 @@
@import filter_box @import filter_box
@import project @import project
@import project_overview @import project_overview
@import project_header
@import project_views_switcher @import project_views_switcher
@import dashboard @import dashboard
@import board @import board