Commit 5a717089 authored by Myriam Delaruelle's avatar Myriam Delaruelle
Browse files

Sticky headers for table

parent 15ca2b98
......@@ -26,6 +26,7 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/str'],
var all_selected=false;
var data=[];
return{
registerFilters:function(){
$("#group-select").on('change', function(e){
......@@ -59,6 +60,16 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/str'],
}
function initHeaders(){
var nb_counts=$(".th-rotate").length;
$(".th-rotate").each(function(index, element){
$( element ).css("zIndex",nb_counts-index);
})
}
function getCompleteUrl(){
url=window.location.search;
urlParams = new URLSearchParams(url);
......@@ -97,7 +108,6 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/str'],
function changeCompletion(){
console.log(data);
symbol=$("#symbol-select").val();
filter=$("#filter-select").val();
data.count_results=0;
......@@ -195,6 +205,7 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/str'],
$("#partial-table").html(html);
templates.runTemplateJS(js);
window.history.pushState('suivi',"", url);
initHeaders();
})
.fail(function(){
loadMessage("error");
......
......@@ -606,6 +606,9 @@ th.th-rotate {
/* Something you can count on */
height: 140px;
white-space: nowrap;
position: sticky;
top:0;
background: white;
}
th.th-rotate > div {
......@@ -692,28 +695,26 @@ th.th-rotate > div > span {
display: inline-block;
}
#table-body td { border-right: 1px solid #eee; }
#table-body td {
border-right: 1px solid #eee;
}
/* Scroll de la table */
#table-body {
display: block;
display: table-row-group;
/*overflow-y:scroll;*/
overflow: auto;
/*overflow: auto;
margin-right: 10rem;
height: 300px;
height: 50vh;
}
#suivi {
margin-bottom: 1rem;
height: 50vh; */
}
#suivi thead {
display: block;
display: table-header-group;
/*overflow-x:scroll;*/
overflow:auto;
overflow-x: auto;
overflow-y: hidden;
height: 143px;
}
......@@ -746,23 +747,29 @@ th.th-rotate > div > span {
#suivi .first-column-iena{
width: 2em;
min-width: 2em;
left: 0;
}
#suivi .second-column-iena{
width: 3em;
min-width: 3em;
left:2em;
text-align: center;
}
#suivi .third-column-iena{
width: 15em;
min-width: 15em;
min-width: 15em;
padding-left: 6px;
left: 10em;
}
#suivi .actions-column-iena{
width: 5em;
min-width: 5em;
min-width: 5em;
left: 5em;
text-align: center;
}
tbody th{
......@@ -830,4 +837,26 @@ tbody th{
margin-right: 20px;
}
.table-wrapper{
position: relative;
overflow: auto;
white-space: nowrap;
max-height: 600px;
border:none;
}
.first-column-iena, .second-column-iena, .actions-column-iena, .third-column-iena{
position: sticky;
background: inherit;
}
th.first-column-iena, th.second-column-iena, th.actions-column-iena, th.third-column-iena{
background: white;
z-index: 200;
position: sticky;
top: 0;
}
#partial-table{
margin-bottom: 20px;
}
\ No newline at end of file
......@@ -29,6 +29,8 @@ require_once('view/view_param_indicateur.php');
require_once('entity/course_format_iena_section_ressources.php');
require_once('entity/course_format_iena_sections.php');
require_once('entity/course_format_iena_groups.php');
$PAGE->requires->css('/course/format/iena/styles.css');
global $COURSE, $DB, $USER, $PAGE;
......
{{#count_results}}
<p>{{count_results}} résultat(s)</p>
<table id="suivi">
<thead>
<tr id="modules">
<th id="first-column-head" class="first-column-iena"> <input type="checkbox" id="iena-select-all" ></th>
<th class="second-column-iena">%</th>
<th class="actions-column-iena">Actions</th>
<th class="third-column-iena">Etudiants</th>
{{#modules}}
{{#visible}}
<th class="th-rotate" data-fullname="{{name}}" data-section="{{section}}">
<div>
<span>
{{displayname}}
</span>
</div>
</th>
{{/visible}}
{{/modules}}
</tr>
</thead>
<tbody id="table-body">
{{#students}}
{{#visible}}
<tr data-userid="{{id}}" data-percent={{percentage}}>
<th class="first-column-iena">
<input type="checkbox" name="checkstudent" value="{{id}}">
</th>
<th class="second-column-iena">
<span class="stud_perc">{{percentage}} %</span>
</th>
<th class="actions-column-iena">
<a href="{{report_link}}" target="_blank"><i class="icon fa fa-graduation-cap fa-fw"></i></a>
<a href="{{message_link}}" target="_blank"><i class="icon fa fa-envelope fa-fw"></i></a>
</th>
<th class="third-column-iena">
{{firstname}} {{lastname}}
</th>
{{#progress}}
<div class="table-wrapper">
<table id="suivi">
<thead>
<tr id="modules">
<th id="first-column-head" class="first-column-iena"> <input type="checkbox" id="iena-select-all" ></th>
<th class="second-column-iena">%</th>
<th class="actions-column-iena">Actions</th>
<th class="third-column-iena">Etudiants</th>
{{#modules}}
{{#visible}}
<td title="{{namemodule}}" data-section="{{id}}" class="pointer-help state-{{completionstate}}"><span class="icon-progress"></span></td>
<th class="th-rotate" data-fullname="{{name}}" data-section="{{section}}">
<div>
<span>
{{displayname}}
</span>
</div>
</th>
{{/visible}}
{{/progress}}
{{/modules}}
</tr>
{{/visible}}
{{/students}}
</tbody>
</table>
</thead>
<tbody id="table-body">
{{#students}}
{{#visible}}
<tr data-userid="{{id}}" data-percent={{percentage}}>
<td class="first-column-iena">
<input type="checkbox" name="checkstudent" value="{{id}}">
</td>
<td class="second-column-iena">
<span class="stud_perc">{{percentage}} %</span>
</td>
<td class="actions-column-iena">
<a href="{{report_link}}" target="_blank"><i class="icon fa fa-graduation-cap fa-fw"></i></a>
<a href="{{message_link}}" target="_blank"><i class="icon fa fa-envelope fa-fw"></i></a>
</td>
<td class="third-column-iena">
{{firstname}} {{lastname}}
</td>
{{#progress}}
{{#visible}}
<td title="{{namemodule}}" data-section="{{id}}" class="pointer-help state-{{completionstate}}"><span class="icon-progress"></span></td>
{{/visible}}
{{/progress}}
</tr>
{{/visible}}
{{/students}}
</tbody>
</table>
</div>
{{/count_results}}
{{^count_results}}
......
......@@ -141,7 +141,7 @@ require(['format_iena/suivi', 'core/templates'], function(module) {
<div class="actions-suivi-iena">
<div class="input-group">
<div class="input-group row">
<div class="input-group-prepend col-md-3">
<div class="col-form-label d-inline">Avec la sélection : </div>
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment