testes/Modulos Angular/projects/idt_app/docs/mobile/MOBILE_LAYOUT_ALTERNATIVE.md

📱 Implementação Alternativa: Layout Invertido (Simulação 2)

🎯 CSS Alternativo para Testar

/* ========================================
   🎯 SIMULAÇÃO 2: LAYOUT INVERTIDO
   ======================================== */

@media (max-width: 768px) {
  .table-menu {
    padding: 0.375rem !important;
    
    /* ✅ INVERTE A ORDEM: Controles primeiro, busca depois */
    .menu-top-row {
      order: 2; /* Busca vai para baixo */
      margin-bottom: 0;
      margin-top: 0.5rem;
      
      .global-filter-container {
        flex: 1;
        width: 100%; /* Largura total */
        max-width: none;
        min-width: 0;
        
        input {
          width: 100%;
          padding: 8px 12px 8px 38px;
          font-size: 14px;
        }
      }
      
      .filter-toggle {
        display: none; /* Esconde filtros ou move para controles */
      }
    }
    
    .menu-bottom-row {
      order: 1; /* Controles vão para cima */
      margin-bottom: 0.5rem;
      justify-content: space-between;
      
      .menu-left {
        gap: 0.4rem;
        
        /* ✅ ADICIONA BOTÃO FILTROS AQUI */
        .filter-button-moved {
          order: -1; /* Primeiro botão */
        }
      }
      
      .menu-right {
        gap: 0.4rem;
      }
    }
  }
}

/* ✅ VERSÃO COMPACTA PARA TELAS PEQUENAS */
@media (max-width: 480px) {
  .menu-top-row {
    .global-filter-container {
      input {
        padding: 6px 10px 6px 32px;
        font-size: 13px;
      }
      
      i {
        left: 10px;
        font-size: 12px;
      }
    }
  }
  
  .menu-bottom-row {
    .control-button {
      padding: 0.25rem 0.4rem !important;
      font-size: 0.7rem !important;
      
      &.normal-size {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.75rem !important;
      }
    }
  }
}

🎯 HTML Alternativo

<!-- Opção A: Move botão Filtros para os controles -->
<div class="menu-bottom-row">
  <div class="menu-left">
    <button class="control-button filter-toggle filter-button-moved priority-1" 
            [class.active]="showFilters" 
            (click)="toggleFilters()">
      <i class="fas fa-filter"></i>
      <span class="mobile-text">Filtros</span>
    </button>
    
    <button class="control-button normal-size priority-1">
      <i class="fas fa-columns"></i>
      <span class="mobile-text">Col</span>
    </button>
    
    <button class="control-button normal-size priority-2">
      <i class="fas fa-layer-group"></i>
      <span class="mobile-text">Grup</span>
    </button>
  </div>
  
  <div class="menu-right">
    <div class="page-size-selector priority-2">
      <select>...</select>
    </div>
    <button class="control-button priority-1">
      <i class="fas fa-download"></i>
    </button>
  </div>
</div>

<!-- Busca com largura total -->
<div class="menu-top-row">
  <div class="global-filter-container">
    <i class="fas fa-search"></i>
    <input placeholder="Pesquisar todos os dados...">
  </div>
</div>

📊 Comparação Visual

Layout Atual (Simulação 3)

┌─────────────────────────────────────────────────┐
│ [🔍 Pesquisar..._______] [🔽 Filtros]           │ ← 70% busca + 30% filtros
│ [📋 Col] [📚 Grup]       [5▼] [📥]             │ ← Controles divididos
└─────────────────────────────────────────────────┘

Layout Invertido (Simulação 2)

┌─────────────────────────────────────────────────┐
│ [🔽] [📋 Col] [📚 Grup]   [5▼] [📥]            │ ← Todos os controles
│ [🔍 Pesquisar...________________________]       │ ← 100% busca
└─────────────────────────────────────────────────┘

🧪 Como Testar

1. Substituir o CSS atual pelos estilos acima
2. Mover o botão Filtros para a primeira linha
3. Testar em diferentes dispositivos
4. Comparar usabilidade entre os layouts

✅ Vantagens do Layout Invertido

• Input de busca com 100% da largura
• Acesso direto a todos os controles
• Melhor para digitação (teclado virtual)
• Hierarquia visual clara

❌ Desvantagens

• Menos intuitivo (busca geralmente fica em cima)
• Filtros menos óbvios (misturados com controles)
• Mudança de paradigma para usuários acostumados

---

Pronto para testar? 🚀