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}{' '}