diff --git a/public/icons/feed-all.svg b/public/icons/feed-all.svg index 486d1409..629f6105 100644 --- a/public/icons/feed-all.svg +++ b/public/icons/feed-all.svg @@ -1,3 +1,3 @@ - + diff --git a/public/icons/toggle-arrow.svg b/public/icons/toggle-arrow.svg new file mode 100644 index 00000000..fb552529 --- /dev/null +++ b/public/icons/toggle-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index 51cdead0..2dc94b46 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -31,7 +31,7 @@ "All posts rating": "Рейтинг всех постов", "All posts": "Все публикации", "All topics": "Все темы", - "All": "Все", + "All": "Общая лента", "Almost done! Check your email.": "Почти готово! Осталось подтвердить вашу почту.", "Are you sure you want to delete this comment?": "Уверены, что хотите удалить этот комментарий?", "Are you sure you want to delete this draft?": "Уверены, что хотите удалить этот черновик?", @@ -156,7 +156,7 @@ "FAQ": "Советы и предложения", "Favorite topics": "Избранные темы", "Favorite": "Избранное", - "Feed settings": "Настройки ленты", + "Feed settings": "Настроить ленту", "Feed": "Лента", "Feedback": "Обратная связь", "Fill email": "Введите почту", diff --git a/src/components/Article/Comment/Comment.module.scss b/src/components/Article/Comment/Comment.module.scss index 50170022..0191442c 100644 --- a/src/components/Article/Comment/Comment.module.scss +++ b/src/components/Article/Comment/Comment.module.scss @@ -179,6 +179,10 @@ @include font-size(1.2rem); } +.commentAuthor { + margin-right: 2rem; +} + .articleAuthor { @include font-size(1.2rem); diff --git a/src/components/Article/CommentDate/CommentDate.module.scss b/src/components/Article/CommentDate/CommentDate.module.scss index 50cf7d57..c648cca1 100644 --- a/src/components/Article/CommentDate/CommentDate.module.scss +++ b/src/components/Article/CommentDate/CommentDate.module.scss @@ -3,14 +3,11 @@ color: var(--secondary-color); display: flex; - align-items: flex-start; - justify-content: flex-start; + justify-content: center; flex-direction: column; - gap: .5rem; flex: 1; flex-wrap: wrap; font-size: 1.2rem; - margin-bottom: .5rem; .date { font-weight: 500; diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index bc7fd403..25001f38 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -60,7 +60,7 @@ export type ArticlePageSearchParams = { const scrollTo = (el: HTMLElement) => { const { top } = el.getBoundingClientRect() window.scrollTo({ - top: top - DEFAULT_HEADER_OFFSET, + top: top + window.scrollY - DEFAULT_HEADER_OFFSET, left: 0, behavior: 'smooth', }) @@ -152,19 +152,6 @@ export const FullArticle = (props: Props) => { current: HTMLDivElement } = { current: null } - createEffect(() => { - if (props.scrollToComments) { - scrollTo(commentsRef.current) - } - }) - - createEffect(() => { - if (searchParams()?.scrollTo === 'comments' && commentsRef.current) { - requestAnimationFrame(() => scrollTo(commentsRef.current)) - changeSearchParams({ scrollTo: null }) - } - }) - createEffect(() => { if (searchParams().commentId && isReactionsLoaded()) { const commentElement = document.querySelector( @@ -320,6 +307,19 @@ export const FullArticle = (props: Props) => { window?.addEventListener('resize', updateIframeSizes) onCleanup(() => window.removeEventListener('resize', updateIframeSizes)) + + createEffect(() => { + if (props.scrollToComments) { + scrollTo(commentsRef.current) + } + }) + + createEffect(() => { + if (searchParams()?.scrollTo === 'comments' && commentsRef.current) { + requestAnimationFrame(() => scrollTo(commentsRef.current)) + changeSearchParams({ scrollTo: null }) + } + }) }) const cover = props.article.cover ?? 'production/image/logo_image.png' diff --git a/src/components/Feed/Sidebar/Sidebar.module.scss b/src/components/Feed/Sidebar/Sidebar.module.scss index e6675249..6ae8bda9 100644 --- a/src/components/Feed/Sidebar/Sidebar.module.scss +++ b/src/components/Feed/Sidebar/Sidebar.module.scss @@ -84,6 +84,10 @@ @include media-breakpoint-down(sm) { right: 2px; } + + a { + border: none; + } } .settingsLabel { @@ -136,20 +140,22 @@ text-transform: uppercase; position: relative; - &::after { - content: '+'; - font-size: 1.6em; - line-height: 1; + .icon { + margin: 0; + min-width: 1.8rem; position: absolute; - right: 2.5rem; - top: -0.2em; + right: 1.7rem; + top: 50%; + transform: translateY(-50%) rotate(180deg); + transform-origin: center; transition: transform 0.3s; + width: 1.8rem; } &.opened { - &::after { - right: 0.9rem; - transform: rotate(45deg); + .icon { + right: 0; + transform: translateY(-50%); } } } diff --git a/src/components/Feed/Sidebar/Sidebar.tsx b/src/components/Feed/Sidebar/Sidebar.tsx index 9fed7c61..213589ef 100644 --- a/src/components/Feed/Sidebar/Sidebar.tsx +++ b/src/components/Feed/Sidebar/Sidebar.tsx @@ -119,6 +119,7 @@ export const Sidebar = () => { }} > {t('My subscriptions')} +