From 70e084c0db73398deff1f66f941d7c8c374108ab Mon Sep 17 00:00:00 2001 From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com> Date: Mon, 25 Dec 2023 14:35:04 +0300 Subject: [PATCH 1/6] aspect ratio in Expo (#347) --- .../Feed/ArticleCard/ArticleCard.module.scss | 20 ++++++++++++++++++- .../Feed/ArticleCard/ArticleCard.tsx | 19 +++++++++++++++++- src/components/Views/Expo/Expo.tsx | 4 +++- 3 files changed, 40 insertions(+), 3 deletions(-) diff --git a/src/components/Feed/ArticleCard/ArticleCard.module.scss b/src/components/Feed/ArticleCard/ArticleCard.module.scss index 3c5b70b4..9775243c 100644 --- a/src/components/Feed/ArticleCard/ArticleCard.module.scss +++ b/src/components/Feed/ArticleCard/ArticleCard.module.scss @@ -107,7 +107,7 @@ height: 0; margin-bottom: 1.6rem; overflow: hidden; - padding-bottom: 56.2%; + padding-bottom: 56.2%; //16:9 position: relative; transform-origin: 50% 50%; transition: transform 1s ease-in-out; @@ -267,6 +267,24 @@ } } +.aspectRatio1x1 { + .shoutCardCover { + padding-bottom: 100%; + } +} + +.aspectRatio4x3 { + .shoutCardCover { + padding-bottom: 75%; + } +} + +.aspectRatio16x9 { + .shoutCardCover { + padding-bottom: 56.25%; + } +} + .shoutCardType { height: 3.2rem; position: absolute; diff --git a/src/components/Feed/ArticleCard/ArticleCard.tsx b/src/components/Feed/ArticleCard/ArticleCard.tsx index f656c8a7..951ea08c 100644 --- a/src/components/Feed/ArticleCard/ArticleCard.tsx +++ b/src/components/Feed/ArticleCard/ArticleCard.tsx @@ -46,6 +46,7 @@ export type ArticleCardProps = { withViewed?: boolean noAuthorLink?: boolean } + withAspectRatio?: boolean desktopCoverSize?: 'XS' | 'S' | 'M' | 'L' article: Shout } @@ -112,6 +113,22 @@ export const ArticleCard = (props: ArticleCardProps) => { const [isCoverImageLoading, setIsCoverImageLoading] = createSignal(true) const description = getDescription(props.article.body) + + const aspectRatio = () => { + switch (props.article.layout) { + case 'music': { + return styles.aspectRatio1x1 + } + case 'image': { + return styles.aspectRatio4x3 + } + case 'video': + case 'literature': { + return styles.aspectRatio16x9 + } + } + } + return (
{ [styles.shoutCardSingle]: props.settings?.isSingle, [styles.shoutCardBeside]: props.settings?.isBeside, [styles.shoutCardNoImage]: !props.article.cover, + [aspectRatio()]: props.withAspectRatio, })} > @@ -154,7 +172,6 @@ export const ArticleCard = (props: ArticleCardProps) => { -
{ const handleLoadMoreClick = () => { loadMoreWithoutScrolling(LOAD_MORE_PAGE_SIZE) } - return (
0} fallback={}> @@ -206,6 +205,7 @@ export const Expo = (props: Props) => { article={shout} settings={{ nodate: true, nosubtitle: true, noAuthorLink: true }} desktopCoverSize="XS" + withAspectRatio={true} />
)} @@ -220,6 +220,7 @@ export const Expo = (props: Props) => { article={shout} settings={{ nodate: true, nosubtitle: true, noAuthorLink: true }} desktopCoverSize="XS" + withAspectRatio={true} />
)} @@ -236,6 +237,7 @@ export const Expo = (props: Props) => { article={shout} settings={{ nodate: true, nosubtitle: true, noAuthorLink: true }} desktopCoverSize="XS" + withAspectRatio={true} /> )} From 41b5560036d663a48277b38fb9475b4316398ad4 Mon Sep 17 00:00:00 2001 From: Igor Lobanov Date: Mon, 25 Dec 2023 16:07:12 +0100 Subject: [PATCH 2/6] random topic fixes (#348) --- src/components/Views/Home.module.scss | 1 - src/components/Views/Home.tsx | 3 ++- src/pages/topic.page.server.ts | 2 +- src/pages/topic.page.tsx | 6 +++++- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/Views/Home.module.scss b/src/components/Views/Home.module.scss index 0f44ea68..b4a4ae37 100644 --- a/src/components/Views/Home.module.scss +++ b/src/components/Views/Home.module.scss @@ -9,7 +9,6 @@ font-size: 40px; font-weight: 700; line-height: 44px; - text-transform: capitalize; } .randomTopicHeaderLink { diff --git a/src/components/Views/Home.tsx b/src/components/Views/Home.tsx index ab13db72..137724cb 100644 --- a/src/components/Views/Home.tsx +++ b/src/components/Views/Home.tsx @@ -14,6 +14,7 @@ import { import { useTopAuthorsStore } from '../../stores/zine/topAuthors' import { useTopicsStore } from '../../stores/zine/topics' import { apiClient } from '../../utils/apiClient' +import { capitalize } from '../../utils/capitalize' import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll' import { splitToPages } from '../../utils/splitToPages' import { Icon } from '../_shared/Icon' @@ -134,7 +135,7 @@ export const HomeView = (props: Props) => { articles={randomTopicArticles()} header={
-
{randomTopic().title}
+
{capitalize(randomTopic().title, true)}
{ } const topicShouts = await apiClient.getShouts({ - filters: { topic: topic.slug }, + filters: { topic: topic.slug, visibility: 'public' }, limit: PRERENDERED_ARTICLES_COUNT, }) diff --git a/src/pages/topic.page.tsx b/src/pages/topic.page.tsx index 573a3605..424e927b 100644 --- a/src/pages/topic.page.tsx +++ b/src/pages/topic.page.tsx @@ -20,7 +20,11 @@ export const TopicPage = (props: PageProps) => { const preload = () => Promise.all([ - loadShouts({ filters: { topic: slug() }, limit: PRERENDERED_ARTICLES_COUNT, offset: 0 }), + loadShouts({ + filters: { topic: slug(), visibility: 'public' }, + limit: PRERENDERED_ARTICLES_COUNT, + offset: 0, + }), loadTopic({ slug: slug() }), ]) From 11d3a6c27410f0561de243fced241dd0347370e0 Mon Sep 17 00:00:00 2001 From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com> Date: Fri, 29 Dec 2023 09:39:16 +0300 Subject: [PATCH 3/6] Markup for mobile fix-pack (#349) * mediaQuery context provider * Fix header styles * User list markup fix --- src/components/App.tsx | 25 +++-- .../AuthorBadge/AuthorBadge.module.scss | 1 - .../Author/AuthorBadge/AuthorBadge.tsx | 18 ++- .../Author/AuthorCard/AuthorCard.tsx | 5 +- src/components/Nav/Header/Header.module.scss | 4 +- src/components/Nav/Header/Header.tsx | 12 +- src/components/Nav/Modal/Modal.module.scss | 24 +++- src/components/Nav/Modal/Modal.tsx | 28 ++++- src/components/Nav/Topics/Topics.module.scss | 2 + .../Topic/TopicBadge/TopicBadge.module.scss | 49 ++++----- .../Topic/TopicBadge/TopicBadge.tsx | 103 +++++++++--------- src/components/Views/AllAuthors.module.scss | 5 + .../SearchField/SearchField.module.scss | 1 + src/context/mediaQuery.tsx | 31 ++++++ 14 files changed, 198 insertions(+), 110 deletions(-) create mode 100644 src/context/mediaQuery.tsx diff --git a/src/components/App.tsx b/src/components/App.tsx index f6a22fe1..7d3b3bdc 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -7,6 +7,7 @@ import { Dynamic } from 'solid-js/web' import { ConfirmProvider } from '../context/confirm' import { EditorProvider } from '../context/editor' import { LocalizeProvider } from '../context/localize' +import { MediaQueryProvider } from '../context/mediaQuery' import { NotificationsProvider } from '../context/notifications' import { SessionProvider } from '../context/session' import { SnackbarProvider } from '../context/snackbar' @@ -115,17 +116,19 @@ export const App = (props: Props) => { - - - - - - - - - - - + + + + + + + + + + + + + ) diff --git a/src/components/Author/AuthorBadge/AuthorBadge.module.scss b/src/components/Author/AuthorBadge/AuthorBadge.module.scss index f119cb5d..0863304e 100644 --- a/src/components/Author/AuthorBadge/AuthorBadge.module.scss +++ b/src/components/Author/AuthorBadge/AuthorBadge.module.scss @@ -2,7 +2,6 @@ align-items: flex-start; display: flex; gap: 1rem; - margin-bottom: 3rem; &.nameOnly { align-items: center; diff --git a/src/components/Author/AuthorBadge/AuthorBadge.tsx b/src/components/Author/AuthorBadge/AuthorBadge.tsx index b744df32..af053079 100644 --- a/src/components/Author/AuthorBadge/AuthorBadge.tsx +++ b/src/components/Author/AuthorBadge/AuthorBadge.tsx @@ -1,8 +1,9 @@ import { openPage } from '@nanostores/router' import { clsx } from 'clsx' -import { createMemo, createSignal, Match, Show, Switch } from 'solid-js' +import { createEffect, createMemo, createSignal, Match, Show, Switch } from 'solid-js' import { useLocalize } from '../../../context/localize' +import { useMediaQuery } from '../../../context/mediaQuery' import { useSession } from '../../../context/session' import { Author, FollowingEntity } from '../../../graphql/types.gen' import { router, useRouter } from '../../../stores/router' @@ -23,7 +24,14 @@ type Props = { nameOnly?: boolean } export const AuthorBadge = (props: Props) => { + const { mediaMatches } = useMediaQuery() + const [isMobileView, setIsMobileView] = createSignal(false) const [isSubscribing, setIsSubscribing] = createSignal(false) + + createEffect(() => { + setIsMobileView(!mediaMatches.sm) + }) + const { session, subscriptions, @@ -65,7 +73,7 @@ export const AuthorBadge = (props: Props) => {
{ fallback={
- + +
) } diff --git a/src/components/Views/AllAuthors.module.scss b/src/components/Views/AllAuthors.module.scss index e1f6f06f..94d4302c 100644 --- a/src/components/Views/AllAuthors.module.scss +++ b/src/components/Views/AllAuthors.module.scss @@ -75,4 +75,9 @@ .viewSwitcher { margin-bottom: 2rem; + width: 100%; + + @include media-breakpoint-down(sm) { + overflow-x: auto; + } } diff --git a/src/components/_shared/SearchField/SearchField.module.scss b/src/components/_shared/SearchField/SearchField.module.scss index 03811331..5f0ff538 100644 --- a/src/components/_shared/SearchField/SearchField.module.scss +++ b/src/components/_shared/SearchField/SearchField.module.scss @@ -2,6 +2,7 @@ display: flex; justify-content: flex-end; position: relative; + min-width: 100px; &.bordered { border: 2px solid var(--black-100); diff --git a/src/context/mediaQuery.tsx b/src/context/mediaQuery.tsx new file mode 100644 index 00000000..37a444e5 --- /dev/null +++ b/src/context/mediaQuery.tsx @@ -0,0 +1,31 @@ +import type { JSX } from 'solid-js' + +import { createBreakpoints } from '@solid-primitives/media' +import { createContext, useContext } from 'solid-js' + +const breakpoints = { + xs: '0', + sm: '576px', + md: '768px', + lg: '992px', + xl: '1200px', + xxl: '1400px', +} + +type MediaQueryContextType = { + mediaMatches: ReturnType +} + +const MediaQueryContext = createContext() + +export function useMediaQuery() { + return useContext(MediaQueryContext) +} + +export const MediaQueryProvider = (props: { children: JSX.Element }) => { + const mediaMatches = createBreakpoints(breakpoints) + + const value: MediaQueryContextType = { mediaMatches } + + return {props.children} +} From a2b449502ac11e23a5092ece782c080ba7f612b4 Mon Sep 17 00:00:00 2001 From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com> Date: Fri, 29 Dec 2023 14:07:48 +0300 Subject: [PATCH 4/6] Share popup update (#350) * Share popup update * Remove shared link * Cleanup code * Cleanup code * Cleanup code * Cleanup code --- public/icons/lightning.svg | 3 + public/locales/en/translation.json | 1 + public/locales/ru/translation.json | 1 + src/components/Article/FullArticle.tsx | 1 - src/components/Article/SharePopup.tsx | 6 +- .../Feed/ArticleCard/ArticleCard.tsx | 3 - .../Feed/FeedArticlePopup.module.scss | 25 ---- src/components/Feed/FeedArticlePopup.tsx | 115 ------------------ .../FeedArticlePopup.module.scss | 48 ++++++++ .../FeedArticlePopup/FeedArticlePopup.tsx | 92 ++++++++++++++ src/components/Feed/FeedArticlePopup/index.ts | 1 + .../InviteCoAuthorsModal.tsx | 7 +- src/components/_shared/Popup/Popup.tsx | 2 - .../_shared/SoonChip/SoonChip.module.scss | 23 ++++ src/components/_shared/SoonChip/SoonChip.tsx | 20 +++ src/components/_shared/SoonChip/index.ts | 1 + 16 files changed, 198 insertions(+), 151 deletions(-) create mode 100644 public/icons/lightning.svg delete mode 100644 src/components/Feed/FeedArticlePopup.module.scss delete mode 100644 src/components/Feed/FeedArticlePopup.tsx create mode 100644 src/components/Feed/FeedArticlePopup/FeedArticlePopup.module.scss create mode 100644 src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx create mode 100644 src/components/Feed/FeedArticlePopup/index.ts create mode 100644 src/components/_shared/SoonChip/SoonChip.module.scss create mode 100644 src/components/_shared/SoonChip/SoonChip.tsx create mode 100644 src/components/_shared/SoonChip/index.ts diff --git a/public/icons/lightning.svg b/public/icons/lightning.svg new file mode 100644 index 00000000..11ddae16 --- /dev/null +++ b/public/icons/lightning.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index e21cda3a..18ee20fa 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -336,6 +336,7 @@ "Something went wrong, please try again": "Something went wrong, please try again", "Song lyrics": "Song lyrics...", "Song title": "Song title", + "Soon": "Скоро", "Sorry, this address is already taken, please choose another one.": "Sorry, this address is already taken, please choose another one", "Special Projects": "Special Projects", "Special projects": "Special projects", diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index 38acbca2..50714efd 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -355,6 +355,7 @@ "Something went wrong, please try again": "Что-то пошло не так, попробуйте еще раз", "Song lyrics": "Текст песни...", "Song title": "Название песни", + "Soon": "Скоро", "Sorry, this address is already taken, please choose another one.": "Увы, этот адрес уже занят, выберите другой", "Special Projects": "Спецпроекты", "Special projects": "Спецпроекты", diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index 2fc420ce..79a6ea20 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -495,7 +495,6 @@ export const FullArticle = (props: Props) => { title={props.article.title} description={description} imageUrl={props.article.cover} - shareUrl={getShareUrl({ pathname: `/${props.article.slug}` })} trigger={ - - -
  • - -
    • -     -
  • - -
    • - -
  • - -
    • -     -
  • - -
    • - -
  • - -
    • -     -
  • - -
    • - - - ) -} diff --git a/src/components/Feed/FeedArticlePopup/FeedArticlePopup.module.scss b/src/components/Feed/FeedArticlePopup/FeedArticlePopup.module.scss new file mode 100644 index 00000000..c983fe14 --- /dev/null +++ b/src/components/Feed/FeedArticlePopup/FeedArticlePopup.module.scss @@ -0,0 +1,48 @@ +.feedArticlePopup { + box-shadow: none !important; + border: 1px solid rgb(0 0 0 / 15%); + border-radius: 1.6rem; + padding: 0 !important; + text-align: left; + overflow: hidden; + + @include media-breakpoint-down(md) { + left: auto !important; + right: 0; + transform: none !important; + } + + .actionList { + & > li { + margin-bottom: 0 !important; + } + + .action { + display: flex; + align-items: center; + width: 100%; + box-sizing: border-box; + padding: 8px 16px; + font-size: inherit; + font-weight: 500; + text-align: left; + white-space: nowrap; + + &.soon { + color: var(--black-300); + } + + &:hover { + background: var(--black-500); + color: var(--black-50) !important; + } + } + + li:first-child .action { + padding-top: 16px; + } + li:last-child .action { + padding-bottom: 16px; + } + } +} diff --git a/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx b/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx new file mode 100644 index 00000000..3e237307 --- /dev/null +++ b/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx @@ -0,0 +1,92 @@ +import type { PopupProps } from '../../_shared/Popup' + +import { clsx } from 'clsx' +import { createEffect, createSignal, Show } from 'solid-js' + +import { useLocalize } from '../../../context/localize' +import { showModal } from '../../../stores/ui' +import { InviteCoAuthorsModal } from '../../_shared/InviteCoAuthorsModal' +import { Popup } from '../../_shared/Popup' +import { SoonChip } from '../../_shared/SoonChip' + +import styles from './FeedArticlePopup.module.scss' + +type FeedArticlePopupProps = { + title: string + imageUrl: string + isOwner: boolean + description: string +} & Omit + +export const FeedArticlePopup = (props: FeedArticlePopupProps) => { + const { t } = useLocalize() + return ( + <> + +
      + +
    • + +
      • +       +
    • + +
      • + +
    • + +
      • +       +
    • + +
      • + {/**/} + {/*
    • */} + {/* {*/} + {/* alert('Report')*/} + {/* }}*/} + {/* >*/} + {/* {t('Report')}*/} + {/* */} + {/*
      • */} + {/*      */} + {/*
    • */} + {/* {*/} + {/* alert('Get notifications')*/} + {/* }}*/} + {/* >*/} + {/* {t('Get notifications')}*/} + {/* */} + {/*
      • */} +
    +     + + + ) +} diff --git a/src/components/Feed/FeedArticlePopup/index.ts b/src/components/Feed/FeedArticlePopup/index.ts new file mode 100644 index 00000000..35792480 --- /dev/null +++ b/src/components/Feed/FeedArticlePopup/index.ts @@ -0,0 +1 @@ +export { FeedArticlePopup } from './FeedArticlePopup' diff --git a/src/components/_shared/InviteCoAuthorsModal/InviteCoAuthorsModal.tsx b/src/components/_shared/InviteCoAuthorsModal/InviteCoAuthorsModal.tsx index 39ca4eb8..859c295b 100644 --- a/src/components/_shared/InviteCoAuthorsModal/InviteCoAuthorsModal.tsx +++ b/src/components/_shared/InviteCoAuthorsModal/InviteCoAuthorsModal.tsx @@ -2,12 +2,15 @@ import { useLocalize } from '../../../context/localize' import { Modal } from '../../Nav/Modal' import { UserSearch } from '../UserSearch' -export const InviteCoAuthorsModal = () => { +type Props = { + title?: string +} +export const InviteCoAuthorsModal = (props: Props) => { const { t } = useLocalize() return ( -

    {t('Invite collaborators')}

    +

    {props.title || t('Invite collaborators')}

    {}} />     ) diff --git a/src/components/_shared/Popup/Popup.tsx b/src/components/_shared/Popup/Popup.tsx index f9cb0902..c0b04aec 100644 --- a/src/components/_shared/Popup/Popup.tsx +++ b/src/components/_shared/Popup/Popup.tsx @@ -36,9 +36,7 @@ export const Popup = (props: PopupProps) => { setIsVisible(false) }, }) - const toggle = () => setIsVisible((oldVisible) => !oldVisible) - return ( (containerRef.current = el)}> diff --git a/src/components/_shared/SoonChip/SoonChip.module.scss b/src/components/_shared/SoonChip/SoonChip.module.scss new file mode 100644 index 00000000..7a96f725 --- /dev/null +++ b/src/components/_shared/SoonChip/SoonChip.module.scss @@ -0,0 +1,23 @@ +.SoonChip { + @include font-size(1.2rem); + + display: inline-flex; + align-items: center; + justify-content: center; + flex-wrap: nowrap; + height: 22px; + padding: 2px 7px 2px 3px; + gap: -1px; + margin-left: 0.5rem; + border-radius: 8px; + background: var(--black-500); + color: var(--black-50); + font-weight: 700; + letter-spacing: 0.036px; + line-height: 1; + + .icon { + width: 16px; + height: 16px; + } +} diff --git a/src/components/_shared/SoonChip/SoonChip.tsx b/src/components/_shared/SoonChip/SoonChip.tsx new file mode 100644 index 00000000..a0acc2f7 --- /dev/null +++ b/src/components/_shared/SoonChip/SoonChip.tsx @@ -0,0 +1,20 @@ +import { clsx } from 'clsx' + +import { useLocalize } from '../../../context/localize' +import { Icon } from '../Icon' + +import styles from './SoonChip.module.scss' + +type Props = { + class?: string +} + +export const SoonChip = (props: Props) => { + const { t } = useLocalize() + return ( +
    + + {t('Soon')} +
    + ) +} diff --git a/src/components/_shared/SoonChip/index.ts b/src/components/_shared/SoonChip/index.ts new file mode 100644 index 00000000..ac55e9fa --- /dev/null +++ b/src/components/_shared/SoonChip/index.ts @@ -0,0 +1 @@ +export { SoonChip } from './SoonChip' From 02ee22fc9943fa68bb6b0db655d64a349ed5fe6b Mon Sep 17 00:00:00 2001 From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com> Date: Fri, 29 Dec 2023 19:43:52 +0300 Subject: [PATCH 5/6] Add community/public switch view in feed (#351) --- public/locales/en/translation.json | 1 + public/locales/ru/translation.json | 1 + src/components/Nav/Header/Header.tsx | 4 -- src/components/Views/Feed/Feed.module.scss | 16 +++++- src/components/Views/Feed/Feed.tsx | 52 +++++++++++++++---- .../_shared/DropDown/DropDown.module.scss | 3 ++ src/components/_shared/DropDown/DropDown.tsx | 2 +- 7 files changed, 62 insertions(+), 17 deletions(-) diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 18ee20fa..a9824169 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -295,6 +295,7 @@ "PublicationsWithCount": "{count, plural, =0 {no publications} one {{count} publication} other {{count} publications}}", "Publish Album": "Publish Album", "Publish Settings": "Publish Settings", + "Published": "Published", "Punchline": "Punchline", "Quit": "Quit", "Quote": "Quote", diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index 50714efd..3bddf1fe 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -311,6 +311,7 @@ "Publish": "Опубликовать", "Publish Album": "Опубликовать альбом", "Publish Settings": "Настройки публикации", + "Published": "Опубликованные", "Punchline": "Панчлайн", "Quit": "Выйти", "Quote": "Цитата", diff --git a/src/components/Nav/Header/Header.tsx b/src/components/Nav/Header/Header.tsx index bf29f39f..8615c86a 100644 --- a/src/components/Nav/Header/Header.tsx +++ b/src/components/Nav/Header/Header.tsx @@ -63,7 +63,6 @@ export const Header = (props: Props) => { const [isFeedVisible, setIsFeedVisible] = createSignal(false) const toggleFixed = () => { setFixed(!fixed()) - console.log('!!! toggleFixed:') } const tag = (topic: Topic) => @@ -141,9 +140,6 @@ export const Header = (props: Props) => { clearTimeout(timer) } - createEffect(() => { - console.log('!!! mo:', modal()) - }) const hideSubnavigation = (event, time = 500) => { timer = setTimeout(() => { toggleSubnavigation(false) diff --git a/src/components/Views/Feed/Feed.module.scss b/src/components/Views/Feed/Feed.module.scss index 5c97c2ca..3099733d 100644 --- a/src/components/Views/Feed/Feed.module.scss +++ b/src/components/Views/Feed/Feed.module.scss @@ -1,6 +1,6 @@ .feedFilter { @include media-breakpoint-down(md) { - margin-right: 4rem !important; + margin-right: 1rem !important; } } @@ -195,15 +195,29 @@ justify-content: space-between; align-items: center; margin-bottom: 4rem; + @include media-breakpoint-down(sm) { + flex-direction: column-reverse; + align-items: flex-start; + gap: 1rem; + } .feedFilter { margin-top: 0; margin-bottom: 0; + min-width: 300px; & > li { margin-bottom: 0; } } + + .dropdowns { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + gap: 1rem; + justify-content: center; + } } .periodSwitcher { diff --git a/src/components/Views/Feed/Feed.tsx b/src/components/Views/Feed/Feed.tsx index 0401ac77..649792b6 100644 --- a/src/components/Views/Feed/Feed.tsx +++ b/src/components/Views/Feed/Feed.tsx @@ -31,15 +31,22 @@ export const FEED_PAGE_SIZE = 20 const UNRATED_ARTICLES_COUNT = 5 type FeedPeriod = 'week' | 'month' | 'year' +type VisibilityMode = 'all' | 'community' | 'public' type PeriodItem = { value: FeedPeriod title: string } +type VisibilityItem = { + value: VisibilityMode + title: string +} + type FeedSearchParams = { by: 'publish_date' | 'rating' | 'last_comment' period: FeedPeriod + visibility: VisibilityMode } const getOrderBy = (by: FeedSearchParams['by']) => { @@ -80,6 +87,7 @@ export const Feed = (props: Props) => { const { t } = useLocalize() const monthPeriod: PeriodItem = { value: 'month', title: t('This month') } + const visibilityAll = { value: 'public', title: t('All') } const periods: PeriodItem[] = [ { value: 'week', title: t('This week') }, @@ -87,6 +95,11 @@ export const Feed = (props: Props) => { { value: 'year', title: t('This year') }, ] + const visibilities: VisibilityItem[] = [ + { value: 'community', title: t('All') }, + { value: 'public', title: t('Published') }, + ] + const { page, searchParams, changeSearchParams } = useRouter() const [isLoading, setIsLoading] = createSignal(false) const [isRightColumnLoaded, setIsRightColumnLoaded] = createSignal(false) @@ -100,14 +113,20 @@ export const Feed = (props: Props) => { const currentPeriod = createMemo(() => { const period = periods.find((p) => p.value === searchParams().period) - if (!period) { return monthPeriod } - return period }) + const currentVisibility = createMemo(() => { + const visibility = visibilities.find((v) => v.value === searchParams().visibility) + if (!visibility) { + return visibilityAll + } + return visibility + }) + const { actions: { loadReactionsBy }, } = useReactions() @@ -130,7 +149,7 @@ export const Feed = (props: Props) => { createEffect( on( - () => page().route + searchParams().by + searchParams().period, + () => page().route + searchParams().by + searchParams().period + searchParams().visibility, () => { resetSortedArticles() loadMore() @@ -146,17 +165,20 @@ export const Feed = (props: Props) => { } const orderBy = getOrderBy(searchParams().by) - if (orderBy) { options.order_by = orderBy } + const visibilityMode = searchParams().visibility + if (visibilityMode && visibilityMode !== 'all') { + options.filters = { ...options.filters, visibility: visibilityMode } + } + if (searchParams().by && searchParams().by !== 'publish_date') { const period = searchParams().period || 'month' const fromDate = getFromDate(period) - options.filters = { fromDate: getServerDate(fromDate) } + options.filters = { ...options.filters, fromDate: getServerDate(fromDate) } } - return props.loadShouts(options) } @@ -231,16 +253,24 @@ export const Feed = (props: Props) => {     - -
    +
    + changeSearchParams({ period: period.value })} + onChange={(period: PeriodItem) => changeSearchParams({ period: period.value })} /> -
    - + + + changeSearchParams({ visibility: visibility.value }) + } + /> +
    }> diff --git a/src/components/_shared/DropDown/DropDown.module.scss b/src/components/_shared/DropDown/DropDown.module.scss index c438b02b..93ed8428 100644 --- a/src/components/_shared/DropDown/DropDown.module.scss +++ b/src/components/_shared/DropDown/DropDown.module.scss @@ -1,3 +1,6 @@ +.trigger { + white-space: nowrap; +} .chevron { vertical-align: top; diff --git a/src/components/_shared/DropDown/DropDown.tsx b/src/components/_shared/DropDown/DropDown.tsx index e1ba7aa4..8cb5b064 100644 --- a/src/components/_shared/DropDown/DropDown.tsx +++ b/src/components/_shared/DropDown/DropDown.tsx @@ -43,7 +43,7 @@ export const DropDown = (props: Props) +
    {props.currentOption.title}{' '} Date: Sat, 30 Dec 2023 16:59:56 +0300 Subject: [PATCH 6/6] Author badge fix (#353) * add gap * fix margin --- src/components/Author/AuthorBadge/AuthorBadge.module.scss | 6 ++---- src/components/Topic/TopicBadge/TopicBadge.module.scss | 1 + 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/Author/AuthorBadge/AuthorBadge.module.scss b/src/components/Author/AuthorBadge/AuthorBadge.module.scss index 0863304e..5483f4ba 100644 --- a/src/components/Author/AuthorBadge/AuthorBadge.module.scss +++ b/src/components/Author/AuthorBadge/AuthorBadge.module.scss @@ -2,6 +2,7 @@ align-items: flex-start; display: flex; gap: 1rem; + margin-bottom: 2rem; &.nameOnly { align-items: center; @@ -11,10 +12,6 @@ } } - @include media-breakpoint-up(sm) { - margin-bottom: 2rem; - } - @include media-breakpoint-down(md) { text-align: left; } @@ -59,6 +56,7 @@ .bio { color: var(--black-400); + font-weight: 500; } } diff --git a/src/components/Topic/TopicBadge/TopicBadge.module.scss b/src/components/Topic/TopicBadge/TopicBadge.module.scss index 65ddfdcf..3ca2a2d1 100644 --- a/src/components/Topic/TopicBadge/TopicBadge.module.scss +++ b/src/components/Topic/TopicBadge/TopicBadge.module.scss @@ -63,6 +63,7 @@ .description { color: var(--black-400); + font-weight: 500; } }