Make filter box and project header more responsive
This commit is contained in:
Frederic Guillot
parent
fd0bea2187
commit
195fae86d6
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<?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="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>
|
||||
<?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>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -23,7 +23,7 @@ ul.dropdown-submenu-open
|
|||
display: block
|
||||
margin: 0
|
||||
padding: 8px 10px
|
||||
font-size: $dropdown-text-size
|
||||
font-size: size('compact')
|
||||
border-bottom: 1px solid #f8f8f8
|
||||
cursor: pointer
|
||||
&.no-hover
|
||||
|
|
|
|||
|
|
@ -1,43 +1,2 @@
|
|||
@import variables
|
||||
|
||||
.filter-box
|
||||
display: inline-block
|
||||
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
|
||||
max-width: 800px
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ label
|
|||
margin-top: 10px
|
||||
|
||||
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')
|
||||
border: 1px solid #ccc
|
||||
width: 300px
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -1,5 +1,9 @@
|
|||
@import variables
|
||||
|
||||
@mixin custom-device($width)
|
||||
@media (max-width: #{$width})
|
||||
@content
|
||||
|
||||
@mixin xs-device
|
||||
@media (max-width: #{$xs-device-width})
|
||||
@content
|
||||
|
|
|
|||
|
|
@ -33,3 +33,7 @@
|
|||
li
|
||||
display: inline
|
||||
padding-right: 15px
|
||||
.active a
|
||||
font-weight: bold
|
||||
color: color('dark')
|
||||
text-decoration: none
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -1,37 +1,43 @@
|
|||
@import variables
|
||||
@import mixins
|
||||
|
||||
$breakdown-switcher: 560px
|
||||
|
||||
.views
|
||||
display: inline-block
|
||||
margin-left: 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
|
||||
white-space: nowrap
|
||||
background: #fafafa
|
||||
border-left: 1px solid #ddd
|
||||
border-top: 1px solid #ddd
|
||||
border-bottom: 1px solid #ddd
|
||||
padding: 5px 8px
|
||||
border: 1px solid #ddd
|
||||
border-right: none
|
||||
padding: 4px 8px
|
||||
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
|
||||
color: color('medium')
|
||||
text-decoration: none
|
||||
&:hover
|
||||
color: color('primary')
|
||||
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
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
border: 1px solid #000
|
||||
padding: 2px
|
||||
word-wrap: break-word
|
||||
font-size: $board-text-size
|
||||
font-size: size('compact')
|
||||
|
||||
div
|
||||
&.task-board-recent
|
||||
|
|
|
|||
|
|
@ -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-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
|
||||
|
||||
$dropdown-text-size: 0.9em
|
||||
$board-text-size: 0.9em
|
||||
$board-task-limit-color: #DF5353
|
||||
|
||||
@function size($key)
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
@import title
|
||||
@import table
|
||||
@import form
|
||||
@import input_addon
|
||||
@import alert
|
||||
@import button
|
||||
@import tooltip
|
||||
|
|
@ -23,6 +24,7 @@
|
|||
@import filter_box
|
||||
@import project
|
||||
@import project_overview
|
||||
@import project_header
|
||||
@import project_views_switcher
|
||||
@import dashboard
|
||||
@import board
|
||||
|
|
|
|||
Loading…
Reference in New Issue