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>