diff --git a/src/components/Article/Article.module.scss b/src/components/Article/Article.module.scss index ef4c87a2..670e0d22 100644 --- a/src/components/Article/Article.module.scss +++ b/src/components/Article/Article.module.scss @@ -671,3 +671,7 @@ a[data-toggle='tooltip'] { } } } + +.figureAlignColumn { + clear: both; +} \ No newline at end of file diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index b80e72f9..f11d302d 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -4,6 +4,7 @@ import { A, useSearchParams } from '@solidjs/router' import { clsx } from 'clsx' import { For, Show, createEffect, createMemo, createSignal, on, onCleanup, onMount } from 'solid-js' import { isServer } from 'solid-js/web' + import { useFeed } from '~/context/feed' import { useLocalize } from '~/context/localize' import { useReactions } from '~/context/reactions' @@ -19,7 +20,6 @@ import { capitalize } from '~/utils/capitalize' import { AuthorBadge } from '../Author/AuthorBadge' import { CardTopic } from '../Feed/CardTopic' import { FeedArticlePopup } from '../Feed/FeedArticlePopup' -import stylesHeader from '../HeaderNav/Header.module.scss' import { Icon } from '../_shared/Icon' import { Image } from '../_shared/Image' import { InviteMembers } from '../_shared/InviteMembers' @@ -30,13 +30,15 @@ import { ShareModal } from '../_shared/ShareModal' import { ImageSwiper } from '../_shared/SolidSwiper' import { TableOfContents } from '../_shared/TableOfContents' import { VideoPlayer } from '../_shared/VideoPlayer' -import styles from './Article.module.scss' import { AudioHeader } from './AudioHeader' import { AudioPlayer } from './AudioPlayer' import { CommentsTree } from './CommentsTree' import { SharePopup, getShareUrl } from './SharePopup' import { ShoutRatingControl } from './ShoutRatingControl' +import stylesHeader from '../HeaderNav/Header.module.scss' +import styles from './Article.module.scss' + type Props = { article: Shout } @@ -366,7 +368,7 @@ export const FullArticle = (props: Props) => { props.article.layout !== 'image' } > -
+
{props.article.cover_caption (
-
+
{(a) => ( -
+
`${str.replaceAll( @@ -48,34 +47,30 @@ export const SearchModal = () => { const [inputValue, setInputValue] = createSignal('') const [isLoading, setIsLoading] = createSignal(false) const [offset, setOffset] = createSignal(0) + + const fetchSearchResults = async () => { + setIsLoading(true) + saveScrollPosition() + const { hasMore, newShouts } = await loadShoutsSearch({ + limit: FEED_PAGE_SIZE, + text: inputValue(), + offset: offset() + }) + setIsLoading(false) + setOffset(newShouts.length) + setIsLoadMoreButtonVisible(hasMore) + return newShouts + } const [searchResultsList, { refetch: loadSearchResults, mutate: setSearchResultsList }] = createResource< Shout[] - >( - async () => { - setIsLoading(true) - saveScrollPosition() - const { hasMore, newShouts } = await loadShoutsSearch({ - limit: FEED_PAGE_SIZE, - text: inputValue(), - offset: offset() - }) - setIsLoading(false) - setOffset(newShouts.length) - setIsLoadMoreButtonVisible(hasMore) - return newShouts - }, - { - ssrLoadFrom: 'initial', - initialValue: [] - } - ) + >(fetchSearchResults, { ssrLoadFrom: 'initial', initialValue: [] }) - let searchEl: HTMLInputElement + const [searchEl, setSearchEl] = createSignal() const debouncedLoadMore = debounce(500, loadSearchResults) const handleQueryInput = async () => { - setInputValue(searchEl.value) - if (searchEl.value?.length > 2) { + setInputValue(searchEl()?.value ?? '') + if ((searchEl()?.value?.length || 0) > 2) { await debouncedLoadMore() } else { setIsLoading(false) @@ -101,6 +96,11 @@ export const SearchModal = () => { // console.debug('[SearchModal] cleanup debouncing search') }) + const loadMoreResults = async () => { + const result = await fetchSearchResults() + return result as LoadMoreItems + } + return (
{ class={styles.searchInput} onInput={handleQueryInput} onKeyDown={enterQuery} - ref={(el: HTMLInputElement) => (searchEl = el)} + ref={setSearchEl} /> -

- + diff --git a/src/components/Views/SearchView.tsx b/src/components/Views/SearchView.tsx index 8a32a767..8382412f 100644 --- a/src/components/Views/SearchView.tsx +++ b/src/components/Views/SearchView.tsx @@ -3,11 +3,12 @@ import { For, Show, createSignal, onMount } from 'solid-js' import { useSearchParams } from '@solidjs/router' import { useFeed } from '~/context/feed' import { useLocalize } from '~/context/localize' -import type { SearchResult } from '~/graphql/schema/core.gen' +import type { SearchResult, Shout } from '~/graphql/schema/core.gen' import { restoreScrollPosition, saveScrollPosition } from '~/utils/scroll' import { ArticleCard } from '../Feed/ArticleCard' import '~/styles/views/Search.module.scss' +import { LoadMoreItems, LoadMoreWrapper } from '../_shared/LoadMoreWrapper' type Props = { query: string @@ -31,19 +32,22 @@ export const SearchView = (props: Props) => { const loadMore = async () => { saveScrollPosition() + let results: Shout[] = [] if (query()) { console.log(query()) - const { hasMore } = await loadShoutsSearch({ + const { hasMore, newShouts } = await loadShoutsSearch({ text: query(), offset: offset(), limit: LOAD_MORE_PAGE_SIZE }) setIsLoadMoreButtonVisible(hasMore) setOffset(offset() + LOAD_MORE_PAGE_SIZE) + results = newShouts } else { console.warn('[SaerchView] no query found') } restoreScrollPosition() + return results as LoadMoreItems } onMount(() => { @@ -95,13 +99,19 @@ export const SearchView = (props: Props) => {
- - {(article) => ( -
- -
- )} - +
diff --git a/src/components/Views/TopicView.tsx b/src/components/Views/TopicView.tsx index 76f17408..1dc423d8 100644 --- a/src/components/Views/TopicView.tsx +++ b/src/components/Views/TopicView.tsx @@ -199,9 +199,9 @@ export const TopicView = (props: Props) => {
-
+
{`${t('Show')} `} - {t('All posts')} + {t('All posts')}
diff --git a/src/components/_shared/DarkModeToggle/DarkModeToggle.tsx b/src/components/_shared/DarkModeToggle/DarkModeToggle.tsx index 522b28a7..4c782698 100644 --- a/src/components/_shared/DarkModeToggle/DarkModeToggle.tsx +++ b/src/components/_shared/DarkModeToggle/DarkModeToggle.tsx @@ -12,45 +12,38 @@ type Props = { export const DarkModeToggle = (props: Props) => { const { t } = useLocalize() - const [editorDarkMode, setEditorDarkMode] = createSignal(false) + const [isDark, setIsDark] = createSignal(false) onMount(() => { - const editorDarkModeSelected = localStorage?.getItem('editorDarkMode') - const editorDarkModeAttr = document.documentElement.getAttribute('editorDarkMode') - if (editorDarkModeSelected === 'true') { - setEditorDarkMode(true) - document.documentElement.dataset.editorDarkMode = 'true' - } else if (editorDarkModeSelected === 'false') { - setEditorDarkMode(false) - document.documentElement.dataset.editorDarkMode = 'false' + const theme = localStorage?.getItem('theme') || document.documentElement.getAttribute('theme') + if (theme === 'dark') { + setIsDark(true) + document.documentElement.dataset.theme = 'dark' + } else if (theme !== 'dark') { + setIsDark(false) + document.documentElement.dataset.theme = 'light' } - if (!(editorDarkModeAttr || editorDarkModeSelected)) { - localStorage?.setItem('editorDarkMode', 'false') - document.documentElement.dataset.editorDarkMode = 'false' + if (!theme) { + localStorage?.setItem('theme', 'light') + document.documentElement.dataset.theme = 'light' } onCleanup(() => { - setEditorDarkMode(false) - document.documentElement.dataset.editorDarkMode = undefined + setIsDark(false) + document.documentElement.dataset.theme = undefined }) }) const handleSwitchTheme = () => { - setEditorDarkMode(!editorDarkMode()) - localStorage?.setItem('editorDarkMode', editorDarkMode() ? 'true' : 'false') - document.documentElement.dataset.editorDarkMode = editorDarkMode() ? 'true' : 'false' + setIsDark(!isDark()) + localStorage?.setItem('theme', isDark() ? 'dark' : 'light') + document.documentElement.dataset.theme = isDark() ? 'dark' : 'light' } return (
- +