Make tables more responsive

This commit is contained in:
Frederic Guillot 2016-08-14 12:50:07 -04:00
parent 2ca3cc7f72
commit e985e27281
No known key found for this signature in database
GPG Key ID: 92D77191BA7FBC99
50 changed files with 115 additions and 143 deletions

View File

@ -15,7 +15,7 @@
<?php if (empty($actions)): ?>
<p class="alert"><?= t('There is no action at the moment.') ?></p>
<?php else: ?>
<table>
<table class="table-scrolling">
<tr>
<th><?= t('Automatic actions') ?></th>
<th><?= t('Action parameters') ?></th>

View File

@ -9,7 +9,7 @@
<div id="chart" data-metrics='<?= json_encode($metrics, JSON_HEX_APOS) ?>' data-label="<?= t('Average time spent') ?>"></div>
<table class="table-stripped">
<table class="table-striped">
<tr>
<th><?= t('Column') ?></th>
<th><?= t('Average time spent') ?></th>

View File

@ -23,7 +23,7 @@
<?php if ($paginator->isEmpty()): ?>
<p class="alert"><?= t('No tasks found.') ?></p>
<?php elseif (! $paginator->isEmpty()): ?>
<table class="table-fixed table-small">
<table class="table-fixed table-small table-scrolling">
<tr>
<th class="column-5"><?= $paginator->order(t('Id'), 'tasks.id') ?></th>
<th><?= $paginator->order(t('Title'), 'tasks.title') ?></th>

View File

@ -9,7 +9,7 @@
<div id="chart" data-metrics='<?= json_encode($metrics, JSON_HEX_APOS) ?>'></div>
<table>
<table class="table-striped">
<tr>
<th><?= t('Column') ?></th>
<th><?= t('Number of tasks') ?></th>

View File

@ -9,7 +9,7 @@
<div id="chart" data-metrics='<?= json_encode($metrics, JSON_HEX_APOS) ?>'></div>
<table>
<table class="table-striped">
<tr>
<th><?= t('User') ?></th>
<th><?= t('Number of tasks') ?></th>

View File

@ -1,5 +1,5 @@
<div class="tooltip-large">
<table>
<table class="table-small">
<tr>
<th class="column-20"><?= t('Type') ?></th>
<th class="column-70"><?= t('Title') ?></th>

View File

@ -1,5 +1,5 @@
<div class="tooltip-large">
<table>
<table class="table-small">
<?php foreach ($files as $file): ?>
<tr>
<th>

View File

@ -1,5 +1,5 @@
<div class="tooltip-large">
<table>
<table class="table-small">
<tr>
<th class="column-80"><?= t('Subtask') ?></th>
<th><?= t('Assignee') ?></th>

View File

@ -1,5 +1,5 @@
<div class="tooltip-large">
<table>
<table class="table-small">
<?php foreach ($links as $label => $grouped_links): ?>
<tr>
<th colspan="4"><?= t($label) ?></th>

View File

@ -2,7 +2,7 @@
<div class="page-header">
<h2><?= t('Categories') ?></h2>
</div>
<table>
<table class="table-striped">
<tr>
<th><?= t('Category Name') ?></th>
<th class="column-8"><?= t('Actions') ?></th>

View File

@ -12,7 +12,7 @@
<p class="alert alert-error"><?= t('Your board doesn\'t have any columns!') ?></p>
<?php else: ?>
<table
class="columns-table table-stripped"
class="columns-table table-striped"
data-save-position-url="<?= $this->url->href('ColumnController', 'move', array('project_id' => $project['id'])) ?>">
<thead>
<tr>

View File

@ -4,7 +4,7 @@
<?php if (! empty($rates)): ?>
<table class="table-stripped">
<table class="table-striped">
<tr>
<th class="column-35"><?= t('Currency') ?></th>
<th><?= t('Rate') ?></th>

View File

@ -3,7 +3,7 @@
<h2><?= t('Custom filters') ?></h2>
</div>
<div>
<table>
<table class="table-striped table-scrolling">
<tr>
<th class="column-15"><?= t('Name') ?></th>
<th class="column-30"><?= t('Filter') ?></th>

View File

@ -13,7 +13,7 @@
</ul>
</div>
<table class="table-fixed table-small">
<table class="table-striped table-scrolling table-small">
<tr>
<th><?= t('Notification') ?></th>
<th class="column-20"><?= t('Date') ?></th>

View File

@ -4,7 +4,7 @@
<?php if ($paginator->isEmpty()): ?>
<p class="alert"><?= t('Your are not member of any project.') ?></p>
<?php else: ?>
<table class="table-small">
<table class="table-striped table-small table-scrolling">
<tr>
<th class="column-5"><?= $paginator->order('Id', \Kanboard\Model\ProjectModel::TABLE.'.id') ?></th>
<th class="column-3"><?= $paginator->order('<i class="fa fa-lock fa-fw" title="'.t('Private project').'"></i>', \Kanboard\Model\ProjectModel::TABLE.'.is_private') ?></th>

View File

@ -4,7 +4,7 @@
<?php if ($paginator->isEmpty()): ?>
<p class="alert"><?= t('There is nothing assigned to you.') ?></p>
<?php else: ?>
<table class="table-small">
<table class="table-striped table-small table-scrolling">
<tr>
<th class="column-5"><?= $paginator->order('Id', \Kanboard\Model\TaskModel::TABLE.'.id') ?></th>
<th class="column-20"><?= $paginator->order(t('Project'), 'project_name') ?></th>

View File

@ -4,7 +4,7 @@
<?php if ($paginator->isEmpty()): ?>
<p class="alert"><?= t('There is nothing assigned to you.') ?></p>
<?php else: ?>
<table class="table-small">
<table class="table-striped table-small table-scrolling">
<tr>
<th class="column-5"><?= $paginator->order('Id', \Kanboard\Model\TaskModel::TABLE.'.id') ?></th>
<th class="column-20"><?= $paginator->order(t('Project'), 'project_name') ?></th>

View File

@ -8,7 +8,7 @@
<?php if ($paginator->isEmpty()): ?>
<p class="alert"><?= t('There is no user in this group.') ?></p>
<?php else: ?>
<table>
<table class="table-striped table-scrolling">
<tr>
<th><?= $paginator->order(t('Id'), 'id') ?></th>
<th><?= $paginator->order(t('Username'), 'username') ?></th>

View File

@ -2,7 +2,7 @@
<h2><?= t('Link labels') ?></h2>
</div>
<?php if (! empty($links)): ?>
<table>
<table class="table-striped table-scrolling">
<tr>
<th class="column-70"><?= t('Link labels') ?></th>
<th><?= t('Actions') ?></th>

View File

@ -12,7 +12,7 @@
<?php if ($paginator->isEmpty()): ?>
<p class="alert"><?= t('No project') ?></p>
<?php else: ?>
<table class="table-stripped">
<table class="table-striped table-scrolling">
<tr>
<th class="column-5"><?= $paginator->order(t('Id'), 'id') ?></th>
<th class="column-8"><?= $paginator->order(t('Status'), 'is_active') ?></th>

View File

@ -1,5 +1,5 @@
<?php if (! empty($files)): ?>
<table class="table-stripped">
<table class="table-striped table-scrolling">
<tr>
<th><?= t('Filename') ?></th>
<th><?= t('Creator') ?></th>

View File

@ -9,7 +9,7 @@
<?php if (empty($users)): ?>
<div class="alert"><?= t('No user have been allowed specifically.') ?></div>
<?php else: ?>
<table>
<table class="table-scrolling">
<tr>
<th class="column-50"><?= t('User') ?></th>
<th><?= t('Role') ?></th>
@ -69,7 +69,7 @@
<?php if (empty($groups)): ?>
<div class="alert"><?= t('No group have been allowed specifically.') ?></div>
<?php else: ?>
<table>
<table class="table-scrolling">
<tr>
<th class="column-50"><?= t('Group') ?></th>
<th><?= t('Role') ?></th>

View File

@ -11,7 +11,7 @@
<?php if (empty($tags)): ?>
<p class="alert"><?= t('There is no specific tag for this project at the moment.') ?></p>
<?php else: ?>
<table class="table-striped">
<table class="table-striped table-scrolling">
<tr>
<th class="column-80"><?= t('Tag') ?></th>
<th><?= t('Action') ?></th>

View File

@ -1,7 +1,7 @@
<?php if ($paginator->isEmpty()): ?>
<p class="alert"><?= t('No project') ?></p>
<?php else: ?>
<table class="table-fixed">
<table class="table-fixed table-scrolling">
<tr>
<th class="column-20"><?= $paginator->order(t('User'), 'users.username') ?></th>
<th class="column-25"><?= $paginator->order(t('Project'), 'projects.name') ?></th>

View File

@ -1,7 +1,7 @@
<?php if ($paginator->isEmpty()): ?>
<p class="alert"><?= t('No tasks found.') ?></p>
<?php elseif (! $paginator->isEmpty()): ?>
<table class="table-small">
<table class="table-small table-striped table-scrolling">
<tr>
<th class="column-5"><?= $paginator->order(t('Id'), 'tasks.id') ?></th>
<th class="column-10"><?= $paginator->order(t('Project'), 'projects.name') ?></th>

View File

@ -1,7 +1,7 @@
<?php if (empty($users)): ?>
<p><?= t('There is no project member.') ?></p>
<?php else: ?>
<table>
<table class="table-small">
<?php foreach ($roles as $role => $role_name): ?>
<?php if (isset($users[$role])): ?>
<tr><th><?= $role_name ?></th></tr>

View File

@ -52,7 +52,7 @@
<div class="page-header">
<h2><?= t('Board') ?></h2>
</div>
<table class="table-stripped">
<table class="table-striped table-scrolling">
<tr>
<th class="column-40"><?= t('Column') ?></th>
<th class="column-20"><?= t('Task limit') ?></th>

View File

@ -1,4 +1,4 @@
<table class="table-fixed table-small">
<table class="table-small table-scrolling">
<tr>
<th class="column-8"><?= $paginator->order(t('Project'), 'tasks.project_id') ?></th>
<th class="column-5"><?= $paginator->order(t('Id'), 'tasks.id') ?></th>

View File

@ -1,6 +1,6 @@
<?php if (! empty($subtasks)): ?>
<table
class="subtasks-table table-stripped"
class="subtasks-table table-striped table-scrolling"
data-save-position-url="<?= $this->url->href('SubtaskController', 'movePosition', array('project_id' => $task['project_id'], 'task_id' => $task['id'])) ?>"
>
<thead>

View File

@ -1,5 +1,5 @@
<table
class="swimlanes-table table-stripped"
class="swimlanes-table table-striped table-scrolling"
data-save-position-url="<?= $this->url->href('SwimlaneController', 'move', array('project_id' => $project['id'])) ?>">
<thead>
<tr>

View File

@ -11,7 +11,7 @@
<?php if (empty($tags)): ?>
<p class="alert"><?= t('There is no global tag at the moment.') ?></p>
<?php else: ?>
<table class="table-striped">
<table class="table-striped table-scrolling">
<tr>
<th class="column-80"><?= t('Tag') ?></th>
<th><?= t('Action') ?></th>

View File

@ -18,7 +18,7 @@
<h3 id="analytic-task-time-column"><?= t('Time spent into each column') ?></h3>
<div id="chart" data-metrics='<?= json_encode($time_spent_columns, JSON_HEX_APOS) ?>' data-label="<?= t('Time spent') ?>"></div>
<table class="table-stripped">
<table class="table-striped">
<tr>
<th><?= t('Column') ?></th>
<th><?= t('Time spent') ?></th>

View File

@ -11,7 +11,7 @@
<?php if ($subtask_paginator->isEmpty()): ?>
<p class="alert"><?= t('There is nothing to show.') ?></p>
<?php else: ?>
<table class="table-fixed">
<table class="table-fixed table-scrolling">
<tr>
<th class="column-15"><?= $subtask_paginator->order(t('User'), 'username') ?></th>
<th><?= $subtask_paginator->order(t('Subtask'), 'subtask_title') ?></th>

View File

@ -12,7 +12,7 @@
<?php if (empty($transitions)): ?>
<p class="alert"><?= t('There is nothing to show.') ?></p>
<?php else: ?>
<table class="table-stripped">
<table class="table-striped table-scrolling">
<tr>
<th><?= t('Date') ?></th>
<th><?= t('Source column') ?></th>

View File

@ -1,5 +1,5 @@
<?php if (! empty($links)): ?>
<table class="table-stripped table-small">
<table class="table-striped table-scrolling">
<tr>
<th class="column-10"><?= t('Type') ?></th>
<th><?= t('Title') ?></th>

View File

@ -1,5 +1,5 @@
<?php if (! empty($files)): ?>
<table class="table-stripped table-small">
<table class="table-striped table-scrolling">
<tr>
<th><?= t('Filename') ?></th>
<th><?= t('Creator') ?></th>

View File

@ -1,5 +1,5 @@
<?php if (! empty($links)): ?>
<table class="task-links-table table-stripped">
<table class="task-links-table table-striped table-scrolling">
<?php foreach ($links as $label => $grouped_links): ?>
<?php $hide_td = false ?>
<?php foreach ($grouped_links as $link): ?>

View File

@ -4,7 +4,7 @@
<?php if ($paginator->isEmpty()): ?>
<p class="alert"><?= t('No tasks found.') ?></p>
<?php elseif (! $paginator->isEmpty()): ?>
<table class="table-fixed table-small">
<table class="table-striped table-scrolling table-small">
<tr>
<th class="column-5"><?= $paginator->order(t('Id'), 'tasks.id') ?></th>
<th class="column-10"><?= $paginator->order(t('Swimlane'), 'tasks.swimlane_id') ?></th>

View File

@ -12,7 +12,7 @@
<?php if ($paginator->isEmpty()): ?>
<p class="alert"><?= t('No user') ?></p>
<?php else: ?>
<table class="table-stripped">
<table class="table-scrolling table-striped">
<tr>
<th class="column-5"><?= $paginator->order(t('Id'), 'id') ?></th>
<th class="column-18"><?= $paginator->order(t('Username'), 'username') ?></th>

View File

@ -5,7 +5,7 @@
<?php if (empty($last_logins)): ?>
<p class="alert"><?= t('Never connected.') ?></p>
<?php else: ?>
<table class="table-small table-fixed">
<table class="table-small table-fixed table-scrolling table-striped">
<tr>
<th class="column-20"><?= t('Login date') ?></th>
<th class="column-15"><?= t('Authentication method') ?></th>
@ -21,4 +21,4 @@
</tr>
<?php endforeach ?>
</table>
<?php endif ?>
<?php endif ?>

View File

@ -5,7 +5,7 @@
<?php if (empty($tokens)): ?>
<p class="alert"><?= t('The password has never been reinitialized.') ?></p>
<?php else: ?>
<table class="table-small table-fixed">
<table class="table-small table-fixed table-scrolling table-striped">
<tr>
<th class="column-20"><?= t('Creation') ?></th>
<th class="column-20"><?= t('Expiration') ?></th>
@ -23,4 +23,4 @@
</tr>
<?php endforeach ?>
</table>
<?php endif ?>
<?php endif ?>

View File

@ -5,7 +5,7 @@
<?php if (empty($sessions)): ?>
<p class="alert"><?= t('No session.') ?></p>
<?php else: ?>
<table class="table-small table-fixed">
<table class="table-small table-fixed table-scrolling table-striped">
<tr>
<th class="column-20"><?= t('Creation date') ?></th>
<th class="column-20"><?= t('Expiration date') ?></th>

View File

@ -6,7 +6,7 @@
<?php if ($subtask_paginator->isEmpty()): ?>
<p class="alert"><?= t('There is nothing to show.') ?></p>
<?php else: ?>
<table class="table-fixed">
<table class="table-fixed table-scrolling table-striped">
<tr>
<th class="column-25"><?= $subtask_paginator->order(t('Task'), 'task_title') ?></th>
<th class="column-25"><?= $subtask_paginator->order(t('Subtask'), 'subtask_title') ?></th>

File diff suppressed because one or more lines are too long

View File

@ -37,3 +37,8 @@
@content
&:-ms-input-placeholder
@content
@mixin col-x($n)
@for $i from 1 through $n
.column-#{$i}
width: $i * 1%

View File

@ -5,7 +5,7 @@
.sidebar-content
padding-left: 10px
@include grid_width(80/100)
@include grid_width(82/100)
@include xs-device
@include grid_width(1)

View File

@ -1,4 +1,5 @@
@import variables
@import mixins
table
width: 100%
@ -6,106 +7,48 @@ table
border-spacing: 0
margin-bottom: 20px
th
border: 1px solid #eee
padding: 0.5em 3px
td
border: 1px solid #eee
padding: 0.5em 3px
vertical-align: top
th
background: bg-color('primary')
text-align: left
td li
margin-left: 20px
.table-small
font-size: size('small')
th a
text-decoration: none
color: color('primary')
&:focus, &:hover
text-decoration: underline
.table-fixed
table-layout: fixed
white-space: nowrap
th
overflow: hidden
td
&.table-fixed
table-layout: fixed
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
th
overflow: hidden
td
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
.table-stripped tr:nth-child(odd)
background: #fefefe
&.table-small
font-size: size('small')
.column-3
width: 3%
&.table-striped tr:nth-child(odd)
background: bg-color('lighter')
.column-5
width: 5%
&.table-scrolling
@include sm-device
overflow-x: auto
display: inline-block
vertical-align: top
max-width: 100%
white-space: nowrap
.column-8
width: 7.5%
th
text-align: left
padding: 0.5em 3px
border: 1px solid #eee
background: bg-color('primary')
.column-10
width: 10%
a
text-decoration: none
color: color('primary')
&:focus, &:hover
text-decoration: underline
.column-12
width: 12%
.column-15
width: 15%
.column-18
width: 18%
.column-20
width: 20%
.column-25
width: 25%
.column-30
width: 30%
.column-35
width: 35%
.column-40
width: 40%
.column-50
width: 50%
.column-60
width: 60%
.column-70, .column-80
width: 70%
.draggable-row-handle
cursor: move
color: #dedede
&:hover
color: color('primary')
tr.draggable-item-selected
background: #fff
border: 2px solid #666
box-shadow: 4px 2px 10px -4px rgba(0, 0, 0, 0.55)
td
border-top: none
border-bottom: none
&:first-child
border-left: none
&:last-child
border-right: none
border: 1px solid #eee
padding: 0.5em 3px
vertical-align: top
.table-stripped tr.draggable-item-hover, tr.draggable-item-hover
background: #FEFFF2
li
margin-left: 20px
@include col-x(100)

View File

@ -0,0 +1,23 @@
@import variables
.draggable-row-handle
cursor: move
color: color('lighter')
&:hover
color: color('primary')
tr.draggable-item-selected
background: #fff
border: 2px solid #666
box-shadow: 4px 2px 10px -4px rgba(0, 0, 0, 0.55)
td
border-top: none
border-bottom: none
&:first-child
border-left: none
&:last-child
border-right: none
.table-stripped
tr.draggable-item-hover, tr.draggable-item-hover
background: #FEFFF2

View File

@ -4,7 +4,7 @@ $md-device-width: 1150px
$colors: ('primary': #333, 'light': #999, 'lighter': #dedede, 'dark': #000, 'medium': #555, 'error': #b94a48)
$link-colors: ('primary': #3366CC, 'focus': #DF5353, 'hover': #333)
$background-colors: ('primary': #fbfbfb, 'light': #fcfcfc)
$background-colors: ('primary': #fbfbfb, 'light': #fcfcfc, 'lighter': #fefefe)
$alert-colors: ('default': #c09853, 'success': #468847, 'error': #b94a48, 'info': #3a87ad, 'normal': #333)
$alert-background-colors: ('default': #fcf8e3, 'success': #dff0d8, 'error': #f2dede, 'info': #d9edf7, 'normal': #f0f0f0)

View File

@ -3,6 +3,7 @@
@import links
@import title
@import table
@import table_drag_and_drop
@import form
@import input_addon
@import alert