Мобильная версия
1. Адаптация и разработка мобильного варианта.
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="app">
|
||||
<div class="app" :class="{ mobile: isMobile }">
|
||||
<Sidebar />
|
||||
|
||||
<div class="main-wrapper">
|
||||
@@ -11,7 +11,8 @@
|
||||
<span>Загрузка...</span>
|
||||
</div>
|
||||
|
||||
<div v-else class="team-grid">
|
||||
<!-- Desktop: grid -->
|
||||
<div v-else-if="!isMobile" class="team-grid">
|
||||
<div
|
||||
v-for="user in users"
|
||||
:key="user.id"
|
||||
@@ -37,8 +38,53 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile: swipe cards -->
|
||||
<template v-else>
|
||||
<div class="mobile-cards" ref="mobileCardsRef" @scroll="onCardsScroll">
|
||||
<div
|
||||
v-for="user in users"
|
||||
:key="user.id"
|
||||
class="mobile-card"
|
||||
>
|
||||
<div class="mobile-avatar">
|
||||
<img :src="getFullUrl(user.avatar_url)" :alt="user.name">
|
||||
</div>
|
||||
|
||||
<div class="mobile-info">
|
||||
<h2 class="mobile-name">{{ user.name }}</h2>
|
||||
<span class="mobile-username">@{{ user.username }}</span>
|
||||
<span v-if="user.department" class="mobile-department">{{ user.department }}</span>
|
||||
</div>
|
||||
|
||||
<a
|
||||
:href="'https://t.me/' + user.telegram.replace('@', '')"
|
||||
target="_blank"
|
||||
class="mobile-telegram"
|
||||
>
|
||||
<i data-lucide="send"></i>
|
||||
Написать в Telegram
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Фиксированные индикаторы над навигацией -->
|
||||
<div v-if="isMobile && !loading && users.length > 0" class="mobile-team-footer">
|
||||
<div class="team-indicators">
|
||||
<button
|
||||
v-for="(user, index) in users"
|
||||
:key="user.id"
|
||||
class="indicator-dot"
|
||||
:class="{ active: currentUserIndex === index }"
|
||||
@click="scrollToUser(index)"
|
||||
>
|
||||
<img :src="getFullUrl(user.avatar_url)" :alt="user.name">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -47,9 +93,14 @@ import { ref, onMounted, onUpdated } from 'vue'
|
||||
import Sidebar from '../components/Sidebar.vue'
|
||||
import Header from '../components/Header.vue'
|
||||
import { usersApi, getFullUrl } from '../api'
|
||||
import { useMobile } from '../composables/useMobile'
|
||||
|
||||
const { isMobile } = useMobile()
|
||||
|
||||
const users = ref([])
|
||||
const loading = ref(true)
|
||||
const mobileCardsRef = ref(null)
|
||||
const currentUserIndex = ref(0)
|
||||
|
||||
const fetchUsers = async () => {
|
||||
try {
|
||||
@@ -64,6 +115,24 @@ const fetchUsers = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const onCardsScroll = () => {
|
||||
if (!mobileCardsRef.value) return
|
||||
const container = mobileCardsRef.value
|
||||
const cardWidth = container.offsetWidth
|
||||
const scrollLeft = container.scrollLeft
|
||||
currentUserIndex.value = Math.round(scrollLeft / cardWidth)
|
||||
}
|
||||
|
||||
const scrollToUser = (index) => {
|
||||
if (!mobileCardsRef.value) return
|
||||
const container = mobileCardsRef.value
|
||||
const cardWidth = container.offsetWidth
|
||||
container.scrollTo({
|
||||
left: index * cardWidth,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
|
||||
const refreshIcons = () => {
|
||||
if (window.lucide) {
|
||||
window.lucide.createIcons()
|
||||
@@ -90,11 +159,32 @@ onUpdated(refreshIcons)
|
||||
margin-left: 64px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
padding: 0 20px 20px;
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.main::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.main::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.main::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.main::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.loading {
|
||||
@@ -220,4 +310,194 @@ onUpdated(refreshIcons)
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
/* Mobile styles */
|
||||
.app.mobile {
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.app.mobile .main-wrapper {
|
||||
margin-left: 0;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
max-height: none;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.app.mobile .main {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app.mobile .loading {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
/* Mobile swipe cards */
|
||||
.mobile-cards {
|
||||
width: 100%;
|
||||
/* Высота = экран - header(60px) - индикаторы(70px) - навигация(64px) - safe-area */
|
||||
height: calc(100dvh - 60px - 70px - 64px - var(--safe-area-bottom, 0px));
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.mobile-cards::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-card {
|
||||
flex: 0 0 100%;
|
||||
width: 100%;
|
||||
scroll-snap-align: start;
|
||||
scroll-snap-stop: always;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
padding-top: 0;
|
||||
gap: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mobile-avatar {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
box-shadow:
|
||||
0 0 0 4px rgba(0, 212, 170, 0.3),
|
||||
0 20px 60px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.mobile-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.mobile-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mobile-name {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mobile-username {
|
||||
font-size: 16px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.mobile-department {
|
||||
padding: 6px 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
border-radius: 20px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.mobile-telegram {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding: 14px 28px;
|
||||
background: linear-gradient(135deg, #0088cc 0%, #00a0dc 100%);
|
||||
color: white;
|
||||
border-radius: 30px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 8px 24px rgba(0, 136, 204, 0.3);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.mobile-telegram:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.mobile-telegram i {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* Mobile team footer - фиксированный над навигацией */
|
||||
.mobile-team-footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: calc(64px + var(--safe-area-bottom, 0px));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
background: var(--bg);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.team-indicators {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.team-indicators .indicator-dot {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 2px solid transparent;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.team-indicators .indicator-dot img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.team-indicators .indicator-dot.active {
|
||||
border-color: var(--accent);
|
||||
opacity: 1;
|
||||
transform: scale(1.15);
|
||||
box-shadow: 0 4px 12px rgba(0, 212, 170, 0.3);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user