O guia de cursos presente em https://www.ifms.edu.br/cursos utiliza o plugin JavaScript https://isotope.metafizzy.co/ para criar os filtros referentes aos campi que os cursos estão relacionados.
Na aba “Compor” da capa referente ao link citado acima https://www.ifms.edu.br/cursos/guia-de-cursos/compose é incluso o HTML referentes aos cursos, como as imagens e os links para acessar as páginas específicas de cada curso em cada campus.
O atributo data-filter=“.campo-grande” filtra os elementos que possui a classe .campo-grande referente ao Campus Campo Grande, por exemplo.
O trecho do código HTML abaixo foi usado para incluir o curso Técnico Integrado em Eletrotécnica no Guia de Cursos. Ele seria filtrado quando selecionado o Campus Campo Grande ou o Campus Três Lagoas no filtro.
<div class="campo-grande tres-lagoas"><img alt="Técnico Integrado em Eletrotécnica" src="../imagens/cursos/links-medio/eletrotecnica-menor" /> <ul class="local-oferta"> <li class="campus"><a href="../campi/campus-campo-grande/cursos/integrados/eletrotecnica">Campo Grande</a></li> <li class="campus"><a href="../campi/campus-tres-lagoas/cursos/integrado/eletrotecnica">Três Lagoas</a></li> </ul> </div>
Para incluir uma nova modalidade no filtro:
Antes
<div class=“label-proeja isModalidade”>
<h3 class="label-modalidade aquidauana campo-grande corumba coxim dourados jardim tres-lagoas">Educação de Jovens e Adultos (Proeja)</h3>
</div>
Depois
<div class=“label-proeja isModalidade”>
<h3 class="label-modalidade aquidauana campo-grande corumba coxim dourados jardim navirai tres-lagoas">Educação de Jovens e Adultos (Proeja)</h3>
</div>
Se um curso já está incluso no Guia de Cursos e apenas um novo campus passou a ofertá-lo é necessário apenas incluir a classe referente ao campus nas tags DIVs e LIs referentes ao curso.
No arquivo https://www.ifms.edu.br/portal_skins/custom/guia-de-cursos.js/manage_main é feito a configuração do plugin Isotope, e só necessitaria ser modificado caso precise seja necesário adicionar uma nova DIV referente aos modalidades de cursos, fora as que já tem lá, como Graduação, Mestrado, Especialização, etc.
O arquivo https://www.ifms.edu.br/portal_skins/custom/guia-de-cursos.css/manage_main é responsável pelo layout e estilo aplicado ao Guia de Cursos.