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 @@
+
-
+
+ vs
@@ -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;
}
}
\ No newline at end of file