NetsPro/Reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

фикс табов для IOS

Browse Source
This commit is contained in:
Professional 2025-05-23 20:37:35 +07:00
parent dee05f4956
commit 4001ba1635
1 changed files with 33 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/App.vue
View File

@ -15,7 +15,7 @@
<div class="nav-icon"> <div class="nav-icon">
<i class="bi-search"></i> <i class="bi-search"></i>
</div> </div>
<span>Поиск</span> <span class="nav-text">Поиск</span>
</router-link> </router-link>
<router-link to="/chats" class="nav-item" active-class="active"> <router-link to="/chats" class="nav-item" active-class="active">
<div class="nav-icon"> <div class="nav-icon">
@ -24,13 +24,13 @@
{{ totalUnread < 100 ? totalUnread : '99+' }} {{ totalUnread < 100 ? totalUnread : '99+' }}
</span> </span>
</div> </div>
<span>Чаты</span> <span class="nav-text">Чаты</span>
</router-link> </router-link>
<router-link to="/profile" class="nav-item" active-class="active"> <router-link to="/profile" class="nav-item" active-class="active">
<div class="nav-icon"> <div class="nav-icon">
<i class="bi-person"></i> <i class="bi-person"></i>
</div> </div>
<span>Профиль</span> <span class="nav-text">Профиль</span>
</router-link> </router-link>
</nav> </nav>
</div> </div>
@ -239,14 +239,33 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; /* Центрируем содержимое по вертикали */ justify-content: center;
text-decoration: none; text-decoration: none;
color: #6c757d; color: #6c757d;
transition: all 0.2s ease; transition: all 0.2s ease;
padding: 4px 0; /* Удаляем отступы, они будут применляться по-другому */
padding: 0;
position: relative; position: relative;
} }
.nav-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3px;
height: 28px;
}
/* Оборачиваем текст для лучшего управления */
.nav-text {
font-size: 0.7rem;
font-weight: 500;
/* Критическое изменение: добавляем отступ чтобы поднять текст выше home indicator */
transform: translateY(-10px);
display: block;
}
/* CSS переменные для динамической настройки */ /* CSS переменные для динамической настройки */
:root { :root {
--nav-height: 60px; --nav-height: 60px;
@ -254,26 +273,28 @@ body {
--safe-area-bottom: 0px; --safe-area-bottom: 0px;
} }
/* Специальная поддержка для устройств с вырезом (iPhone X и новее) */ /* Обновленная поддержка для устройств с вырезом (iPhone X и новее) */
@supports (padding: env(safe-area-inset-bottom)) { @supports (padding: env(safe-area-inset-bottom)) {
:root { :root {
--safe-area-bottom: env(safe-area-inset-bottom, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px);
} }
/* Новый подход: делаем навбар выше и поднимаем содержимое вверх */
.mobile-nav { .mobile-nav {
height: calc(var(--nav-height) + var(--safe-area-bottom)); height: calc(var(--nav-height) + var(--safe-area-bottom));
padding-bottom: var(--safe-area-bottom); /* Добавляем отступ снизу */ padding-bottom: var(--safe-area-bottom);
} }
/* Контейнер для выравнивания элементов навигации */
.nav-item { .nav-item {
/* Оставляем центрирование, но элементы будут в верхней части увеличенного навбара */ /* Элемент занимает всю высоту панели, включая safe area */
transform: translateY(-10px); /* Поднимаем элементы повыше от home indicator */ height: 100%;
/* Добавляем флекс для размещения иконки и текста */
display: flex;
flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
padding-top: 10px; /* Увеличиваем верхний отступ */ padding-top: 8px;
} }
/* Важное изменение - переместить этот селектор за пределы @supports */
.app-content { .app-content {
height: calc(100% - var(--nav-height) - var(--safe-area-bottom)); height: calc(100% - var(--nav-height) - var(--safe-area-bottom));
} }