ga/buhapp-telegram
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Full CSS rewrite: fix layout, prevent Leaflet overflow, mobile frame

Browse Source
This commit is contained in:
root 2026-08-20 18:40:21 +00:00
parent 9d3a0c783b
commit 6d98fc90eb
2 changed files with 65 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
public/css/app.css
View File

@ -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; }
/* Leaflet контейнер — без overflow:visible чтобы не вылезал */
.leaflet-container {
position: relative !important;
z-index: 1;
}

3
public/js/app.js
View File

@ -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 = `
<h1>🍻 Добро пожаловать в BuhApp</h1>
<p class="sub">Приложение для поиска компании. Только для лиц 18+.</p>