From c5903742456c941d5b8d20d54e79298178824562 Mon Sep 17 00:00:00 2001
From: Professional <Professional@DENIIS-PC>
Date: Mon, 26 May 2025 15:29:47 +0700
Subject: [PATCH] =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/admin/AdminConversationDetail.vue |  18 ++-
 src/views/admin/AdminConversations.vue      |   9 ++
 src/views/admin/AdminDashboard.vue          |  11 ++
 src/views/admin/AdminReportDetail.vue       |  20 ++--
 src/views/admin/AdminReports.vue            | 121 ++++++++++----------
 src/views/admin/AdminUserDetail.vue         |  24 ++++
 src/views/admin/AdminUsers.vue              |  94 +++++++++------
 7 files changed, 190 insertions(+), 107 deletions(-)

diff --git a/src/views/admin/AdminConversationDetail.vue b/src/views/admin/AdminConversationDetail.vue
index 312be02..338c394 100644
--- a/src/views/admin/AdminConversationDetail.vue
+++ b/src/views/admin/AdminConversationDetail.vue
@@ -63,7 +63,7 @@
             </div>
             
             <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>
               <button @click="viewUser(participant._id)" class="btn user-btn">
                 <i class="bi-person"></i>
@@ -487,8 +487,9 @@ h3 i {
 
 .participants-list {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 1.5rem;
+  max-width: 100%;
 }
 
 .participant-card {
@@ -544,6 +545,7 @@ h3 i {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  max-width: calc(100% - 20px); /* Оставляем немного места для отступа */
 }
 
 .participant-email {
@@ -651,6 +653,12 @@ h3 i {
 
 .message-sender {
   font-weight: 600;
+  color: #495057;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 150px;
+  display: inline-block;
 }
 
 .message-time {
@@ -858,10 +866,11 @@ h3 i {
     flex-direction: column;
     gap: 0.25rem;
     margin-bottom: 0.5rem;
+    width: 100%;
   }
   
-  .message-time {
-    font-size: 0.75rem;
+  .message-sender {
+    max-width: 100%;
   }
   
   .pagination {
@@ -915,6 +924,7 @@ h3 i {
   
   .message-header {
     align-items: flex-start;
+    width: 100%;
   }
   
   .message-time {
diff --git a/src/views/admin/AdminConversations.vue b/src/views/admin/AdminConversations.vue
index 401358a..4528ff1 100644
--- a/src/views/admin/AdminConversations.vue
+++ b/src/views/admin/AdminConversations.vue
@@ -363,6 +363,11 @@ h2::before {
 
 .participant {
   margin-bottom: 0.25rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: block;
 }
 
 .participant:last-child {
@@ -455,6 +460,10 @@ h2::before {
 .participant-item {
   font-size: 0.9rem;
   margin-bottom: 0.25rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
 }
 
 .message-preview {
diff --git a/src/views/admin/AdminDashboard.vue b/src/views/admin/AdminDashboard.vue
index 9f6becc..053c4b2 100644
--- a/src/views/admin/AdminDashboard.vue
+++ b/src/views/admin/AdminDashboard.vue
@@ -159,6 +159,16 @@ export default {
   display: flex;
   align-items: center;
   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 {
@@ -173,6 +183,7 @@ export default {
   align-items: center;
   gap: 0.5rem;
   transition: all 0.2s ease;
+  flex-shrink: 0;
 }
 
 .logout-btn:hover {
diff --git a/src/views/admin/AdminReportDetail.vue b/src/views/admin/AdminReportDetail.vue
index 86374fc..d4ffb45 100644
--- a/src/views/admin/AdminReportDetail.vue
+++ b/src/views/admin/AdminReportDetail.vue
@@ -848,21 +848,27 @@ h2 {
   gap: 0.25rem;
   overflow-wrap: break-word;
   word-wrap: break-word;
-  flex: 1; /* Растягивание для выравнивания высоты */
+  flex: 1; /* Растяжение для выравнивания высоты */
 }
 
 .user-name {
-  font-weight: 500;
+  font-weight: 600;
   color: #333;
-  line-height: 1.3;
   margin-bottom: 0.25rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  padding-right: 5px;
 }
 
 .user-email {
-  color: #6c757d;
-  font-size: 0.85rem;
-  word-break: break-all;
-  margin-bottom: 0.5rem;
+  color: #666;
+  font-size: 0.9rem;
+  margin-bottom: 0.75rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .arrow-divider {
diff --git a/src/views/admin/AdminReports.vue b/src/views/admin/AdminReports.vue
index 9473bfb..cec5ea6 100644
--- a/src/views/admin/AdminReports.vue
+++ b/src/views/admin/AdminReports.vue
@@ -2,26 +2,26 @@
   <div class="admin-reports">
     <div class="header-section">
       <h2>Управление жалобами</h2>
-      
-      <div class="search-bar">
-        <div class="filter-options">
-          <label>
-            <input type="radio" v-model="statusFilter" value="all" @change="loadReports">
-            <span>Все</span>
-          </label>
-          <label>
-            <input type="radio" v-model="statusFilter" value="pending" @change="loadReports">
-            <span>На рассмотрении</span>
-          </label>
-          <label>
-            <input type="radio" v-model="statusFilter" value="resolved" @change="loadReports">
-            <span>Рассмотренные</span>
-          </label>
-          <label>
-            <input type="radio" v-model="statusFilter" value="dismissed" @change="loadReports">
-            <span>Отклоненные</span>
-          </label>
-        </div>
+    </div>
+
+    <div class="search-filters">
+      <div class="filter-selectors">
+        <label :class="{ active: statusFilter === 'all' }">
+          <input type="radio" v-model="statusFilter" value="all" @change="loadReports" hidden>
+          <span>Все</span>
+        </label>
+        <label :class="{ active: statusFilter === 'pending' }">
+          <input type="radio" v-model="statusFilter" value="pending" @change="loadReports" hidden>
+          <span>На рассмотрении</span>
+        </label>
+        <label :class="{ active: statusFilter === 'resolved' }">
+          <input type="radio" v-model="statusFilter" value="resolved" @change="loadReports" hidden>
+          <span>Рассмотренные</span>
+        </label>
+        <label :class="{ active: statusFilter === 'dismissed' }">
+          <input type="radio" v-model="statusFilter" value="dismissed" @change="loadReports" hidden>
+          <span>Отклоненные</span>
+        </label>
       </div>
     </div>
     
@@ -348,29 +348,41 @@ h2::before {
   margin-bottom: 1.5rem;
 }
 
-.search-bar {
+.search-filters {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
   margin-bottom: 1.5rem;
-  flex-grow: 1;
-  max-width: 400px;
 }
 
-.filter-options {
+.filter-selectors {
   display: flex;
-  gap: 1rem;
+  gap: 0.5rem;
   flex-wrap: wrap;
 }
 
-.filter-options label {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  font-weight: 500;
+.filter-selectors label {
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  font-size: 0.9rem;
+  background-color: #f5f5f5;
   color: #555;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid #e0e0e0;
+  white-space: nowrap;
+  text-align: center;
 }
 
-.filter-options input[type="radio"] {
-  margin: 0;
+.filter-selectors label:hover {
+  background-color: #eaeaea;
+}
+
+.filter-selectors label.active {
+  background-color: #ff3e68;
+  color: white;
+  border-color: #ff3e68;
+  font-weight: 500;
 }
 
 .loading-indicator {
@@ -777,34 +789,23 @@ h2::before {
     gap: 1rem;
   }
   
-  .search-bar {
-    max-width: none;
-    margin-bottom: 0;
-  }
-  
-  .filter-options {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+  .search-filters {
+    flex-direction: column;
     gap: 0.5rem;
   }
   
-  .filter-options label {
-    padding: 0.5rem;
-    background: #f8f9fa;
-    border-radius: 0.5rem;
-    border: 1px solid #dee2e6;
-    transition: all 0.2s ease;
-    justify-content: center;
+  .filter-selectors {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    width: 100%;
+    gap: 0.5rem;
   }
   
-  .filter-options label:has(input:checked) {
-    background: #007bff;
-    color: white;
-    border-color: #007bff;
-  }
-  
-  .filter-options input[type="radio"] {
-    display: none;
+  .filter-selectors label {
+    min-width: 0;
+    width: 100%;
+    font-size: 0.8rem;
+    padding: 0.4rem 0.5rem;
   }
   
   .card-header {
@@ -855,13 +856,13 @@ h2::before {
     padding: 1rem calc(60px + env(safe-area-inset-bottom, 0px)) 1rem;
   }
   
-  .filter-options {
+  .filter-selectors {
     display: flex;
     flex-wrap: wrap;
     gap: 0.75rem;
   }
   
-  .filter-options label {
+  .filter-selectors label {
     padding: 0.4rem 0.8rem;
     background: #f8f9fa;
     border-radius: 1rem;
@@ -869,13 +870,13 @@ h2::before {
     transition: all 0.2s ease;
   }
   
-  .filter-options label:has(input:checked) {
+  .filter-selectors label.active {
     background: #007bff;
     color: white;
     border-color: #007bff;
   }
   
-  .filter-options input[type="radio"] {
+  .filter-selectors input[type="radio"] {
     display: none;
   }
   
diff --git a/src/views/admin/AdminUserDetail.vue b/src/views/admin/AdminUserDetail.vue
index ec2b48e..7ba9814 100644
--- a/src/views/admin/AdminUserDetail.vue
+++ b/src/views/admin/AdminUserDetail.vue
@@ -456,6 +456,30 @@ h3 {
   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 {
   display: inline-block;
   padding: 0.25rem 0.75rem;
diff --git a/src/views/admin/AdminUsers.vue b/src/views/admin/AdminUsers.vue
index 7266510..58f74cf 100644
--- a/src/views/admin/AdminUsers.vue
+++ b/src/views/admin/AdminUsers.vue
@@ -2,25 +2,28 @@
   <div class="admin-users">
     <h2>Управление пользователями</h2>
     
-    <div class="search-bar">
-      <input 
-        type="text" 
-        v-model="searchQuery" 
-        placeholder="Поиск по имени или email..." 
-        @input="debounceSearch"
-      />
-      <div class="filter-options">
-        <label>
-          <input type="radio" v-model="activeFilter" value="all" @change="loadUsers">
-          Все
+    <div class="search-filters">
+      <div class="search-input">
+        <input 
+          type="text" 
+          v-model="searchQuery" 
+          placeholder="Поиск по имени или email..." 
+          @input="debounceSearch"
+        />
+      </div>
+      
+      <div class="filter-selectors">
+        <label :class="{ active: activeFilter === 'all' }">
+          <input type="radio" v-model="activeFilter" value="all" @change="loadUsers" hidden>
+          <span>Все</span>
         </label>
-        <label>
-          <input type="radio" v-model="activeFilter" value="active" @change="loadUsers">
-          Активные
+        <label :class="{ active: activeFilter === 'active' }">
+          <input type="radio" v-model="activeFilter" value="active" @change="loadUsers" hidden>
+          <span>Активные</span>
         </label>
-        <label>
-          <input type="radio" v-model="activeFilter" value="blocked" @change="loadUsers">
-          Заблокированные
+        <label :class="{ active: activeFilter === 'blocked' }">
+          <input type="radio" v-model="activeFilter" value="blocked" @change="loadUsers" hidden>
+          <span>Заблокированные</span>
         </label>
       </div>
     </div>
@@ -347,14 +350,18 @@ h2::before {
   border-radius: 3px;
 }
 
-.search-bar {
+.search-filters {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   margin-bottom: 1.5rem;
 }
 
-.search-bar input {
+.search-input {
+  flex: 1;
+}
+
+.search-input input {
   padding: 0.75rem;
   border: 1px solid #ddd;
   border-radius: 8px;
@@ -363,36 +370,39 @@ h2::before {
   transition: all 0.3s ease;
 }
 
-.search-bar input:focus {
+.search-input input:focus {
   border-color: #ff3e68;
   box-shadow: 0 2px 8px rgba(255, 62, 104, 0.1);
   outline: none;
 }
 
-.filter-options {
+.filter-selectors {
   display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-
-.filter-options label {
-  display: flex;
-  align-items: center;
   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;
-  padding: 0.5rem 0.8rem;
-  border-radius: 6px;
   transition: all 0.2s ease;
-  background-color: #f8f9fa;
+  border: 1px solid #e0e0e0;
+  white-space: nowrap;
+  text-align: center;
 }
 
-.filter-options label:hover {
-  background-color: #f1f3f5;
+.filter-selectors label:hover {
+  background-color: #eaeaea;
 }
 
-.filter-options input:checked + label {
-  background-color: rgba(255, 62, 104, 0.1);
-  color: #ff3e68;
+.filter-selectors label.active {
+  background-color: #ff3e68;
+  color: white;
+  border-color: #ff3e68;
   font-weight: 500;
 }
 
@@ -458,6 +468,14 @@ h2::before {
   text-align: left;
 }
 
+/* Добавляем стили для столбца с именем пользователя */
+.users-table td:nth-child(2) {
+  max-width: 180px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .users-table th {
   background-color: #f8f9fa;
   color: #495057;
@@ -582,6 +600,10 @@ h2::before {
   font-weight: 600;
   font-size: 1.1rem;
   color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 70%;
 }
 
 .card-content {