From c907e6ffa59fec60f369fe6588d8fd67b7cb7ad4 Mon Sep 17 00:00:00 2001 From: kvakazyambra Date: Tue, 30 Apr 2024 16:16:30 +0300 Subject: [PATCH 1/6] Header navigation style fixes --- src/components/Nav/Header/Header.module.scss | 11 +++++++++-- src/components/Nav/Header/Header.tsx | 3 ++- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/Nav/Header/Header.module.scss b/src/components/Nav/Header/Header.module.scss index 010a8164..2cfdc2f9 100644 --- a/src/components/Nav/Header/Header.module.scss +++ b/src/components/Nav/Header/Header.module.scss @@ -425,7 +425,7 @@ width: 100%; @include media-breakpoint-up(xl) { - right: 9rem; + right: 1.4rem; } .control { @@ -457,6 +457,12 @@ } } +.articleControlsAuthorized { + @include media-breakpoint-up(xl) { + right: 9rem; + } +} + .userControl { align-items: center; display: flex; @@ -484,7 +490,8 @@ } .editorControl { - border-radius: 1.2em; + border-radius: 2em; + font-size: 1.4rem !important; &:hover { background: var(--background-color-invert); diff --git a/src/components/Nav/Header/Header.tsx b/src/components/Nav/Header/Header.tsx index 7c0258e1..a8391bf3 100644 --- a/src/components/Nav/Header/Header.tsx +++ b/src/components/Nav/Header/Header.tsx @@ -59,6 +59,7 @@ export const Header = (props: Props) => { const [isTopicsVisible, setIsTopicsVisible] = createSignal(false) const [isZineVisible, setIsZineVisible] = createSignal(false) const [isFeedVisible, setIsFeedVisible] = createSignal(false) + const { isAuthenticated } = useSession() const toggleFixed = () => setFixed(!fixed()) @@ -330,7 +331,7 @@ export const Header = (props: Props) => { -
+
Date: Tue, 30 Apr 2024 16:21:56 +0300 Subject: [PATCH 2/6] Fixed style setting --- src/components/Nav/Header/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Nav/Header/Header.tsx b/src/components/Nav/Header/Header.tsx index a8391bf3..3f33bb4a 100644 --- a/src/components/Nav/Header/Header.tsx +++ b/src/components/Nav/Header/Header.tsx @@ -331,7 +331,7 @@ export const Header = (props: Props) => {
-
+
Date: Tue, 30 Apr 2024 16:26:31 +0300 Subject: [PATCH 3/6] Fixed code style --- src/components/Nav/Header/Header.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Nav/Header/Header.tsx b/src/components/Nav/Header/Header.tsx index 3f33bb4a..312a6e1f 100644 --- a/src/components/Nav/Header/Header.tsx +++ b/src/components/Nav/Header/Header.tsx @@ -331,7 +331,11 @@ export const Header = (props: Props) => {
-
+
Date: Tue, 30 Apr 2024 17:27:38 +0300 Subject: [PATCH 4/6] Fixed paddings in the header --- src/components/Nav/Header/Header.module.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/Nav/Header/Header.module.scss b/src/components/Nav/Header/Header.module.scss index 2cfdc2f9..33ab5b6e 100644 --- a/src/components/Nav/Header/Header.module.scss +++ b/src/components/Nav/Header/Header.module.scss @@ -298,10 +298,6 @@ box-sizing: content-box; display: inline-flex; - @include media-breakpoint-up(sm) { - padding-left: divide($container-padding-x, 2); - } - @include media-breakpoint-up(lg) { display: none; } @@ -458,6 +454,8 @@ } .articleControlsAuthorized { + right: 3.6rem; + @include media-breakpoint-up(xl) { right: 9rem; } From a4d6466392091b137cce1e23b0171989ed1dffc0 Mon Sep 17 00:00:00 2001 From: kvakazyambra Date: Tue, 30 Apr 2024 18:58:27 +0300 Subject: [PATCH 5/6] Fixed scrolling to comments (#449) --- .../Article/Comment/Comment.module.scss | 4 +++ .../CommentDate/CommentDate.module.scss | 5 +--- src/components/Article/FullArticle.tsx | 28 +++++++++---------- 3 files changed, 19 insertions(+), 18 deletions(-) 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' From 04978ebc7c19e37c94800b478d90f56b714ebeef Mon Sep 17 00:00:00 2001 From: kvakazyambra Date: Tue, 30 Apr 2024 20:22:44 +0300 Subject: [PATCH 6/6] Feed style fixes (#450) * Feed style fixes * Change subscriptions list icon --- public/icons/feed-all.svg | 2 +- public/icons/toggle-arrow.svg | 3 +++ public/locales/ru/translation.json | 4 ++-- .../Feed/Sidebar/Sidebar.module.scss | 24 ++++++++++++------- src/components/Feed/Sidebar/Sidebar.tsx | 1 + src/components/Views/Feed/Feed.module.scss | 2 +- 6 files changed, 23 insertions(+), 13 deletions(-) create mode 100644 public/icons/toggle-arrow.svg 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 13ba2de4..8df3deff 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/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')} +
    diff --git a/src/components/Views/Feed/Feed.module.scss b/src/components/Views/Feed/Feed.module.scss index 27a3854b..3cb18604 100644 --- a/src/components/Views/Feed/Feed.module.scss +++ b/src/components/Views/Feed/Feed.module.scss @@ -170,7 +170,7 @@ } } -.commentArticleTitle { +.comment .commentArticleTitle { line-clamp: 1; -webkit-line-clamp: 1;