From c8985e6d105d6e36fd0c1578cb362e7dbf31d6d8 Mon Sep 17 00:00:00 2001 From: tonyrewin Date: Thu, 23 Feb 2023 17:07:25 +0300 Subject: [PATCH 01/12] wschats-andn-followers --- src/components/Views/Inbox.tsx | 4 ++-- src/context/inbox.tsx | 12 ++++++------ src/graphql/privateGraphQLClient.ts | 6 +++--- src/graphql/subs/new-reaction.ts | 26 ++++++++++++++++++++++++++ src/graphql/subs/new-shout.ts | 25 +++++++++++++++++++++++++ src/utils/apiClient.ts | 5 +++++ 6 files changed, 67 insertions(+), 11 deletions(-) create mode 100644 src/graphql/subs/new-reaction.ts create mode 100644 src/graphql/subs/new-shout.ts diff --git a/src/components/Views/Inbox.tsx b/src/components/Views/Inbox.tsx index 46d908e3..f0e5a94a 100644 --- a/src/components/Views/Inbox.tsx +++ b/src/components/Views/Inbox.tsx @@ -70,7 +70,7 @@ export const InboxView = () => { } } - // TODO: удалить когда будет готова подписка + /* createEffect(() => { setInterval(async () => { if (!currentDialog()) return @@ -83,7 +83,7 @@ export const InboxView = () => { } }, 2000) }) - + */ onMount(async () => { try { const response = await loadRecipients({ days: 365 }) diff --git a/src/context/inbox.tsx b/src/context/inbox.tsx index adaa12b3..8cecb8a4 100644 --- a/src/context/inbox.tsx +++ b/src/context/inbox.tsx @@ -1,6 +1,6 @@ import type { Accessor, JSX } from 'solid-js' import { createContext, createSignal, useContext, createMemo } from 'solid-js' -import { createChatClient } from '../graphql/privateGraphQLClient' +import { createSubClient } from '../graphql/privateGraphQLClient' import type { Chat, Message, MutationCreateMessageArgs } from '../graphql/types.gen' import { apiClient } from '../utils/apiClient' import newMessage from '../graphql/subs/new-message' @@ -29,7 +29,7 @@ export function useInbox() { export const InboxProvider = (props: { children: JSX.Element }) => { const [chats, setChats] = createSignal([]) const [messages, setMessages] = createSignal([]) - const subclient = createMemo(() => createChatClient()) + const subclient = createMemo(() => createSubClient()) const loadChats = async () => { try { const newChats = await apiClient.getChats({ limit: 50, offset: 0 }) @@ -71,8 +71,8 @@ export const InboxProvider = (props: { children: JSX.Element }) => { return chat } - const { unsubscribe } = pipe( - () => subclient().subscription(newMessage, {}), + pipe( + subclient().subscription(newMessage, {}), subscribe((result) => { console.info('[subscription]') console.debug(result) @@ -83,8 +83,8 @@ export const InboxProvider = (props: { children: JSX.Element }) => { createChat, loadChats, getMessages, - sendMessage, - unsubscribe // TODO: call unsubscribe some time! + sendMessage + // unsubscribe // TODO: call unsubscribe some time! } const value: InboxContextType = { chats, messages, actions } diff --git a/src/graphql/privateGraphQLClient.ts b/src/graphql/privateGraphQLClient.ts index 5b414a22..e6a4f4aa 100644 --- a/src/graphql/privateGraphQLClient.ts +++ b/src/graphql/privateGraphQLClient.ts @@ -7,7 +7,7 @@ import { createClient } from '@urql/core' // import { createClient as createSubClient } from 'graphql-sse' -import { createClient as createSubClient } from 'graphql-ws' +import { createClient as createWSClient } from 'graphql-ws' import { devtoolsExchange } from '@urql/devtools' import { isDev, apiBaseUrl } from '../utils/config' // import { cache } from './cache' @@ -55,8 +55,8 @@ const options: ClientOptions = { export const privateGraphQLClient = createClient(options) -export const createChatClient = () => { - const subClient = createSubClient({ +export const createSubClient = () => { + const subClient = createWSClient({ url: apiBaseUrl.replace('http', 'ws') // + '/messages' }) diff --git a/src/graphql/subs/new-reaction.ts b/src/graphql/subs/new-reaction.ts new file mode 100644 index 00000000..8ffd4cf8 --- /dev/null +++ b/src/graphql/subs/new-reaction.ts @@ -0,0 +1,26 @@ +import { gql } from '@urql/core' + +export default gql` + subscription { + newReactions { + id + body + kind + range + createdAt + replyTo + stat { + rating + } + shout { + id + slug + } + createdBy { + name + slug + userpic + } + } + } +` diff --git a/src/graphql/subs/new-shout.ts b/src/graphql/subs/new-shout.ts new file mode 100644 index 00000000..8172fd63 --- /dev/null +++ b/src/graphql/subs/new-shout.ts @@ -0,0 +1,25 @@ +import { gql } from '@urql/core' + +export default gql` + subscription { + newShout { + id + slug + title + subtitle + body + topics { + # id + title + slug + } + authors { + id + name + slug + userpic + caption + } + } + } +` diff --git a/src/utils/apiClient.ts b/src/utils/apiClient.ts index 42e85917..cbf7821c 100644 --- a/src/utils/apiClient.ts +++ b/src/utils/apiClient.ts @@ -38,6 +38,7 @@ import myChats from '../graphql/query/chats-load' import chatMessagesLoadBy from '../graphql/query/chat-messages-load-by' import authorBySlug from '../graphql/query/author-by-slug' import userSubscribers from '../graphql/query/author-followers' +import userFollowing from '../graphql/query/author-following' import topicBySlug from '../graphql/query/topic-by-slug' import createChat from '../graphql/mutation/create-chat' import reactionsLoadBy from '../graphql/query/reactions-load-by' @@ -221,6 +222,10 @@ export const apiClient = { const response = await publicGraphQLClient.query(userSubscribers, { slug }).toPromise() return response.data.userFollowers }, + getAuthorFollowing: async ({ slug }: { slug: string }): Promise => { + const response = await publicGraphQLClient.query(userFollowing, { slug }).toPromise() + return response.data.userFollowing + }, updateProfile: async (input: ProfileInput) => { const response = await privateGraphQLClient.mutation(updateProfile, { profile: input }).toPromise() return response.data.updateProfile From b71161ed2d4bc49a9dd2ba9af3faedabd0143312 Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Mon, 6 Mar 2023 17:06:48 +0300 Subject: [PATCH 02/12] Show new comments --- src/components/Article/Comment.module.scss | 14 +++++---- src/components/Article/Comment.tsx | 11 ++++++-- src/components/Article/CommentsTree.tsx | 33 +++++++++------------- src/components/Views/Author.tsx | 2 +- 4 files changed, 31 insertions(+), 29 deletions(-) diff --git a/src/components/Article/Comment.module.scss b/src/components/Article/Comment.module.scss index 96cdf800..61e01bb9 100644 --- a/src/components/Article/Comment.module.scss +++ b/src/components/Article/Comment.module.scss @@ -1,16 +1,17 @@ .comment { - margin: 0 -2.4rem 0.5em; - padding: 0.8rem 2.4rem; + margin: 0.5em 0; + padding: 1rem; transition: background-color 0.3s; position: relative; list-style: none; - @include media-breakpoint-down(sm) { - margin-right: -1.2rem; + &.isNew { + border-radius: 6px; + background: rgba(38, 56, 217, 0.05); } - &:last-child { - margin-bottom: 0; + @include media-breakpoint-down(sm) { + margin-right: -1.2rem; } .comment { @@ -196,6 +197,7 @@ .commentDetails { display: flex; + padding: 1rem 0.2rem 0; margin-bottom: 1.2rem; } diff --git a/src/components/Article/Comment.tsx b/src/components/Article/Comment.tsx index 63ef6f9e..152b0945 100644 --- a/src/components/Article/Comment.tsx +++ b/src/components/Article/Comment.tsx @@ -13,6 +13,8 @@ import { useReactions } from '../../context/reactions' import { useSnackbar } from '../../context/snackbar' import { ShowIfAuthenticated } from '../_shared/ShowIfAuthenticated' import { useLocalize } from '../../context/localize' +import Cookie from 'js-cookie' + const CommentEditor = lazy(() => import('../_shared/CommentEditor')) type Props = { @@ -20,6 +22,7 @@ type Props = { compact?: boolean isArticleAuthor?: boolean sortedComments?: Reaction[] + lastSeen?: Date } export const Comment = (props: Props) => { @@ -37,7 +40,7 @@ export const Comment = (props: Props) => { actions: { showSnackbar } } = useSnackbar() - const canEdit = createMemo(() => props.comment.createdBy?.slug === session()?.user?.slug) + const isCommentAuthor = createMemo(() => props.comment.createdBy?.slug === session()?.user?.slug) const comment = createMemo(() => props.comment) const body = createMemo(() => (comment().body || '').trim()) @@ -90,8 +93,9 @@ export const Comment = (props: Props) => { } } + const createdAt = new Date(comment()?.createdAt) return ( -
  • +
  • props.lastSeen })}>
    { {loading() ? t('Loading') : t('Reply')} - +
    -
    0, - [styles.commentRatingNegative]: comment().stat.rating < 0 - }} - > -
    +
    diff --git a/src/components/Article/CommentRatingControl.module.scss b/src/components/Article/CommentRatingControl.module.scss new file mode 100644 index 00000000..f1f8cbfa --- /dev/null +++ b/src/components/Article/CommentRatingControl.module.scss @@ -0,0 +1,45 @@ +.commentRating { + align-items: center; + display: flex; + font-weight: bold; + + .commentRatingValue { + padding: 0 0.3em; + margin: 0 0.6rem; + font-size: 1.2rem; + cursor: pointer; + transition: opacity 0.3s ease-in-out; + &:hover { + opacity: 0.5; + } + } + + .commentRatingPositive { + color: #2bb452; + } + + .commentRatingNegative { + color: #d00820; + } + + .commentRatingControl { + border-left: 6px solid transparent; + border-right: 6px solid transparent; + height: 0; + width: 0; + } + + .commentRatingControlUp { + border-bottom: 8px solid rgb(0 0 0 / 40%); + &.voted { + border-bottom-color: #2bb452; + } + } + + .commentRatingControlDown { + border-top: 8px solid rgb(0 0 0 / 40%); + &.voted { + border-top-color: #d00820; + } + } +} diff --git a/src/components/Article/CommentRatingControl.tsx b/src/components/Article/CommentRatingControl.tsx new file mode 100644 index 00000000..9ae4f8d8 --- /dev/null +++ b/src/components/Article/CommentRatingControl.tsx @@ -0,0 +1,112 @@ +import { clsx } from 'clsx' +import styles from './CommentRatingControl.module.scss' +import type { Reaction } from '../../graphql/types.gen' +import { ReactionKind } from '../../graphql/types.gen' +import { useSession } from '../../context/session' +import { useReactions } from '../../context/reactions' +import { createMemo, For } from 'solid-js' +import { loadShout } from '../../stores/zine/articles' +import { Popup } from '../_shared/Popup' + +type Props = { + comment: Reaction +} + +export const CommentRatingControl = (props: Props) => { + const { userSlug } = useSession() + + const { + reactionEntities, + actions: { createReaction, deleteReaction, loadReactionsBy } + } = useReactions() + + const checkReaction = (reactionKind: ReactionKind) => + Object.values(reactionEntities).some( + (r) => + r.kind === reactionKind && + r.createdBy.slug === userSlug() && + r.shout.id === props.comment.shout.id && + r.replyTo === props.comment.id + ) + const isUpvoted = createMemo(() => checkReaction(ReactionKind.Like)) + const isDownvoted = createMemo(() => checkReaction(ReactionKind.Dislike)) + const canVote = userSlug() !== props.comment.createdBy.slug + const shoutRatingReactions = createMemo(() => + Object.values(reactionEntities).filter( + (r) => + [ReactionKind.Like, ReactionKind.Dislike].includes(r.kind) && + r.shout.id === props.comment.shout.id && + r.replyTo === props.comment.id + ) + ) + const deleteCommentReaction = async (reactionKind: ReactionKind) => { + const reactionToDelete = Object.values(reactionEntities).find( + (r) => + r.kind === reactionKind && + r.createdBy.slug === userSlug() && + r.shout.id === props.comment.shout.id && + r.replyTo === props.comment.id + ) + return deleteReaction(reactionToDelete.id) + } + + const handleRatingChange = async (isUpvote: boolean) => { + if (isUpvoted()) { + await deleteCommentReaction(ReactionKind.Like) + } else if (isDownvoted()) { + await deleteCommentReaction(ReactionKind.Dislike) + } else { + console.log('!!! createReaction:') + await createReaction({ + kind: isUpvote ? ReactionKind.Like : ReactionKind.Dislike, + shout: props.comment.shout.id, + replyTo: props.comment.id + }) + } + + await loadShout(props.comment.shout.slug) + await loadReactionsBy({ + by: { shout: props.comment.shout.slug } + }) + } + + return ( +
    +
    + } + variant="tiny" + > +
      + + {(reaction) => ( +
    • + {reaction.kind === ReactionKind.Like ? <>+1 : <>−1} {reaction.createdBy.name} +
      • + )} +       +
    + +
    + ) +} diff --git a/src/utils/jsonParse.ts b/src/utils/jsonParse.ts new file mode 100644 index 00000000..ae582d55 --- /dev/null +++ b/src/utils/jsonParse.ts @@ -0,0 +1,5 @@ +export const jsonParse = (obj: T) => JSON.parse(JSON.stringify(obj)) + +export const jsonParseLog = (msg: string, obj: T) => { + console.log(`${msg}: `, JSON.parse(JSON.stringify(obj))) +} From 57d6ac14dbea475f73cfdcf6d643e6ac8908de45 Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Thu, 9 Mar 2023 17:08:43 +0300 Subject: [PATCH 04/12] [146] Astro fixies --- public/locales/en/translation.json | 4 +++- public/locales/ru/translation.json | 4 +++- src/components/Article/FullArticle.tsx | 28 +++++++++++++++------- src/graphql/query/article-load.ts | 1 + src/pages/profile/profileSettings.page.tsx | 4 +++- 5 files changed, 29 insertions(+), 12 deletions(-) diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 4d903442..a52421fd 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -231,5 +231,7 @@ "Your name will appear on your profile page and as your signature in publications, comments and responses.": "Your name will appear on your profile page and as your signature in publications, comments and responses", "zine": "zine", "By time": "By time", - "New only": "New only" + "New only": "New only", + "Bookmarks": "Bookmarks", + "Logout": "Logout" } diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index edbae3ef..187b38d4 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -249,5 +249,7 @@ "view": "просмотр", "zine": "журнал", "By time": "По порядку", - "New only": "Только новые" + "New only": "Только новые", + "Bookmarks": "Закладки", + "Logout": "Выход" } diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index 2a39073f..59963839 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -105,6 +105,14 @@ export const FullArticle = (props: ArticleProps) => { actions: { loadReactionsBy } } = useReactions() + let commentsRef: HTMLDivElement | undefined + const scrollToComments = () => { + if (!isReactionsLoaded()) { + return + } + commentsRef.scrollIntoView({ behavior: 'smooth' }) + } + return ( <> {props.article.title} @@ -195,9 +203,9 @@ export const FullArticle = (props: ArticleProps) => { -
    +
    scrollToComments()}> - {props.article.stat?.commented || ''} + {/*{props.article.stat?.commented || ''}*/}
    @@ -259,13 +267,15 @@ export const FullArticle = (props: ArticleProps) => { )}
    - - - +
    + + + +
    diff --git a/src/graphql/query/article-load.ts b/src/graphql/query/article-load.ts index 43b0dd4a..6bec8004 100644 --- a/src/graphql/query/article-load.ts +++ b/src/graphql/query/article-load.ts @@ -39,6 +39,7 @@ export default gql` viewed reacted rating + commented } } } diff --git a/src/pages/profile/profileSettings.page.tsx b/src/pages/profile/profileSettings.page.tsx index fc6cd6f5..cbbf1c9e 100644 --- a/src/pages/profile/profileSettings.page.tsx +++ b/src/pages/profile/profileSettings.page.tsx @@ -140,7 +140,9 @@ export const ProfileSettingsPage = () => { value={form.slug} class="nolabel" /> -

    {t(`${slugError()}`)}

    + +

    {t(`${slugError()}`)}

    +     From 06e68fca4af22831fc0815eab74ef11335cf1ef6 Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Thu, 9 Mar 2023 19:19:28 +0300 Subject: [PATCH 05/12] [146] resolve conversation --- src/components/Article/Comment.tsx | 1 - src/components/Article/CommentRatingControl.tsx | 13 +++++++++---- src/utils/clone.ts | 3 +++ src/utils/jsonParse.ts | 5 ----- 4 files changed, 12 insertions(+), 10 deletions(-) create mode 100644 src/utils/clone.ts delete mode 100644 src/utils/jsonParse.ts diff --git a/src/components/Article/Comment.tsx b/src/components/Article/Comment.tsx index 8fe8dce5..21942340 100644 --- a/src/components/Article/Comment.tsx +++ b/src/components/Article/Comment.tsx @@ -97,7 +97,6 @@ export const Comment = (props: Props) => { return (
  • props.lastSeen })}> -
    {comment().id}
    { ) const isUpvoted = createMemo(() => checkReaction(ReactionKind.Like)) const isDownvoted = createMemo(() => checkReaction(ReactionKind.Dislike)) - const canVote = userSlug() !== props.comment.createdBy.slug + const canVote = createMemo(() => userSlug() !== props.comment.createdBy.slug) + const shoutRatingReactions = createMemo(() => Object.values(reactionEntities).filter( (r) => @@ -56,7 +57,6 @@ export const CommentRatingControl = (props: Props) => { } else if (isDownvoted()) { await deleteCommentReaction(ReactionKind.Dislike) } else { - console.log('!!! createReaction:') await createReaction({ kind: isUpvote ? ReactionKind.Like : ReactionKind.Dislike, shout: props.comment.shout.id, @@ -72,8 +72,11 @@ export const CommentRatingControl = (props: Props) => { return (
    + {!canVote()} {props.shout.stat.rating}} variant="tiny"> -
      - - {(reaction) => ( -
    • - {reaction.kind === ReactionKind.Like ? <>+1 : <>−1} {reaction.createdBy.name} -
      • - )} -       -
    +
    @@ -190,91 +192,93 @@ export const FullArticle = (props: ArticleProps) => {
    -
    -
    -
    - -
    - - -
    - - {props.article.stat?.viewed} -
    -     - -
    scrollToComments()}> - - {/*{props.article.stat?.commented || ''}*/} -
    - -
    - } - /> -
    - -
    - -
    - - +
    +
    +
    - - - {t('Edit')} - +
    - -
    -
    - {formattedDate()} + + +
    + + {props.article.stat?.viewed} +
    +     + +
    scrollToComments()}> + + {/*{props.article.stat?.commented || ''}*/} +
    + +
    + } + /> +
    + +
    + +
    + + +
    + + + {t('Edit')} + +
    +     +
    +
    + {formattedDate()} +
    -
    -
    - - - - - - -
    +
    + + + + + + +
    -
    - - {(topic) => ( -
    - {topic.title} -
    - )} -     -
    +
    + + {(topic) => ( +
    + {topic.title} +
    + )} +     +
    -
    - 1}> -

    {t('Authors')}

    -     - - {(a) => ( -
    - -
    - )} -     -
    -
    - - - +
    + 1}> +

    {t('Authors')}

    +     + + {(a) => ( +
    + +
    + )} +     +
    +
    + + + +
    diff --git a/src/components/Author/Full.tsx b/src/components/Author/Full.tsx index 0d621af4..8ec9975e 100644 --- a/src/components/Author/Full.tsx +++ b/src/components/Author/Full.tsx @@ -5,7 +5,7 @@ import './Full.scss' export const AuthorFull = (props: { author: Author }) => { return (
    -
    +
    diff --git a/src/components/Discours/Banner.tsx b/src/components/Discours/Banner.tsx index a0f939ef..f13bc3cc 100644 --- a/src/components/Discours/Banner.tsx +++ b/src/components/Discours/Banner.tsx @@ -10,7 +10,7 @@ export default () => {
    -
    +

    {t('Discours is created with our common effort')}

    {t('Support us')} @@ -20,7 +20,7 @@ export default () => {

    -
    +
    {t('Discours')}
    diff --git a/src/components/Discours/Footer.tsx b/src/components/Discours/Footer.tsx index 8147630e..3a21afad 100644 --- a/src/components/Discours/Footer.tsx +++ b/src/components/Discours/Footer.tsx @@ -116,7 +116,7 @@ export const Footer = () => {
    {({ header, items }) => ( -
    +
    {t(header)}
      @@ -133,7 +133,7 @@ export const Footer = () => {
    )} -
    +
    {t('Subscription')}

    {t('Join our maillist')}

    @@ -141,14 +141,14 @@ export const Footer = () => {
    -
    +
    {t( 'Independant magazine with an open horizontal cooperation about culture, science and society' )} . {t('Discours')} © 2015–{new Date().getFullYear()}{' '} {t('Terms of use')}
    -
    +
    {(social) => (
    diff --git a/src/components/Discours/Hero.tsx b/src/components/Discours/Hero.tsx index 554b499a..18dff663 100644 --- a/src/components/Discours/Hero.tsx +++ b/src/components/Discours/Hero.tsx @@ -9,7 +9,7 @@ export default () => {
    -
    +

    {t('Horizontal collaborative journalistic platform')}

    {t( diff --git a/src/components/Feed/Beside.tsx b/src/components/Feed/Beside.tsx index d12a4f84..47cb0a1c 100644 --- a/src/components/Feed/Beside.tsx +++ b/src/components/Feed/Beside.tsx @@ -32,7 +32,7 @@ export const Beside = (props: BesideProps) => {

    -
    +

    {props.title}

    @@ -92,7 +92,7 @@ export const Beside = (props: BesideProps) => {
    -
    +
    { 4}>
    -
    {props.header}
    +
    {props.header}
    -
    +
    -
    +
    {(a) => (
    -
    +
    { = 4}> -
    +
    {(a) => ( { )}
    -
    +
    {(a) => ( (
    -
    +
    diff --git a/src/components/Feed/Row2.tsx b/src/components/Feed/Row2.tsx index 71fdc1f2..2a58940e 100644 --- a/src/components/Feed/Row2.tsx +++ b/src/components/Feed/Row2.tsx @@ -3,9 +3,9 @@ import type { Shout } from '../../graphql/types.gen' import { ArticleCard } from './Card' const x = [ - ['6', '6'], - ['4', '8'], - ['8', '4'] + ['12', '12'], + ['8', '16'], + ['16', '8'] ] export const Row2 = (props: { articles: Shout[]; isEqual?: boolean; nodate?: boolean }) => { @@ -21,11 +21,11 @@ export const Row2 = (props: { articles: Shout[]; isEqual?: boolean; nodate?: boo {(a, i) => { return ( -
    +
    diff --git a/src/components/Feed/Row3.tsx b/src/components/Feed/Row3.tsx index 026aca50..e2581e2d 100644 --- a/src/components/Feed/Row3.tsx +++ b/src/components/Feed/Row3.tsx @@ -11,7 +11,7 @@ export const Row3 = (props: { articles: Shout[]; header?: JSX.Element; nodate?:
    {props.header}
    {(a) => ( -
    +
    )} diff --git a/src/components/Feed/Row5.tsx b/src/components/Feed/Row5.tsx index 091c2a4b..f189ce19 100644 --- a/src/components/Feed/Row5.tsx +++ b/src/components/Feed/Row5.tsx @@ -6,20 +6,20 @@ export const Row5 = (props: { articles: Shout[]; nodate?: boolean }) => {
    -
    +
    -
    +
    -
    +
    (
    {(a) => ( -
    +
    { class={clsx('row', styles.view)} classList={{ [styles.signUp]: mode() === 'register' || mode() === 'confirm-email' }} > -
    +
    {

    -
    +
    diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss index fdafbcc9..29927f32 100644 --- a/src/components/Nav/Header.module.scss +++ b/src/components/Nav/Header.module.scss @@ -8,7 +8,7 @@ .wide-container { background: #fff; - @include media-breakpoint-down(sm) { + @include media-breakpoint-down(lg) { padding: 0 divide($container-padding-x, 2); } } @@ -53,7 +53,7 @@ .headerInner { align-items: center; background: #fff; - flex-wrap: nowrap; + flex-wrap: nowrap !important; justify-content: space-between; margin: 0; @@ -130,15 +130,14 @@ display: inline-flex; font-weight: 500; position: relative; + //flex: 1 100% !important; // replace row > * selector to remove !important - padding-right: 0 !important; - width: auto !important; + //width: auto !important; @include media-breakpoint-down(md) { flex: 1; - padding-left: 0; - padding-right: 0; + padding-right: 0 !important; } } @@ -225,7 +224,6 @@ float: right; padding-left: 0; padding-right: 0; - width: 2.2rem; @include media-breakpoint-up(sm) { padding-left: divide($container-padding-x, 2); @@ -312,7 +310,7 @@ .articleHeader { @include font-size(1.4rem); - left: 0; + left: $container-padding-x; margin: 0.2em 0; overflow: hidden; position: absolute; diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx index f16e8dcc..6a5775ab 100644 --- a/src/components/Nav/Header.tsx +++ b/src/components/Nav/Header.tsx @@ -95,12 +95,12 @@ export const Header = (props: Props) => {