Moderniza a interface do GDE, mantendo a UX - #96
Conversation
Reescreve a camada visual do GDE preservando o comportamento: todos os IDs e classes que o JS legado (jQuery 1.7 / jQuery UI 1.8) manipula continuam iguais. - web/css/gde.css: reescrito sobre design tokens (cores, raios, sombras, tipografia). Absorve dropdown_menu.css e tabs.css, que foram removidos, e passa a carregar por ultimo para sobrescrever o CSS dos plugins. Remove o CSS morto de forum, avisos, grupos e oportunidades. - Layout responsivo (nunca existiu): container fluido no lugar dos 972px fixos, header que empilha, coluna lateral que desce, tabs e tabelas com rolagem horizontal. Inclui estilo de impressao. - common/common.inc.php: doctype HTML5, meta viewport e charset, header/ nav/main/footer semanticos, logo em texto no lugar do GIF, rodape reestruturado e a fita "Fork me on GitHub" virou link discreto. - Botoes deixam de ser sprites GIF com font-size:0 e passam a ter texto real: o rotulo que estava no atributo alt virou o value do input. Isso tambem corrige os botoes dos popups de $.guaycuru, que ja vinham com value preenchido e apareciam em branco. - estatisticas.php: a tabela de dados do sistema usava border='1' sem classe; agora usa tabela_bonyta como as demais. Verificado com as 22 views renderizando sem erro (mesmos status HTTP do baseline), e com tabs, dropdown, accordion, popup e busca avancada funcionando.
- REVISION seguia em 20210919. Como o gde.css foi reescrito por inteiro, quem ja tinha o CSS em cache receberia o shell novo com o estilo antigo. Bump para 20260727. Era o bug mais serio: so aparece em deploy, nunca numa maquina limpa. - admin.php: o botao #botao_atualizar nao tem atributo value. Antes era um sprite GIF (font-size:0), entao a imagem servia de rotulo; com os botoes agora em texto ele virava uma caixa azul vazia. Rotulado "Atualizar". - jquery.ui.css escopa o tema inteiro em `.gde_jquery_ui` (0,2,0), o que vencia as regras .ui-state-* (0,1,0) mesmo com gde.css carregando por ultimo. O tema antigo vazava em #coluna_direita, no autocomplete e no datepicker — dai o laranja #e17009 no cabecalho do accordion. Adicionadas as mesmas regras com a especificidade correta. - Contraste abaixo de 4.5:1 em texto que eu havia deixado em --text-faint: citacao do rodape (2.80:1) e eixo de horas do FullCalendar (2.63:1) agora usam --text-muted; a pilula de ajuda "?" (4.15:1) usa --gde-800. Auditoria automatizada nas 20 views em 1440x900 e 390x844: sem overflow horizontal, sem controle invisivel, sem botao sem rotulo. Smoke test segue 22/22 igual ao baseline.
O FullCalendar 1.x calcula as larguras em JS e fixa inline todas as colunas menos a ultima (.fc-last), que absorve a sobra. Isso nao aparecia com o container de 470px fixos do layout antigo, mas eu troquei #planejador_calendario para width: 48%: o container passou a 519px e os ~50px de sobra foram todos para o sabado, que ficava com 125px contra 70px dos outros dias. Solucao em CSS: table-layout: fixed na table.fc-agenda-days e anulacao das larguras inline das colunas de dia, de modo que os seis dias dividam o espaco igualmente. O eixo de horas mantem sua largura fixa. Verificado em 1920, 1440, 1024, 780 e 390px: seis colunas identicas em todos, variacao de 0px e sem scroll horizontal. Smoke test 22/22 igual ao baseline.
O egg continuava disparando (watcherkeys + changeIt intactos), mas o efeito ficou restrito as margens da pagina. Motivo: o changeIt deixa o #wrapper transparente, e no layout antigo o #wrapper ERA a caixa branca de 972px; na UI nova a superficie passou a ser o #content_bg, que ele nao tocava. changeIt agora tambem deixa o #content_bg translucido (82%) e o rodape transparente, de modo que o bodybg.png aparece atras do conteudo como antes. Translucido em vez de totalmente transparente para o texto seguir legivel sobre os tiles. Sequencia: cima cima baixo baixo esquerda direita esquerda direita B A. Verificado disparando as teclas no browser. Smoke test 22/22.
|
Important Review skippedReview was skipped as selected files did not have any reviewable changes. 💤 Files selected but had no reviewable changes (1)
⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughThe pull request replaces legacy page styling and structure with an HTML5 shell, updated navigation, footer, responsive theme, and component styling. Form controls now display explicit labels, and shared background handling and table presentation were updated. ChangesUI refresh
Estimated code review effort: 4 (Complex) | ~45 minutes Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
web/css/gde.css (1)
820-829: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value
overflow: hiddenwon't clip corners on atableelement.Browsers don't apply overflow clipping to
display: tableboxes the way they do to block containers, so the header cell background at Line 843 will square off the rounded top corners. If the rounded look matters, either round the corner cells explicitly or wrap the table in a rounded/clipping container (which also pairs well with the 780pxoverflow-xrule at Line 2342).🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@web/css/gde.css` around lines 820 - 829, Update the table styling for table.tabela_bonyta and table.tabela_bonyta_branca so rounded corners actually clip the header-cell backgrounds: either apply matching top-corner radii to the relevant corner cells or introduce a rounded, overflow-clipping wrapper around the tables while preserving the existing horizontal-overflow behavior.views/configuracoes.php (1)
62-62: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueUse the destructive-button class on account deletion.
#salvar_contaperforms delete/deactivate actions, soclass="botao_salvar"leaves it styled like a save/confirm control. Useclass="botao_excluir"and no.botao_salvar/#salvar_contaselector needs this button to keep its behavior.♻️ Suggested change
- <input type="button" id="salvar_conta" name="salvar_conta" class="botao_salvar" value="Excluir ou Desativar Perfil" /> + <input type="button" id="salvar_conta" name="salvar_conta" class="botao_excluir" value="Excluir ou Desativar Perfil" />🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@views/configuracoes.php` at line 62, Update the input with id salvar_conta to use the destructive botao_excluir class instead of botao_salvar, preserving its existing behavior and other attributes.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@web/css/gde.css`:
- Around line 57-59: Update the --font and --mono font stacks to satisfy
Stylelint's value-keyword-case rule by lowercasing the unquoted family names or
quoting the affected names. Preserve the existing font fallback order and values
while ensuring all six reported violations are resolved.
- Around line 2293-2309: Update the small-screen navigation styles for `#top_menu`
and .menu so the container used by .menu ul ul remains non-scrolling with
overflow left off, while horizontal scrolling is applied to an inner menu-list
wrapper instead. Preserve the existing submenu positioning and sizing so panels
can overlay beyond the nav strip without clipping.
---
Nitpick comments:
In `@views/configuracoes.php`:
- Line 62: Update the input with id salvar_conta to use the destructive
botao_excluir class instead of botao_salvar, preserving its existing behavior
and other attributes.
In `@web/css/gde.css`:
- Around line 820-829: Update the table styling for table.tabela_bonyta and
table.tabela_bonyta_branca so rounded corners actually clip the header-cell
backgrounds: either apply matching top-corner radii to the relevant corner cells
or introduce a rounded, overflow-clipping wrapper around the tables while
preserving the existing horizontal-overflow behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 2fd92d82-251d-4b63-857c-7b3ff38ee93d
📒 Files selected for processing (17)
ajax/enquetes.phpajax/form_evento.phpcommon/common.inc.phpviews/admin.phpviews/arvore.phpviews/busca.phpviews/cadastro.phpviews/configuracoes.phpviews/contato.phpviews/editar-perfil.phpviews/estatisticas.phpviews/login.phpviews/planejador.phpweb/css/dropdown_menu.cssweb/css/gde.cssweb/css/tabs.cssweb/js/jquery.guaycuru.js
💤 Files with no reviewable changes (2)
- web/css/tabs.css
- web/css/dropdown_menu.css
| --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, | ||
| "Helvetica Neue", Arial, sans-serif; | ||
| --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Stylelint value-keyword-case will fail on these font stacks.
Six errors are reported here. Family names match case-insensitively, so lowercasing is safe; alternatively quote them (the rule ignores quoted values) or configure the rule to ignore font families.
♻️ Option: quote the family names
- --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
- "Helvetica Neue", Arial, sans-serif;
- --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+ --font: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto",
+ "Helvetica Neue", "Arial", sans-serif;
+ --mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, | |
| "Helvetica Neue", Arial, sans-serif; | |
| --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; | |
| --font: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", | |
| "Helvetica Neue", "Arial", sans-serif; | |
| --mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace; |
🧰 Tools
🪛 Stylelint (17.14.0)
[error] 57-57: Expected "BlinkMacSystemFont" to be "blinkmacsystemfont" (value-keyword-case)
(value-keyword-case)
[error] 57-57: Expected "Roboto" to be "roboto" (value-keyword-case)
(value-keyword-case)
[error] 58-58: Expected "Arial" to be "arial" (value-keyword-case)
(value-keyword-case)
[error] 59-59: Expected "SFMono-Regular" to be "sfmono-regular" (value-keyword-case)
(value-keyword-case)
[error] 59-59: Expected "Menlo" to be "menlo" (value-keyword-case)
(value-keyword-case)
[error] 59-59: Expected "Consolas" to be "consolas" (value-keyword-case)
(value-keyword-case)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@web/css/gde.css` around lines 57 - 59, Update the --font and --mono font
stacks to satisfy Stylelint's value-keyword-case rule by lowercasing the
unquoted family names or quoting the affected names. Preserve the existing font
fallback order and values while ensuring all six reported violations are
resolved.
Source: Linters/SAST tools
|
Obrigado pelo pull request! Estamos fazendo uma transição de servidores, e, assim que concluirmos, irei dar uma olhada. No meio tempo, poderia verificar os comentários do Code Rabbit? |
overflow-x: auto com overflow-y: visible computa para auto/auto, tornando a nav um scroll container que cortava os paineis absolutos. O scroll horizontal passa para a lista interna (.menu > ul) e o li fica estatico para o painel ancorar na nav, fora da area de clipping. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
Ajustei o que foi apontado pelo Code Rabbit |
2 participants
Este PR moderniza apenas o visual do GDE. A ideia é dar uma cara mais atual ao sistema sem mexer em como ele funciona: nenhum fluxo, tela ou comportamento foi alterado, e nenhuma funcionalidade foi adicionada ou removida.
Sou aluno da Unicamp e uso bastante o GDE. A interface ainda carrega decisões de 2010 (layout de 972px fixos, botões em sprite GIF, XHTML 1.0) e achei que valia uma repaginada. Se a direção não fizer sentido para o projeto, sem problemas em ajustar ou fechar.
O que muda
Folha de estilo principal reescrita (
web/css/gde.css) sobre design tokens — cores, raios, sombras e tipografia. Mantive a identidade azul do GDE, só que com superfícies neutras e o azul como cor de destaque. Todos os IDs e classes que o JS legado manipula foram preservados: jQuery 1.7, jQuery UI 1.8, FullCalendar, fancybox e tablesorter continuam funcionando sem alteração.Layout responsivo, que não existia. O container de 972px fixos virou fluido, o header empilha em telas estreitas, a coluna lateral desce, e tabs e tabelas largas ganham rolagem horizontal em vez de estourar a página. Também incluí uma folha de impressão.
Shell em HTML5 (
common/common.inc.php): doctype moderno no lugar do XHTML 1.0 Transitional,meta viewport,header/nav/main/footersemânticos e rodapé reestruturado. A fita "Fork me on GitHub" virou um link discreto no topo — ela dependia de uma imagem externa e destoava do resto.Botões passam a ter texto de verdade. Eram sprites GIF com
font-size: 0, então o rótulo vinha da imagem e ficava no atributoalt. Movi esse rótulo para ovaluedo input. Isso corrige de quebra os botões dos popups do$.guaycuru, que já vinham comvaluepreenchido e apareciam em branco na interface antiga.Dois arquivos CSS removidos (
dropdown_menu.cssetabs.css), absorvidos pelogde.css, que agora carrega por último para poder sobrescrever o CSS dos plugins. Também removi dogde.csso estilo morto de fórum, avisos, grupos e oportunidades — funcionalidades que saíram na versão 2.5.O
REVISIONfoi atualizado: como ogde.cssmudou por inteiro, sem isso quem já tem o arquivo em cache receberia o HTML novo com o estilo antigo.O que não muda
A lógica PHP é byte-idêntica nos 13 arquivos tocados — comparei os tokens de chamadas estáticas, superglobais, condicionais e definições de função entre
mastere este branch. As alterações em.phpsão só markup: rótulo de botão, uma classe de tabela e a estrutura do shell.A única mudança em JS são duas chamadas
.css()no$.guaycuru.changeIt, e existem por um motivo: o easter egg do Konami deixava o#wrappertransparente para revelar o fundo, mas o#wrapperera a caixa branca no layout antigo. Como agora a superfície é o#content_bg, sem esse ajuste o easter egg só apareceria nas margens. Ele continua funcionando com a mesma sequência de teclas.Como testei
Subi o projeto localmente com Docker e comparei o antes e o depois com um baseline: as 22 views renderizam com os mesmos status HTTP e sem erros novos.
Verifiquei no navegador que tabs, dropdown do menu, accordion, popup, busca avançada e o easter egg seguem funcionando, e que os submenus abrem também por toque (via
:focus-within, sem JS novo).Rodei uma auditoria automatizada nas views em 1440x900 e 390x844 checando scroll horizontal, controles invisíveis, botões sem rótulo e contraste, além de um teste de sobreposição que confirma que nenhum controle fica coberto por outro elemento — inclusive depois de abrir e fechar popup, dropdown e trocar de aba.
Ressalvas
O datepicker e o autocomplete recebem a correção de especificidade junto com os demais componentes do jQuery UI, mas não consegui exercitá-los com o pacote de dados de exemplo: o datepicker só aparece nos campos de emprego e o autocomplete de eletivas não retorna resultados. Vale um olhar de quem tiver dados reais.
O
web/css/template.css(872 linhas, sobra de um template Joomla) já não era referenciado antes deste PR. Deixei como está por ser código morto pré-existente, mas pode ser removido.Summary by CodeRabbit
New Features
Style