feat: Otimizações Mobile-First completas (touch targets, modais full-screen, prevenção de zoom iOS e responsividade)

2026-08-31 11:41:55 +00:00
parent 549d4432ef
commit a8b763bb50
1 changed files with 141 additions and 15 deletions
@@ -4132,6 +4132,18 @@ code {
  100% { height: 40%; background-color: #3b82f6; }
 }

+@keyframes wave-pulse-poesia {
+  0% { height: 20%; background-color: #eab308; }
+  50% { height: 95%; background-color: #f59e0b; }
+  100% { height: 40%; background-color: #fbbf24; }
+}
+
+@keyframes wave-pulse-historia {
+  0% { height: 20%; background-color: #10b981; }
+  50% { height: 95%; background-color: #34d399; }
+  100% { height: 40%; background-color: #059669; }
+}
+
@media (max-width: 768px) {
  #musicaLeftPanel, #musicaRightPanel,
  #poesiaLeftPanel, #poesiaRightPanel,
@@ -4141,24 +4153,137 @@ code {
  }
 }

-.wave-bar-poesia.wave-active {
-  animation: wave-pulse-poesia 0.8s infinite ease-in-out alternate;
-}
+/* ==========================================================================
+   OTIMIZAÇÕES MOBILE-FIRST (SMARTPHONES & TABLETS - 60% A 70% DOS ACESSOS)
+   ========================================================================== */
+@media (max-width: 768px) {
+  /* 1. Prevenção de Auto-Zoom no iOS Safari & inputs confortáveis */
+  input, select, textarea, .obs-input, .obs-select, .search-input {
+    font-size: 16px !important;
+    min-height: 44px;
+    border-radius: 8px;
+  }
+  
+  textarea, .obs-input[rows] {
+    min-height: 70px;
+  }

-@keyframes wave-pulse-poesia {
-  0% { height: 20%; background-color: #eab308; }
-  50% { height: 95%; background-color: #f59e0b; }
-  100% { height: 40%; background-color: #fbbf24; }
-}
+  /* 2. Touch Targets para botões de toque no celular (mínimo 44px) */
+  .btn-close-modal, .modal-tag-close, .search-clear, #searchClearAll {
+    min-width: 44px !important;
+    min-height: 44px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    font-size: 1.6rem !important;
+  }

-.wave-bar-historia.wave-active {
-  animation: wave-pulse-historia 0.8s infinite ease-in-out alternate;
-}
+  .btn-observacoes, .btn-prompt-mode, .btn-music-option, .tag-filter {
+    min-height: 42px !important;
+    padding: 8px 14px !important;
+    font-size: 0.88rem !important;
+  }

-@keyframes wave-pulse-historia {
-  0% { height: 20%; background-color: #10b981; }
-  50% { height: 95%; background-color: #34d399; }
-  100% { height: 40%; background-color: #059669; }
+  /* 3. Modais Responsivos (Aproveitamento Total da Tela no Mobile) */
+  .settings-modal-content {
+    width: 100% !important;
+    max-width: 100% !important;
+    max-height: 94dvh !important;
+    height: 94dvh !important;
+    border-radius: 18px 18px 0 0 !important;
+    margin: 0 !important;
+  }
+
+  .settings-modal {
+    align-items: flex-end !important;
+    padding: 0 !important;
+  }
+
+  .settings-modal-header {
+    padding: 12px 16px !important;
+  }
+
+  .settings-modal-body {
+    padding: 14px 12px !important;
+    gap: 16px !important;
+  }
+
+  /* 4. Layouts em Coluna Única Empilhada para Todas as Ferramentas */
+  #criseModal .settings-modal-body,
+  #ataModal .settings-modal-body,
+  #stickerModal .settings-modal-body,
+  #poesiaModal .settings-modal-body,
+  #musicaModal .settings-modal-body,
+  #historiaModal .settings-modal-body,
+  #cartazModal .settings-modal-body,
+  #mindLabModal .settings-modal-body,
+  #alunoTimelineModal .settings-modal-body,
+  #csvImportModal .settings-modal-body {
+    flex-direction: column !important;
+    flex-wrap: nowrap !important;
+    overflow-y: auto !important;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  #criseModal .settings-modal-body > div,
+  #ataModal .settings-modal-body > div,
+  #stickerModal .settings-modal-body > div,
+  #poesiaLeftPanel, #poesiaRightPanel,
+  #musicaLeftPanel, #musicaRightPanel,
+  #historiaLeftPanel, #historiaRightPanel {
+    min-width: 100% !important;
+    width: 100% !important;
+    flex: none !important;
+  }
+
+  /* 5. Grid de Stickers no Mobile (2 colunas perfeitas) */
+  #stickersListGrid {
+    grid-template-columns: repeat(2, 1fr) !important;
+    gap: 8px !important;
+    max-height: 320px !important;
+  }
+
+  /* 6. Estúdio de Cartazes & Storyboard no Mobile */
+  #cartazModal .settings-modal-body {
+    display: flex !important;
+    flex-direction: column !important;
+  }
+
+  #cartazCanvasContainer {
+    width: 100% !important;
+    max-width: 100% !important;
+    overflow-x: auto !important;
+    padding: 6px !important;
+  }
+
+  #cartazPrintableArea {
+    width: 100% !important;
+    max-width: 100% !important;
+    height: auto !important;
+    aspect-ratio: 1 / 1.414 !important;
+  }
+
+  .cartaz-tools-sidebar {
+    width: 100% !important;
+    max-height: 220px !important;
+    overflow-y: auto !important;
+  }
+
+  /* 7. Player e Waveforms de Áudio no Celular */
+  .audio-player-card, .mini-waveform-container {
+    width: 100% !important;
+    padding: 10px !important;
+  }
+
+  .audio-controls-row {
+    flex-wrap: wrap !important;
+    gap: 8px !important;
+  }
+
+  /* 8. Safe Area Inset no Rodapé para iPhones com Notch / Androids */
+  .chat-footer {
+    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
+  }
 }


@@ -4166,3 +4291,4 @@ code {



+