diff --git a/public/css/app.css b/public/css/app.css index 34ac848..7137326 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -35,19 +35,52 @@ body { padding-bottom: env(safe-area-inset-bottom); -webkit-user-select: none; user-select: none; + display: flex; + flex-direction: column; +} + +/* Mobile emulator: на десктопе делаем "телефон в рамке" */ +body.mobile-mode { + background: #1a1a1f; + align-items: center; + justify-content: center; + padding: 16px; +} + +#mobile-frame { + width: 100%; + flex: 1; + display: flex; + flex-direction: column; + position: relative; + overflow: hidden; +} + +body.mobile-mode #mobile-frame { + width: 390px; + max-width: 100vw; + height: calc(100vh - 32px); + background: var(--bg); + border-radius: 16px; + box-shadow: 0 0 40px rgba(0,0,0,0.4); + flex: none; +} + +@media (max-width: 600px) { + body.mobile-mode { padding: 0; } + body.mobile-mode #mobile-frame { + width: 100vw; + height: 100vh; + border-radius: 0; + } } #app { - height: calc(100vh - 60px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); + flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; - flex: 1; -} - -body.mobile-mode #app { - height: auto; - min-height: 0; + position: relative; } #tabbar { @@ -59,6 +92,14 @@ body.mobile-mode #app { flex-shrink: 0; z-index: 100; } + +body.mobile-mode #tabbar { + border-radius: 0 0 16px 16px; +} +@media (max-width: 600px) { + body.mobile-mode #tabbar { border-radius: 0; } +} + .tab { flex: 1; background: none; @@ -72,6 +113,7 @@ body.mobile-mode #app { font-size: 11px; cursor: pointer; position: relative; + min-height: 0; } .tab svg { fill: currentColor; } .tab.active { color: var(--primary); } @@ -195,13 +237,13 @@ label { font-size: 13px; color: var(--text-dim); margin-bottom: 4px; display: bl padding: 8px; background: var(--bg); border-top: 1px solid var(--border); - position: sticky; - bottom: 0; + flex-shrink: 0; } .chat-input input { flex: 1; margin: 0 8px 0 0; } .chat-input button { width: 40px; padding: 0; margin: 0; } -#map { height: calc(100vh - 60px - 32px); width: 100%; } +/* Карта — контейнер с фиксированной высотой */ +#map { height: 400px; width: 100%; border-radius: 12px; overflow: hidden; margin-bottom: 12px; position: relative; z-index: 1; } .stars { display: flex; gap: 4px; font-size: 32px; } .stars span { cursor: pointer; color: var(--border); } @@ -209,6 +251,7 @@ label { font-size: 13px; color: var(--text-dim); margin-bottom: 4px; display: bl .row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } +/* Consent overlay — внутри mobile-frame */ #consent-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; @@ -216,12 +259,13 @@ label { font-size: 13px; color: var(--text-dim); margin-bottom: 4px; display: bl z-index: 200; padding: 20px; overflow-y: auto; + border-radius: inherit; } .empty { color: var(--text-dim); text-align: center; padding: 32px 16px; } .toast { - position: fixed; + position: absolute; top: 16px; left: 16px; right: 16px; background: var(--bg-dark); color: var(--text-inverse); @@ -239,58 +283,9 @@ label { font-size: 13px; color: var(--text-dim); margin-bottom: 4px; display: bl .rating-big { font-size: 36px; font-weight: 700; } -/* Кнопка переключения — видна только на десктопе (>768px) */ -@media (max-width: 768px) { - #mode-toggle { display: none !important; } -} - -/* Mobile emulator — на десктопе показываем как на мобиле */ -body.mobile-mode { - background: #1a1a1f; - padding: 16px; -} - -body.mobile-mode #mobile-frame { - width: 390px; - max-width: 100vw; - height: calc(100vh - 32px); - margin: 0 auto; - background: var(--bg); - border-radius: 16px; - overflow: hidden; - box-shadow: 0 0 40px rgba(0,0,0,0.4); - display: flex; - flex-direction: column; - position: relative; -} - -body.mobile-mode #app { - flex: 1; - height: auto; - overflow-y: auto; -} - -body.mobile-mode #tabbar { - position: relative; - width: 390px; - max-width: 100vw; - margin: 0 auto; - border-radius: 0 0 16px 16px; -} - -@media (max-width: 600px) { - body.mobile-mode { padding: 0; } - body.mobile-mode #mobile-frame { - width: 100vw; - height: 100vh; - border-radius: 0; - } - body.mobile-mode #tabbar { - width: 100vw; - border-radius: 0; - } -} +.privacy-note { font-size: 12px; color: var(--text-dim); margin-top: 4px; } +/* Кнопка переключения — только на десктопе */ #mode-toggle { position: fixed; top: 16px; @@ -306,5 +301,12 @@ body.mobile-mode #tabbar { cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,0.4); } +@media (max-width: 768px) { + #mode-toggle { display: none !important; } +} -.privacy-note { font-size: 12px; color: var(--text-dim); margin-top: 4px; } \ No newline at end of file +/* Leaflet контейнер — без overflow:visible чтобы не вылезал */ +.leaflet-container { + position: relative !important; + z-index: 1; +} \ No newline at end of file diff --git a/public/js/app.js b/public/js/app.js index ce3b959..b953e15 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -86,9 +86,6 @@ const App = { showConsent() { const ov = document.createElement('div'); ov.id = 'consent-overlay'; - // В мобильном режиме — в рамке, иначе в body - const target = document.querySelector('body.mobile-mode #mobile-frame') || document.body; - target.appendChild(ov); ov.innerHTML = `
Приложение для поиска компании. Только для лиц 18+.