diff --git a/frontend/src/components/FollowListModal.css b/frontend/src/components/FollowListModal.css index 443248e..7a01ba2 100644 --- a/frontend/src/components/FollowListModal.css +++ b/frontend/src/components/FollowListModal.css @@ -103,11 +103,12 @@ } .user-item-wrapper { - padding: 8px 16px; + padding: 12px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.03); + min-height: 70px; } .user-item-wrapper:last-child { @@ -128,6 +129,7 @@ border-radius: 0; position: relative; flex: 1; + min-width: 0; min-height: 54px; } @@ -152,39 +154,44 @@ min-width: 0; display: flex; flex-direction: column; - gap: 2px; + gap: 4px; text-align: left; align-items: flex-start; justify-content: center; + overflow: hidden; } .follow-list-modal .user-name { font-size: 15px !important; font-weight: 600; color: var(--text-primary); - line-height: 1.3; + line-height: 1.4; + width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + display: block; } .follow-list-modal .user-username { - font-size: 14px !important; + font-size: 13px !important; color: var(--text-secondary); - line-height: 1.3; + line-height: 1.4; + width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + display: block; } /* Follow Button Icon */ .follow-btn-icon { - width: 54px !important; - height: 54px !important; - min-width: 54px !important; - min-height: 54px !important; - max-width: 54px !important; - max-height: 54px !important; + width: 48px !important; + height: 48px !important; + min-width: 48px !important; + min-height: 48px !important; + max-width: 48px !important; + max-height: 48px !important; border-radius: 50%; background: var(--bg-primary); color: var(--text-primary); @@ -195,6 +202,7 @@ cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; + margin-left: auto; } .follow-btn-icon:active { diff --git a/frontend/src/components/PostCard.css b/frontend/src/components/PostCard.css index 6aea3f5..5d47e80 100644 --- a/frontend/src/components/PostCard.css +++ b/frontend/src/components/PostCard.css @@ -256,6 +256,36 @@ opacity: 0.8; } +/* Зоны для переключения изображений в ленте */ +.carousel-zone { + position: absolute; + top: 0; + bottom: 0; + z-index: 3; + pointer-events: auto; +} + +.carousel-zone-left { + left: 0; + width: 40%; +} + +.carousel-zone-right { + right: 0; + width: 35%; +} + +.carousel-zone-center { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 2; + pointer-events: auto; + cursor: pointer; +} + /* Fullview модал */ .image-fullview { position: fixed; @@ -345,6 +375,25 @@ pointer-events: none; } +/* Зоны для переключения изображений в fullview */ +.fullview-zone { + position: absolute; + top: 0; + bottom: 0; + z-index: 5; + pointer-events: auto; +} + +.fullview-zone-left { + left: 0; + width: 40%; +} + +.fullview-zone-right { + right: 0; + width: 35%; +} + .fullview-nav-btn { position: absolute; top: 50%; @@ -361,6 +410,8 @@ transition: background 0.2s, opacity 0.2s; z-index: 10; pointer-events: auto; + border: none; + cursor: pointer; } .fullview-nav-btn.prev { @@ -375,6 +426,10 @@ background: rgba(0, 0, 0, 0.7); } +.fullview-nav-btn:disabled { + cursor: not-allowed; +} + .fullview-dots { position: fixed; bottom: 0; diff --git a/frontend/src/components/PostCard.jsx b/frontend/src/components/PostCard.jsx index 77a895c..f882cd7 100644 --- a/frontend/src/components/PostCard.jsx +++ b/frontend/src/components/PostCard.jsx @@ -197,23 +197,58 @@ export default function PostCard({ post, currentUser, onUpdate }) { {/* Изображения */} {images.length > 0 && (
-
+
{`Image - {images.length > 1 && ( -
- {images.map((_, index) => ( - { e.stopPropagation(); setCurrentImageIndex(index); }} - /> - ))} -
+ {images.length > 1 ? ( + <> + {/* Левая зона для переключения на предыдущее изображение */} +
{ + e.stopPropagation() + if (currentImageIndex > 0) { + handlePrev() + } + }} + style={{ cursor: currentImageIndex > 0 ? 'pointer' : 'default' }} + /> + + {/* Правая зона для переключения на следующее изображение */} +
{ + e.stopPropagation() + if (currentImageIndex < images.length - 1) { + handleNext() + } + }} + style={{ cursor: currentImageIndex < images.length - 1 ? 'pointer' : 'default' }} + /> + +
+ {images.map((_, index) => ( + { e.stopPropagation(); setCurrentImageIndex(index); }} + /> + ))} +
+ + ) : ( + /* Если одно изображение, вся область открывает fullview */ +
{ + e.stopPropagation() + openFullView() + }} + /> )} {/* Индикатор что можно открыть fullview */} -
+
{ e.stopPropagation(); openFullView(); }}>
@@ -318,17 +353,46 @@ export default function PostCard({ post, currentUser, onUpdate }) { {images.length > 1 && ( <> - {currentImageIndex > 0 && ( - - )} + {/* Левая зона для переключения на предыдущее изображение */} +
{ + e.stopPropagation() + if (currentImageIndex > 0) { + handlePrev() + } + }} + /> - {currentImageIndex < images.length - 1 && ( - - )} + {/* Правая зона для переключения на следующее изображение */} +
{ + e.stopPropagation() + if (currentImageIndex < images.length - 1) { + handleNext() + } + }} + /> + + {/* Кнопки навигации - всегда видимые, но неактивные когда нельзя переключить */} + + + )}
diff --git a/frontend/src/pages/UserProfile.css b/frontend/src/pages/UserProfile.css index d49da5a..4e86e4b 100644 --- a/frontend/src/pages/UserProfile.css +++ b/frontend/src/pages/UserProfile.css @@ -94,6 +94,41 @@ border-top: 1px solid var(--divider-color); } +.stat-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + cursor: pointer; + transition: opacity 0.2s; + flex: 1; + max-width: 120px; +} + +.stat-item:active { + opacity: 0.7; +} + +.stat-value { + font-size: 20px; + font-weight: 700; + color: var(--text-primary); + line-height: 1.2; +} + +.stat-label { + font-size: 14px; + color: var(--text-secondary); + line-height: 1.2; +} + +.stat-divider { + width: 1px; + height: 40px; + background: var(--divider-color); + flex-shrink: 0; +} + .follow-btn { width: 100%; padding: 12px;