From 5a7170897109eed0253575a669e6a5e3017db794 Mon Sep 17 00:00:00 2001
From: Myriam Delaruelle
<Myriam Delaruelle@bdn-un-mdelarue.ad.univ-lorraine.fr>
Date: Wed, 6 Oct 2021 11:00:53 +0200
Subject: [PATCH] Sticky headers for table
---
amd/build/suivi.js | 13 ++++-
styles.css | 59 ++++++++++++++------
suivi_unit.php | 2 +
templates/suivi-table.mustache | 99 +++++++++++++++++-----------------
templates/suivi.mustache | 2 +-
5 files changed, 110 insertions(+), 65 deletions(-)
diff --git a/amd/build/suivi.js b/amd/build/suivi.js
index 3f66cf0..2a5a12c 100644
--- a/amd/build/suivi.js
+++ b/amd/build/suivi.js
@@ -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");
diff --git a/styles.css b/styles.css
index 8f2ea84..6f61365 100644
--- a/styles.css
+++ b/styles.css
@@ -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
diff --git a/suivi_unit.php b/suivi_unit.php
index 7e5fe51..6df5c27 100644
--- a/suivi_unit.php
+++ b/suivi_unit.php
@@ -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;
diff --git a/templates/suivi-table.mustache b/templates/suivi-table.mustache
index a95429b..0c8ddc2 100644
--- a/templates/suivi-table.mustache
+++ b/templates/suivi-table.mustache
@@ -1,56 +1,59 @@
{{#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}}
diff --git a/templates/suivi.mustache b/templates/suivi.mustache
index cd39935..b34d738 100644
--- a/templates/suivi.mustache
+++ b/templates/suivi.mustache
@@ -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>
--
GitLab