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

фикс

Browse Source
This commit is contained in:
Professional 2025-05-26 15:29:47 +07:00
parent 67e4bf465b
commit c590374245
7 changed files with 190 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/admin/AdminConversationDetail.vue
View File

@ -63,7 +63,7 @@
</div> </div>
<div class="participant-info"> <div class="participant-info">
<div class="participant-name">{{ participant.name }}</div> <div class="participant-name user-name">{{ participant.name }}</div>
<div class="participant-email">{{ participant.email }}</div> <div class="participant-email">{{ participant.email }}</div>
<button @click="viewUser(participant._id)" class="btn user-btn"> <button @click="viewUser(participant._id)" class="btn user-btn">
<i class="bi-person"></i> <i class="bi-person"></i>
@ -487,8 +487,9 @@ h3 i {
.participants-list { .participants-list {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem; gap: 1.5rem;
max-width: 100%;
} }
.participant-card { .participant-card {
@ -544,6 +545,7 @@ h3 i {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: calc(100% - 20px); /* Оставляем немного места для отступа */
} }
.participant-email { .participant-email {
@ -651,6 +653,12 @@ h3 i {
.message-sender { .message-sender {
font-weight: 600; font-weight: 600;
color: #495057;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
display: inline-block;
} }
.message-time { .message-time {
@ -858,10 +866,11 @@ h3 i {
flex-direction: column; flex-direction: column;
gap: 0.25rem; gap: 0.25rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
width: 100%;
} }
.message-time { .message-sender {
font-size: 0.75rem; max-width: 100%;
} }
.pagination { .pagination {
@ -915,6 +924,7 @@ h3 i {
.message-header { .message-header {
align-items: flex-start; align-items: flex-start;
width: 100%;
} }
.message-time { .message-time {

9
src/views/admin/AdminConversations.vue
View File

@ -363,6 +363,11 @@ h2::before {
.participant { .participant {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
display: block;
} }
.participant:last-child { .participant:last-child {
@ -455,6 +460,10 @@ h2::before {
.participant-item { .participant-item {
font-size: 0.9rem; font-size: 0.9rem;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
} }
.message-preview { .message-preview {

11
src/views/admin/AdminDashboard.vue
View File

@ -159,6 +159,16 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
max-width: 40%;
overflow: hidden;
}
.user-name {
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 500;
} }
.logout-btn { .logout-btn {
@ -173,6 +183,7 @@ export default {
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
transition: all 0.2s ease; transition: all 0.2s ease;
flex-shrink: 0;
} }
.logout-btn:hover { .logout-btn:hover {

20
src/views/admin/AdminReportDetail.vue
View File

@ -848,21 +848,27 @@ h2 {
gap: 0.25rem; gap: 0.25rem;
overflow-wrap: break-word; overflow-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
flex: 1; /* Растягивание для выравнивания высоты */ flex: 1; /* Растяжение для выравнивания высоты */
} }
.user-name { .user-name {
font-weight: 500; font-weight: 600;
color: #333; color: #333;
line-height: 1.3;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
padding-right: 5px;
} }
.user-email { .user-email {
color: #6c757d; color: #666;
font-size: 0.85rem; font-size: 0.9rem;
word-break: break-all; margin-bottom: 0.75rem;
margin-bottom: 0.5rem; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.arrow-divider { .arrow-divider {

103
src/views/admin/AdminReports.vue
View File

@ -2,28 +2,28 @@
<div class="admin-reports"> <div class="admin-reports">
<div class="header-section"> <div class="header-section">
<h2>Управление жалобами</h2> <h2>Управление жалобами</h2>
</div>
<div class="search-bar"> <div class="search-filters">
<div class="filter-options"> <div class="filter-selectors">
<label> <label :class="{ active: statusFilter === 'all' }">
<input type="radio" v-model="statusFilter" value="all" @change="loadReports"> <input type="radio" v-model="statusFilter" value="all" @change="loadReports" hidden>
<span>Все</span> <span>Все</span>
</label> </label>
<label> <label :class="{ active: statusFilter === 'pending' }">
<input type="radio" v-model="statusFilter" value="pending" @change="loadReports"> <input type="radio" v-model="statusFilter" value="pending" @change="loadReports" hidden>
<span>На рассмотрении</span> <span>На рассмотрении</span>
</label> </label>
<label> <label :class="{ active: statusFilter === 'resolved' }">
<input type="radio" v-model="statusFilter" value="resolved" @change="loadReports"> <input type="radio" v-model="statusFilter" value="resolved" @change="loadReports" hidden>
<span>Рассмотренные</span> <span>Рассмотренные</span>
</label> </label>
<label> <label :class="{ active: statusFilter === 'dismissed' }">
<input type="radio" v-model="statusFilter" value="dismissed" @change="loadReports"> <input type="radio" v-model="statusFilter" value="dismissed" @change="loadReports" hidden>
<span>Отклоненные</span> <span>Отклоненные</span>
</label> </label>
</div> </div>
</div> </div>
</div>
<div v-if="loading" class="loading-indicator"> <div v-if="loading" class="loading-indicator">
<div class="loading-spinner"></div> <div class="loading-spinner"></div>
@ -348,29 +348,41 @@ h2::before {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.search-bar { .search-filters {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
flex-grow: 1;
max-width: 400px;
} }
.filter-options { .filter-selectors {
display: flex; display: flex;
gap: 1rem; gap: 0.5rem;
flex-wrap: wrap; flex-wrap: wrap;
} }
.filter-options label { .filter-selectors label {
display: flex; padding: 0.5rem 1rem;
align-items: center; border-radius: 20px;
gap: 0.5rem; font-size: 0.9rem;
cursor: pointer; background-color: #f5f5f5;
font-weight: 500;
color: #555; color: #555;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid #e0e0e0;
white-space: nowrap;
text-align: center;
} }
.filter-options input[type="radio"] { .filter-selectors label:hover {
margin: 0; background-color: #eaeaea;
}
.filter-selectors label.active {
background-color: #ff3e68;
color: white;
border-color: #ff3e68;
font-weight: 500;
} }
.loading-indicator { .loading-indicator {
@ -777,34 +789,23 @@ h2::before {
gap: 1rem; gap: 1rem;
} }
.search-bar { .search-filters {
max-width: none; flex-direction: column;
margin-bottom: 0;
}
.filter-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem; gap: 0.5rem;
} }
.filter-options label { .filter-selectors {
padding: 0.5rem; display: grid;
background: #f8f9fa; grid-template-columns: repeat(2, 1fr);
border-radius: 0.5rem; width: 100%;
border: 1px solid #dee2e6; gap: 0.5rem;
transition: all 0.2s ease;
justify-content: center;
} }
.filter-options label:has(input:checked) { .filter-selectors label {
background: #007bff; min-width: 0;
color: white; width: 100%;
border-color: #007bff; font-size: 0.8rem;
} padding: 0.4rem 0.5rem;
.filter-options input[type="radio"] {
display: none;
} }
.card-header { .card-header {
@ -855,13 +856,13 @@ h2::before {
padding: 1rem calc(60px + env(safe-area-inset-bottom, 0px)) 1rem; padding: 1rem calc(60px + env(safe-area-inset-bottom, 0px)) 1rem;
} }
.filter-options { .filter-selectors {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.75rem; gap: 0.75rem;
} }
.filter-options label { .filter-selectors label {
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
background: #f8f9fa; background: #f8f9fa;
border-radius: 1rem; border-radius: 1rem;
@ -869,13 +870,13 @@ h2::before {
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.filter-options label:has(input:checked) { .filter-selectors label.active {
background: #007bff; background: #007bff;
color: white; color: white;
border-color: #007bff; border-color: #007bff;
} }
.filter-options input[type="radio"] { .filter-selectors input[type="radio"] {
display: none; display: none;
} }

24
src/views/admin/AdminUserDetail.vue
View File

@ -456,6 +456,30 @@ h3 {
color: #ff3e68; color: #ff3e68;
} }
.user-name-status {
flex: 1;
max-width: calc(100% - 120px); /* Учитываем размер фото и отступ */
}
.user-name-status h3 {
font-size: 1.5rem;
font-weight: 600;
margin: 0 0 0.5rem;
color: #ff3e68;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.status-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 50px;
font-size: 0.8rem;
font-weight: 500;
white-space: nowrap;
}
.user-status { .user-status {
display: inline-block; display: inline-block;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;

82
src/views/admin/AdminUsers.vue
View File

@ -2,25 +2,28 @@
<div class="admin-users"> <div class="admin-users">
<h2>Управление пользователями</h2> <h2>Управление пользователями</h2>
<div class="search-bar"> <div class="search-filters">
<div class="search-input">
<input <input
type="text" type="text"
v-model="searchQuery" v-model="searchQuery"
placeholder="Поиск по имени или email..." placeholder="Поиск по имени или email..."
@input="debounceSearch" @input="debounceSearch"
/> />
<div class="filter-options"> </div>
<label>
<input type="radio" v-model="activeFilter" value="all" @change="loadUsers"> <div class="filter-selectors">
Все <label :class="{ active: activeFilter === 'all' }">
<input type="radio" v-model="activeFilter" value="all" @change="loadUsers" hidden>
<span>Все</span>
</label> </label>
<label> <label :class="{ active: activeFilter === 'active' }">
<input type="radio" v-model="activeFilter" value="active" @change="loadUsers"> <input type="radio" v-model="activeFilter" value="active" @change="loadUsers" hidden>
Активные <span>Активные</span>
</label> </label>
<label> <label :class="{ active: activeFilter === 'blocked' }">
<input type="radio" v-model="activeFilter" value="blocked" @change="loadUsers"> <input type="radio" v-model="activeFilter" value="blocked" @change="loadUsers" hidden>
Заблокированные <span>Заблокированные</span>
</label> </label>
</div> </div>
</div> </div>
@ -347,14 +350,18 @@ h2::before {
border-radius: 3px; border-radius: 3px;
} }
.search-bar { .search-filters {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: 0.75rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.search-bar input { .search-input {
flex: 1;
}
.search-input input {
padding: 0.75rem; padding: 0.75rem;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 8px; border-radius: 8px;
@ -363,36 +370,39 @@ h2::before {
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.search-bar input:focus { .search-input input:focus {
border-color: #ff3e68; border-color: #ff3e68;
box-shadow: 0 2px 8px rgba(255, 62, 104, 0.1); box-shadow: 0 2px 8px rgba(255, 62, 104, 0.1);
outline: none; outline: none;
} }
.filter-options { .filter-selectors {
display: flex; display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.filter-options label {
display: flex;
align-items: center;
gap: 0.5rem; gap: 0.5rem;
margin-top: 0.5rem;
}
.filter-selectors label {
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
background-color: #f5f5f5;
color: #555;
cursor: pointer; cursor: pointer;
padding: 0.5rem 0.8rem;
border-radius: 6px;
transition: all 0.2s ease; transition: all 0.2s ease;
background-color: #f8f9fa; border: 1px solid #e0e0e0;
white-space: nowrap;
text-align: center;
} }
.filter-options label:hover { .filter-selectors label:hover {
background-color: #f1f3f5; background-color: #eaeaea;
} }
.filter-options input:checked + label { .filter-selectors label.active {
background-color: rgba(255, 62, 104, 0.1); background-color: #ff3e68;
color: #ff3e68; color: white;
border-color: #ff3e68;
font-weight: 500; font-weight: 500;
} }
@ -458,6 +468,14 @@ h2::before {
text-align: left; text-align: left;
} }
/* Добавляем стили для столбца с именем пользователя */
.users-table td:nth-child(2) {
max-width: 180px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.users-table th { .users-table th {
background-color: #f8f9fa; background-color: #f8f9fa;
color: #495057; color: #495057;
@ -582,6 +600,10 @@ h2::before {
font-weight: 600; font-weight: 600;
font-size: 1.1rem; font-size: 1.1rem;
color: #333; color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 70%;
} }
.card-content { .card-content {