diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue index b79c12f..6484a0e 100644 --- a/src/views/ProfileView.vue +++ b/src/views/ProfileView.vue @@ -27,6 +27,7 @@
+
-
-

{{ profileData.name || 'Не указано' }}

-

{{ profileData.email }}

-
- Подтвержден - С {{ formatShortDate(profileData.createdAt) }} +
@@ -112,10 +119,6 @@ Фотографии {{ profileData.photos.length }} -
- -
-
-
-

Уведомления

-
-
-

Здесь вы можете управлять настройками уведомлений.

- -
-
-
-
@@ -1409,20 +1399,18 @@ onUnmounted(() => { flex-direction: column; } -/* Avatar Section */ +/* Avatar Section - Компактная компоновка */ .avatar-section { display: flex; - flex-wrap: wrap; + align-items: flex-start; gap: 1rem; margin-bottom: 1rem; - align-items: center; - justify-content: space-between; } .avatar-container { position: relative; - width: 80px; - height: 80px; + width: 70px; + height: 70px; border-radius: 50%; overflow: hidden; border: 3px solid rgba(102, 126, 234, 0.3); @@ -1486,45 +1474,58 @@ onUnmounted(() => { transform: scale(1.1); } -.user-meta { +.user-info-container { flex: 1; min-width: 0; display: flex; flex-direction: column; + gap: 0.3rem; +} + +.user-main-info { + display: flex; + flex-direction: column; + gap: 0.1rem; } .user-name { - font-size: 1.3rem; + font-size: 1.2rem; font-weight: 600; - margin: 0 0 0.2rem; + margin: 0; color: #333; - word-wrap: break-word; - overflow-wrap: break-word; + line-height: 1.2; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .user-email { - font-size: 0.85rem; + font-size: 0.8rem; color: #6c757d; - margin: 0 0 0.5rem; - word-wrap: break-word; - overflow-wrap: break-word; + margin: 0; + line-height: 1.2; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .user-badges { display: flex; - flex-wrap: wrap; - gap: 0.5rem; + flex-wrap: nowrap; + gap: 0.4rem; + margin-top: 0.2rem; } .badge { - padding: 0.25rem 0.6rem; - border-radius: 12px; - font-size: 0.7rem; + padding: 0.2rem 0.5rem; + border-radius: 10px; + font-size: 0.65rem; font-weight: 500; white-space: nowrap; display: flex; align-items: center; gap: 0.2rem; + flex-shrink: 0; } .badge.verified { @@ -1539,8 +1540,8 @@ onUnmounted(() => { .header-actions { display: flex; - align-items: center; - justify-content: flex-end; + align-items: flex-start; + flex-shrink: 0; } /* Edit Button */ @@ -1572,7 +1573,48 @@ onUnmounted(() => { opacity: 0.6; cursor: not-allowed; transform: none; - box-shadow: none; +} + +/* Компактная кнопка редактирования */ +.edit-btn.compact { + background: linear-gradient(45deg, #667eea, #764ba2); + border: 1px solid rgba(102, 126, 234, 0.3); + color: white; + padding: 0.3rem 0.6rem; + border-radius: 15px; + font-size: 0.75rem; + font-weight: 500; + cursor: pointer; + transition: all 0.3s ease; + display: flex; + align-items: center; + gap: 0.3rem; + backdrop-filter: blur(10px); + box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2); + min-width: fit-content; + white-space: nowrap; +} + +.edit-btn.compact:hover { + background: linear-gradient(45deg, #5a6abf, #6a4190); + border-color: rgba(102, 126, 234, 0.5); + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25); +} + +.edit-btn.compact:disabled { + opacity: 0.6; + cursor: not-allowed; + transform: none; + box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2); +} + +.edit-btn.compact i { + font-size: 0.7rem; +} + +.edit-btn.compact .btn-text { + font-size: 0.75rem; } /* Stats Section */ @@ -2229,7 +2271,7 @@ onUnmounted(() => { .upload-zone:hover { border-color: #667eea; - background: rgba(102, 126, 234, 0.05); + background: rgba(102, 126, 234, 0.05); transform: translateY(-2px); }