146 lines
3.9 KiB
PHP
146 lines
3.9 KiB
PHP
<style>
|
|
|
|
.LSscrollkolom{
|
|
display:block;
|
|
width:100%;
|
|
overflow-x:scroll;
|
|
}
|
|
.LSheaderholder {
|
|
position:absolute;
|
|
left:305px;
|
|
top:0px;
|
|
width:630px;
|
|
overflow:auto;
|
|
}
|
|
.LSnameholder{
|
|
float:left;
|
|
width: 33px;
|
|
height:180px;
|
|
padding:0px;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
td.LScell{
|
|
border:1px solid #ebebeb;
|
|
width:30px;
|
|
height:30px;
|
|
}
|
|
td.zweefcell{
|
|
/* border:1px solid rgba(235, 235, 235, .01);
|
|
*/ border: 1px solid #f5f5f5;
|
|
width:30px;
|
|
height:30px;
|
|
background-color:#f5f5f5;
|
|
}
|
|
td.zweefcell.active-user{
|
|
background-color:#f74299;
|
|
}
|
|
td.zweefcell.verant{
|
|
background-color:#38c6ef;
|
|
}
|
|
|
|
.LSrotate{
|
|
padding-top:115px;
|
|
width:165px;
|
|
height: 28px;
|
|
overflow:hidden;
|
|
transform: rotate(-90deg);
|
|
/* Safari */
|
|
-webkit-transform: rotate(-90deg);
|
|
/* Firefox */
|
|
-moz-transform: rotate(-90deg);
|
|
/* IE9*/
|
|
-ms-transform: rotate(-90deg);
|
|
/* Opera */
|
|
-o-transform: rotate(-90deg);
|
|
/* Internet Explorer8 */
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
|
|
transform-origin:17% 99%;
|
|
-ms-transform-origin: 17% 99%;
|
|
-webkit-transform-origin:17% 99%;
|
|
}
|
|
.actlijst {
|
|
width: 290px;
|
|
height:30px;
|
|
border-bottom:1px solid #ebebeb;
|
|
border-top:1px solid #ebebeb;
|
|
}
|
|
.pijlerkop{
|
|
background-color:#f99443;
|
|
background-image: url("css/images/paarsrechts.png") ;
|
|
background-repeat: no-repeat;
|
|
background-position:right center;
|
|
}
|
|
.pijlerkop.open{
|
|
background-image: url("css/images/uppaars.png") ;
|
|
background-repeat: no-repeat;
|
|
background-position:right center;
|
|
}
|
|
|
|
</style>
|
|
<div id="mensactief-container" style="padding-left:10px; width: 950px; height:525px;">
|
|
<p></p>
|
|
<div style="position:absolute; left:10px; top: 10px; width:240px; height: 160px; ">
|
|
<p>Toon mensen ingepland als:<p>
|
|
<input type=radio name='raSoort' value="1"
|
|
data-bind="checked: welkeMens,
|
|
click: fInit"
|
|
checked: checked />
|
|
<span style='font-family: Mooischrijf;font-size:0.9em' > Verantwoordelijke </span><br />
|
|
<input type=radio name='raSoort' value="2"
|
|
data-bind="checked: welkeMens,
|
|
click:fInit" />
|
|
<span style='font-family: Mooischrijf;font-size:0.9em;' > Uitvoerende </span><br />
|
|
</div>
|
|
<div style= "height:180px; width:925px; " >
|
|
<div class="LSheaderholder" >
|
|
<div data-bind="style:{width: (33 * users().length).toString() +'px'}">
|
|
<!-- ko foreach: users -->
|
|
<div class="LSnameholder" data-bind="">
|
|
<p class="LSrotate" data-bind="text:fullname"></p>
|
|
</div>
|
|
<!-- /ko -->
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="matrixholder"
|
|
style="height: 350px; width:950px;overflow-x:hidden; overflow-y:scroll;
|
|
position: absolute; left: 10px; top:198px; z-index:30;">
|
|
<table style="border-collapse:collapse; cellspacing:0px;border:1px solid #ebebeb; padding-top:0px">
|
|
<tbody data-bind="foreach:pijlers" >
|
|
<tr>
|
|
<td class="toggle-activiteiten actlijst pijlerkop open"
|
|
data-bind = "click: $parent.fToggleActiviteiten,
|
|
css:{'open': openstatus},
|
|
text: pijlerNaam">
|
|
</td>
|
|
</tr>
|
|
<!-- ko foreach:activiteiten -->
|
|
<tr data-bind="visible:$parent.openstatus()">
|
|
<td class="actlijst " data-bind="text: naam"></td>
|
|
<td style="width:622px; height:30px;">
|
|
<div style="height: 30px; width:622px; overflow-y:hidden">
|
|
<div style="height: 45px; width:622px; overflow-x:scroll; overflow-y:hidden"
|
|
class= "LSscrollkolom">
|
|
<table data-bind="style:{width: (33 * $root.users().length).toString() +'px'}">
|
|
<tr >
|
|
<!-- ko foreach:actief -->
|
|
<td class="zweefcell "
|
|
data-bind="css: HoeActief ,
|
|
click:$root.DeleteOrAdd.bind($data, $parent)">
|
|
</td>
|
|
<!-- /ko -->
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- /ko -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div> |