An error occurred.
diff --git a/src/components/Editor/components/Sidebar.tsx b/src/components/Editor/components/Sidebar.tsx
index 7966d4a6..f2284c44 100644
--- a/src/components/Editor/components/Sidebar.tsx
+++ b/src/components/Editor/components/Sidebar.tsx
@@ -74,7 +74,7 @@ export const Sidebar = (props) => {
Советы и предложения
- editorView().focus()} data-tauri-drag-region="true">
+ editorView().focus()}>
diff --git a/src/components/Editor/prosemirror/setup.ts b/src/components/Editor/prosemirror/setup.ts
index 0ea9a21f..134c4061 100644
--- a/src/components/Editor/prosemirror/setup.ts
+++ b/src/components/Editor/prosemirror/setup.ts
@@ -1,5 +1,5 @@
import { keymap } from 'prosemirror-keymap'
-import { ProseMirrorExtension } from './helpers'
+import type { ProseMirrorExtension } from './helpers'
import { Schema } from 'prosemirror-model'
import base from './extension/base'
import markdown from './extension/markdown'
@@ -15,12 +15,13 @@ import dragHandle from './extension/drag-handle'
import pasteMarkdown from './extension/paste-markdown'
import table from './extension/table'
import collab from './extension/collab'
-import { Config, YOptions } from '../store'
+import type { Config, YOptions } from '../store'
import selectionMenu from './extension/selection'
+import type { Command } from 'prosemirror-state'
interface Props {
data?: unknown
- keymap?: any
+ keymap?: { [key: string]: Command; }
config: Config
markdown: boolean
path?: string
diff --git a/src/components/Editor/store/index.ts b/src/components/Editor/store/index.ts
index 66f3f72b..866f4f1a 100644
--- a/src/components/Editor/store/index.ts
+++ b/src/components/Editor/store/index.ts
@@ -5,7 +5,7 @@ import type { WebrtcProvider } from 'y-webrtc'
import type { ProseMirrorExtension, ProseMirrorState } from '../prosemirror/helpers'
import type { EditorView } from 'prosemirror-view'
import { createEmptyText } from '../prosemirror/setup'
-import type { Shout } from '../../../graphql/types.gen'
+import type { EditorState } from 'prosemirror-state'
export interface Args {
draft: string // path to draft
@@ -72,7 +72,7 @@ export interface Draft {
extensions?: ProseMirrorExtension[]
updatedAt: Date
body?: string
- text?: { doc: any; selection: { type: string; anchor: number; head: number } }
+ text?: { doc: EditorState['doc']; selection: { type: string; anchor: number; head: number } }
path?: string
markdown?: boolean
}
@@ -122,6 +122,6 @@ export const addToDrafts = (drafts: Draft[], state: State): Draft[] => {
export const createTextFromDraft = async (draft: Draft) => {
const created = createEmptyText()
- created.doc.content = Object.values(draft.text) // FIXME
+ created.doc.content = Object.values(draft.text) as any
return created
}
diff --git a/src/components/Feed/Beside.scss b/src/components/Feed/Beside.module.scss
similarity index 81%
rename from src/components/Feed/Beside.scss
rename to src/components/Feed/Beside.module.scss
index f248bcfa..18cd2468 100644
--- a/src/components/Feed/Beside.scss
+++ b/src/components/Feed/Beside.module.scss
@@ -1,4 +1,4 @@
-.beside-column {
+.besideColumn {
counter-reset: item;
list-style-type: none;
padding-left: 0;
@@ -29,17 +29,6 @@
text-align: center;
width: 2em;
}
-
- .shout-card--short {
- font-size: 1.4rem;
- margin-bottom: 0;
-
- .shout-card__title,
- .shout-card__subtitle {
- display: inline;
- @include font-size(1.4rem);
- }
- }
}
}
@@ -51,7 +40,7 @@
}
}
-.beside-column-title {
+.besideColumnTitle {
align-items: baseline;
justify-content: space-between;
display: flex;
@@ -87,14 +76,14 @@
}
}
-.beside-column__topic {
+.besideColumnTopic {
font-size: 1.2rem;
letter-spacing: 0.08em;
margin-bottom: 0.4rem;
text-transform: uppercase;
}
-.beside-column__shout {
+.besideColumnShout {
font-size: 1.4rem;
h4 {
diff --git a/src/components/Feed/Beside.tsx b/src/components/Feed/Beside.tsx
index 20da9f2b..9f510cbb 100644
--- a/src/components/Feed/Beside.tsx
+++ b/src/components/Feed/Beside.tsx
@@ -4,7 +4,7 @@ import { For, Show } from 'solid-js/web'
import { ArticleCard } from './Card'
import { AuthorCard } from '../Author/Card'
import { TopicCard } from '../Topic/Card'
-import './Beside.scss'
+import style from './Beside.module.scss'
import type { Author, Shout, Topic, User } from '../../graphql/types.gen'
import { Icon } from '../Nav/Icon'
import { t } from '../../utils/intl'
@@ -15,8 +15,10 @@ interface BesideProps {
beside: Shout
wrapper: 'topic' | 'author' | 'article' | 'top-article'
isTopicCompact?: boolean
+ isTopicInRow?: boolean
topicShortDescription?: boolean
topicsBySlug?: { [slug: string]: Topic }
+ iconButton?: boolean
}
export default (props: BesideProps) => {
@@ -27,7 +29,7 @@ export default (props: BesideProps) => {
-
+
{props.title}
@@ -38,15 +40,17 @@ export default (props: BesideProps) => {
-
+
{(value: Shout | User | Topic | Author) => (
- -
+
-
@@ -58,7 +62,7 @@ export default (props: BesideProps) => {
@@ -68,7 +72,7 @@ export default (props: BesideProps) => {
diff --git a/src/components/Feed/Card.scss b/src/components/Feed/Card.module.scss
similarity index 61%
rename from src/components/Feed/Card.scss
rename to src/components/Feed/Card.module.scss
index b14f38c8..84664914 100644
--- a/src/components/Feed/Card.scss
+++ b/src/components/Feed/Card.module.scss
@@ -1,22 +1,12 @@
-.shout-card {
+.shoutCard {
display: flex;
flex-direction: column;
line-height: 1.2;
margin-bottom: 2.4rem;
position: relative;
- .floor--1 &:nth-child(2) {
- border-top: 1px solid #141414;
- margin-top: 2.4rem !important;
- padding-top: 2.4rem;
-
- .shout-card__cover {
- display: none;
- }
- }
-
&:hover {
- .shout-card__cover img {
+ .shoutCardCover img {
transform: scale(1.05);
}
}
@@ -26,7 +16,13 @@
}
}
-.shout-card__titles-container {
+.shoutCardWithBorder {
+ border-top: 1px solid #141414;
+ margin-top: 2.4rem !important;
+ padding-top: 2.4rem;
+}
+
+.shoutCardTitlesContainer {
a {
&::before {
content: '';
@@ -39,7 +35,7 @@
}
&:hover {
- .shout-card__title .shout-card__link-container {
+ .shoutCardTitle .shoutCardLinkContainer {
background-color: #000;
color: #fff;
}
@@ -47,11 +43,11 @@
}
}
-.shout-card__cover-container {
+.shoutCardCoverContainer {
position: relative;
}
-.shout-card__cover {
+.shoutCardCover {
height: 0;
margin-bottom: 1.6rem;
overflow: hidden;
@@ -73,25 +69,19 @@
}
}
-.shout__topic,
-.shout__author {
- a {
- position: relative;
- z-index: 2;
- }
-}
-
-.shout__author,
-.shout__date {
+.shoutAuthor,
+.shoutDate {
@include font-size(1.2rem);
}
-.shout__author {
+.shoutAuthor {
margin-right: 1.6rem;
a {
border: none;
color: rgb(0 0 0 / 70%);
+ position: relative;
+ z-index: 2;
&:hover {
color: #fff;
@@ -99,15 +89,15 @@
}
}
-.shout__date {
+.shoutDate {
color: rgb(0 0 0 / 50%);
}
-.shout__details {
+.shoutDetails {
display: flex;
}
-.shout-card__title {
+.shoutCardTitle {
@include font-size(2.2rem);
font-weight: 700;
@@ -115,29 +105,33 @@
margin-bottom: 0.8rem;
}
-.shout-card__title,
-.shout-card__subtitle {
+.shoutCardTitle,
+.shoutCardSubtitle {
&,
- .shout-card__link-container {
+ .shoutCardLinkContainer {
box-decoration-break: clone;
+
+ /* stylelint-disable-next-line */
+ -webkit-box-decoration-break: clone;
}
}
-.shout-card__subtitle {
+.shoutCardSubtitle {
color: #696969;
@include font-size(1.7rem);
font-weight: 400;
line-height: 1.3;
margin-bottom: 0.8rem;
+ transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
-.shout-card__link-container {
+.shoutCardLinkContainer {
position: relative;
transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
-.shout-card__edit-control {
+.shoutCardEditControl {
border-radius: 2em;
min-height: 2.6em;
padding: 0 1.4em;
@@ -149,17 +143,17 @@
}
}
-.shout-card.withcover {
+.shoutCard.withcover {
padding: 2.4rem;
&,
a,
- .shout-card__title,
- .shout-card__subtitle {
+ .shoutCardTitle,
+ .shoutCardSubtitle {
color: #fff;
}
- .shout-card__cover {
+ .shoutCardCover {
height: 100%;
left: 0;
padding: 0;
@@ -178,7 +172,7 @@
}
}
-.shout-card__type {
+.shoutCardType {
background: #fff;
border-radius: 100%;
height: 3.2rem;
@@ -213,7 +207,7 @@
}
}
-.shout-card__content {
+.shoutCardContent {
margin-bottom: 1em;
@include media-breakpoint-up(md) {
@@ -229,7 +223,7 @@
}
.col-md-6 .col-md-6 {
- .shout-card {
+ .shoutCard {
border-bottom: 1px solid rgb(255 255 255 / 20%);
margin: 3.6rem 0 0;
padding-bottom: 2rem;
@@ -244,71 +238,56 @@
}
}
- .shout-card__cover-container {
+ .shoutCardCoverContainer {
display: none;
}
- .shout-card__title,
- .shout-card__subtitle {
+ .shoutCardTitle,
+ .shoutCardSubtitle {
display: inline;
@include font-size(2.6rem);
line-height: 1.2;
}
- .shout-card__subtitle {
+ .shoutCardSubtitle {
color: #fff;
}
- .shout__author {
+ .shoutAuthor {
margin-top: 0.6em;
}
}
}
-.floor--important {
- padding-bottom: $container-padding-x;
- padding-top: $container-padding-x;
+.shoutCardFloorImportant {
+ margin-bottom: $grid-gutter-width;
- @include media-breakpoint-up(md) {
- padding-bottom: $grid-gutter-width;
- padding-top: $grid-gutter-width;
- }
-
- h2 {
- @include font-size(4.4rem);
-
- text-align: center;
- }
-
- .shout-card {
- margin-bottom: $grid-gutter-width;
- }
-
- .shout__author {
+ .shoutAuthor {
margin-top: 0.8rem;
- }
- .col-md-6 {
- .shout-card__title,
- .shout-card__subtitle {
- display: inline;
- @include font-size(2.6rem);
-
- line-height: 1.2;
- }
-
- .shout-card__title {
- margin-right: 0.3em;
+ a {
+ color: rgb(255 255 255 / 50%);
}
}
- .shout-card__titles-container {
+ .shoutCardTitle {
+ a {
+ color: #fff;
+ }
+ }
+
+ a:hover {
+ background: #fff;
+ color: #000 !important;
+ }
+
+ .shoutCardTitlesContainer {
a {
color: #fff;
&:hover {
- .shout-card__title .shout-card__link-container {
+ .shoutCardTitle .shoutCardLinkContainer {
background-color: #fff;
color: #000;
}
@@ -317,7 +296,7 @@
}
}
-.shout-card--with-cover {
+.shoutCardWithCover {
padding: 56.2% 2.4rem 0;
@include media-breakpoint-down(sm) {
@@ -325,7 +304,7 @@
}
&.swiper-slide {
- .shout-card__content {
+ .shoutCardContent {
@include media-breakpoint-down(md) {
padding-left: 10%;
}
@@ -334,25 +313,25 @@
&,
a,
- .shout-card__title,
- .shout-card__subtitle {
+ .shoutCardTitle,
+ .shoutCardSubtitle {
color: #fff !important;
}
- .shout__author,
- .shout-card__titles-container {
+ .shoutAuthor,
+ .shoutCardTitlesContainer {
a:hover {
&,
- .shout-card__title .shout-card__link-container {
+ .shoutCardTitle .shoutCardLinkContainer {
background-color: #fff;
color: #000 !important;
}
}
}
- .shout-card__cover-container,
- .shout-card__cover,
- .shout-card__content {
+ .shoutCardCoverContainer,
+ .shoutCardCover,
+ .shoutCardContent {
height: 100%;
left: 0;
margin: 0;
@@ -362,7 +341,7 @@
z-index: -1;
}
- .shout-card__content {
+ .shoutCardContent {
display: flex;
flex-direction: column;
justify-content: end;
@@ -370,7 +349,7 @@
z-index: 1;
}
- .shout-card__cover {
+ .shoutCardCover {
padding: 0;
&::after {
@@ -383,43 +362,37 @@
}
}
- .shout-card__title {
+ .shoutCardTitle {
@include font-size(3.2rem);
}
}
-.shout-card--content-top {
- .shout-card__content {
+.shoutCardContentTop {
+ .shoutCardContent {
justify-content: start;
}
}
-.shout-card--short {
- .shout-card__title {
- @include font-size(1.7rem);
- }
-}
-
-.shout-card--photo-bottom {
- .shout-card__content {
+.shoutCardPhotoBottom {
+ .shoutCardContent {
margin-bottom: 1.6rem;
}
- .shout-card__cover-container {
+ .shoutCardCoverContainer {
order: 2;
}
}
-.shout-card--feed {
+.shoutCardFeed {
border-bottom: 1px solid #e8e8e8;
margin-bottom: 2em;
- .shout-card__content {
+ .shoutCardContent {
margin-bottom: 0;
}
}
-.shout-card__details {
+.shoutCardDetails {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
@@ -431,11 +404,11 @@
z-index: 2;
}
-.shout-card__details-content {
+.shoutCardDetailsContent {
display: flex;
}
-.shout-card__details-item {
+.shoutCardDetailsTtem {
align-items: center;
display: flex;
margin-right: 1.7em;
@@ -454,7 +427,7 @@
}
}
-.shout-card__comments {
+.shoutCardComments {
align-items: center;
display: flex;
@@ -476,12 +449,12 @@
display: flex;
}
-.rating__value {
+.ratingValue {
font-weight: bold;
margin: 0 0.5em;
}
-.rating__control {
+.ratingControl {
align-items: center;
border: 2px solid;
border-radius: 100%;
@@ -501,32 +474,18 @@
}
}
-.floor--7 {
- @include media-breakpoint-down(md) {
- margin-bottom: 1em;
+.shoutCardVertical {
+ aspect-ratio: auto;
+ height: 100%;
+ margin: 1.6rem 0;
+ padding: 0 0 20%;
+
+ @include media-breakpoint-up(md) {
+ aspect-ratio: 1 / 1.6;
+ padding: 0;
}
- .col-md-6 {
- margin-bottom: 1.6em;
-
- @include media-breakpoint-down(md) {
- margin-right: 0;
- }
- }
-
- .shout-card {
- aspect-ratio: auto;
- height: 100%;
- margin: 1.6rem 0;
- padding: 0 0 20%;
-
- @include media-breakpoint-up(md) {
- aspect-ratio: 1 / 1.6;
- padding: 0;
- }
- }
-
- .shout-card__title {
+ .shoutCardTitle {
font-size: 2.6rem !important;
@include media-breakpoint-between(lg, xl) {
@@ -534,11 +493,11 @@
}
}
- .shout-card__content {
+ .shoutCardContent {
justify-content: start;
position: relative;
- .shout-card__subtitle {
+ .shoutCardSubtitle {
@include media-breakpoint-up(lg) {
@include font-size(2rem);
}
@@ -552,44 +511,151 @@
.floor--9 {
/* TODO: refactor these styles */
- .shout-card__title,
- .shout-card__subtitle {
+ .shoutCardTitle,
+ .shoutCardSubtitle {
// display: inline;
font-size: 2.2rem;
}
- .shout-card__title {
+ .shoutCardTitle {
padding-right: 0.25em;
}
- .shout__author,
- .shout__date {
+ .shoutAuthor,
+ .shoutDate {
margin-top: 0.8rem;
}
- .beside-column .shout-card__titles-container {
+ .beside-column .shoutCardTitlesContainer {
position: relative;
a:hover {
- .shout-card__link-container {
+ .shoutCardLinkContainer {
color: #fff;
}
}
}
}
-.col-md-6,
-.col-lg-6,
-.col-md-8 {
- .shout-card__title {
+.shoutCardBigTitle {
+ .shoutCardTitle {
display: block;
@include font-size(3.2rem);
padding-right: 0;
}
- .shout-card__subtitle {
+ .shoutCardSubtitle {
color: #696969;
@include font-size(2.4rem);
}
}
+
+.shoutCardCompact {
+ .shoutCardTitle,
+ .shoutCardSubtitle {
+ display: inline;
+ @include font-size(2.6rem);
+
+ line-height: 1.2;
+ }
+
+ .shoutCardSubtitle {
+ padding-left: 0.3em;
+ box-decoration-break: slice;
+
+ /* stylelint-disable-next-line */
+ -webkit-box-decoration-break: slice;
+ }
+
+ a {
+ color: #fff;
+
+ &:hover {
+ .shoutCardSubtitle {
+ background-color: #fff;
+ color: #000;
+ }
+ }
+ }
+}
+
+.shoutCardShort {
+ font-size: 1.4rem;
+ margin-bottom: 0;
+
+ .shoutCardTitle,
+ .shoutCardSubtitle {
+ display: inline;
+
+ @include font-size(1.4rem);
+ }
+
+ .shoutCardTitle {
+ padding-right: 0.25em;
+ }
+
+ a:hover {
+ .shoutCardLinkContainer {
+ color: #fff;
+ }
+ }
+}
+
+.shoutCardSingle {
+ @include media-breakpoint-up(md) {
+ flex-direction: row;
+
+ .shoutCardTitlesContainer {
+ flex: 1;
+ }
+
+ .shoutCardCover {
+ margin-bottom: 0;
+ }
+
+ .shoutCardCoverContainer {
+ flex: 1 58.3333%;
+ }
+
+ .shoutCardContent {
+ display: flex;
+ flex-direction: column;
+ flex: 1 41.6666%;
+ justify-content: space-between;
+ margin-bottom: 0;
+ padding-left: 4rem;
+ }
+
+ .shoutTopic {
+ margin-bottom: 3.2rem;
+ }
+
+ .shoutCardTitle {
+ margin-bottom: 2.4rem;
+ }
+
+ .shoutAuthor {
+ align-items: end;
+ display: flex;
+ flex: 1;
+ }
+ }
+
+ .shoutCardType {
+ top: 0;
+ }
+
+ .shoutCardTitle {
+ @include font-size(4rem);
+
+ font-weight: 900;
+ line-height: 1.1;
+ }
+
+ .shoutCardSubtitle {
+ color: #696969;
+ flex: 1;
+ @include font-size(2.4rem);
+ }
+}
diff --git a/src/components/Feed/Card.tsx b/src/components/Feed/Card.tsx
index 01a79125..c1ae7cda 100644
--- a/src/components/Feed/Card.tsx
+++ b/src/components/Feed/Card.tsx
@@ -5,9 +5,11 @@ import type { Shout } from '../../graphql/types.gen'
import { capitalize } from '../../utils'
import { translit } from '../../utils/ru2en'
import { Icon } from '../Nav/Icon'
-import './Card.scss'
+import style from './Card.module.scss'
import { locale } from '../../stores/ui'
import { handleClientRouteLinkClick } from '../../stores/router'
+import { clsx } from 'clsx'
+import CardTopic from './CardTopic'
interface ArticleCardProps {
settings?: {
@@ -20,6 +22,14 @@ interface ArticleCardProps {
photoBottom?: boolean
additionalClass?: string
isFeedMode?: boolean
+ isFloorImportant?: boolean
+ isWithCover?: boolean
+ isBigTitle?: boolean
+ isVertical?: boolean
+ isShort?: boolean
+ withBorder?: boolean
+ isCompact?: boolean
+ isSingle?: boolean
}
article: Shout
}
@@ -62,56 +72,65 @@ export const ArticleCard = (props: ArticleCardProps) => {
return (
- {t('By signing up you agree with our')} - - {' ' + t('terms of use')} + {t('By signing up you agree with our')}{' '} + { + hideModal() + handleClientRouteLinkClick(event) + }} + > + {t('terms of use')} , {t('personal data usage and email notifications')}.
diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss index c04308a7..0a34a45e 100644 --- a/src/components/Nav/Header.module.scss +++ b/src/components/Nav/Header.module.scss @@ -20,6 +20,10 @@ } } +.mainHeaderInner { + position: relative; +} + .headerFixed.headerScrolledBottom, .headerFixed.headerScrolledTop { .mainLogo { @@ -31,9 +35,26 @@ } } +.popupShare { + opacity: 1; + transition: opacity 0.3s; + z-index: 1; + + .headerScrolledTop & { + opacity: 0; + transition: opacity 0.3s, z-index 0s 0.3s; + z-index: -1; + } +} + .headerFixed { position: fixed; top: 0; + + .fixed & { + bottom: 0; + margin-bottom: 0; + } } .headerInner { @@ -44,8 +65,7 @@ justify-content: space-between; margin: 0; - &.fixed { - border-bottom: 4px solid #000; + .fixed & { left: 0; position: fixed; right: 0; @@ -62,25 +82,33 @@ .mainLogo { align-items: center; display: inline-flex; - height: 70px; + height: 56px; padding: 0 $container-padding-x 0 0; position: relative; transition: height 0.2s; text-align: center; z-index: 9; + @include media-breakpoint-up(md) { + height: 70px; + } + @include media-breakpoint-up(lg) { height: 80px; } img { - height: 32px; + height: 20px; object-fit: contain; object-position: left; transition: height 0.2s; vertical-align: middle; width: 100px; + @include media-breakpoint-up(md) { + height: 32px; + } + @include media-breakpoint-up(lg) { width: 175px; } @@ -113,6 +141,14 @@ padding-left: 0; position: relative; @include font-size(1.7rem); + + @include media-breakpoint-down(md) { + display: none; + } + + .fixed & { + display: block; + } } .mainNavigation { @@ -145,7 +181,7 @@ padding: divide($container-padding-x, 2); } - &.fixed { + .fixed & { display: inline-flex; @include media-breakpoint-down(lg) { @@ -181,13 +217,9 @@ display: inline-flex; float: right; padding-right: 0; - padding-left: 0; + padding-left: divide($container-padding-x, 2); width: 2.2rem; - @include media-breakpoint-up(sm) { - padding-left: divide($container-padding-x, 2); - } - @include media-breakpoint-up(md) { display: none; } @@ -235,7 +267,7 @@ top: 0; } - &.fixed { + .fixed & { > div { opacity: 0; transition: opacity 0s; @@ -276,6 +308,10 @@ text-overflow: ellipsis; white-space: nowrap; width: 100%; + + @include media-breakpoint-down(md) { + display: none; + } } .headerSearch { @@ -305,6 +341,7 @@ .articleControls { display: flex; + justify-content: flex-end; left: 0; position: absolute; top: 50%; diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx index f767aa73..34e5ef4b 100644 --- a/src/components/Nav/Header.tsx +++ b/src/components/Nav/Header.tsx @@ -3,12 +3,14 @@ import Private from './Private' import Notifications from './Notifications' import { Icon } from './Icon' import { Modal } from './Modal' +import { Popup } from './Popup' import AuthModal from './AuthModal' import { t } from '../../utils/intl' -import { useModalStore, showModal, useWarningsStore } from '../../stores/ui' +import {useModalStore, showModal, useWarningsStore, toggleModal} from '../../stores/ui' import { useAuthStore } from '../../stores/auth' import { handleClientRouteLinkClick, router, Routes, useRouter } from '../../stores/router' import styles from './Header.module.scss' +import stylesPopup from './Popup.module.scss' import privateStyles from './Private.module.scss' import { getPagePath } from '@nanostores/router' import { clsx } from 'clsx' @@ -46,11 +48,10 @@ export const Header = (props: Props) => { const toggleFixed = () => setFixed(!fixed()) // effects createEffect(() => { - if (fixed() || getModal()) { - document.body.classList.add('fixed') - } else { - document.body.classList.remove('fixed') - } + const isFixed = fixed() || (getModal() && getModal() !== 'share'); + + document.body.classList.toggle('fixed', isFixed); + document.body.classList.toggle(styles.fixed, isFixed); }, [fixed(), getModal()]) // derived @@ -68,8 +69,6 @@ export const Header = (props: Props) => { onMount(() => { let scrollTop = window.scrollY - // window.console.log(props.title) - const handleScroll = () => { setIsScrollingBottom(window.scrollY > scrollTop) setIsScrolled(window.scrollY > 0) @@ -95,7 +94,43 @@ export const Header = (props: Props) => {+-
+
+
+ VK
+
+
+ -
+
+
+ Facebook
+
+
+ -
+
+
+ Twitter
+
+
+ -
+
+
+ Telegram
+
+
+ -
+
+
+ {t('Copy link')}
+
+
+
+