Improve responsive display of user pages.

renderer.php

@@ -932,6 +932,7 @@ class mod_attendance_renderer extends plugin_renderer_base {
                 get_string('pointssessionscompleted', 'attendance'),
                 get_string('percentagesessionscompleted', 'attendance'));
             $table->align = array('left', 'left', 'center', 'center', 'center');
+            $table->colclasses = array('colcourse', 'colatt', 'colsessionscompleted', 'colpointssessionscompleted', 'colpercentagesessionscompleted');
             $totalattendance = 0;
             $totalpercentage = 0;
             foreach ($userdata->coursesatts as $ca) {
@@ -990,10 +991,12 @@ class mod_attendance_renderer extends plugin_renderer_base {
         $table->head = array();
         $table->align = array();
         $table->size = array();
+        $table->colclasses = array();
         if (!$shortform) {
             $table->head[] = get_string('sessiontypeshort', 'attendance');
             $table->align[] = '';
             $table->size[] = '1px';
+            $table->colclasses[] = '';
         }
         $table->head[] = get_string('date');
         $table->head[] = get_string('description', 'attendance');
@@ -1002,6 +1005,7 @@ class mod_attendance_renderer extends plugin_renderer_base {
         $table->head[] = get_string('remarks', 'attendance');
 
         $table->align = array_merge($table->align, array('', 'left', 'center', 'center', 'center'));
+        $table->colclasses = array_merge($table->colclasses, array('datecol', 'desccol', 'statuscol', 'pointscol', 'remarkscol'));
         $table->size = array_merge($table->size, array('1px', '*', '*', '1px', '*'));
 
         if (has_capability('mod/attendance:takeattendances', $context)) {

styles.css

@@ -201,4 +201,38 @@
 #page-mod-attendance-preferences .form-control {
     width: inherit;
     display: inherit;
+}
+
+@media (max-width: 767px) {
+    .path-mod-attendance .remarkscol {
+        display: none;
+    }
+
+    .path-mod-attendance .statusgroup .form-check-inline {
+        display: block;
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+
+    #page-mod-attendance-view .colatt {
+        display: none;
+    }
+}
+@media (max-width: 480px) {
+    .path-mod-attendance .desccol {
+        display: none;
+    }
+
+    .path-mod-attendance .pointscol {
+        display: none;
+    }
+
+    .path-mod-attendance .attfiltercontrols #currentdate {
+        display: none;
+    }
+
+    #page-mod-attendance-view .colsessionscompleted,
+    #page-mod-attendance-view .colpointssessionscompleted {
+        display: none;
+    }
 }