From cfb744c0a0f6da3f519fa81c4d1fc4090694d2a6 Mon Sep 17 00:00:00 2001 From: bniwredyc Date: Mon, 1 May 2023 20:32:32 +0200 Subject: [PATCH] lint --- .eslintrc.js | 13 +---- .stylelintrc | 14 ++++- .stylelintrc.bak | 31 ++++++++++ src/components/App.tsx | 2 + src/components/Article/Article.module.scss | 29 ++-------- src/components/Article/AudioPlayer.tsx | 2 +- src/components/Article/Comment.module.scss | 4 +- src/components/Article/Comment.tsx | 2 +- .../Article/CommentRatingControl.module.scss | 3 + src/components/Article/FullArticle.tsx | 13 +++-- src/components/Article/ShoutRatingControl.tsx | 2 +- ...ard.module.scss => AuthorCard.module.scss} | 7 ++- .../Author/{Card.tsx => AuthorCard.tsx} | 4 +- src/components/Author/AuthorRatingControl.tsx | 1 + src/components/Author/Full.tsx | 2 +- src/components/Author/Userpic.tsx | 4 +- src/components/Discours/Footer.module.scss | 8 +-- src/components/Discours/Hero.scss | 4 +- .../ProfileSettingsNavigation.module.scss | 1 + src/components/Discours/Subscribe.module.scss | 8 +-- .../EditorBubbleMenu.module.scss | 5 +- .../LinkForm/LinkForm.module.scss | 4 +- src/components/Editor/EditorFloatingMenu.tsx | 28 +++++++--- .../Editor/InlineForm/InlineForm.module.scss | 7 ++- .../Editor/InlineForm/InlineForm.tsx | 4 +- src/components/Editor/Panel/Panel.module.scss | 7 ++- src/components/Editor/Panel/Panel.tsx | 8 +-- src/components/Editor/Prosemirror.scss | 2 +- .../Editor/TopicSelect/TopicSelect.tsx | 1 - src/components/Editor/extensions/embed.ts | 5 +- src/components/EditorNew/Sidebar.module.scss | 4 +- .../prosemirror/styles/ProseMirror.scss | 7 +-- ...rd.module.scss => ArticleCard.module.scss} | 14 +++-- .../Feed/{Card.tsx => ArticleCard.tsx} | 3 +- src/components/Feed/Beside.module.scss | 2 +- src/components/Feed/Beside.tsx | 4 +- src/components/Feed/Group.tsx | 2 +- src/components/Feed/List.scss | 8 --- src/components/Feed/List.tsx | 56 ------------------- src/components/Feed/Row1.tsx | 2 +- src/components/Feed/Row2.tsx | 2 +- src/components/Feed/Row3.tsx | 2 +- src/components/Feed/Row5.tsx | 2 +- src/components/Feed/RowShort.tsx | 2 +- .../Feed/Sidebar/Sidebar.module.scss | 1 + src/components/Feed/Sidebar/Sidebar.tsx | 4 +- src/components/Inbox/MessageActionsPopup.tsx | 4 +- .../Nav/AuthModal/AuthModal.module.scss | 7 ++- src/components/Nav/Header.module.scss | 11 ++-- src/components/Nav/HeaderAuth.tsx | 21 +++++-- src/components/Nav/Modal.module.scss | 5 +- src/components/Nav/ProfileModal.tsx | 2 +- src/components/Topic/Card.module.scss | 2 +- src/components/Views/AllAuthors.tsx | 2 +- src/components/Views/Author.tsx | 2 +- src/components/Views/Edit.module.scss | 9 +-- src/components/Views/Edit.tsx | 7 +-- src/components/Views/Feed.module.scss | 1 + src/components/Views/Feed.tsx | 6 +- src/components/Views/Home.tsx | 2 +- src/components/Views/Inbox.tsx | 36 ++++++------ src/components/Views/Search.tsx | 2 +- src/components/Views/Topic.tsx | 2 +- .../_shared/VotersList/VotersList.module.scss | 7 +-- src/context/localize.tsx | 6 +- src/context/session.tsx | 1 - src/pages/drafts.page.tsx | 3 +- src/pages/layoutShouts.page.tsx | 8 ++- src/renderer/_default.page.client.tsx | 6 +- src/renderer/_default.page.server.tsx | 7 ++- src/styles/Feed.scss | 2 +- src/styles/Inbox.module.scss | 5 +- src/styles/Search.scss | 4 +- src/styles/app.scss | 8 ++- src/utils/apiClient.ts | 28 ++++++++++ vite.config.ts | 4 +- 76 files changed, 277 insertions(+), 273 deletions(-) create mode 100644 .stylelintrc.bak rename src/components/Author/{Card.module.scss => AuthorCard.module.scss} (99%) rename src/components/Author/{Card.tsx => AuthorCard.tsx} (98%) rename src/components/Feed/{Card.module.scss => ArticleCard.module.scss} (99%) rename src/components/Feed/{Card.tsx => ArticleCard.tsx} (99%) delete mode 100644 src/components/Feed/List.scss delete mode 100644 src/components/Feed/List.tsx diff --git a/.eslintrc.js b/.eslintrc.js index 9c1f024b..5073e095 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -27,7 +27,7 @@ module.exports = { // 'plugin:@typescript-eslint/recommended-requiring-type-checking' ], rules: { - 'no-unused-vars': [ + '@typescript-eslint/no-unused-vars': [ 'warn', { argsIgnorePattern: '^_', @@ -68,7 +68,7 @@ module.exports = { 'unicorn/prefer-dom-node-append': 'off', // FIXME 'unicorn/prefer-top-level-await': 'warn', 'unicorn/consistent-function-scoping': 'warn', - 'sonarjs/no-duplicate-string': 'warn', + 'sonarjs/no-duplicate-string': ['warn', 5], // Promise // 'promise/catch-or-return': 'off', // Should be enabled @@ -77,14 +77,7 @@ module.exports = { eqeqeq: 'error', 'no-param-reassign': 'error', 'no-nested-ternary': 'error', - 'no-shadow': 'error', - 'no-unused-vars': [ - 'warn', - { - argsIgnorePattern: '^_', - varsIgnorePattern: '^log$' - } - ] + 'no-shadow': 'error' }, settings: { 'import/resolver': { diff --git a/.stylelintrc b/.stylelintrc index 5d37490d..6630d052 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -19,7 +19,19 @@ ], "scss/dollar-variable-pattern": ["^[a-z][a-zA-Z]+$", { "ignore": "global" - }] + }], + "selector-pseudo-class-no-unknown": [ + true, + { + "ignorePseudoClasses": ["global", "export"] + } + ], + "property-no-vendor-prefix": [ + true, + { + "ignoreProperties": ["box-decoration-break"] + } + ] }, "defaultSeverity": "warning" } diff --git a/.stylelintrc.bak b/.stylelintrc.bak new file mode 100644 index 00000000..39e2c942 --- /dev/null +++ b/.stylelintrc.bak @@ -0,0 +1,31 @@ +{ + "extends": [ + "stylelint-config-standard-scss" + ], + "plugins": [ + "stylelint-order", + "stylelint-scss" + ], + "rules": { + "selector-class-pattern": null, + "no-descending-specificity": null, + "scss/function-no-unknown": null, + "scss/no-global-function-names": null, + "function-url-quotes": null, + "font-family-no-missing-generic-family-keyword": null, + "order/order": [ + "custom-properties", + "declarations" + ], + "scss/dollar-variable-pattern": ["^[a-z][a-zA-Z]+$", { + "ignore": "global" + }], + "selector-pseudo-class-no-unknown": [ + true, + { + "ignorePseudoClasses": ["global", "export"] + } + ] + }, + "defaultSeverity": "warning" +} diff --git a/src/components/App.tsx b/src/components/App.tsx index a9b984c0..11c1356d 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -35,6 +35,7 @@ import { SessionProvider } from '../context/session' import { ProfileSettingsPage } from '../pages/profile/profileSettings.page' import { ProfileSecurityPage } from '../pages/profile/profileSecurity.page' import { ProfileSubscriptionsPage } from '../pages/profile/profileSubscriptions.page' +import { DraftsPage } from '../pages/drafts.page' import { SnackbarProvider } from '../context/snackbar' import { LocalizeProvider } from '../context/localize' import { EditorProvider } from '../context/editor' @@ -49,6 +50,7 @@ const pagesMap: Record> = { create: CreatePage, edit: EditPage, editSettings: EditPage, + drafts: DraftsPage, home: HomePage, topics: AllTopicsPage, topic: TopicPage, diff --git a/src/components/Article/Article.module.scss b/src/components/Article/Article.module.scss index 9066b8d8..cbd72f76 100644 --- a/src/components/Article/Article.module.scss +++ b/src/components/Article/Article.module.scss @@ -101,9 +101,9 @@ img { } .writeComment { - border: 2px solid #f6f6f6; @include font-size(1.7rem); + border: 2px solid #f6f6f6; outline: none; padding: 0.2em 0.4em; width: 100%; @@ -114,9 +114,9 @@ img { } .commentWarning { - background: #f6f6f6; @include font-size(2.2rem); + background: #f6f6f6; margin-bottom: 1em; padding: 2.4rem 1.8rem; } @@ -166,10 +166,6 @@ img { max-height: 1.8em; } - .shoutStatsItemInner .iconEdit { - margin-right: 0.3em; - } - img { display: block; } @@ -177,6 +173,7 @@ img { a { border: none; text-decoration: none; + &:hover { background: unset; color: #000; @@ -189,9 +186,9 @@ img { } .shoutStatsItemInner { - cursor: pointer; margin: -0.3em -0.3em 0; padding: 0.3em; + cursor: pointer; .icon { margin-right: 0; @@ -201,24 +198,6 @@ img { margin-right: 0.3em; } - &:hover { - background: #000; - cursor: pointer; - img { - filter: invert(1); - } - } -} - -.shoutStatsItemInner { - cursor: pointer; - margin: -0.3em -0.3em 0; - padding: 0.3em; - - .icon { - margin-right: 0; - } - &:hover { background: #000; diff --git a/src/components/Article/AudioPlayer.tsx b/src/components/Article/AudioPlayer.tsx index 870a6448..584c9332 100644 --- a/src/components/Article/AudioPlayer.tsx +++ b/src/components/Article/AudioPlayer.tsx @@ -14,7 +14,7 @@ export default (props: { shout: Shout }) => { return [] }) let audioRef: HTMLAudioElement - const [currentTrack, setCurrentTrack] = createSignal(media()[0]) + const [currentTrack] = createSignal(media()[0]) const [paused, setPaused] = createSignal(true) const togglePlayPause = () => setPaused(!paused()) const playMedia = (m: MediaItem) => { diff --git a/src/components/Article/Comment.module.scss b/src/components/Article/Comment.module.scss index 1ea32cec..fd2f137b 100644 --- a/src/components/Article/Comment.module.scss +++ b/src/components/Article/Comment.module.scss @@ -7,7 +7,7 @@ &.isNew { border-radius: 6px; - background: rgba(38, 56, 217, 0.05); + background: rgb(38 56 217 / 5%); } @include media-breakpoint-down(sm) { @@ -178,6 +178,7 @@ font-size: 1.2rem; margin-bottom: 4px; color: rgb(0 0 0 / 30%); + @include font-size(1.2rem); .date { @@ -189,6 +190,7 @@ margin-right: 0.5rem; vertical-align: middle; } + @include media-breakpoint-down(md) { margin-left: 1rem; } diff --git a/src/components/Article/Comment.tsx b/src/components/Article/Comment.tsx index ecd91dfe..a412dc49 100644 --- a/src/components/Article/Comment.tsx +++ b/src/components/Article/Comment.tsx @@ -1,6 +1,6 @@ import styles from './Comment.module.scss' import { Icon } from '../_shared/Icon' -import { AuthorCard } from '../Author/Card' +import { AuthorCard } from '../Author/AuthorCard' import { Show, createMemo, createSignal, For, lazy, Suspense } from 'solid-js' import { clsx } from 'clsx' import type { Author, Reaction } from '../../graphql/types.gen' diff --git a/src/components/Article/CommentRatingControl.module.scss b/src/components/Article/CommentRatingControl.module.scss index f1f8cbfa..7a50f1c8 100644 --- a/src/components/Article/CommentRatingControl.module.scss +++ b/src/components/Article/CommentRatingControl.module.scss @@ -9,6 +9,7 @@ font-size: 1.2rem; cursor: pointer; transition: opacity 0.3s ease-in-out; + &:hover { opacity: 0.5; } @@ -31,6 +32,7 @@ .commentRatingControlUp { border-bottom: 8px solid rgb(0 0 0 / 40%); + &.voted { border-bottom-color: #2bb452; } @@ -38,6 +40,7 @@ .commentRatingControlDown { border-top: 8px solid rgb(0 0 0 / 40%); + &.voted { border-top-color: #d00820; } diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index 1994eb4a..4ec547c9 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -1,6 +1,6 @@ import { capitalize, formatDate } from '../../utils' import { Icon } from '../_shared/Icon' -import { AuthorCard } from '../Author/Card' +import { AuthorCard } from '../Author/AuthorCard' import { createEffect, createMemo, createSignal, For, Match, onMount, Show, Switch } from 'solid-js' import type { Author, Shout } from '../../graphql/types.gen' import MD from './MD' @@ -13,7 +13,7 @@ import { useSession } from '../../context/session' import VideoPlayer from './VideoPlayer' import Slider from '../_shared/Slider' import { getPagePath } from '@nanostores/router' -import { router } from '../../stores/router' +import { router, useRouter } from '../../stores/router' import { useReactions } from '../../context/reactions' import { Title } from '@solidjs/meta' import { useLocalize } from '../../context/localize' @@ -77,7 +77,8 @@ export const FullArticle = (props: ArticleProps) => { const canEdit = () => props.article.authors?.some((a) => a.slug === user()?.slug) - const bookmark = (ev) => { + // eslint-disable-next-line unicorn/consistent-function-scoping + const handleBookmarkButtonClick = (ev) => { // TODO: implement bookmark clicked ev.preventDefault() } @@ -97,14 +98,14 @@ export const FullArticle = (props: ArticleProps) => { behavior: 'smooth' }) } - const { searchParams } = useRouter() + const { searchParams, changeSearchParam } = useRouter() createEffect(() => { if (props.scrollToComments) { scrollToComments() } }) - const { changeSearchParam } = useRouter() + createEffect(() => { if (searchParams()?.scrollTo === 'comments' && commentsRef.current) { scrollToComments() @@ -228,7 +229,7 @@ export const FullArticle = (props: ArticleProps) => { /> -
+
diff --git a/src/components/Article/ShoutRatingControl.tsx b/src/components/Article/ShoutRatingControl.tsx index 833640bc..e38d54ba 100644 --- a/src/components/Article/ShoutRatingControl.tsx +++ b/src/components/Article/ShoutRatingControl.tsx @@ -1,6 +1,6 @@ import styles from './ShoutRatingControl.module.scss' import { clsx } from 'clsx' -import { createMemo, For } from 'solid-js' +import { createMemo } from 'solid-js' import { ReactionKind, Shout } from '../../graphql/types.gen' import { loadShout } from '../../stores/zine/articles' import { useSession } from '../../context/session' diff --git a/src/components/Author/Card.module.scss b/src/components/Author/AuthorCard.module.scss similarity index 99% rename from src/components/Author/Card.module.scss rename to src/components/Author/AuthorCard.module.scss index 441889bd..1582d27b 100644 --- a/src/components/Author/Card.module.scss +++ b/src/components/Author/AuthorCard.module.scss @@ -169,12 +169,12 @@ } .buttonWrite { + @include font-size(1.5rem); + color: #000; display: inline-flex; transition: background-color 0.3s, color 0.3s; - @include font-size(1.5rem); - &:hover { background: #000; color: #fff; @@ -208,8 +208,9 @@ } .authorAbout { - color: #696969; @include font-size(1.7rem); + + color: #696969; } .authorSubscribe { diff --git a/src/components/Author/Card.tsx b/src/components/Author/AuthorCard.tsx similarity index 98% rename from src/components/Author/Card.tsx rename to src/components/Author/AuthorCard.tsx index a8e8ab51..f40c8cde 100644 --- a/src/components/Author/Card.tsx +++ b/src/components/Author/AuthorCard.tsx @@ -1,7 +1,7 @@ -import type { Author, User } from '../../graphql/types.gen' +import type { Author } from '../../graphql/types.gen' import Userpic from './Userpic' import { Icon } from '../_shared/Icon' -import styles from './Card.module.scss' +import styles from './AuthorCard.module.scss' import { createMemo, createSignal, For, Show } from 'solid-js' import { translit } from '../../utils/ru2en' import { follow, unfollow } from '../../stores/zine/common' diff --git a/src/components/Author/AuthorRatingControl.tsx b/src/components/Author/AuthorRatingControl.tsx index d1461d83..c664c1be 100644 --- a/src/components/Author/AuthorRatingControl.tsx +++ b/src/components/Author/AuthorRatingControl.tsx @@ -11,6 +11,7 @@ export const AuthorRatingControl = (props: AuthorRatingControlProps) => { const isUpvoted = false const isDownvoted = false + // eslint-disable-next-line unicorn/consistent-function-scoping const handleRatingChange = (isUpvote: boolean) => { console.log('handleRatingChange', { isUpvote }) } diff --git a/src/components/Author/Full.tsx b/src/components/Author/Full.tsx index a27f4a3f..4b280250 100644 --- a/src/components/Author/Full.tsx +++ b/src/components/Author/Full.tsx @@ -1,5 +1,5 @@ import type { Author } from '../../graphql/types.gen' -import { AuthorCard } from './Card' +import { AuthorCard } from './AuthorCard' import './Full.scss' export const AuthorFull = (props: { author: Author }) => { diff --git a/src/components/Author/Userpic.tsx b/src/components/Author/Userpic.tsx index 6e16438c..fdb0cee9 100644 --- a/src/components/Author/Userpic.tsx +++ b/src/components/Author/Userpic.tsx @@ -1,10 +1,10 @@ import { Show } from 'solid-js' -import type { Author } from '../../graphql/types.gen' +import type { Author, User } from '../../graphql/types.gen' import styles from './Userpic.module.scss' import { clsx } from 'clsx' interface UserpicProps { - user: Author + user: Author | User hasLink?: boolean isBig?: boolean class?: string diff --git a/src/components/Discours/Footer.module.scss b/src/components/Discours/Footer.module.scss index 624d5a47..129668e8 100644 --- a/src/components/Discours/Footer.module.scss +++ b/src/components/Discours/Footer.module.scss @@ -1,8 +1,8 @@ .discoursFooter { - background: #000; - color: rgb(255 255 255 / 64%); @include font-size(1.7rem); + background: #000; + color: rgb(255 255 255 / 64%); padding: 2.4rem 0 4.2rem; a { @@ -48,10 +48,10 @@ } .footerCopyright { - border-top: 5px solid #404040; - color: #696969; @include font-size(1.5rem); + border-top: 5px solid #404040; + color: #696969; padding-top: 1.6rem; a { diff --git a/src/components/Discours/Hero.scss b/src/components/Discours/Hero.scss index fb8ab343..33a06344 100644 --- a/src/components/Discours/Hero.scss +++ b/src/components/Discours/Hero.scss @@ -1,8 +1,8 @@ .about-discours { - background: #000; - color: #fff; @include font-size(1.7rem); + background: #000; + color: #fff; font-weight: 400; margin-bottom: 6.4rem; padding: 3.6rem 0; diff --git a/src/components/Discours/ProfileSettingsNavigation.module.scss b/src/components/Discours/ProfileSettingsNavigation.module.scss index 2bafc554..d7efb47f 100644 --- a/src/components/Discours/ProfileSettingsNavigation.module.scss +++ b/src/components/Discours/ProfileSettingsNavigation.module.scss @@ -1,5 +1,6 @@ .navigationHeader { @include font-size(1.8rem); + font-weight: bold; margin-top: 1.1em; } diff --git a/src/components/Discours/Subscribe.module.scss b/src/components/Discours/Subscribe.module.scss index 50c0fe37..410e53e9 100644 --- a/src/components/Discours/Subscribe.module.scss +++ b/src/components/Discours/Subscribe.module.scss @@ -11,13 +11,13 @@ } input { + @include font-size(2rem); + background: none; border: none; border-bottom: 1px solid; color: #fff; font-family: inherit; - @include font-size(2rem); - margin: 0; overflow: hidden; text-overflow: ellipsis; @@ -30,13 +30,13 @@ } a { + @include font-size(1.5rem); + align-items: center; background: #fff; border: none; color: #000; display: flex; - @include font-size(1.5rem); - padding: 0 0.5em; } diff --git a/src/components/Editor/EditorBubbleMenu/EditorBubbleMenu.module.scss b/src/components/Editor/EditorBubbleMenu/EditorBubbleMenu.module.scss index ced091f2..12eb9215 100644 --- a/src/components/Editor/EditorBubbleMenu/EditorBubbleMenu.module.scss +++ b/src/components/Editor/EditorBubbleMenu/EditorBubbleMenu.module.scss @@ -40,8 +40,7 @@ position: relative; cursor: pointer; display: inline-flex; - flex-direction: row; - flex-wrap: nowrap; + flex-flow: row nowrap; align-items: center; .dropDown { @@ -50,7 +49,7 @@ top: calc(100% + 8px); left: 50%; transform: translateX(-50%); - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); + box-shadow: 0 4px 10px rgb(0 0 0 / 25%); background: #fff; color: #898c94; diff --git a/src/components/Editor/EditorBubbleMenu/LinkForm/LinkForm.module.scss b/src/components/Editor/EditorBubbleMenu/LinkForm/LinkForm.module.scss index 402d0ad4..15caa9aa 100644 --- a/src/components/Editor/EditorBubbleMenu/LinkForm/LinkForm.module.scss +++ b/src/components/Editor/EditorBubbleMenu/LinkForm/LinkForm.module.scss @@ -3,8 +3,7 @@ .form { display: flex; - flex-direction: row; - flex-wrap: nowrap; + flex-flow: row nowrap; padding: 6px 11px; input { @@ -18,6 +17,7 @@ &::placeholder { color: rgba(#000, 0.3); } + &:focus { outline: none; } diff --git a/src/components/Editor/EditorFloatingMenu.tsx b/src/components/Editor/EditorFloatingMenu.tsx index 38c0764e..67e39c43 100644 --- a/src/components/Editor/EditorFloatingMenu.tsx +++ b/src/components/Editor/EditorFloatingMenu.tsx @@ -12,25 +12,35 @@ type FloatingMenuProps = { const embedData = async (data) => { const result = await HTMLParser(data, false) + + if (typeof result === 'string') { + return + } + if (result && 'type' in result && result.type === 'iframe') { return result.attributes } } +const validateEmbed = async (value: string): Promise => { + const iframeData = await HTMLParser(value, false) + + if (typeof iframeData === 'string') { + return + } + + if (iframeData && iframeData.type !== 'iframe') { + return + } +} + export const EditorFloatingMenu = (props: FloatingMenuProps) => { const [inlineEditorOpen, setInlineEditorOpen] = createSignal(false) const handleEmbedFormSubmit = async (value: string) => { // TODO: add support instagram embed (blockquote) - const emb = await embedData(value) - props.editor.chain().focus().setIframe(emb).run() - } - - const validateEmbed = async (value) => { - const iframeData = await HTMLParser(value, false) - if (iframeData && iframeData.type !== 'iframe') { - return - } + const { src } = (await embedData(value)) as { src: string } + props.editor.chain().focus().setIframe({ src }).run() } return ( diff --git a/src/components/Editor/InlineForm/InlineForm.module.scss b/src/components/Editor/InlineForm/InlineForm.module.scss index 00f76969..b49506a4 100644 --- a/src/components/Editor/InlineForm/InlineForm.module.scss +++ b/src/components/Editor/InlineForm/InlineForm.module.scss @@ -2,7 +2,7 @@ position: relative; &.inBubble { - //... + // ... } &.inFloating { @@ -15,6 +15,7 @@ button { opacity: 1; + &:disabled, &:disabled:hover { opacity: 0.3; @@ -24,8 +25,7 @@ .form { display: flex; - flex-direction: row; - flex-wrap: nowrap; + flex-flow: row nowrap; padding: 6px 11px; input { @@ -39,6 +39,7 @@ &::placeholder { color: rgba(#000, 0.3); } + &:focus { outline: none; } diff --git a/src/components/Editor/InlineForm/InlineForm.tsx b/src/components/Editor/InlineForm/InlineForm.tsx index d3950294..8a244e58 100644 --- a/src/components/Editor/InlineForm/InlineForm.tsx +++ b/src/components/Editor/InlineForm/InlineForm.tsx @@ -1,7 +1,5 @@ import styles from './InlineForm.module.scss' import { Icon } from '../../_shared/Icon' -import { createEditorTransaction } from 'solid-tiptap' -import type { Editor } from '@tiptap/core' import { createSignal, Show } from 'solid-js' import { useLocalize } from '../../../context/localize' import { clsx } from 'clsx' @@ -50,7 +48,7 @@ export const InlineForm = (props: Props) => { return (
diff --git a/src/components/Editor/Panel/Panel.module.scss b/src/components/Editor/Panel/Panel.module.scss index ad3b12b9..1ad76602 100644 --- a/src/components/Editor/Panel/Panel.module.scss +++ b/src/components/Editor/Panel/Panel.module.scss @@ -1,6 +1,6 @@ .Panel { background: #1f1f1f; - color: rgb(255 255 255 / 0.35); + color: rgb(255 255 255 / 35%); display: flex; flex-direction: column; font-size: 1.7rem; @@ -29,7 +29,7 @@ } section { - border-bottom: 2px solid rgb(255 255 255 / 0.1); + border-bottom: 2px solid rgb(255 255 255 / 10%); padding: 1.8rem 0; &:first-child { @@ -79,7 +79,7 @@ } a { - color: rgb(255 255 255 / 0.35); + color: rgb(255 255 255 / 35%); font-weight: normal !important; &:hover { @@ -87,6 +87,7 @@ color: #fff; } } + &.hidden { transform: translateX(100%); } diff --git a/src/components/Editor/Panel/Panel.tsx b/src/components/Editor/Panel/Panel.tsx index c043135b..001f957f 100644 --- a/src/components/Editor/Panel/Panel.tsx +++ b/src/components/Editor/Panel/Panel.tsx @@ -6,11 +6,11 @@ import { useLocalize } from '../../../context/localize' import styles from './Panel.module.scss' import { useEditorContext } from '../../../context/editor' -type Props = { - // isVisible: boolean -} +// type Props = { +// // isVisible: boolean +// } -export const Panel = (props: Props) => { +export const Panel = () => { const { t } = useLocalize() const { isEditorPanelVisible, diff --git a/src/components/Editor/Prosemirror.scss b/src/components/Editor/Prosemirror.scss index eaea214c..56656220 100644 --- a/src/components/Editor/Prosemirror.scss +++ b/src/components/Editor/Prosemirror.scss @@ -2,9 +2,9 @@ outline: none; blockquote { - border-left: 2px solid; @include font-size(1.6rem); + border-left: 2px solid; margin: 1.5em 0; padding-left: 1.6em; } diff --git a/src/components/Editor/TopicSelect/TopicSelect.tsx b/src/components/Editor/TopicSelect/TopicSelect.tsx index a0c0144b..924a4e40 100644 --- a/src/components/Editor/TopicSelect/TopicSelect.tsx +++ b/src/components/Editor/TopicSelect/TopicSelect.tsx @@ -3,7 +3,6 @@ import { createOptions, Select } from '@thisbeyond/solid-select' import { useLocalize } from '../../../context/localize' import '@thisbeyond/solid-select/style.css' import './TopicSelect.scss' -import { clone } from '../../../utils/clone' type TopicSelectProps = { topics: Topic[] diff --git a/src/components/Editor/extensions/embed.ts b/src/components/Editor/extensions/embed.ts index a905621b..64851c43 100644 --- a/src/components/Editor/extensions/embed.ts +++ b/src/components/Editor/extensions/embed.ts @@ -1,7 +1,4 @@ import { mergeAttributes, Node } from '@tiptap/core' -import { NodeRange } from 'prosemirror-model' -import { insert } from 'solid-js/web' -import { TextSelection } from 'prosemirror-state' export interface IframeOptions { allowFullscreen: boolean @@ -48,7 +45,7 @@ export const Embed = Node.create({ const iframe = document.createElement('iframe') iframe.width = node.attrs.width iframe.height = node.attrs.height - iframe.allowfullscreen = node.attrs.allowfullscreen + iframe.allowFullscreen = node.attrs.allowFullscreen iframe.src = node.attrs.src div.append(iframe) return { diff --git a/src/components/EditorNew/Sidebar.module.scss b/src/components/EditorNew/Sidebar.module.scss index 426d4a0b..71f19fdf 100644 --- a/src/components/EditorNew/Sidebar.module.scss +++ b/src/components/EditorNew/Sidebar.module.scss @@ -5,10 +5,10 @@ } .sidebarContainer { - display: none; // режим отладки - color: rgb(255 255 255 / 50%); @include font-size(1.6rem); + display: none; // режим отладки + color: rgb(255 255 255 / 50%); overflow: hidden; position: relative; top: 0; diff --git a/src/components/EditorNew/prosemirror/styles/ProseMirror.scss b/src/components/EditorNew/prosemirror/styles/ProseMirror.scss index 4b97bb8e..c84ae6e6 100644 --- a/src/components/EditorNew/prosemirror/styles/ProseMirror.scss +++ b/src/components/EditorNew/prosemirror/styles/ProseMirror.scss @@ -85,9 +85,9 @@ } blockquote { - border-left: 2px solid; @include font-size(1.6rem); + border-left: 2px solid; margin: 1.5em 0; padding-left: 1.6em; } @@ -287,10 +287,7 @@ li.ProseMirror-selectednode { li.ProseMirror-selectednode::after { content: ''; position: absolute; - left: -32px; - right: -2px; - top: -2px; - bottom: -2px; + inset: -2px -2px -2px -32px; border: 2px solid #8cf; pointer-events: none; } diff --git a/src/components/Feed/Card.module.scss b/src/components/Feed/ArticleCard.module.scss similarity index 99% rename from src/components/Feed/Card.module.scss rename to src/components/Feed/ArticleCard.module.scss index bf4a3f02..91c0020f 100644 --- a/src/components/Feed/Card.module.scss +++ b/src/components/Feed/ArticleCard.module.scss @@ -132,9 +132,9 @@ } .shoutCardSubtitle { - color: #696969; @include font-size(1.7rem); + color: #696969; font-weight: 400; line-height: 1.3; margin-bottom: 0.8rem; @@ -263,9 +263,9 @@ .shoutCardTitle, .shoutCardSubtitle { - display: inline; @include font-size(2.6rem); + display: inline; line-height: 1.2; } @@ -554,24 +554,25 @@ .shoutCardBigTitle { .shoutCardTitle { - display: block; @include font-size(3.2rem); + display: block; padding-right: 0; } .shoutCardSubtitle { - color: #696969; @include font-size(2.4rem); + + color: #696969; } } .shoutCardCompact { .shoutCardTitle, .shoutCardSubtitle { - display: inline; @include font-size(2.6rem); + display: inline; line-height: 1.2; } @@ -669,9 +670,10 @@ } .shoutCardSubtitle { + @include font-size(2.4rem); + color: #696969; flex: 1; - @include font-size(2.4rem); } } diff --git a/src/components/Feed/Card.tsx b/src/components/Feed/ArticleCard.tsx similarity index 99% rename from src/components/Feed/Card.tsx rename to src/components/Feed/ArticleCard.tsx index ff651bf0..b05535f3 100644 --- a/src/components/Feed/Card.tsx +++ b/src/components/Feed/ArticleCard.tsx @@ -3,7 +3,7 @@ import type { Shout } from '../../graphql/types.gen' import { capitalize } from '../../utils' import { translit } from '../../utils/ru2en' import { Icon } from '../_shared/Icon' -import styles from './Card.module.scss' +import styles from './ArticleCard.module.scss' import { clsx } from 'clsx' import { CardTopic } from './CardTopic' import { ShoutRatingControl } from '../Article/ShoutRatingControl' @@ -37,7 +37,6 @@ interface ArticleCardProps { isBeside?: boolean } article: Shout - scrollTo: 'comments' } const getTitleAndSubtitle = (article: Shout): { title: string; subtitle: string } => { diff --git a/src/components/Feed/Beside.module.scss b/src/components/Feed/Beside.module.scss index 5b1c4235..da800420 100644 --- a/src/components/Feed/Beside.module.scss +++ b/src/components/Feed/Beside.module.scss @@ -66,9 +66,9 @@ } a { - border: none; @include font-size(1.5rem); + border: none; font-weight: 500; padding-right: 0.3em; white-space: nowrap; diff --git a/src/components/Feed/Beside.tsx b/src/components/Feed/Beside.tsx index 3dbbb691..5460c4b7 100644 --- a/src/components/Feed/Beside.tsx +++ b/src/components/Feed/Beside.tsx @@ -1,8 +1,8 @@ // TODO: additional entities list column + article import { For, Show } from 'solid-js' -import { ArticleCard } from './Card' -import { AuthorCard } from '../Author/Card' +import { ArticleCard } from './ArticleCard' +import { AuthorCard } from '../Author/AuthorCard' import { TopicCard } from '../Topic/Card' import styles from './Beside.module.scss' import type { Author, Shout, Topic, User } from '../../graphql/types.gen' diff --git a/src/components/Feed/Group.tsx b/src/components/Feed/Group.tsx index f45492c5..717322f7 100644 --- a/src/components/Feed/Group.tsx +++ b/src/components/Feed/Group.tsx @@ -1,7 +1,7 @@ import type { JSX } from 'solid-js/jsx-runtime' import { For, Show } from 'solid-js' import type { Shout } from '../../graphql/types.gen' -import { ArticleCard } from './Card' +import { ArticleCard } from './ArticleCard' import './Group.scss' interface GroupProps { diff --git a/src/components/Feed/List.scss b/src/components/Feed/List.scss deleted file mode 100644 index ed9a3941..00000000 --- a/src/components/Feed/List.scss +++ /dev/null @@ -1,8 +0,0 @@ -.article-preview { - background: center url('loading.gif') no-repeat; - margin: auto; - vertical-align: middle; - text-align: center; - - /* TODO: centered full viewport */ -} diff --git a/src/components/Feed/List.tsx b/src/components/Feed/List.tsx deleted file mode 100644 index 3d590a57..00000000 --- a/src/components/Feed/List.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { Row1 } from './Row1' -import { Row2 } from './Row2' -import { Row3 } from './Row3' -import { shuffle } from '../../utils' -import { createMemo, createSignal, For, Suspense } from 'solid-js' -import type { JSX } from 'solid-js' -import type { Shout } from '../../graphql/types.gen' -import './List.scss' -import { useLocalize } from '../../context/localize' - -export const Block6 = (props: { articles: Shout[] }) => { - const dice = createMemo(() => shuffle([Row1, Row2, Row3])) - - return ( - <> - {(c: () => JSX.Element) => c(props.articles)} - - ) -} - -interface ArticleListProps { - articles: Shout[] - page: number - size: number -} - -export default (props: ArticleListProps) => { - const { t } = useLocalize() - const [articles, setArticles] = createSignal( - props.articles.slice(props.page * props.size, props.size * (props.page + 1)) || [] - ) - const [loadingMore, setLoadingMore] = createSignal(false) - // const [, { more }] = useZine() - const handleMore = () => { - setArticles(props.articles.slice(props.page * props.size, props.size * (props.page + 1))) - if (props.size * (props.page + 1) > props.articles.length) { - console.log('[article-list] load more') - setLoadingMore(true) - // TODO: more() - setLoadingMore(false) - } - } - const x: number = Math.floor(articles().length / 6) - // eslint-disable-next-line unicorn/new-for-builtins - const numbers: number[] = [...Array(x).keys()] - return ( - {t('Loading')}
}> - - {() => } - - - {loadingMore() ? '...' : t('More')} - - - ) -} diff --git a/src/components/Feed/Row1.tsx b/src/components/Feed/Row1.tsx index 69ad6c72..263e4e96 100644 --- a/src/components/Feed/Row1.tsx +++ b/src/components/Feed/Row1.tsx @@ -1,6 +1,6 @@ import { Show } from 'solid-js' import type { Shout } from '../../graphql/types.gen' -import { ArticleCard } from './Card' +import { ArticleCard } from './ArticleCard' export const Row1 = (props: { article: Shout; nodate?: boolean }) => ( diff --git a/src/components/Feed/Row2.tsx b/src/components/Feed/Row2.tsx index 2a58940e..d435b111 100644 --- a/src/components/Feed/Row2.tsx +++ b/src/components/Feed/Row2.tsx @@ -1,6 +1,6 @@ import { createComputed, createSignal, Show, For } from 'solid-js' import type { Shout } from '../../graphql/types.gen' -import { ArticleCard } from './Card' +import { ArticleCard } from './ArticleCard' const x = [ ['12', '12'], diff --git a/src/components/Feed/Row3.tsx b/src/components/Feed/Row3.tsx index e2581e2d..03ea2058 100644 --- a/src/components/Feed/Row3.tsx +++ b/src/components/Feed/Row3.tsx @@ -1,7 +1,7 @@ import type { JSX } from 'solid-js/jsx-runtime' import { For } from 'solid-js' import type { Shout } from '../../graphql/types.gen' -import { ArticleCard } from './Card' +import { ArticleCard } from './ArticleCard' export const Row3 = (props: { articles: Shout[]; header?: JSX.Element; nodate?: boolean }) => { return ( diff --git a/src/components/Feed/Row5.tsx b/src/components/Feed/Row5.tsx index f189ce19..b3d07c52 100644 --- a/src/components/Feed/Row5.tsx +++ b/src/components/Feed/Row5.tsx @@ -1,5 +1,5 @@ import type { Shout } from '../../graphql/types.gen' -import { ArticleCard } from './Card' +import { ArticleCard } from './ArticleCard' export const Row5 = (props: { articles: Shout[]; nodate?: boolean }) => { return ( diff --git a/src/components/Feed/RowShort.tsx b/src/components/Feed/RowShort.tsx index fbcf95f3..e63f2924 100644 --- a/src/components/Feed/RowShort.tsx +++ b/src/components/Feed/RowShort.tsx @@ -1,6 +1,6 @@ import { For } from 'solid-js' import type { Shout } from '../../graphql/types.gen' -import { ArticleCard } from './Card' +import { ArticleCard } from './ArticleCard' export default (props: { articles: Shout[] }) => (
diff --git a/src/components/Feed/Sidebar/Sidebar.module.scss b/src/components/Feed/Sidebar/Sidebar.module.scss index 0cd74b44..fd654010 100644 --- a/src/components/Feed/Sidebar/Sidebar.module.scss +++ b/src/components/Feed/Sidebar/Sidebar.module.scss @@ -19,6 +19,7 @@ .counter { @include font-size(1.2rem); + align-items: center; align-self: flex-start; background: #f6f6f6; diff --git a/src/components/Feed/Sidebar/Sidebar.tsx b/src/components/Feed/Sidebar/Sidebar.tsx index fd507d97..94863863 100644 --- a/src/components/Feed/Sidebar/Sidebar.tsx +++ b/src/components/Feed/Sidebar/Sidebar.tsx @@ -84,8 +84,8 @@ export const Sidebar = (props: FeedSidebarProps) => {
-
diff --git a/src/components/Nav/Modal.module.scss b/src/components/Nav/Modal.module.scss index c6b1fd39..19f5ecaa 100644 --- a/src/components/Nav/Modal.module.scss +++ b/src/components/Nav/Modal.module.scss @@ -45,7 +45,7 @@ width: 100%; } - @media (min-width: 800px) and (max-width: 991px) { + @media (width >= 800px) and (width <= 991px) { // top: 11em; } } @@ -53,7 +53,8 @@ &.narrow { max-width: 460px; width: 50%; - @media (min-width: 800px) and (max-width: 991px) { + + @media (width >= 800px) and (width <= 991px) { width: 80%; } diff --git a/src/components/Nav/ProfileModal.tsx b/src/components/Nav/ProfileModal.tsx index 52dc7ea4..d8b19a95 100644 --- a/src/components/Nav/ProfileModal.tsx +++ b/src/components/Nav/ProfileModal.tsx @@ -1,4 +1,4 @@ -import { AuthorCard } from '../Author/Card' +import { AuthorCard } from '../Author/AuthorCard' import type { Author } from '../../graphql/types.gen' import { translit } from '../../utils/ru2en' diff --git a/src/components/Topic/Card.module.scss b/src/components/Topic/Card.module.scss index d4332eed..c6c76f91 100644 --- a/src/components/Topic/Card.module.scss +++ b/src/components/Topic/Card.module.scss @@ -24,9 +24,9 @@ } .topicTitle { - font-weight: bold; @include font-size(2.2rem); + font-weight: bold; margin-bottom: 1.2rem; margin-top: 0.5rem !important; } diff --git a/src/components/Views/AllAuthors.tsx b/src/components/Views/AllAuthors.tsx index f9befddb..1113ca51 100644 --- a/src/components/Views/AllAuthors.tsx +++ b/src/components/Views/AllAuthors.tsx @@ -3,7 +3,7 @@ import type { Author } from '../../graphql/types.gen' import { setAuthorsSort, useAuthorsStore } from '../../stores/zine/authors' import { useRouter } from '../../stores/router' -import { AuthorCard } from '../Author/Card' +import { AuthorCard } from '../Author/AuthorCard' import { clsx } from 'clsx' import { useSession } from '../../context/session' import { translit } from '../../utils/ru2en' diff --git a/src/components/Views/Author.tsx b/src/components/Views/Author.tsx index e4546f2c..4106957c 100644 --- a/src/components/Views/Author.tsx +++ b/src/components/Views/Author.tsx @@ -14,7 +14,7 @@ import stylesArticle from '../Article/Article.module.scss' import { clsx } from 'clsx' import Userpic from '../Author/Userpic' import { Popup } from '../_shared/Popup' -import { AuthorCard } from '../Author/Card' +import { AuthorCard } from '../Author/AuthorCard' import { apiClient } from '../../utils/apiClient' import { Comment } from '../Article/Comment' import { useLocalize } from '../../context/localize' diff --git a/src/components/Views/Edit.module.scss b/src/components/Views/Edit.module.scss index 8ce5da1b..3b2a23d2 100644 --- a/src/components/Views/Edit.module.scss +++ b/src/components/Views/Edit.module.scss @@ -58,7 +58,7 @@ .asidePanel { background: #1f1f1f; - color: rgb(255 255 255 / 0.35); + color: rgb(255 255 255 / 35%); display: flex; flex-direction: column; font-size: 1.7rem; @@ -78,8 +78,9 @@ } section { - border-bottom: 2px solid rgb(255 255 255 / 0.1); - //margin-bottom: 1.8rem; + border-bottom: 2px solid rgb(255 255 255 / 10%); + + // margin-bottom: 1.8rem; margin-top: 1.8rem; padding-bottom: 1.8rem; @@ -125,7 +126,7 @@ } a { - color: rgb(255 255 255 / 0.35); + color: rgb(255 255 255 / 35%); font-weight: normal !important; &:hover { diff --git a/src/components/Views/Edit.tsx b/src/components/Views/Edit.tsx index ca93c713..c7d4af6e 100644 --- a/src/components/Views/Edit.tsx +++ b/src/components/Views/Edit.tsx @@ -55,12 +55,7 @@ export const EditView = (props: EditViewProps) => { const handleFormSubmit = async (e) => { e.preventDefault() - const article = await apiClient.updateArticle({ - article: { - slug: props.shout.slug, - visibility: 'community' - } - }) + const article = await apiClient.publishDraft() openPage(router, 'article', { slug: article.slug }) } diff --git a/src/components/Views/Feed.module.scss b/src/components/Views/Feed.module.scss index fb6d3c1e..82a8af6d 100644 --- a/src/components/Views/Feed.module.scss +++ b/src/components/Views/Feed.module.scss @@ -1,5 +1,6 @@ .feedNavigation { @include font-size(1.5rem); + font-weight: 500; h4 { diff --git a/src/components/Views/Feed.tsx b/src/components/Views/Feed.tsx index 3bb92226..d247f834 100644 --- a/src/components/Views/Feed.tsx +++ b/src/components/Views/Feed.tsx @@ -1,8 +1,8 @@ -import { createEffect, createMemo, createSignal, For, onMount, Show } from 'solid-js' +import { createEffect, createSignal, For, onMount, Show } from 'solid-js' import '../../styles/Feed.scss' import { Icon } from '../_shared/Icon' -import { ArticleCard } from '../Feed/Card' -import { AuthorCard } from '../Author/Card' +import { ArticleCard } from '../Feed/ArticleCard' +import { AuthorCard } from '../Author/AuthorCard' import { Sidebar } from '../Feed/Sidebar' import { loadShouts, useArticlesStore } from '../../stores/zine/articles' import { useAuthorsStore } from '../../stores/zine/authors' diff --git a/src/components/Views/Home.tsx b/src/components/Views/Home.tsx index b19a966b..a263398e 100644 --- a/src/components/Views/Home.tsx +++ b/src/components/Views/Home.tsx @@ -22,7 +22,7 @@ import { import { useTopAuthorsStore } from '../../stores/zine/topAuthors' import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll' import { splitToPages } from '../../utils/splitToPages' -import { ArticleCard } from '../Feed/Card' +import { ArticleCard } from '../Feed/ArticleCard' import { useLocalize } from '../../context/localize' type HomeProps = { diff --git a/src/components/Views/Inbox.tsx b/src/components/Views/Inbox.tsx index 61af9594..f69e6ba9 100644 --- a/src/components/Views/Inbox.tsx +++ b/src/components/Views/Inbox.tsx @@ -23,12 +23,14 @@ type InboxSearchParams = { initChat: string chat: string } -// const userSearch = (array: Author[], keyword: string) => { -// const searchTerm = keyword.toLowerCase() -// return array.filter((value) => { -// return value.name.toLowerCase().match(new RegExp(searchTerm, 'g')) -// }) -// } + +const userSearch = (array: Author[], keyword: string) => { + return array.filter((value) => new RegExp(keyword.trim(), 'gi').test(value.name)) +} + +const handleOpenInviteModal = () => { + showModal('inviteToChat') +} export const InboxView = () => { const { t } = useLocalize() @@ -46,14 +48,15 @@ export const InboxView = () => { const [messageToReply, setMessageToReply] = createSignal(null) const { session } = useSession() const currentUserId = createMemo(() => session()?.user.id) + // Поиск по диалогам const getQuery = (query) => { - // if (query().length >= 2) { - // const match = userSearch(recipients(), query()) - // setRecipients(match) - // } else { - // setRecipients(cashedRecipients()) - // } + if (query().length >= 2) { + const match = userSearch(recipients(), query()) + setRecipients(match) + } else { + // setRecipients(cashedRecipients()) + } } let chatWindow @@ -136,10 +139,6 @@ export const InboxView = () => { } }) - const handleOpenInviteModal = () => { - showModal('inviteToChat') - } - const chatsToShow = () => { const sorted = chats().sort((a, b) => { return b.updatedAt - a.updatedAt @@ -158,7 +157,10 @@ export const InboxView = () => { } const handleKeyDown = async (event) => { - if (event.keyCode === 13 && event.shiftKey) return + if (event.keyCode === 13 && event.shiftKey) { + return + } + if (event.keyCode === 13 && !event.shiftKey && postMessageText()?.trim().length > 0) { event.preventDefault() handleSubmit() diff --git a/src/components/Views/Search.tsx b/src/components/Views/Search.tsx index 215c1e13..5ebc763b 100644 --- a/src/components/Views/Search.tsx +++ b/src/components/Views/Search.tsx @@ -1,7 +1,7 @@ import { Show, For, createSignal } from 'solid-js' import '../../styles/Search.scss' import type { Shout } from '../../graphql/types.gen' -import { ArticleCard } from '../Feed/Card' +import { ArticleCard } from '../Feed/ArticleCard' import { loadShouts, useArticlesStore } from '../../stores/zine/articles' import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll' diff --git a/src/components/Views/Topic.tsx b/src/components/Views/Topic.tsx index d4a2aed1..7e7533c7 100644 --- a/src/components/Views/Topic.tsx +++ b/src/components/Views/Topic.tsx @@ -15,7 +15,7 @@ import { splitToPages } from '../../utils/splitToPages' import { clsx } from 'clsx' import Slider from '../_shared/Slider' import { Row1 } from '../Feed/Row1' -import { ArticleCard } from '../Feed/Card' +import { ArticleCard } from '../Feed/ArticleCard' import { useLocalize } from '../../context/localize' type TopicsPageSearchParams = { diff --git a/src/components/_shared/VotersList/VotersList.module.scss b/src/components/_shared/VotersList/VotersList.module.scss index 9dfee82b..84f6d9f4 100644 --- a/src/components/_shared/VotersList/VotersList.module.scss +++ b/src/components/_shared/VotersList/VotersList.module.scss @@ -5,16 +5,15 @@ max-height: 360px; overflow: auto; } + .item { display: flex; - flex-direction: row; - flex-wrap: nowrap; + flex-flow: row nowrap; align-items: center; .user { display: flex; - flex-direction: row; - flex-wrap: nowrap; + flex-flow: row nowrap; align-items: center; margin-right: 1.2rem; diff --git a/src/context/localize.tsx b/src/context/localize.tsx index e7202bfb..2e7dab1f 100644 --- a/src/context/localize.tsx +++ b/src/context/localize.tsx @@ -2,7 +2,7 @@ import type { i18n } from 'i18next' import type { Accessor, JSX } from 'solid-js' import { createContext, createEffect, createSignal, Show, useContext } from 'solid-js' import { useRouter } from '../stores/router' -import i18next from 'i18next' +import i18next, { changeLanguage, t } from 'i18next' import Cookie from 'js-cookie' type LocalizeContextType = { @@ -30,13 +30,13 @@ export const LocalizeProvider = (props: { children: JSX.Element }) => { const lng: Language = searchParams().lng === 'en' ? 'en' : 'ru' - i18next.changeLanguage(lng) + changeLanguage(lng) setLang(lng) Cookie.set('lng', lng) changeSearchParam('lng', null) }) - const value: LocalizeContextType = { t: i18next.t, lang, setLang } + const value: LocalizeContextType = { t, lang, setLang } return ( diff --git a/src/context/session.tsx b/src/context/session.tsx index be1a8dcd..4ed38048 100644 --- a/src/context/session.tsx +++ b/src/context/session.tsx @@ -54,7 +54,6 @@ export const SessionProvider = (props: { children: JSX.Element }) => { initialValue: null }) - const userSlug = createMemo(() => session()?.user?.slug) const user = createMemo(() => session()?.user) const isAuthenticated = createMemo(() => Boolean(session()?.user?.slug)) diff --git a/src/pages/drafts.page.tsx b/src/pages/drafts.page.tsx index 9a48f80a..1279ff0b 100644 --- a/src/pages/drafts.page.tsx +++ b/src/pages/drafts.page.tsx @@ -1,8 +1,7 @@ -import { createMemo, createSignal, For, lazy, onMount, Show, Suspense } from 'solid-js' +import { createSignal, For, onMount, Show } from 'solid-js' import { PageLayout } from '../components/_shared/PageLayout' import { useSession } from '../context/session' import { Shout } from '../graphql/types.gen' -import { useRouter } from '../stores/router' import { apiClient } from '../utils/apiClient' export const DraftsPage = () => { diff --git a/src/pages/layoutShouts.page.tsx b/src/pages/layoutShouts.page.tsx index afda53b3..0ec17e39 100644 --- a/src/pages/layoutShouts.page.tsx +++ b/src/pages/layoutShouts.page.tsx @@ -16,7 +16,7 @@ import { Beside } from '../components/Feed/Beside' import Slider from '../components/_shared/Slider' import { Row1 } from '../components/Feed/Row1' import styles from '../styles/Topic.module.scss' -import { ArticleCard } from '../components/Feed/Card' +import { ArticleCard } from '../components/Feed/ArticleCard' import { useLocalize } from '../context/localize' export const PRERENDERED_ARTICLES_COUNT = 21 @@ -27,14 +27,16 @@ export const LayoutShoutsPage = (props: PageProps) => { const getLayout = createMemo(() => { const { page: getPage } = useRouter() const page = getPage() - if (page.route !== 'expo') throw new Error('ts guard') + if (page.route !== 'expo') { + throw new Error('ts guard') + } const { layout } = page.params return layout as LayoutType }) const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false) const { sortedLayoutShouts, loadLayoutShoutsBy } = useLayoutsStore(getLayout(), props.layoutShouts) const sortedArticles = createMemo(() => sortedLayoutShouts().get(getLayout()) || []) - const loadMoreLayout = async (kind: LayoutType) => { + const loadMoreLayout = async (_kind: LayoutType) => { saveScrollPosition() const { hasMore } = await loadLayoutShoutsBy({ // filters: { layout: kind }, diff --git a/src/renderer/_default.page.client.tsx b/src/renderer/_default.page.client.tsx index 2db25b0d..4bd7ad37 100644 --- a/src/renderer/_default.page.client.tsx +++ b/src/renderer/_default.page.client.tsx @@ -4,7 +4,7 @@ import { hydrate } from 'solid-js/web' import type { PageContextBuiltInClient } from 'vite-plugin-ssr/client/router' import type { PageContext } from './types' import { MetaProvider } from '@solidjs/meta' -import i18next from 'i18next' +import { use as useI18next, init as initI18next } from 'i18next' import HttpApi from 'i18next-http-backend' let layoutReady = false @@ -12,8 +12,8 @@ let layoutReady = false export const render = async (pageContext: PageContextBuiltInClient & PageContext) => { const { lng, pageProps } = pageContext - i18next.use(HttpApi) - await i18next.init({ + useI18next(HttpApi) + await initI18next({ // debug: true, supportedLngs: ['ru', 'en'], fallbackLng: lng, diff --git a/src/renderer/_default.page.server.tsx b/src/renderer/_default.page.server.tsx index f708da8c..b8d652de 100644 --- a/src/renderer/_default.page.server.tsx +++ b/src/renderer/_default.page.server.tsx @@ -4,7 +4,7 @@ import { App } from '../components/App' import { initRouter } from '../stores/router' import type { PageContext } from './types' import { MetaProvider, renderTags } from '@solidjs/meta' -import i18next from 'i18next' +import i18next, { changeLanguage, init as initI18next } from 'i18next' import ru from '../../public/locales/ru/translation.json' import en from '../../public/locales/en/translation.json' import type { Language } from '../context/localize' @@ -31,7 +31,8 @@ export const render = async (pageContext: PageContext) => { const lng = getLng(pageContext) if (!i18next.isInitialized) { - i18next.init({ + // eslint-disable-next-line import/no-named-as-default-member + await initI18next({ // debug: true, supportedLngs: ['ru', 'en'], fallbackLng: lng, @@ -43,7 +44,7 @@ export const render = async (pageContext: PageContext) => { } }) } else if (i18next.language !== lng) { - await i18next.changeLanguage(lng) + await changeLanguage(lng) } initRouter(pageContext.urlParsed.pathname, pageContext.urlParsed.search) diff --git a/src/styles/Feed.scss b/src/styles/Feed.scss index 86282c6d..c17fffe7 100644 --- a/src/styles/Feed.scss +++ b/src/styles/Feed.scss @@ -25,9 +25,9 @@ } .comment__details { - display: flex; @include font-size(1.2rem); + display: flex; overflow: hidden; position: relative; white-space: nowrap; diff --git a/src/styles/Inbox.module.scss b/src/styles/Inbox.module.scss index 8814ba10..bea66f33 100644 --- a/src/styles/Inbox.module.scss +++ b/src/styles/Inbox.module.scss @@ -76,10 +76,7 @@ main { scroll-behavior: smooth; display: flex; position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + inset: 0; height: 100%; overflow: auto; flex-direction: column; diff --git a/src/styles/Search.scss b/src/styles/Search.scss index 8fcb3dd0..211d47df 100644 --- a/src/styles/Search.scss +++ b/src/styles/Search.scss @@ -15,10 +15,10 @@ } input { - border: none; - border-bottom: 1px solid #ccc; @include font-size(4rem); + border: none; + border-bottom: 1px solid #ccc; height: 100%; } diff --git a/src/styles/app.scss b/src/styles/app.scss index 9a4b78ef..9a22667e 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -239,10 +239,10 @@ button { } .button--light { - background-color: #f6f6f6; - color: #000; @include font-size(1.5rem); + background-color: #f6f6f6; + color: #000; font-weight: 400; height: auto; padding: 0.6rem 1.2rem 0.6rem 1rem; @@ -324,6 +324,7 @@ button { .button--submit, .button--outline { @include font-size(2rem); + padding: 1.6rem 2rem; } @@ -499,8 +500,9 @@ figure { } figcaption { - color: #9fa1a7; @include font-size(1.2rem); + + color: #9fa1a7; } .view-switcher { diff --git a/src/utils/apiClient.ts b/src/utils/apiClient.ts index be6c09fb..aaf2dbed 100644 --- a/src/utils/apiClient.ts +++ b/src/utils/apiClient.ts @@ -253,6 +253,34 @@ export const apiClient = { console.debug('[updateArticle]:', response.data) return response.data.updateArticle.shout }, + publishDraft: async (): Promise => { + console.log('publishDraft') + return { + authors: undefined, + body: '', + community: '', + cover: '', + createdAt: undefined, + deletedAt: undefined, + deletedBy: undefined, + id: 0, + lang: '', + layout: '', + mainTopic: '', + media: '', + publishedAt: undefined, + slug: '', + stat: undefined, + subtitle: '', + title: '', + topics: undefined, + updatedAt: undefined, + updatedBy: undefined, + versionOf: '', + visibility: '' + } + }, + createReaction: async (input: ReactionInput) => { const response = await privateGraphQLClient.mutation(reactionCreate, { reaction: input }).toPromise() console.debug('[createReaction]:', response) diff --git a/vite.config.ts b/vite.config.ts index 356575fd..6f6947d0 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -36,10 +36,8 @@ export default defineConfig(({ mode }) => { rollupOptions: { external: [] }, - chunkSizeWarningLimit: 812, + chunkSizeWarningLimit: 1024, target: 'esnext' - // FIXME ?? - // polyfillDynamicImport: false } } })