- }>
+
+ } />
} />
diff --git a/src/components/header/comments-buttons/comments-buttons.module.css b/src/components/header/comments-buttons/comments-buttons.module.css
index ec420ff7..b82dd82f 100644
--- a/src/components/header/comments-buttons/comments-buttons.module.css
+++ b/src/components/header/comments-buttons/comments-buttons.module.css
@@ -1,9 +1,12 @@
+.wrapper {
+ display: flex;
+}
+
.pageName {
font-weight: bold;
margin-right: 1ex;
font-variant: small-caps;
font-size: 1.2em;
- padding: 43px 0 0 15px;
}
.pageName a {
@@ -15,13 +18,11 @@
list-style: none;
white-space: nowrap;
display: inline-block;
- margin-bottom: -43px;
padding-left: 5px;
- transform: translateY(0.5px);
}
_::-webkit-full-page-media, _:future, :root .tabMenu {
- margin-bottom: -44px;
+ transform: translateY(0.5px);
}
.tabMenu li {
@@ -39,19 +40,33 @@ _::-webkit-full-page-media, _:future, :root .tabMenu {
border-bottom: 1px solid var(--background);
}
-@media (max-width: 768px) {
- .tabMenu {
- padding-top: 49px;
- position: absolute;
+
+@media (min-width: 768px) {
+ .wrapper {
+ margin-top: 44px;
+ margin-left: 15px;
}
- .tabMenu li a {
- line-height: 0px;
+ .tabMenu {
+ order: 2;
}
.pageName {
- padding-top: 47px;
- position: absolute;
- margin-left: 80px;
+ order: 1;
+ }
+}
+
+@media (max-width: 768px) {
+ .wrapper {
+ margin-top: 47px;
+ }
+
+ .tabMenu {
+ order: 1;
+ margin-right: 5px;
+ }
+
+ .pageName {
+ order: 2;
}
}
\ No newline at end of file
diff --git a/src/components/header/comments-buttons/comments-buttons.tsx b/src/components/header/comments-buttons/comments-buttons.tsx
index 0077fe6e..03fdcea1 100644
--- a/src/components/header/comments-buttons/comments-buttons.tsx
+++ b/src/components/header/comments-buttons/comments-buttons.tsx
@@ -11,7 +11,7 @@ const CommentsButtons: FC = () => {
const { title, shortAddress } = subplebbit || {};
return (
- <>
+
{
{t('header_comments')}
-
+
);
};
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 7f57a3b0..34340fb1 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -4,7 +4,8 @@ import { useTranslation } from 'react-i18next';
import styles from './header.module.css';
import useTheme from '../../hooks/use-theme';
import AccountBar from './account-bar';
-import { SortButtons, CommentsButtons } from '../header';
+import CommentsButtons from '../header/comments-buttons';
+import SortButtons from '../header/sort-buttons';
// prettier-ignore
const availableLanguages = ['ar', 'bn', 'cs', 'da', 'de', 'el', 'en', 'es', 'fa', 'fi', 'fil', 'fr', 'he', 'hi', 'hu', 'id', 'it', 'ja', 'ko', 'mr', 'nl', 'no', 'pl', 'pt', 'ro', 'ru', 'sq', 'sv', 'te', 'th', 'tr', 'uk', 'ur', 'vi', 'zh'];
diff --git a/src/components/header/index.ts b/src/components/header/index.ts
index f7a1b03e..f617627a 100644
--- a/src/components/header/index.ts
+++ b/src/components/header/index.ts
@@ -1,4 +1 @@
-export {default} from './header';
-export {default as AccountBar} from './account-bar';
-export {default as SortButtons} from './sort-buttons';
-export {default as CommentsButtons} from './comments-buttons';
\ No newline at end of file
+export {default} from './header';
\ No newline at end of file
diff --git a/src/components/post/index.ts b/src/components/post/index.ts
index dbc3d829..4a8416c5 100644
--- a/src/components/post/index.ts
+++ b/src/components/post/index.ts
@@ -1,7 +1 @@
-export {default} from './post'
-export {default as Embed} from './embed'
-export {default as Expando} from './expando'
-export {default as ExpandButton} from './expand-button'
-export {default as Flair} from './flair'
-export {default as PostTools} from './post-tools'
-export {default as Thumbnail} from './thumbnail'
\ No newline at end of file
+export {default} from './post';
\ No newline at end of file
diff --git a/src/components/reply/reply.module.css b/src/components/reply/reply.module.css
index cd4bf612..bbccf841 100644
--- a/src/components/reply/reply.module.css
+++ b/src/components/reply/reply.module.css
@@ -77,6 +77,7 @@
.usertext {
font-size: small;
unicode-bidi: isolate;
+ margin-top: 5px;
}
.md {
@@ -90,6 +91,11 @@
word-wrap: break-word;
}
+.usertext a {
+ color: var(--text);
+ text-decoration: none;
+}
+
.buttons {
list-style-type: none;
margin-left: 29px;
diff --git a/src/components/reply/reply.tsx b/src/components/reply/reply.tsx
index d731d344..e0d107f8 100644
--- a/src/components/reply/reply.tsx
+++ b/src/components/reply/reply.tsx
@@ -5,7 +5,9 @@ import { useTranslation } from 'react-i18next';
import styles from './reply.module.css';
import useReplies from '../../hooks/use-replies';
import utils from '../../lib/utils';
-import { Thumbnail, Expando, ExpandButton } from '../post';
+import Expando from '../post/expando/';
+import ExpandButton from '../post/expand-button/';
+import Thumbnail from '../post/thumbnail/';
interface ReplyProps {
key: number;
@@ -18,8 +20,10 @@ const Reply: FC
= ({ reply }) => {
cid,
content,
depth,
+ downvoteCount,
link,
timestamp,
+ upvoteCount,
} = reply || {};
const replies = useReplies(reply);
const [expanded, setExpanded] = useState(false);
@@ -27,6 +31,11 @@ const Reply: FC = ({ reply }) => {
const commentMediaInfo = utils.getCommentMediaInfoMemoized(reply);
const hasThumbnail = utils.hasThumbnail(commentMediaInfo, link);
const { t } = useTranslation();
+ let score = upvoteCount - downvoteCount;
+ if ((upvoteCount === 0 && downvoteCount === 0) || (upvoteCount === 1 && downvoteCount === 0)) {
+ score = 1;
+ }
+ const scoreTranslation = score === 1 ? t('reply_score_singular') : t('reply_score_plural', { count: score });
return (
@@ -47,15 +56,24 @@ const Reply: FC
= ({ reply }) => {
>
{shortAddress}
- 1 point
+ {scoreTranslation}
{utils.getFormattedTime(timestamp)}
{hasThumbnail &&
}
{hasThumbnail &&
}
-
{content}
+ {link && (
+ <>
+
+ ({link})
+
+
+
+
+ )}
{hasThumbnail &&
}
+
{content}
diff --git a/src/components/views/comments/comments.module.css b/src/components/views/comments/comments.module.css
index 967f3dab..ef28411e 100644
--- a/src/components/views/comments/comments.module.css
+++ b/src/components/views/comments/comments.module.css
@@ -1,13 +1,3 @@
-.content {
- position: fixed;
- top: 0;
- width: 100%;
- height: 100%;
- overflow-x: hidden;
- z-index: 999;
- background-color: var(--background);
-}
-
.comments {
padding: 7px 5px 0px 5px;
margin-bottom: 200px;
diff --git a/src/components/views/comments/comments.tsx b/src/components/views/comments/comments.tsx
index c73cf342..5fec24e9 100644
--- a/src/components/views/comments/comments.tsx
+++ b/src/components/views/comments/comments.tsx
@@ -3,8 +3,6 @@ import { useParams } from 'react-router-dom';
import { useComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import { useTranslation } from 'react-i18next';
import styles from './comments.module.css';
-import TopBar from '../../topbar';
-import Header from '../../header';
import Post from '../../post';
import useReplies from '../../../hooks/use-replies';
import Reply from '../../reply/reply';
@@ -25,43 +23,38 @@ const Comments: FC = () => {
} else {
document.title = 'seedit';
}
- window.scrollTo(0, 0);
}, [threadTitle, subplebbitTitle]);
+ useEffect(() => {
+ window.scrollTo(0, 0);
+ }, []);
+
return (
- <>
-
-
-
-
-
-
-
-
- {replyCount === 0 ? t('no_comments') : t('all_comments', { count: replyCount })}
-
+
+
+
+
+ {replyCount === 0 ? t('no_comments') : t('all_comments', { count: replyCount })}
+
+
+
+
{t('reply_sorted_by')}:
+
+ {t('reply_best')}
-
-
-
{t('reply_sorted_by')}:
-
- {t('reply_best')}
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
{replies}
+
{replies}
-
+
);
};
diff --git a/src/components/views/home/home.tsx b/src/components/views/home/home.tsx
index 6be03c7c..420ae3c7 100644
--- a/src/components/views/home/home.tsx
+++ b/src/components/views/home/home.tsx
@@ -1,13 +1,10 @@
import { FC, useEffect, useRef } from 'react';
-import { useLocation, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
import { useFeed } from '@plebbit/plebbit-react-hooks';
import useDefaultSubplebbits from '../../../hooks/use-default-subplebbits';
import styles from './home.module.css';
-import TopBar from '../../topbar/topbar';
-import Header from '../../header';
import Post from '../../post';
-import Comments from '../comments/comments';
const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
@@ -16,11 +13,8 @@ const NoPosts = () => 'no posts';
const Home: FC = () => {
const subplebbitAddresses = useDefaultSubplebbits();
const sortType = useParams<{ sortType: string }>().sortType || 'hot';
- const { subplebbitAddress, commentCid } = useParams();
const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType });
const loadingStateString = 'loading...';
- const { pathname } = useLocation();
- const isCommentsModalOpen = pathname === `/p/${subplebbitAddress}/c/${commentCid}`;
useEffect(() => {
document.title = `seedit`;
@@ -52,27 +46,19 @@ const Home: FC = () => {
return (
-
-
- {!isCommentsModalOpen && (
-
}
- useWindowScroll={!isCommentsModalOpen}
- components={{ Footer }}
- endReached={loadMore}
- ref={virtuosoRef}
- restoreStateFrom={lastVirtuosoState}
- initialScrollTop={lastVirtuosoState?.scrollTop}
- />
- )}
-
-
-
+
}
+ useWindowScroll={true}
+ components={{ Footer }}
+ endReached={loadMore}
+ ref={virtuosoRef}
+ restoreStateFrom={lastVirtuosoState}
+ initialScrollTop={lastVirtuosoState?.scrollTop}
+ />
);