Skip to content

GitLab

  • Menu
Projects Groups Snippets
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
  • P Participe+
  • Project information
    • Project information
    • Activity
    • Labels
    • Planning hierarchy
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 70
    • Issues 70
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Incidents
  • Packages & Registries
    • Packages & Registries
    • Package Registry
    • Infrastructure Registry
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Casa Civil
  • Participe+
  • Issues
  • #87

Closed
Open
Created Jan 23, 2026 by Daniela Matos@danimatosDeveloper

[OC 2026] [HOME OC] Implementação de Carrosséis e Lógica de Estados

Implementação de três carrosséis horizontais exclusivos para a versão mobile *Se possível, aplicar este comportamento de carrossel apenas na versão mobile; em resoluções maiores, manter o layout em grade

se eu tiver sonhando alto Alvaro, qualquer coisa me puxa pro chão kkkkk_

1- Carrossel: "O que é Orçamento Cidadão"

  • Conteúdo: https://drive.google.com/drive/folders/1A3K0DYD_Q4_C5WWAvO3GV1h9oB2LCdtn?usp=sharing
  • Comportamento: Rolagem horizontal simples com suporte a swipe.
  • Tamanho: 70%(vw)

Se possível, os textos(que já existem no P+) das etapas sejam implementados via código (HTML) mas caso não seja possível deixei as imagens com o texto no drive tbm

2 - Carrossel: "Etapas do Orçamento" (Lógica de Estados)

Este componente deve refletir o progresso real do projeto através de cores. Imagens: https://drive.google.com/drive/folders/15y8pMN3a7iSNh-5LHMRd6IDRzJzL0WnO?usp=sharingr Tamanho: 70%

Regras de Estilo (Lógica):

  • Etapa Atual: Ícone em Amarelo (Destaque).
  • Etapas Concluídas: Ícone em Azul.
  • Etapas Futuras: Ícone em Cinza (Apagado).

Comportamento: Exibir o fluxo completo das etapas em carrossel horizontal.

  1. Carrossel: "Orçamentos Concluídos"

Dimensões das Caixas (Cards): 70% da largura da tela [271px (largura) x 188px (altura)]

Arredondamento: 8px.

Cor de Fundo: #D9D9D9 (Cinza claro).

Interações: * Manter apenas o botão de Monitoramento com a cor padrão da plataforma.

Ocultar botão de "Exibir resultados".

Links: Pagina do P+: https://sg1727.happ.prodam/budgets Link do Figma: https://www.figma.com/design/umkR3QMGaGlpHkXcZmd4NQ/Untitled?node-id=178-5&t=Z2J231mcCFUFgIv8-0

Apresentação do figma: https://www.figma.com/proto/umkR3QMGaGlpHkXcZmd4NQ/Untitled?node-id=178-5&p=f&t=LH0UY7EUzzYqDjdO-0&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=101%3A417

Edited Jan 30, 2026 by Daniela Matos
Assignee
Assign to
Time tracking