обновление стилей
This commit is contained in:
Professional
parent
e122db524c
commit
c6e26eb445
329
src/App.vue
329
src/App.vue
@ -1,29 +1,48 @@
|
||||
<template>
|
||||
<div id="app-container">
|
||||
<header class="app-header bg-dark text-white p-3 mb-4 shadow-sm">
|
||||
<nav class="container d-flex justify-content-between align-items-center">
|
||||
<router-link to="/" class="navbar-brand text-white fs-4">DatingApp</router-link>
|
||||
<div>
|
||||
<template v-if="authState">
|
||||
<span class="me-3">Привет, {{ userData?.name || 'Пользователь' }}!</span>
|
||||
<router-link to="/swipe" class="btn btn-outline-light me-2">Поиск</router-link>
|
||||
<router-link to="/chats" class="btn btn-outline-light me-2">Чаты</router-link> <!-- НОВАЯ ССЫЛКА -->
|
||||
<router-link to="/profile" class="btn btn-outline-light me-2">Профиль</router-link>
|
||||
<button @click="handleLogout" class="btn btn-light">Выход</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<router-link to="/login" class="btn btn-outline-light me-2">Войти</router-link>
|
||||
<router-link to="/register" class="btn btn-light">Регистрация</router-link>
|
||||
</template>
|
||||
<header class="app-header fixed-top shadow-sm"> <!-- Изменено: убран bg-dark, text-white, p-3, mb-4. Добавлен fixed-top -->
|
||||
<nav class="container navbar navbar-expand-lg navbar-dark"> <!-- Добавлены классы navbar -->
|
||||
<router-link to="/" class="navbar-brand fs-4">DatingApp</router-link>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto align-items-center"> <!-- ms-auto для выравнивания вправо, align-items-center для вертикального выравнивания -->
|
||||
<template v-if="authState">
|
||||
<li class="nav-item me-3 user-greeting">
|
||||
<span class="nav-link">Привет, {{ userData?.name || 'Пользователь' }}!</span>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link to="/swipe" class="nav-link" active-class="active">Поиск</router-link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link to="/chats" class="nav-link" active-class="active">Чаты</router-link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link to="/profile" class="nav-link" active-class="active">Профиль</router-link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button @click="handleLogout" class="btn btn-outline-primary ms-2">Выход</button> <!-- Изменен стиль кнопки -->
|
||||
</li>
|
||||
</template>
|
||||
<template v-else>
|
||||
<li class="nav-item">
|
||||
<router-link to="/login" class="nav-link" active-class="active">Войти</router-link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link to="/register" class="btn btn-primary ms-2">Регистрация</router-link> <!-- Изменен стиль кнопки -->
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="container">
|
||||
<router-view /> <!-- Сюда Vue Router будет рендерить компонент текущего маршрута -->
|
||||
<main class="container flex-grow-1">
|
||||
<router-view />
|
||||
</main>
|
||||
|
||||
<footer class="app-footer mt-auto py-3 bg-light text-center">
|
||||
<footer class="app-footer mt-auto py-3 text-center"> <!-- Убран bg-light -->
|
||||
<div class="container">
|
||||
<span class="text-muted">© {{ new Date().getFullYear() }} Dating App PWA</span>
|
||||
</div>
|
||||
@ -112,4 +131,278 @@ main.container {
|
||||
|
||||
/* Можно добавить стили для .app-footer, если нужно, чтобы он был прижат к низу */
|
||||
/* Либо используй классы Bootstrap для flex-grow-1 на main и mt-auto на footer */
|
||||
|
||||
/* Применение Bootstrap для базовых стилей и адаптивности */
|
||||
@import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css');
|
||||
|
||||
:root {
|
||||
--primary-color: #fec5cc; /* Нежно-розовый */
|
||||
--secondary-color: #f8f9fa; /* Светло-серый для текста на темном фоне */
|
||||
--background-color: #000000; /* Черный */
|
||||
--text-color: #f0f0f0; /* Светло-серый текст */
|
||||
--card-bg-color: #1a1a1a; /* Темно-серый для карточек */
|
||||
--border-color: #fec5cc; /* Нежно-розовый для границ */
|
||||
--input-bg-color: #333333;
|
||||
--input-text-color: #f0f0f0;
|
||||
--input-border-color: var(--primary-color);
|
||||
--button-primary-bg: var(--primary-color);
|
||||
--button-primary-text: #000000;
|
||||
--button-secondary-bg: #555555;
|
||||
--button-secondary-text: var(--primary-color);
|
||||
--link-color: var(--primary-color);
|
||||
--link-hover-color: #fdb8c0; /* Более темный розовый для ховера */
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
line-height: 1.6;
|
||||
padding-top: 70px; /* Компенсация высоты фиксированной навигационной панели */
|
||||
}
|
||||
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* text-align: center; убрано для лучшего контроля */
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px; /* Ограничение максимальной ширины для больших экранов */
|
||||
}
|
||||
|
||||
/* Стили для Navbar */
|
||||
.app-header {
|
||||
background-color: rgba(0, 0, 0, 0.85); /* Полупрозрачный черный */
|
||||
backdrop-filter: blur(10px); /* Эффект размытия для современных браузеров */
|
||||
border-bottom: 1px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: var(--primary-color) !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
.navbar-brand:hover {
|
||||
color: var(--link-hover-color) !important;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--secondary-color) !important;
|
||||
padding-left: 0.75rem; /* Добавлены отступы для ссылок */
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
.nav-link:hover,
|
||||
.nav-link.active { /* Используем .active от active-class */
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.user-greeting .nav-link { /* Убираем поведение ссылки для приветствия */
|
||||
color: var(--secondary-color) !important;
|
||||
cursor: default;
|
||||
}
|
||||
.user-greeting .nav-link:hover {
|
||||
color: var(--secondary-color) !important; /* Чтобы не менялся цвет при наведении */
|
||||
}
|
||||
|
||||
|
||||
.navbar-toggler {
|
||||
border-color: rgba(254, 197, 204, 0.5); /* Розовая граница для тогглера */
|
||||
}
|
||||
.navbar-toggler-icon {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fec5cc' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
|
||||
/* Общие стили для карточек */
|
||||
.card {
|
||||
background-color: var(--card-bg-color);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-color);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.card-header {
|
||||
background-color: rgba(254, 197, 204, 0.1); /* Легкий розовый оттенок */
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.card-title {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Стили для форм */
|
||||
.form-label {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.form-control, .form-select {
|
||||
background-color: var(--input-bg-color);
|
||||
color: var(--input-text-color);
|
||||
border: 1px solid var(--input-border-color);
|
||||
}
|
||||
.form-control:focus, .form-select:focus {
|
||||
background-color: #444;
|
||||
color: var(--input-text-color);
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 0.25rem rgba(254, 197, 204, 0.25);
|
||||
}
|
||||
.form-control::placeholder {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
/* Стили для кнопок */
|
||||
.btn-primary {
|
||||
background-color: var(--button-primary-bg);
|
||||
border-color: var(--button-primary-bg);
|
||||
color: var(--button-primary-text);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: var(--link-hover-color);
|
||||
border-color: var(--link-hover-color);
|
||||
color: var(--button-primary-text);
|
||||
}
|
||||
.btn-primary:disabled {
|
||||
background-color: var(--button-primary-bg);
|
||||
border-color: var(--button-primary-bg);
|
||||
color: #555;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--button-secondary-bg);
|
||||
border-color: var(--button-secondary-bg);
|
||||
color: var(--button-secondary-text);
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background-color: #666;
|
||||
border-color: #666;
|
||||
color: var(--button-secondary-text);
|
||||
}
|
||||
.btn-link {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn-link:hover {
|
||||
color: var(--link-hover-color);
|
||||
}
|
||||
|
||||
/* Ссылки */
|
||||
a {
|
||||
color: var(--link-color);
|
||||
}
|
||||
a:hover {
|
||||
color: var(--link-hover-color);
|
||||
}
|
||||
|
||||
/* Утилиты */
|
||||
.text-primary {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
.bg-dark-transparent {
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
/* Адаптация */
|
||||
|
||||
/* Маленькие устройства (телефоны, меньше 768px) */
|
||||
@media (max-width: 767.98px) {
|
||||
body {
|
||||
padding-top: 60px; /* Меньше отступ для маленьких экранов */
|
||||
}
|
||||
.navbar-nav {
|
||||
margin-top: 0.5rem; /* Добавить немного места сверху для элементов навбара в свернутом виде */
|
||||
}
|
||||
.display-4 { /* Уменьшить большие заголовки */
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
.container, .container-fluid {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Планшеты (768px - 991.98px) */
|
||||
@media (min-width: 768px) and (max-width: 991.98px) {
|
||||
.container {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ноутбуки (992px - 1199.98px) */
|
||||
@media (min-width: 992px) and (max-width: 1199.98px) {
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Очень большие экраны (1200px и больше) - уже учтено в .container max-width */
|
||||
|
||||
/* Специфичные для страниц стили можно добавлять в компонентах или здесь, если они глобальны */
|
||||
|
||||
/* Пример для страницы профиля пользователя, если нужно */
|
||||
.profile-page .avatar {
|
||||
border: 3px solid var(--primary-color);
|
||||
}
|
||||
|
||||
/* Стили для сообщений и чатов */
|
||||
.chat-bubble-sent {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--button-primary-text); /* Черный текст на розовом */
|
||||
border-radius: 15px 15px 0 15px;
|
||||
}
|
||||
.chat-bubble-received {
|
||||
background-color: var(--input-bg-color); /* Темно-серый */
|
||||
color: var(--text-color); /* Светлый текст */
|
||||
border-radius: 15px 15px 15px 0;
|
||||
}
|
||||
|
||||
/* Стили для списка пользователей */
|
||||
.user-list-item {
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
.user-list-item:hover {
|
||||
background-color: rgba(254, 197, 204, 0.1); /* Легкий розовый фон при наведении */
|
||||
}
|
||||
|
||||
/* Modal styles */
|
||||
.modal-content {
|
||||
background-color: var(--card-bg-color);
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
.modal-header {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
color: var(--primary-color); /* Make header text pink */
|
||||
}
|
||||
.modal-header .btn-close {
|
||||
filter: invert(1) grayscale(100%) brightness(200%); /* Make close button visible on dark background */
|
||||
}
|
||||
.modal-footer {
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* Alert styles for dark theme */
|
||||
.alert {
|
||||
border-radius: 0.25rem; /* Standard bootstrap radius */
|
||||
}
|
||||
.alert-danger {
|
||||
background-color: #4d2227; /* Darker red background */
|
||||
color: #f8d7da; /* Light red text */
|
||||
border: 1px solid #f5c2c7; /* Lighter red border for visibility */
|
||||
}
|
||||
.alert-success {
|
||||
background-color: #1e402a; /* Darker green background */
|
||||
color: #d1e7dd; /* Light green text */
|
||||
border: 1px solid #badbcc; /* Lighter green border */
|
||||
}
|
||||
.alert-info {
|
||||
background-color: #1c3e4e; /* Darker info blue background */
|
||||
color: #cff4fc; /* Light info blue text */
|
||||
border: 1px solid #b6effb; /* Lighter info blue border */
|
||||
}
|
||||
.alert-warning {
|
||||
background-color: #594402; /* Darker warning yellow background */
|
||||
color: #fff3cd; /* Light warning yellow text */
|
||||
border: 1px solid #ffeeba; /* Lighter warning yellow border */
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -417,11 +417,66 @@
|
||||
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css');
|
||||
|
||||
.edit-profile-form {
|
||||
background-color: #f8f9fa;
|
||||
background-color: #000000; /* Черный фон */
|
||||
color: #f0f0f0; /* Светло-серый текст */
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Обновление стилей для инпутов, чтобы они были видны на черном фоне */
|
||||
.form-control, .form-select {
|
||||
background-color: #333; /* Темно-серый фон для инпутов */
|
||||
color: #f0f0f0; /* Светлый текст в инпутах */
|
||||
border: 1px solid #fec5cc; /* Нежно-розовая граница */
|
||||
}
|
||||
.form-control:focus, .form-select:focus {
|
||||
background-color: #444;
|
||||
color: #f0f0f0;
|
||||
border-color: #fec5cc;
|
||||
box-shadow: 0 0 0 0.25rem rgba(254, 197, 204, 0.25); /* Тень при фокусе с розовым оттенком */
|
||||
}
|
||||
.form-control::placeholder {
|
||||
color: #aaa; /* Более светлый плейсхолдер */
|
||||
}
|
||||
.form-label {
|
||||
color: #fec5cc; /* Нежно-розовый для лейблов */
|
||||
}
|
||||
|
||||
/* Кнопки */
|
||||
.btn-primary {
|
||||
background-color: #fec5cc;
|
||||
border-color: #fec5cc;
|
||||
color: #000000; /* Черный текст на розовой кнопке */
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: #fdb8c0;
|
||||
border-color: #fdb8c0;
|
||||
color: #000000;
|
||||
}
|
||||
.btn-primary:disabled {
|
||||
background-color: #fec5cc;
|
||||
border-color: #fec5cc;
|
||||
color: #555; /* Темно-серый текст для неактивной кнопки */
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #555; /* Темно-серая вторичная кнопка */
|
||||
border-color: #555;
|
||||
color: #fec5cc; /* Розовый текст */
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background-color: #666;
|
||||
border-color: #666;
|
||||
color: #fec5cc;
|
||||
}
|
||||
.btn-secondary:disabled {
|
||||
background-color: #555;
|
||||
border-color: #555;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
/* Сообщения */
|
||||
|
||||
/* Стили для выбора города */
|
||||
.city-select-container {
|
||||
@ -430,44 +485,44 @@
|
||||
|
||||
.city-dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% + 1px); /* Расположение сразу под полем ввода */
|
||||
top: calc(100% + 1px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1050; /* Повышаем z-index, чтобы список был всегда поверх других элементов */
|
||||
background-color: white;
|
||||
border: 1px solid #dee2e6;
|
||||
z-index: 1050;
|
||||
background-color: #333; /* Темный фон для выпадающего списка */
|
||||
border: 1px solid #fec5cc; /* Розовая граница */
|
||||
border-radius: 0 0 5px 5px;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||
max-height: 350px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%; /* Гарантируем полную ширину */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
position: absolute;
|
||||
top: calc(100% + 1px); /* Расположение сразу под полем ввода */
|
||||
top: calc(100% + 1px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1050;
|
||||
padding: 10px 15px;
|
||||
color: #dc3545;
|
||||
color: #fec5cc; /* Розовый текст */
|
||||
text-align: center;
|
||||
border: 1px solid #dee2e6;
|
||||
border: 1px solid #fec5cc;
|
||||
border-top: none;
|
||||
border-radius: 0 0 5px 5px;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||
background-color: white;
|
||||
width: 100%; /* Гарантируем полную ширину */
|
||||
background-color: #333; /* Темный фон */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-results-info {
|
||||
padding: 8px 12px;
|
||||
font-size: 0.9em;
|
||||
color: #6c757d;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
background-color: #f8f9fa;
|
||||
color: #aaa; /* Светло-серый текст */
|
||||
border-bottom: 1px solid #fec5cc; /* Розовая граница */
|
||||
background-color: #222; /* Очень темный фон для заголовка */
|
||||
}
|
||||
|
||||
.city-list-container {
|
||||
@ -483,10 +538,12 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #f0f0f0; /* Светлый текст для элементов списка */
|
||||
}
|
||||
|
||||
.city-item:hover {
|
||||
background-color: #e9ecef;
|
||||
background-color: #fec5cc; /* Розовый фон при наведении */
|
||||
color: #000; /* Черный текст при наведении */
|
||||
}
|
||||
|
||||
.city-name {
|
||||
@ -495,39 +552,45 @@
|
||||
|
||||
.city-region {
|
||||
font-size: 0.85em;
|
||||
color: #6c757d;
|
||||
color: #aaa; /* Светло-серый для региона, изменится на черный при наведении родителя */
|
||||
}
|
||||
.city-item:hover .city-region {
|
||||
color: #333; /* Темно-серый для региона при наведении */
|
||||
}
|
||||
|
||||
.selected-city {
|
||||
color: #495057;
|
||||
color: #fec5cc; /* Розовый для выделенного города */
|
||||
}
|
||||
|
||||
/* Кнопка очистки */
|
||||
.input-group-text {
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
background-color: #333; /* Темный фон */
|
||||
border: 1px solid #fec5cc; /* Розовая граница */
|
||||
color: #fec5cc; /* Розовая иконка */
|
||||
}
|
||||
|
||||
.input-group-text:hover {
|
||||
background-color: #f0f0f0;
|
||||
background-color: #444;
|
||||
color: #fdb8c0;
|
||||
}
|
||||
|
||||
.img-thumbnail {
|
||||
border: 1px solid #dee2e6;
|
||||
border: 1px solid #fec5cc; /* Розовая граница */
|
||||
padding: 0.25rem;
|
||||
background-color: #fff;
|
||||
background-color: #333; /* Темный фон */
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.upload-message {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.upload-message.success {
|
||||
color: green;
|
||||
color: #28a745; /* Зеленый для успеха */
|
||||
}
|
||||
.upload-message.error {
|
||||
color: red;
|
||||
color: #dc3545; /* Красный для ошибки */
|
||||
}
|
||||
.upload-message.pending, .upload-message.uploading {
|
||||
color: orange;
|
||||
color: #ffc107; /* Желтый/оранжевый для ожидания/загрузки */
|
||||
}
|
||||
</style>
|
||||
@ -28,7 +28,7 @@
|
||||
<!-- === ОТОБРАЖЕНИЕ ФОТО/ЗАГЛУШКИ === -->
|
||||
<div class="image-placeholder-container me-3">
|
||||
<img
|
||||
v-if="getOtherParticipant(conversation.participants)?.mainPhotoUrl"
|
||||
v-if="getParticipantAvatar(getOtherParticipant(conversation.participants))"
|
||||
:src="getParticipantAvatar(getOtherParticipant(conversation.participants))"
|
||||
alt="Avatar"
|
||||
class="rounded-circle user-photo"
|
||||
@ -40,7 +40,7 @@
|
||||
</div>
|
||||
<!-- ================================ -->
|
||||
<div>
|
||||
<h5 class="mb-1">{{ getOtherParticipant(conversation.participants)?.name || 'Неизвестный пользователь' }}</h5>
|
||||
<h5 class="mb-1 participant-name">{{ getOtherParticipant(conversation.participants)?.name || 'Неизвестный пользователь' }}</h5>
|
||||
<small class="text-muted last-message-text">
|
||||
{{ conversation.lastMessage ? formatLastMessage(conversation.lastMessage) : 'Нет сообщений' }}
|
||||
</small>
|
||||
@ -48,7 +48,7 @@
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<small class="text-muted d-block">{{ formatTimestamp(conversation.updatedAt) }}</small>
|
||||
<span v-if="getUnreadCount(conversation) > 0" class="badge bg-primary rounded-pill unread-indicator">
|
||||
<span v-if="getUnreadCount(conversation) > 0" class="badge rounded-pill unread-indicator">
|
||||
{{ getUnreadCount(conversation) }}
|
||||
</span>
|
||||
</div>
|
||||
@ -318,52 +318,92 @@ onUnmounted(() => {
|
||||
.chat-list-view {
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
/* background-color: var(--background-color); /* Inherited from body */
|
||||
/* color: var(--text-color); /* Inherited from body */
|
||||
}
|
||||
|
||||
.chat-list-view h2 {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
background-color: var(--card-bg-color);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-color);
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
.list-group-item:hover {
|
||||
background-color: #f8f9fa;
|
||||
|
||||
.list-group-item:hover, .list-group-item:focus {
|
||||
background-color: var(--input-bg-color); /* Slightly different dark shade for hover/focus */
|
||||
color: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.participant-name {
|
||||
color: var(--primary-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.last-message-text,
|
||||
.list-group-item .text-muted {
|
||||
color: var(--secondary-color) !important; /* Ensure muted text is light grey */
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.last-message-text {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9em;
|
||||
line-clamp: 1; /* Стандартное свойство */
|
||||
line-clamp: 1;
|
||||
}
|
||||
|
||||
.image-placeholder-container {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
background-color: #e9ecef; /* Фон для контейнера, если фото не покроет его полностью или для заглушки */
|
||||
border-radius: 50%; /* Делаем контейнер круглым */
|
||||
overflow: hidden; /* Обрезаем все, что выходит за круглые границы */
|
||||
background-color: var(--input-bg-color); /* Dark grey background for placeholder */
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.user-photo, .no-photo-placeholder {
|
||||
.user-photo {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover; /* Для img */
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.no-photo-placeholder {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.no-photo-placeholder i {
|
||||
font-size: 2.5rem; /* Размер иконки, подберите по вкусу для 50px контейнера */
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.list-group-item .badge {
|
||||
font-size: 0.8em;
|
||||
font-size: 2.5rem;
|
||||
color: var(--primary-color); /* Pink icon */
|
||||
}
|
||||
|
||||
.unread-indicator {
|
||||
/* Можно сделать более заметным, например, жирным шрифтом или цветом */
|
||||
background-color: var(--primary-color) !important; /* Pink background for unread badge */
|
||||
color: var(--button-primary-text) !important; /* Black text for unread badge */
|
||||
font-weight: bold;
|
||||
font-size: 0.8em;
|
||||
padding: 0.4em 0.6em;
|
||||
}
|
||||
|
||||
/* Spinner and alerts should be themed globally from App.vue */
|
||||
.spinner-border.text-primary {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
</style>
|
||||
@ -11,14 +11,14 @@
|
||||
Не удалось загрузить данные диалога.
|
||||
</div>
|
||||
|
||||
<div v-if="conversationData && !loadingInitialMessages" class="chat-header p-3 bg-light border-bottom">
|
||||
<div v-if="conversationData && !loadingInitialMessages" class="chat-header p-3 border-bottom">
|
||||
<h5 class="mb-0">Чат с {{ getOtherParticipantName() || 'Собеседник' }}</h5>
|
||||
</div>
|
||||
|
||||
<div ref="messagesContainer" class="messages-area flex-grow-1 p-3" style="overflow-y: auto;">
|
||||
<div ref="messagesContainer" class="messages-area flex-grow-1 p-3">
|
||||
<template v-for="item in messagesWithDateSeparators" :key="item.id">
|
||||
<div v-if="item.type === 'date_separator'" class="date-separator text-center my-2">
|
||||
<span class="badge bg-secondary-subtle text-dark-emphasis">{{ formatDateHeader(item.timestamp) }}</span>
|
||||
<span class="badge">{{ formatDateHeader(item.timestamp) }}</span>
|
||||
</div>
|
||||
<div v-else-if="item.type === 'message'"
|
||||
:class="['message-item-wrapper', item.data.sender?._id === currentUser?._id ? 'sent-wrapper' : 'received-wrapper']"
|
||||
@ -80,7 +80,7 @@
|
||||
{{ getOtherParticipantName() || 'Собеседник' }} печатает...
|
||||
</div>
|
||||
|
||||
<div v-if="isAuthenticated" class="message-input-area p-3 border-top bg-light">
|
||||
<div v-if="isAuthenticated" class="message-input-area p-3 border-top">
|
||||
<form @submit.prevent="editingMessageId ? saveEditedMessage() : sendMessage()" class="d-flex">
|
||||
<input
|
||||
type="text"
|
||||
@ -656,169 +656,219 @@ const handleClickOutsideContextMenu = (event) => {
|
||||
|
||||
<style scoped>
|
||||
.chat-view-container {
|
||||
height: calc(100vh - 56px - 3rem); /* Примерная высота: 100% высоты вьюпорта минус шапка и отступы */
|
||||
/* Стилизуй это под свою шапку и футер */
|
||||
height: calc(100vh - 120px); /* Adjust based on your actual header/footer height */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
background-color: var(--card-bg-color); /* Darker background for header */
|
||||
border-bottom: 1px solid var(--border-color) !important; /* Pink border */
|
||||
color: var(--primary-color); /* Pink text for header */
|
||||
}
|
||||
|
||||
.messages-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin; /* For Firefox */
|
||||
scrollbar-color: var(--primary-color) var(--input-bg-color); /* For Firefox */
|
||||
}
|
||||
/* For Chrome, Edge, and Safari */
|
||||
.messages-area::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
.messages-area::-webkit-scrollbar-track {
|
||||
background: var(--input-bg-color);
|
||||
}
|
||||
.messages-area::-webkit-scrollbar-thumb {
|
||||
background-color: var(--primary-color);
|
||||
border-radius: 4px;
|
||||
border: 2px solid var(--input-bg-color);
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
padding: 0.5rem 1rem;
|
||||
padding: 0.6rem 1rem;
|
||||
border-radius: 1.25rem;
|
||||
max-width: 70%;
|
||||
max-width: 75%;
|
||||
word-wrap: break-word;
|
||||
position: relative; /* For timestamp positioning if needed */
|
||||
}
|
||||
|
||||
.message-bubble.sent {
|
||||
background-color: #0d6efd; /* Bootstrap primary */
|
||||
color: white;
|
||||
margin-left: auto; /* Прижимаем к правому краю */
|
||||
background-color: var(--primary-color); /* Pink for sent messages */
|
||||
color: var(--button-primary-text); /* Black text on pink */
|
||||
margin-left: auto;
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.message-bubble.received {
|
||||
background-color: #e9ecef; /* Bootstrap light grey */
|
||||
color: #212529;
|
||||
margin-right: auto; /* Прижимаем к левому краю */
|
||||
background-color: var(--input-bg-color); /* Dark grey for received messages */
|
||||
color: var(--text-color); /* Light text on dark grey */
|
||||
margin-right: auto;
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.message-content p {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.message-timestamp {
|
||||
font-size: 0.75em;
|
||||
display: block;
|
||||
text-align: right;
|
||||
/* text-align: right; /* Adjusted below */
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.message-bubble.sent .message-timestamp {
|
||||
text-align: right;
|
||||
color: var(--button-primary-text); /* Black text for timestamp on pink */
|
||||
}
|
||||
|
||||
.message-bubble.received .message-timestamp {
|
||||
text-align: left;
|
||||
color: #6c757d !important; /* Немного темнее для серого фона */
|
||||
color: var(--secondary-color); /* Lighter grey for timestamp on dark grey */
|
||||
}
|
||||
|
||||
.message-timestamp .bi {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.typing-indicator {
|
||||
font-size: 0.85em;
|
||||
min-height: 1.2em; /* Резервируем место, чтобы чат не прыгал */
|
||||
}
|
||||
.date-separator {
|
||||
font-size: 0.85em;
|
||||
min-height: 1.2em;
|
||||
color: var(--secondary-color); /* Lighter grey for typing indicator */
|
||||
}
|
||||
|
||||
.date-separator .badge {
|
||||
background-color: var(--input-bg-color); /* Dark grey for date separator */
|
||||
color: var(--primary-color); /* Pink text */
|
||||
padding: 0.4em 0.8em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Новые стили для удаления сообщений и контекстного меню */
|
||||
.message-input-area {
|
||||
background-color: var(--card-bg-color); /* Darker background for input area */
|
||||
border-top: 1px solid var(--border-color) !important; /* Pink border */
|
||||
}
|
||||
|
||||
/* Buttons in message input area already use global .btn-primary, .btn-secondary */
|
||||
|
||||
/* Context Menu Styling */
|
||||
.context-menu {
|
||||
position: fixed;
|
||||
background-color: var(--card-bg-color); /* Dark background */
|
||||
border: 1px solid var(--border-color); /* Pink border */
|
||||
box-shadow: 0 2px 10px rgba(254, 197, 204, 0.1); /* Pinkish shadow */
|
||||
border-radius: 6px;
|
||||
z-index: 1050;
|
||||
padding: 0;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.context-menu ul {
|
||||
list-style: none;
|
||||
padding: 5px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.context-menu li {
|
||||
padding: 10px 15px;
|
||||
cursor: pointer;
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-color); /* Light text */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.context-menu li:hover {
|
||||
background-color: var(--primary-color); /* Pink background on hover */
|
||||
color: var(--button-primary-text); /* Black text on hover */
|
||||
}
|
||||
|
||||
.context-menu li i {
|
||||
margin-right: 10px;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.context-menu li:hover i {
|
||||
color: var(--button-primary-text); /* Black icon on hover */
|
||||
}
|
||||
|
||||
.context-menu li i.bi-trash {
|
||||
color: #dc3545; /* Keep Bootstrap danger for delete icon base */
|
||||
}
|
||||
.context-menu li:hover i.bi-trash {
|
||||
color: var(--button-primary-text); /* Black icon on hover */
|
||||
}
|
||||
|
||||
.context-menu li i.bi-pencil-fill {
|
||||
color: #0d6efd; /* Keep Bootstrap info for edit icon base */
|
||||
}
|
||||
.context-menu li:hover i.bi-pencil-fill {
|
||||
color: var(--button-primary-text); /* Black icon on hover */
|
||||
}
|
||||
|
||||
/* Action buttons next to messages (delete/edit) */
|
||||
.message-item-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start; /* Выравнивание по верху для bubble и кнопки */
|
||||
/* Добавляем небольшой отступ снизу для ясности, если нужно */
|
||||
/* margin-bottom: 4px; */
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.message-item-wrapper.sent-wrapper {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.message-item-wrapper.sent-wrapper .delete-message-btn {
|
||||
|
||||
.message-item-wrapper.sent-wrapper .delete-message-btn,
|
||||
.message-item-wrapper.sent-wrapper .edit-message-btn {
|
||||
margin-left: 8px;
|
||||
order: 1; /* Кнопка справа от сообщения */
|
||||
order: 1;
|
||||
}
|
||||
.message-item-wrapper.sent-wrapper .edit-message-btn {
|
||||
margin-left: 4px; /* Меньше отступ чем у кнопки удаления */
|
||||
order: 0; /* Кнопка редактирования левее кнопки удаления */
|
||||
order: 0;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.message-item-wrapper.received-wrapper {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.delete-message-btn {
|
||||
align-self: center; /* Вертикальное центрирование кнопки относительно bubble */
|
||||
opacity: 0.6; /* Немного прозрачнее по умолчанию */
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
padding: 0.2rem 0.4rem; /* Меньше padding */
|
||||
font-size: 0.8rem; /* Меньше шрифт иконки */
|
||||
line-height: 1; /* Убрать лишнюю высоту */
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #dc3545; /* Цвет иконки (Bootstrap danger) */
|
||||
}
|
||||
.delete-message-btn:hover,
|
||||
.delete-message-btn:focus {
|
||||
opacity: 1;
|
||||
background: rgba(220, 53, 69, 0.1); /* Легкий фон при наведении/фокусе */
|
||||
}
|
||||
.delete-message-btn i {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.edit-message-btn {
|
||||
.delete-message-btn, .edit-message-btn {
|
||||
align-self: center;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
|
||||
padding: 0.2rem 0.4rem;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #0dcaf0; /* Bootstrap info color */
|
||||
}
|
||||
.edit-message-btn:hover,
|
||||
.edit-message-btn:focus {
|
||||
|
||||
.delete-message-btn:hover, .delete-message-btn:focus,
|
||||
.edit-message-btn:hover, .edit-message-btn:focus {
|
||||
opacity: 1;
|
||||
background: rgba(13, 202, 240, 0.1);
|
||||
}
|
||||
.edit-message-btn i {
|
||||
|
||||
.delete-message-btn {
|
||||
color: var(--secondary-color); /* Light grey icon */
|
||||
}
|
||||
.delete-message-btn:hover, .delete-message-btn:focus {
|
||||
color: #dc3545; /* Bootstrap danger on hover */
|
||||
}
|
||||
|
||||
.edit-message-btn {
|
||||
color: var(--secondary-color); /* Light grey icon */
|
||||
}
|
||||
.edit-message-btn:hover, .edit-message-btn:focus {
|
||||
color: var(--primary-color); /* Pink icon on hover */
|
||||
}
|
||||
|
||||
.delete-message-btn i, .edit-message-btn i {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Стили для контекстного меню */
|
||||
.context-menu {
|
||||
position: fixed;
|
||||
background-color: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.15);
|
||||
border-radius: 6px;
|
||||
z-index: 1050; /* Выше большинства элементов Bootstrap */
|
||||
padding: 0;
|
||||
min-width: 180px;
|
||||
/* Spinner color */
|
||||
.spinner-border.text-primary {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
.context-menu ul {
|
||||
list-style: none;
|
||||
padding: 5px 0; /* Adjusted padding for ul */
|
||||
margin: 0;
|
||||
}
|
||||
.context-menu li {
|
||||
padding: 10px 15px;
|
||||
cursor: pointer;
|
||||
font-size: 0.95rem;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.context-menu li:hover {
|
||||
background-color: #f5f5f5;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.context-menu li i.bi-trash {
|
||||
margin-right: 10px;
|
||||
color: #dc3545; /* Bootstrap danger color */
|
||||
font-size: 1.1em; /* Slightly larger icon */
|
||||
}
|
||||
|
||||
.context-menu li:hover i.bi-trash {
|
||||
color: #a71d2a; /* Darker danger color on hover */
|
||||
}
|
||||
|
||||
.context-menu li i.bi-pencil-fill {
|
||||
margin-right: 10px;
|
||||
color: #0d6efd; /* Bootstrap primary color */
|
||||
font-size: 1.0em;
|
||||
}
|
||||
|
||||
.context-menu li:hover i.bi-pencil-fill {
|
||||
color: #0a58ca; /* Darker primary color on hover */
|
||||
}
|
||||
|
||||
/* ... other existing styles ... */
|
||||
</style>
|
||||
@ -2,17 +2,17 @@
|
||||
<div class="container mt-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="text-center p-5 rounded-3 bg-light shadow-sm">
|
||||
<!-- Используем переменные CSS для фона и текста -->
|
||||
<div class="text-center p-5 rounded-3 shadow-sm" style="background-color: var(--card-bg-color); color: var(--text-color);">
|
||||
<template v-if="isAuthenticated">
|
||||
<h1 class="display-4 fw-bold mb-3">С возвращением, {{ user?.name || 'Пользователь' }}!</h1>
|
||||
<p class="lead mb-4">
|
||||
Готов продолжить поиск своей второй половинки?
|
||||
</p>
|
||||
<hr class="my-4" />
|
||||
<hr class="my-4" style="border-top-color: var(--border-color);" />
|
||||
<p>
|
||||
Перейди в свой <router-link to="/profile">профиль</router-link> или начни <router-link to="/swipe">поиск</router-link>! (Ссылка на свайпы пока не работает)
|
||||
Перейди в свой <router-link to="/profile">профиль</router-link> или начни <router-link to="/swipe">поиск</router-link>!
|
||||
</p>
|
||||
<!-- Можно добавить еще кнопки или информацию для залогиненного пользователя -->
|
||||
</template>
|
||||
<template v-else>
|
||||
<h1 class="display-4 fw-bold mb-3">Добро пожаловать в Dating App!</h1>
|
||||
@ -20,15 +20,16 @@
|
||||
Найди свою вторую половинку уже сегодня. Присоединяйся к нашему
|
||||
дружелюбному сообществу.
|
||||
</p>
|
||||
<hr class="my-4" />
|
||||
<hr class="my-4" style="border-top-color: var(--border-color);" />
|
||||
<p>
|
||||
Это главная страница нашего замечательного приложения. Готов начать?
|
||||
</p>
|
||||
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center mt-4">
|
||||
<!-- Обновляем классы кнопок для соответствия теме -->
|
||||
<router-link to="/login" class="btn btn-outline-primary btn-lg px-4 gap-3">
|
||||
Войти
|
||||
</router-link>
|
||||
<router-link to="/register" class="btn btn-success btn-lg px-4">
|
||||
<router-link to="/register" class="btn btn-primary btn-lg px-4"> <!-- Изменен на btn-primary -->
|
||||
Зарегистрироваться
|
||||
</router-link>
|
||||
</div>
|
||||
@ -69,6 +70,20 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Стили Bootstrap уже должны применяться глобально */
|
||||
/* Здесь можно добавить специфичные стили для этой страницы, если нужно */
|
||||
/* Стили Bootstrap уже должны применяться глобально через App.vue */
|
||||
/* Можно переопределить btn-outline-primary здесь, если глобальные стили не подходят */
|
||||
.btn-outline-primary {
|
||||
color: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
.btn-outline-primary:hover {
|
||||
color: var(--button-primary-text); /* Текст кнопки при наведении */
|
||||
background-color: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Дополнительные стили для HomeView, если нужны */
|
||||
.lead {
|
||||
color: var(--secondary-color); /* Используем вторичный цвет для менее важного текста */
|
||||
}
|
||||
</style>
|
||||
@ -34,10 +34,10 @@
|
||||
<div class="photo-actions position-absolute bottom-0 start-0 end-0 p-2 bg-dark bg-opacity-50">
|
||||
<button
|
||||
@click="setAsMainPhoto(photo._id)"
|
||||
class="btn btn-sm btn-light me-1"
|
||||
class="btn btn-sm btn-outline-primary me-1"
|
||||
:disabled="photo.isProfilePhoto || photoActionLoading"
|
||||
title="Сделать главной">
|
||||
<i class="bi" :class="{'bi-star-fill text-warning': photo.isProfilePhoto, 'bi-star': !photo.isProfilePhoto}"></i>
|
||||
<i class="bi" :class="{'bi-star-fill text-primary': photo.isProfilePhoto, 'bi-star': !photo.isProfilePhoto}"></i>
|
||||
</button>
|
||||
<button
|
||||
@click="confirmDeletePhoto(photo._id)"
|
||||
@ -68,7 +68,7 @@
|
||||
|
||||
<!-- Модальное окно подтверждения удаления -->
|
||||
<div class="modal fade" id="deletePhotoModal" tabindex="-1" aria-labelledby="deletePhotoModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="deletePhotoModalLabel">Подтвердить удаление</h5>
|
||||
@ -215,15 +215,17 @@ const executeDeletePhoto = async () => {
|
||||
.profile-view {
|
||||
max-width: 700px;
|
||||
margin: auto;
|
||||
/* color: var(--text-color); /* Already inherited from body */
|
||||
}
|
||||
.spinner-border {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
/* color: var(--primary-color); /* Will be handled by text-primary class */
|
||||
}
|
||||
.img-thumbnail {
|
||||
border: 1px solid #dee2e6;
|
||||
border: 1px solid var(--border-color); /* Pink border */
|
||||
padding: 0.25rem;
|
||||
background-color: #fff;
|
||||
background-color: var(--card-bg-color); /* Dark background for thumbnail */
|
||||
border-radius: 0.25rem;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
@ -235,4 +237,15 @@ const executeDeletePhoto = async () => {
|
||||
.photo-container:hover .photo-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
/* Ensure icon color is applied if text-primary is not enough due to specificity */
|
||||
.photo-actions .bi-star-fill.text-primary {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
/* Styling for card elements if global styles are not specific enough */
|
||||
.alert-info {
|
||||
background-color: var(--input-bg-color); /* Using input background for info alert */
|
||||
color: var(--text-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
</style>
|
||||
@ -50,7 +50,7 @@
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-success w-100" :disabled="loading">
|
||||
<button type="submit" class="btn btn-primary w-100" :disabled="loading">
|
||||
<span v-if="loading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
{{ loading ? 'Регистрация...' : 'Зарегистрироваться' }}
|
||||
</button>
|
||||
|
||||
@ -72,21 +72,21 @@
|
||||
|
||||
<div class="card-body text-center">
|
||||
<h5 class="card-title fs-3 mb-1">{{ currentUserToSwipe.name }}, {{ currentUserToSwipe.age !== null ? currentUserToSwipe.age : 'Возраст не указан' }}</h5>
|
||||
<p class="card-text text-muted mb-2">{{ formatGender(currentUserToSwipe.gender) }}</p>
|
||||
<p class="card-text gender-text mb-2">{{ formatGender(currentUserToSwipe.gender) }}</p>
|
||||
<p class="card-text bio-text">{{ currentUserToSwipe.bio || 'Нет описания.' }}</p>
|
||||
|
||||
<div class="d-flex justify-content-around mt-3 action-buttons-container">
|
||||
<button @click="handlePass" class="btn btn-outline-danger btn-lg rounded-circle action-button" :disabled="actionLoading" aria-label="Пропустить">
|
||||
<button @click="handlePass" class="btn btn-lg rounded-circle action-button action-button-pass" :disabled="actionLoading" aria-label="Пропустить">
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
<button @click="handleLike" class="btn btn-outline-success btn-lg rounded-circle action-button" :disabled="actionLoading" aria-label="Лайкнуть">
|
||||
<button @click="handleLike" class="btn btn-lg rounded-circle action-button action-button-like" :disabled="actionLoading" aria-label="Лайкнуть">
|
||||
<i class="bi bi-heart-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="matchOccurred" class="alert alert-success mt-3 text-center match-alert">
|
||||
<div v-if="matchOccurred" class="alert mt-3 text-center match-alert">
|
||||
🎉 **Это мэтч!** Вы понравились друг другу! 🎉
|
||||
</div>
|
||||
</div>
|
||||
@ -265,63 +265,102 @@ const onImageError = (event, userOnError, photoInfo, sourceType) => {
|
||||
|
||||
<style scoped>
|
||||
.swipe-view {
|
||||
padding-bottom: 60px; /* Место для футера, если он фиксированный */
|
||||
padding-bottom: 60px;
|
||||
/* background-color: var(--background-color); Already set by App.vue body */
|
||||
/* color: var(--text-color); Already set by App.vue body */
|
||||
}
|
||||
|
||||
.swipe-view h2 {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.user-card {
|
||||
border-radius: 15px;
|
||||
margin-bottom: 1.5rem;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
background-color: var(--card-bg-color);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.user-card .card-title {
|
||||
font-weight: bold;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.user-card .gender-text {
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.user-card .bio-text {
|
||||
min-height: 4.5em; /* Примерно 3 строки текста */
|
||||
min-height: 4.5em;
|
||||
max-height: 4.5em;
|
||||
line-height: 1.5em;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
line-clamp: 3; /* Добавлено стандартное свойство */
|
||||
line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.action-buttons-container {
|
||||
padding-bottom: 0.5rem; /* Небольшой отступ снизу для кнопок */
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
font-size: 1.8rem; /* Размер иконки */
|
||||
font-size: 1.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||
transition: transform 0.1s ease-out;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Darker shadow for dark theme */
|
||||
transition: transform 0.1s ease-out, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
|
||||
border-width: 2px; /* Make border more prominent */
|
||||
}
|
||||
|
||||
.action-button:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
.btn-outline-danger:hover {
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
|
||||
.action-button-pass {
|
||||
border-color: var(--secondary-color); /* Lighter grey border */
|
||||
color: var(--secondary-color);
|
||||
background-color: transparent;
|
||||
}
|
||||
.btn-outline-success:hover {
|
||||
background-color: #198754;
|
||||
color: white;
|
||||
.action-button-pass:hover {
|
||||
background-color: var(--secondary-color);
|
||||
color: var(--card-bg-color); /* Dark text on lighter grey hover */
|
||||
border-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.action-button-like {
|
||||
border-color: var(--primary-color); /* Pink border */
|
||||
color: var(--primary-color);
|
||||
background-color: transparent;
|
||||
}
|
||||
.action-button-like:hover {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--button-primary-text); /* Black text on pink hover */
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.match-alert {
|
||||
position: fixed; /* Или absolute относительно родителя, если нужно */
|
||||
bottom: 70px; /* Положение над предполагаемой панелью навигации/футером */
|
||||
position: fixed;
|
||||
bottom: 70px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1050;
|
||||
padding: 1rem 1.5rem;
|
||||
font-size: 1.2rem;
|
||||
animation: fadeInOut 3s forwards;
|
||||
background-color: var(--primary-color);
|
||||
color: var(--button-primary-text);
|
||||
border: 1px solid var(--primary-color);
|
||||
box-shadow: 0 0 15px rgba(254, 197, 204, 0.5);
|
||||
}
|
||||
|
||||
@keyframes fadeInOut {
|
||||
@ -331,43 +370,108 @@ const onImageError = (event, userOnError, photoInfo, sourceType) => {
|
||||
100% { opacity: 0; transform: translateX(-50%) translateY(20px); }
|
||||
}
|
||||
|
||||
/* Стили для фото в карусели и заглушки */
|
||||
.user-photo { /* Стиль для тега <img> с классом user-photo */
|
||||
object-fit: cover; /* Обеспечивает правильное масштабирование изображения */
|
||||
width: 100%; /* Изображение должно занимать всю ширину родительского элемента */
|
||||
/* Photo display styles */
|
||||
.user-photo {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.carousel-item img.user-photo { /* Специфичный стиль для изображений в карусели */
|
||||
height: 400px; /* Задает фиксированную высоту для всех фотографий в карусели */
|
||||
.carousel-item img.user-photo,
|
||||
.single-photo-display,
|
||||
.single-main-photo-img,
|
||||
.no-photo-placeholder {
|
||||
height: 400px; /* Consistent height for all photo displays */
|
||||
background-color: var(--input-bg-color); /* Dark background for photo area */
|
||||
}
|
||||
|
||||
.single-photo-display { /* Контейнер для одиночного фото */
|
||||
width: 100%;
|
||||
height: 400px; /* Та же высота, что и у карусели/заглушки */
|
||||
.single-photo-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden; /* На случай если изображение попытается выйти за рамки */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.single-main-photo-img { /* Стиль для одиночного изображения, если оно не в карусели */
|
||||
height: 400px; /* Явно задаем высоту */
|
||||
/* object-fit: cover; уже есть в .user-photo */
|
||||
/* width: 100%; уже есть в .user-photo */
|
||||
}
|
||||
|
||||
.no-photo-placeholder { /* Стиль для заглушки, когда фотографий нет */
|
||||
height: 400px; /* Такая же высота, как и у фотографий в карусели */
|
||||
width: 100%; /* Заглушка должна занимать всю ширину карточки */
|
||||
display: flex; /* Используем flex для центрирования иконки */
|
||||
.no-photo-placeholder {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #e9ecef; /* Нейтральный фон для заглушки */
|
||||
border-bottom: 1px solid #dee2e6; /* Тонкая граница снизу */
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.no-photo-placeholder i { /* Стиль для иконки внутри заглушки */
|
||||
font-size: 6rem; /* Размер иконки */
|
||||
color: #adb5bd; /* Цвет иконки */
|
||||
.no-photo-placeholder i {
|
||||
font-size: 6rem;
|
||||
color: var(--primary-color); /* Pink icon */
|
||||
}
|
||||
|
||||
/* Carousel controls for dark theme */
|
||||
.carousel-control-prev-icon,
|
||||
.carousel-control-next-icon {
|
||||
filter: invert(1) grayscale(100%) brightness(200%) sepia(100%) hue-rotate(280deg) saturate(500%); /* Attempt to make them pinkish */
|
||||
/* A simpler approach if the above is too complex or doesn't work well:
|
||||
filter: brightness(0) invert(1); /* This will make them white, which is good on dark bg */
|
||||
/* background-image: none; /* Remove default Bootstrap icon if replacing with custom */
|
||||
/* If using custom SVG icons, set them here */
|
||||
}
|
||||
|
||||
.carousel-indicators [data-bs-target] {
|
||||
background-color: var(--primary-color); /* Pink indicators */
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.carousel-indicators .active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Spinner should be themed by global .text-primary in App.vue */
|
||||
/* Alerts (danger, info) should be themed by global styles in App.vue */
|
||||
|
||||
/* Responsive adjustments for SwipeView */
|
||||
@media (max-width: 767px) { /* Mobile devices */
|
||||
.user-card .card-title {
|
||||
font-size: 1.5rem; /* Slightly smaller title on mobile */
|
||||
}
|
||||
.user-card .bio-text {
|
||||
min-height: 3em; /* Approx 2 lines */
|
||||
max-height: 3em;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
}
|
||||
.carousel-item img.user-photo,
|
||||
.single-photo-display,
|
||||
.single-main-photo-img,
|
||||
.no-photo-placeholder {
|
||||
height: 300px; /* Reduced height for photos on smaller screens */
|
||||
}
|
||||
.action-button {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 1.5rem; /* Smaller icons/buttons */
|
||||
}
|
||||
.match-alert {
|
||||
bottom: 60px; /* Adjust if navbar height changes on mobile */
|
||||
font-size: 1rem;
|
||||
padding: 0.8rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575px) { /* Extra small devices */
|
||||
.swipe-view h2 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
.user-card .card-title {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
.carousel-item img.user-photo,
|
||||
.single-photo-display,
|
||||
.single-main-photo-img,
|
||||
.no-photo-placeholder {
|
||||
height: 280px;
|
||||
}
|
||||
.action-button {
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user