From 2fb9e41429c42b5f3880879b643b86da05bd89df Mon Sep 17 00:00:00 2001
From: Professional <Professional@DENIIS-PC>
Date: Mon, 26 May 2025 01:45:39 +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/AdminReportDetail.vue | 455 +++++++++++---------------
 1 file changed, 186 insertions(+), 269 deletions(-)

diff --git a/src/views/admin/AdminReportDetail.vue b/src/views/admin/AdminReportDetail.vue
index 2a48ef9..4f5d5bf 100644
--- a/src/views/admin/AdminReportDetail.vue
+++ b/src/views/admin/AdminReportDetail.vue
@@ -85,8 +85,10 @@
                   </div>
                 </div>
                 
+                <!-- Индикатор стрелки адаптирован для мобильных устройств -->
                 <div class="arrow-divider">
-                  <i class="bi-arrow-right"></i>
+                  <i class="bi-arrow-right arrow-icon"></i>
+                  <span class="vs-text">vs</span>
                 </div>
                 
                 <div class="user-card reported">
@@ -797,304 +799,219 @@ h2 {
   margin-top: 1.5rem;
 }
 
-/* Адаптивные стили */
-@media (max-width: 767px) {
-  .report-header {
-    flex-direction: column;
-    gap: 1rem;
-    align-items: flex-start;
-  }
-  
-  .action-buttons {
-    flex-direction: column;
-  }
-  
-  .modal-actions {
-    flex-direction: column;
-  }
+/* Пользовательские карточки в секции участников */
+.users-grid {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 1rem;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
 }
 
-@media (max-width: 480px) {
-  .admin-report-detail {
-    padding: 1rem 0.5rem 1.5rem 0.5rem; /* top, right, bottom, left */
-  }
-  
-  .header-controls {
-    margin-bottom: 1rem;
-  }
-  
-  .back-btn .btn-text {
-    display: none;
-  }
-  
-  .back-btn {
-    padding: 0.5rem;
-    min-width: 40px;
-    min-height: 40px;
-    justify-content: center;
-  }
-  
-  .page-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.75rem;
-  }
-  
-  .page-header h2 {
-    font-size: 1.1rem;
-    margin-bottom: 0;
-  }
-  
-  .report-header {
-    padding: 1rem;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.75rem;
-  }
-  
-  .report-id-section {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.25rem;
-  }
-  
-  .id-info h3 {
-    font-size: 1rem;
-  }
-  
-  .full-id {
-    font-size: 0.8rem;
-    word-break: break-all;
-    max-width: 100%;
-  }
-  
-  .report-content {
-    padding: 1rem;
-  }
-  
-  .info-section {
-    width: 100%;
-    overflow: hidden;
-    box-sizing: border-box;
-  }
-  
+.user-card {
+  background: white;
+  border: 1px solid #e9ecef;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  transition: all 0.2s ease;
+  width: 100%;
+  box-sizing: border-box;
+  height: 100%; /* Одинаковая высота карточек */
+  display: flex;
+  flex-direction: column;
+}
+
+.user-card:hover {
+  border-color: #007bff;
+  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
+}
+
+.user-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  flex-wrap: wrap; /* Разрешить перенос на новую строку */
+}
+
+.user-role {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: #495057;
+  white-space: nowrap; /* Предотвращение разрыва метки роли */
+}
+
+.user-details {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  flex: 1; /* Растягивание для выравнивания высоты */
+}
+
+.user-name {
+  font-weight: 500;
+  color: #333;
+  line-height: 1.3;
+  margin-bottom: 0.25rem;
+}
+
+.user-email {
+  color: #6c757d;
+  font-size: 0.85rem;
+  word-break: break-all;
+  margin-bottom: 0.5rem;
+}
+
+.arrow-divider {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #007bff;
+  font-size: 1.5rem;
+  position: relative;
+}
+
+.arrow-icon {
+  display: block;
+}
+
+.vs-text {
+  display: none; /* По умолчанию скрыт, показывается на мобильных */
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: #495057;
+  text-transform: uppercase;
+}
+
+/* Специальные стили для очень маленьких экранов */
+@media (max-width: 360px) {
   .users-grid {
-    grid-template-columns: 1fr;
-    gap: 1rem;
-  }
-  
-  .arrow-divider {
-    transform: rotate(90deg);
-    margin: 0.5rem 0;
+    gap: 0.5rem;
   }
   
   .user-card {
     padding: 0.75rem;
   }
   
-  .action-buttons {
-    flex-direction: column;
-    gap: 0.75rem;
+  .user-header {
+    margin-bottom: 0.5rem;
   }
   
-  .btn {
+  .user-role {
+    font-size: 0.8rem;
+  }
+  
+  .user-name {
+    font-size: 0.9rem;
+  }
+  
+  .user-email {
+    font-size: 0.75rem;
+  }
+  
+  .view-user-btn {
+    padding: 0.3rem 0.5rem;
+    font-size: 0.8rem;
+  }
+  
+  .view-user-btn span {
+    display: none;
+  }
+}
+
+/* Улучшенная мобильная адаптация */
+@media (max-width: 480px) {
+  .users-grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+    position: relative;
+    padding-bottom: 0.5rem;
+  }
+  
+  .arrow-divider {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: white;
+    border: 1px solid #e9ecef;
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    z-index: 2;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .arrow-icon {
+    display: none; /* Скрыть стрелку на мобильных */
+  }
+  
+  .vs-text {
+    display: block; /* Показать текст VS на мобильных */
+  }
+  
+  .user-card {
+    position: relative;
+    z-index: 1;
+  }
+  
+  .reporter {
+    margin-bottom: 1.5rem; /* Пространство для разделителя */
+  }
+  
+  .reported {
+    margin-top: 0.5rem; /* Пространство после разделителя */
+  }
+  
+  .view-user-btn {
     width: 100%;
     justify-content: center;
-    padding: 0.75rem;
-  }
-  
-  .modal {
-    width: 95%;
-    padding: 1rem;
-    margin: 1rem;
-  }
-  
-  .modal-actions {
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-  
-  .modal-actions .btn {
-    width: 100%;
+    margin-top: 0.75rem;
   }
 }
 
 /* Маленькие экраны (481px - 767px) */
 @media (min-width: 481px) and (max-width: 767px) {
-  .admin-report-detail {
-    padding: 1rem 1rem 1.5rem 1rem;
-    width: 100%;
-    box-sizing: border-box;
-  }
-  
-  .page-header {
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 1rem;
-  }
-  
-  .page-header h2 {
-    font-size: 1.2rem;
-  }
-  
-  .report-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1rem;
-  }
-  
   .users-grid {
     grid-template-columns: 1fr;
-    gap: 1rem;
+    gap: 1.5rem;
+    position: relative;
   }
   
   .arrow-divider {
+    position: absolute;
+    top: 50%;
+    left: -0.5rem;
+    transform: translateY(-50%);
+    z-index: 2;
+    width: 2rem;
+    height: 2rem;
+    background: #f8f9fa;
+    border-radius: 50%;
+    border: 1px solid #dee2e6;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    margin: 0;
+  }
+  
+  .arrow-icon {
     transform: rotate(90deg);
-    margin: 0.5rem 0;
-  }
-  
-  .action-buttons {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
-  }
-  
-  .modal {
-    width: 90%;
-    max-width: 450px;
-  }
-  
-  .modal-actions {
-    flex-direction: row;
-    gap: 1rem;
-  }
-}
-
-/* Средние экраны (768px - 991px) */
-@media (min-width: 768px) and (max-width: 991px) {
-  .admin-report-detail {
-    padding: 1.5rem 1rem 2rem 1rem;
-    max-width: 100%;
-    box-sizing: border-box;
-  }
-  
-  .report-header {
-    flex-direction: row;
-    align-items: center;
-  }
-  
-  .users-grid {
-    grid-template-columns: 1fr auto 1fr;
-    gap: 1.5rem;
-  }
-  
-  .arrow-divider {
-    transform: none;
-  }
-  
-  .info-grid {
-    grid-template-columns: 1fr;
-    gap: 1.5rem;
-    max-width: 100%;
-  }
-  
-  .report-content {
-    padding: 1.5rem;
-    width: 100%;
-    box-sizing: border-box;
   }
   
   .user-card {
-    max-width: 100%;
-  }
-}
-
-/* Большие экраны (992px - 1199px) */
-@media (min-width: 992px) and (max-width: 1199px) {
-  .admin-report-detail {
-    padding: 2rem 1.5rem;
     width: 100%;
-    box-sizing: border-box;
+    margin-left: 1rem;
   }
   
-  .info-grid {
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Автоматическое управление колонками */
-    gap: 1.5rem;
-    max-width: 100%;
-  }
-  
-  .info-section:last-child {
-    grid-column: 1 / -1;
-  }
-  
-  .users-grid {
-    grid-template-columns: 1fr auto 1fr;
-    gap: 2rem;
-  }
-}
-
-/* Очень большие экраны (1200px+) */
-@media (min-width: 1200px) {
-  .admin-report-detail {
-    padding: 2rem;
-    max-width: 1200px;
-    margin: 0 auto;
-    width: 100%;
-    box-sizing: border-box;
-  }
-  
-  .info-grid {
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Автоматическое управление колонками */
-    gap: 2rem;
-    max-width: 100%;
-  }
-  
-  .info-section:last-child {
-    grid-column: 1 / -1;
-  }
-  
-  .users-grid {
-    grid-template-columns: 1fr auto 1fr;
-    gap: 2rem;
-  }
-  
-  .report-header {
-    padding: 2rem;
-  }
-  
-  .report-content {
-    padding: 2rem;
-  }
-  
-  .report-actions {
-    padding: 2rem;
-  }
-}
-
-/* Под шрифты и контент на разных разрешениях */
-@media (max-width: 576px) {
-  .user-name {
-    font-size: 0.95rem;
-    word-break: break-word;
-  }
-  
-  .user-email {
-    font-size: 0.8rem;
-    word-break: break-all;
-  }
-  
-  .description,
-  .admin-notes {
-    font-size: 0.95rem;
-  }
-  
-  .form-group textarea {
-    font-size: 1rem; /* Увеличение размера для лучшего взаимодействия на мобильных */
-  }
-  
-  .modal-content {
-    max-width: 100%;
-    overflow-wrap: break-word;
+  .view-user-btn {
+    align-self: flex-start;
+    margin-top: 0.75rem;
   }
 }
 </style>
\ No newline at end of file