From f22d6c60c53155307450cefaa958045966c0927e Mon Sep 17 00:00:00 2001 From: Alexey Khaov Date: Thu, 26 Jan 2023 01:13:01 +0300 Subject: [PATCH] Feed page fixes --- public/icons/bookmark-x.svg | 5 +- public/icons/bookmark.svg | 5 +- public/icons/comment.svg | 5 +- public/icons/feed-all.svg | 3 + public/icons/feed-collaborate.svg | 11 +++ public/icons/feed-discussion.svg | 3 + public/icons/feed-drafts.svg | 3 + public/icons/feed-my.svg | 3 + public/icons/feed-notifications.svg | 3 + public/icons/pencil-outline.svg | 5 +- public/icons/pin.svg | 7 ++ src/components/Feed/Card.module.scss | 24 ++++- src/components/Feed/Card.tsx | 61 +++++++----- src/components/Feed/Sidebar.module.scss | 60 ++++++++++++ src/components/Feed/Sidebar.tsx | 68 +++++++++---- src/components/Views/Feed.module.scss | 98 +++++++++++++++++++ src/components/Views/Feed.tsx | 49 ++++++++-- .../_shared/Popup/Popup.module.scss | 1 + src/locales/ru.json | 4 +- src/styles/Feed.scss | 89 ----------------- 20 files changed, 351 insertions(+), 156 deletions(-) create mode 100644 public/icons/feed-all.svg create mode 100644 public/icons/feed-collaborate.svg create mode 100644 public/icons/feed-discussion.svg create mode 100644 public/icons/feed-drafts.svg create mode 100644 public/icons/feed-my.svg create mode 100644 public/icons/feed-notifications.svg create mode 100644 public/icons/pin.svg create mode 100644 src/components/Feed/Sidebar.module.scss create mode 100644 src/components/Views/Feed.module.scss diff --git a/public/icons/bookmark-x.svg b/public/icons/bookmark-x.svg index 611542d8..ab24ac7c 100644 --- a/public/icons/bookmark-x.svg +++ b/public/icons/bookmark-x.svg @@ -1,3 +1,4 @@ - - + + diff --git a/public/icons/bookmark.svg b/public/icons/bookmark.svg index 9930c548..ab24ac7c 100644 --- a/public/icons/bookmark.svg +++ b/public/icons/bookmark.svg @@ -1,3 +1,4 @@ - - + + diff --git a/public/icons/comment.svg b/public/icons/comment.svg index 7fca6067..9ea76718 100644 --- a/public/icons/comment.svg +++ b/public/icons/comment.svg @@ -1,3 +1,4 @@ - - + + diff --git a/public/icons/feed-all.svg b/public/icons/feed-all.svg new file mode 100644 index 00000000..91e4730a --- /dev/null +++ b/public/icons/feed-all.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/feed-collaborate.svg b/public/icons/feed-collaborate.svg new file mode 100644 index 00000000..900af627 --- /dev/null +++ b/public/icons/feed-collaborate.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/icons/feed-discussion.svg b/public/icons/feed-discussion.svg new file mode 100644 index 00000000..b551ac5e --- /dev/null +++ b/public/icons/feed-discussion.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/feed-drafts.svg b/public/icons/feed-drafts.svg new file mode 100644 index 00000000..77aa04bc --- /dev/null +++ b/public/icons/feed-drafts.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/feed-my.svg b/public/icons/feed-my.svg new file mode 100644 index 00000000..51a98763 --- /dev/null +++ b/public/icons/feed-my.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/feed-notifications.svg b/public/icons/feed-notifications.svg new file mode 100644 index 00000000..ad127830 --- /dev/null +++ b/public/icons/feed-notifications.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/pencil-outline.svg b/public/icons/pencil-outline.svg index 25e1ded8..95eda09a 100644 --- a/public/icons/pencil-outline.svg +++ b/public/icons/pencil-outline.svg @@ -1,3 +1,4 @@ - - + + diff --git a/public/icons/pin.svg b/public/icons/pin.svg new file mode 100644 index 00000000..4b54fbdc --- /dev/null +++ b/public/icons/pin.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/Feed/Card.module.scss b/src/components/Feed/Card.module.scss index 42cc1ba0..1040119a 100644 --- a/src/components/Feed/Card.module.scss +++ b/src/components/Feed/Card.module.scss @@ -25,6 +25,10 @@ height: 1.2em; width: 100%; } + + .feedControlIcon { + max-width: 1.4em; + } } .shoutCardWithBorder { @@ -399,8 +403,7 @@ } .shoutCardFeed { - border-bottom: 1px solid #e8e8e8; - margin-bottom: 2em; + margin-bottom: 4em; .shoutCardContent { margin-bottom: 0; @@ -408,11 +411,12 @@ } .shoutCardDetails { + border-top: 3px solid #141414; display: flex; justify-content: space-between; flex-wrap: wrap; @include font-size(1.5rem); - + margin-top: 1em; padding: 1em 0 1.5em; position: relative; width: 100%; @@ -426,7 +430,12 @@ .shoutCardDetailsItem { align-items: center; display: flex; - margin-right: 1.7em; + margin-right: 1.4em; + white-space: nowrap; + + &:last-child { + margin-right: 0; + } img { vertical-align: middle; @@ -442,7 +451,8 @@ } } -.shoutCardComments { +.shoutCardComments, +.shoutCardDetailsViewed { align-items: center; display: flex; @@ -459,6 +469,10 @@ } } +.shoutCardComments { + @include font-size(1.2rem); +} + .shoutCardDetailsViewed { .icon { margin-top: -0.1em; diff --git a/src/components/Feed/Card.tsx b/src/components/Feed/Card.tsx index 27526a64..b6b46133 100644 --- a/src/components/Feed/Card.tsx +++ b/src/components/Feed/Card.tsx @@ -9,6 +9,8 @@ import { locale } from '../../stores/ui' import { clsx } from 'clsx' import { CardTopic } from './CardTopic' import { RatingControl } from '../Article/RatingControl' +import { SharePopup } from '../Article/SharePopup' +import stylesHeader from '../Nav/Header.module.scss' interface ArticleCardProps { settings?: { @@ -161,37 +163,50 @@ export const ArticleCard = (props: ArticleCardProps) => {
-
- + +
+ {stat?.viewed}
+
- - {stat?.commented || ''} + + {stat?.commented || t('Add comment')}
- -
- -
- -
- -
- +
+
+ +
+ +
+ +
+ +
+ + + + } + /> +
+ +
+ +
+
diff --git a/src/components/Feed/Sidebar.module.scss b/src/components/Feed/Sidebar.module.scss new file mode 100644 index 00000000..0e1dc67c --- /dev/null +++ b/src/components/Feed/Sidebar.module.scss @@ -0,0 +1,60 @@ +.counter { + align-items: center; + align-self: flex-start; + background: #f6f6f6; + border-radius: 0.8rem; + display: flex; + @include font-size(1.2rem); + font-weight: 500; + padding: 0.2em 0.5em; +} + +.unread { + position: relative; + + &::after { + background: #2638d9; + border-radius: 100%; + content: ''; + display: inline-block; + height: 0.5em; + left: 100%; + margin-left: 0.3em; + position: absolute; + top: 0.5em; + width: 0.5em; + } +} + +.settings { + display: flex; + justify-content: space-between; +} + +a { + img { + transition: filter 0.3s; + } + + &:hover { + img { + filter: invert(1); + } + } +} + +.icon { + display: inline-block; + line-height: 1; + height: 2rem; + margin-right: 0.5em; + vertical-align: middle; + width: 2.2rem; + + img { + height: 100%; + object-fit: contain; + object-position: center; + width: 100%; + } +} diff --git a/src/components/Feed/Sidebar.tsx b/src/components/Feed/Sidebar.tsx index f9844ad2..0d6cde87 100644 --- a/src/components/Feed/Sidebar.tsx +++ b/src/components/Feed/Sidebar.tsx @@ -7,6 +7,7 @@ import { useTopicsStore } from '../../stores/zine/topics' import { useArticlesStore } from '../../stores/zine/articles' import { useSeenStore } from '../../stores/zine/seen' import { useSession } from '../../context/session' +import styles from './Sidebar.module.scss' type FeedSidebarProps = { authors: Author[] @@ -32,30 +33,54 @@ export const FeedSidebar = (props: FeedSidebarProps) => { + + + -
+
- {t('Feed settings')} - + + {t('Feed settings')}
diff --git a/src/components/Views/Feed.module.scss b/src/components/Views/Feed.module.scss new file mode 100644 index 00000000..ba101395 --- /dev/null +++ b/src/components/Views/Feed.module.scss @@ -0,0 +1,98 @@ +.feedNavigation { + @include font-size(1.5rem); + font-weight: 500; + + h4 { + font-size: inherit; + margin-bottom: 1.6rem; + } + + ul, + li { + list-style: none; + padding: 0; + } + + ul { + margin-bottom: 3rem; + } + + li { + display: flex; + justify-content: space-between; + margin: 0 0 1rem; + + a { + margin-right: 0.5em; + } + } + + a { + border: none; + } +} + +.feedAside { + h4 { + @include font-size(2.2rem); + font-weight: bold; + text-transform: lowercase; + } +} + +.asideSection { + border: 1px solid #e9e9ee; + margin-bottom: 0.8em; + padding: 1em; +} + +.topic { + background: transparentize(#2638d9, 0.95); + display: inline-block; + font-weight: bold; + margin: 0 0.5em 0.5em 0; + padding: 0.6em 1em; + position: relative; + vertical-align: middle; + + &:hover { + background: #2638d9; + } + + a { + position: static; + + &:before { + content: ''; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } + } +} + +.pinnedLinks { + .icon { + height: 2.8rem; + width: 2.8rem; + } + + ul { + @include font-size(1.4rem); + font-weight: bold; + margin: 1rem 0 0; + line-height: 1.4; + + li { + &:last-child { + margin-bottom: 0; + } + } + } + + a { + border: none; + } +} diff --git a/src/components/Views/Feed.tsx b/src/components/Views/Feed.tsx index a2cb73d1..fda077fe 100644 --- a/src/components/Views/Feed.tsx +++ b/src/components/Views/Feed.tsx @@ -14,6 +14,10 @@ import { useAuthorsStore } from '../../stores/zine/authors' import { useTopicsStore } from '../../stores/zine/topics' import { useTopAuthorsStore } from '../../stores/zine/topAuthors' import { useSession } from '../../context/session' +import stylesArticle from '../../styles/Article.module.scss' +import stylesTopic from '../Feed/CardTopic.module.scss' +import styles from './Feed.module.scss' +import { clsx } from 'clsx' // const AUTHORSHIP_REACTIONS = [ // ReactionKind.Accept, @@ -71,9 +75,9 @@ export const FeedView = () => { return ( <> -
+
-
+
@@ -104,7 +108,7 @@ export const FeedView = () => {

{t('Popular authors')}

{t('All authors')} - +
@@ -124,21 +128,46 @@ export const FeedView = () => {
-
diff --git a/src/components/_shared/Popup/Popup.module.scss b/src/components/_shared/Popup/Popup.module.scss index 3325cc7c..16d8f85a 100644 --- a/src/components/_shared/Popup/Popup.module.scss +++ b/src/components/_shared/Popup/Popup.module.scss @@ -8,6 +8,7 @@ min-width: 144px; opacity: 1; position: absolute; + text-align: left; top: calc(100% + 8px); z-index: 100; diff --git a/src/locales/ru.json b/src/locales/ru.json index ed2035e4..5d346178 100644 --- a/src/locales/ru.json +++ b/src/locales/ru.json @@ -217,5 +217,7 @@ "slug is used by another user": "Имя уже занято другим пользователем", "It does not look like url": "Это не похоже на ссылку", "Something went wrong, please try again": "Что-то пошло не так, попробуйте еще раз", - "To write a comment, you must": "Чтобы написать комментарий, необходимо" + "To write a comment, you must": "Чтобы написать комментарий, необходимо", + "Add comment": "Комментировать", + "My subscriptions": "Подписки" } diff --git a/src/styles/Feed.scss b/src/styles/Feed.scss index 767525ac..93ce4616 100644 --- a/src/styles/Feed.scss +++ b/src/styles/Feed.scss @@ -55,95 +55,6 @@ } } -.feed-navigation { - @include font-size(1.7rem); - - h4 { - font-size: inherit; - margin-bottom: 1.6rem; - } - - ul, - li { - list-style: none; - margin: 0 0 1.6rem; - padding: 0; - } - - ul { - border-bottom: 1px solid #e8e8e8; - } - - li { - display: flex; - justify-content: space-between; - - a { - margin-right: 0.5em; - } - } - - a { - border: none; - } - - .counter { - align-items: center; - align-self: flex-start; - background: #f6f6f6; - color: #6b7280; - display: flex; - @include font-size(1.2rem); - - font-weight: 500; - padding: 0.2em 0.5em; - } - - .unread { - position: relative; - - &::after { - background: #2638d9; - border-radius: 100%; - content: ''; - display: inline-block; - height: 0.5em; - left: 100%; - margin-left: 0.3em; - position: absolute; - top: 0.5em; - width: 0.5em; - } - } - - .settings { - display: flex; - justify-content: space-between; - - img { - transition: filter 0.3s; - } - - a { - margin-right: 0.3em; - - &:hover { - img { - filter: invert(1); - } - } - } - - .icon { - display: inline-block; - line-height: 1; - margin-left: 0.3em; - vertical-align: middle; - width: 1em; - } - } -} - .feed-filter { display: flex; @include font-size(1.7rem);