New Layout for Student's My Grades view

<?php /** * @package Joomdle * @copyright Qontori Pte Ltd * @license http://www.gnu.org/licenses/gpl-3.0.html GNU/GPL */ defined('_JEXEC') or die('Restricted access'); ?> <div class="joomdle-gradelist<?php echo $this->pageclass_sfx;?>"> <?php if ($this->params->get('show_page_heading', 1)) : ?> <?php $student = $_GET['student']; $db = JFactory::getDbo(); $query = $db->getQuery(true); $query->select('id'); $query->from($db->quoteName('#__users')); $query->where($db->quoteName('username'). " = '" . $student . "'"); $db->setQuery($query); $studentid = $db->loadResult(); $db = JFactory::getDbo(); $query = $db->getQuery(true); $query->select(array('firstname', 'lastname', 'cb_class')); $query->from($db->quoteName('#__comprofiler')); $query->where($db->quoteName('id')." = " . $studentid); $db->setQuery($query); $row = $db->loadRow(); echo "<h1>" . $row[0] . " " . $row[1]; echo "<span style='float:right'>" . $row[2] . "</span></h1>"; ?> <input id="gradecourse" type="text" placeholder="Search Course"> <input id="gradeassessment" type="text" placeholder="Search Assessment"> <div style=" padding: 10px; margin: 0 1rem 1.5rem; background: #f5f7f9; font-size: 1rem; box-shadow: 2px 2px 3px #888; ">The pass mark for all courses and assessments is <b>55%</b>. Marks below 55% will be highlighted in <span style="color:red; font-weight:bold;">RED</span><span class="btn btn-blue" style="float:right" id="showall">Show All</span></div> <?php endif; ?> <?php /* Para cada curso, mostramos sus tareas */ foreach ($this->tasks as $this->course) : if (count ($this->course['grades']['data']) == 0) continue; echo $this->loadTemplate('course'); endforeach; ?> </div> <script type="application/javascript"> var acc = document.querySelectorAll(".joomdle-gradelist h1"); var i; for (i = 0; i < acc.length; i++) { var panel = acc[i].nextElementSibling; panel.style.maxHeight = null; acc[i].onclick = function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }; } // Show/Hide all button jQuery('#showall').click(function() { if (jQuery(this).hasClass('btn-blue') ) { jQuery(this).text("Hide All").removeClass('btn-blue').addClass('btn-red'); var divheight = jQuery('.joomdle-gradelist .joomdle-gradelist div')[0].scrollHeight; jQuery(".joomdle-gradelist .joomdle-gradelist h1").toggleClass("active").next().css("max-height", divheight); } else { jQuery(this).text("Show All").removeClass('btn-red').addClass('btn-blue'); jQuery(".joomdle-gradelist .joomdle-gradelist h1").removeClass("active"); jQuery(".joomdle-gradelist .joomdle-gradelist div").css("max-height", ""); } }); jQuery(document).ready(function(){ jQuery("#gradecourse").on("keyup", function() { jQuery(".joomdle-gradelist .joomdle-gradelist h1.active").removeClass("active").next().css("max-height", ""); var value = jQuery(this).val().toLowerCase(); jQuery(".joomdle-gradelist .joomdle-gradelist h1").each(function() { if (jQuery(this).text().toLowerCase().indexOf(value) > -1) { jQuery(this).parent(".joomdle-gradelist").show(); } else { jQuery(this).parent(".joomdle-gradelist").hide(); } }); }); jQuery("#gradeassessment").on("keyup", function() { var divheight = jQuery('.joomdle-gradelist .joomdle-gradelist div')[0].scrollHeight; jQuery(".joomdle-gradelist .joomdle-gradelist h1:not(.active)").toggleClass("active").next().css("max-height", divheight); var value = jQuery(this).val().toLowerCase(); jQuery(".joomdle-gradelist .joomdle-gradelist tr:not(:first-child)").filter(function() { jQuery(this).toggle(jQuery(this).text().toLowerCase().indexOf(value) > -1); }); // Hide if table empty jQuery(".joomdle-gradelist .joomdle-gradelist tr:first-child").each(function() { if (jQuery(this).siblings('tr:not([style="display: none;"])').length) { jQuery(this).show(); jQuery(this).closest(".joomdle-gradelist").show(); } else { jQuery(this).hide(); jQuery(this).closest(".joomdle-gradelist").hide(); } }); // Show if seach field empty if( jQuery(this).val().length === 0 ) { jQuery(".joomdle-gradelist .joomdle-gradelist h1.active").toggleClass("active"); jQuery(".joomdle-gradelist .joomdle-gradelist div").show().css("max-height", ""); jQuery(".joomdle-gradelist, .joomdle-gradelist .joomdle-gradelist tr:first-child, .joomdle-gradelist .joomdle-gradelist tr:nth-last-child(-n+2), .joomdle-gradelist p").show(); } // Remove transition then adding it back to smoothen filtering jQuery(".joomdle-gradelist .joomdle-gradelist div").css("transition", "none"); setTimeout(function() { jQuery(".joomdle-gradelist .joomdle-gradelist div").css("transition", "all 0.2s ease"); }, 10); }); }); </script>