"Subtask Overview for Project Management"
Bootstrap 3.2.0 Snippet by patri

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<table class="table table-striped table-bordered subprojects">
<thead>
<tr>
<th>·</th>
<th>Project Title</th>
<th>Project-Type</th>
<th>Start</th>
<th>End</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr data-id="8" title="Process 8">
<td class="text-center">
<i class="glyphicon glyphicon-star"></i>
</td>
<td>Tea Time</td>
<td>Third Party Founded</td>
<td>13.10.2014</td>
<td>17.10.2014</td>
<td>
<i class="glyphicon glyphicon-refresh right-5"></i>
Running
</td>
</tr>
<tr>
<td colspan="6">
<table class="table table-striped table-bordered nomargin">
<tbody>
<tr data-id="5" title="Process 5">
<td class="text-center">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.subprojects td[colspan] {
padding: 10px 20px 20px;
}
.subprojects td[colspan] table{
border-left: 5px solid #3071A9;
border-bottom-left-radius: 5px;
}
.subprojects td[colspan] table td[colspan] table{
border-color: #449D44;
}
.subprojects td[colspan] table td[colspan] table td[colspan] table{
border-color: #EC971F;
}
.subprojects td[colspan] table td[colspan] table td[colspan] table td[colspan] table{
border-color: #777;
}
.subprojects tr:hover > td:not([colspan]){
background-color: #AED3E5;
cursor:pointer;
}
.subprojects tbody tr.current td{
background-color: #D9EDF7;
}
.subprojects tr > td:first-child:not([colspan]) {
width: 45px;
}
.subprojects i.glyphicon-refresh{
animation: drehen 4s linear infinite;
}
@keyframes drehen{
100% {
transform: rotate(360deg);
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
$(function(){
$('.subprojects tr td:not([colspan])').on('click', function (e) {
location.href = '/project/show/' + $(this).parent().data('id');
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Material Kit PRO

Questions / Comments: