Ajustar layout de tela de relatório no Moodle via CSS

Os relatórios do MReport, ao serem acessados no Moodle, podem ter o layout sobreposto ou desajustado. Isso pode ocorrer devido à incompatibilidade de alguns comandos CSS. Para solucionar essa questão, uma alternativa é injetar comandos CSS nas telas de relatório. Veja o passo a passo a seguir, que mostra como realizar esse procedimento.

I - Acessar a configuração geral
A injeção de CSS é feita no painel de configuração que fica na plataforma de serviço online. Você pode acessar essa configuração pelo Moodle, caso tenha o plugin MReport atualizado, ou também pela plataforma de serviço.

1.1 - Acessar a configuração geral pelo Moodle

Acesse o endereço MOODLE_URL/local/badiunet/manage.php

Esta funcionalidade está disponível a partir da versão 1.3.5 do plugin badiunet, lançado em 01/08/2023. Caso sua versão seja anterior, atualize o plugin para a versão mais recente clicando aqui.

Se você já possui a versão mais recente, a tela com a opção de acessar relatórios na Plataforma de serviço online será exibida.

Clique na opção Relatório - Acesso na Plataforma Badiu.Net. Você será direcionado para a tela de relatórios na plataforma de serviço.

Na plataforma de serviço, acesse a opção MReport, o menu horizontal.

Em seguida, ative o menu lateral no ícone do menu sanduíche.

Por último, ao exibir o menu lateral, clique em Configuração geral

1.2 - Acessar a configuração geral pela Plataforma de serviço MReport

Na Plataforma Badiu.Net, após efetuar login como administrador, acesse o endereço BADIUNET_URL/moodle/mreport/config/general/edit

Se estiver usando a plataforma de serviço do MReport, acesse https://mreport1.badiu.com.br/moodle/mreport/config/general/edit

IV - Configuração geral

Ao acessar o formulário de configuração geral, será exibida a tela de configuração.

Neste formulário, insira no campo Código CSS para Customizar Visualização no Moodle o código CSS desejado. Este será injetado nas telas de relatório do Moodle. Insira o código dentro das tags <style> e </style>. A figura abaixo mostra um exemplo de código.

Antes de inserir o código, inspecione o elemento em seu navegador e teste-o previamente. Os relatórios do MReport estão contidos na classe CSS badiunet-content-nformated-service

No exemplo acima, o código inserido possibilita que a tela de relatório utilize 100% do tamanho da tela em algumas versões da família 4.x do Moodle.

   #page.drawers .main-inner {
        max-width: 100% !important;
}

Após realizar as configurações, clique no botão Alterar para salvá-las. Em seguida, acesse o Moodle para verificar se as alterações foram efetivamente aplicadas.