testes/MOBILE_LAYOUT_SIMULATIONS.md at e3f371ad11fcd17a454b53c4da8e69344590d3d1

7.3 KiB

Raw Blame History

🎯 Objetivo

Otimizar o espaço do menu da data-table no mobile para melhor aproveitamento e usabilidade.

📊 Layout Atual

┌─────────────────────────────────────────────────┐
│ [🔍 Pesquisar..._______________] [🔽 Filtros]    │ ← Linha 1
│ [📋 Col] [📚 Grup]        [5▼] [📥]             │ ← Linha 2  
└─────────────────────────────────────────────────┘

🚀 Simulação 1: Layout Compacto em Linha Única

┌─────────────────────────────────────────────────┐
│ [🔍___] [🔽] [📋] [📚] [5▼] [📥]               │ ← Tudo em 1 linha
└─────────────────────────────────────────────────┘

Prós: Economia vertical, mais espaço para dados Contras: Input de busca muito pequeno, difícil de usar

🚀 Simulação 2: Layout Invertido

┌─────────────────────────────────────────────────┐
│ [📋 Col] [📚 Grup] [5▼] [📥]     [🔽 Filtros]    │ ← Linha 1: Controles
│ [🔍 Pesquisar...________________________]       │ ← Linha 2: Busca full
└─────────────────────────────────────────────────┘

Prós: Input de busca com largura total Contras: Menos lógico visualmente

🚀 Simulação 3: Layout em Grid 2x2

┌─────────────────────────────────────────────────┐
│ [🔍 Pesquisar..._______] [🔽 Filtros]           │ ← Linha 1
│ [📋 Col] [📚 Grup]       [5▼] [📥]             │ ← Linha 2
└─────────────────────────────────────────────────┘

Prós: Layout atual, balanceado Contras: Poderia ser mais otimizado

🚀 Simulação 4: Layout com Grupos Visuais

┌─────────────────────────────────────────────────┐
│ [🔍 Pesquisar...___________] │ [🔽 Filtros]      │ ← Busca | Filtros
│ [📋 Col] [📚 Grup]          │ [5▼] [📥]         │ ← Colunas | Ações
└─────────────────────────────────────────────────┘

Prós: Agrupamento lógico por função Contras: Pode parecer fragmentado

🚀 Simulação 5: Layout Minimalista

┌─────────────────────────────────────────────────┐
│ [🔍 Pesquisar...___________________] [⚙️ Menu]   │ ← Busca + Menu dropdown
└─────────────────────────────────────────────────┘

Menu dropdown contém: Filtros, Colunas, Agrupar, Exportar, Paginação

Prós: Muito limpo, máximo espaço para busca Contras: Menos acesso direto às funções

🚀 Simulação 6: Layout com Botões Flutuantes

┌─────────────────────────────────────────────────┐
│ [🔍 Pesquisar...________________________]       │ ← Busca full width
│                                        [🔽]     │ ← Botão flutuante
└─────────────────────────────────────────────────┘
        [📋] [📚] [5▼] [📥] ← Toolbar flutuante

Prós: Busca com largura total, controles acessíveis Contras: Complexidade de implementação

🚀 Simulação 7: Layout Responsivo Inteligente

┌─────────────────────────────────────────────────┐
│ [🔍 Pesquisar...___] [📋] [📚] [5▼] [📥] [⋮]    │ ← Tudo adaptativo
└─────────────────────────────────────────────────┘

Lógica: Botões aparecem/somem conforme largura da tela ⋮ = Menu overflow para botões que não cabem

🚀 Simulação 8: Layout com Abas Deslizantes

┌─────────────────────────────────────────────────┐
│ ◉ Busca  ○ Filtros  ○ Colunas  ○ Ações         │ ← Abas
│ [🔍 Pesquisar...________________________]       │ ← Conteúdo da aba
└─────────────────────────────────────────────────┘

Prós: Organização clara, uso eficiente do espaço Contras: Requer mais cliques para acessar funções

📏 Análise de Espaços

Larguras Típicas Mobile:

iPhone SE: 375px
iPhone 12: 390px
Android médio: 360px
Tablet pequeno: 768px

Elementos e suas Larguras Mínimas:

Input busca mínimo: 180px
Botão "Filtros": 80px
Botão "Col": 70px
Botão "Grup": 80px
Seletor "5": 50px
Botão Export: 40px

🎨 Recomendações de Implementação

Opção A: Melhorar Layout Atual (Simulação 3+)

@media (max-width: 768px) {
  .menu-top-row {
    gap: 0.5rem;
    
    .global-filter-container {
      flex: 1;
      min-width: 180px; // Largura mínima garantida
    }
    
    .filter-toggle {
      min-width: 80px;
      flex-shrink: 0;
    }
  }
  
  .menu-bottom-row {
    .menu-left {
      gap: 0.4rem;
      
      .control-button.normal-size {
        min-width: fit-content;
        padding: 0.4rem 0.6rem;
      }
    }
  }
}

Opção B: Layout Responsivo Adaptativo (Simulação 7)

@media (max-width: 480px) {
  .menu-container {
    .control-button {
      &:nth-child(n+4) { // Esconde botões extras
        display: none;
      }
    }
    
    .overflow-menu {
      display: block; // Mostra menu overflow
    }
  }
}

Opção C: Layout Minimalista (Simulação 5)

.mobile-minimal-layout {
  .menu-row {
    .search-container {
      flex: 1;
    }
    
    .actions-dropdown {
      width: 50px;
      
      .dropdown-content {
        position: absolute;
        right: 0;
        top: 100%;
        z-index: 1000;
      }
    }
  }
}

🧪 Próximos Passos para Testes

Implementar Simulação 3+ (melhorar atual)
Testar em dispositivos reais
Medir usabilidade e cliques
Avaliar feedback dos usuários
Iterar baseado nos resultados

Qual simulação devemos implementar primeiro? 🤔

7.3 KiB Raw Blame History

📱 Simulações de Layout Mobile - Data Table Menu