External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

perf: improve responsiveness

Browse Source
This commit is contained in:
plebeius.eth
2024-04-10 13:16:07 +02:00
parent b1fb9f9d0c
commit 62b83bf7ea
7 changed files with 36 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/embed/embed.module.css
+6 -6
View File
@@ -3,7 +3,7 @@
width: 700px !important;
}
@media (max-width: 768px) {
@media (max-width: 640px) {
.audioEmbed {
max-height: 250px !important;
width: 100% !important;
@@ -15,7 +15,7 @@
width: 360px !important;
}
@media (max-width: 768px) {
@media (max-width: 640px) {
.instagramEmbed {
max-height: 420px !important;
width: 100% !important;
@@ -27,7 +27,7 @@
height: 520px !important;
}
@media (max-width: 768px) {
@media (max-width: 640px) {
.redditEmbed {
width: 100% !important;
height: 520px !important;
@@ -39,7 +39,7 @@
height: 780px !important;
}
@media (max-width: 768px) {
@media (max-width: 640px) {
.tiktokEmbed {
width: 100% !important;
height: 70vh !important;
@@ -51,7 +51,7 @@
width: 800px !important;
}
@media (max-width: 768px) {
@media (max-width: 640px) {
.videoEmbed {
max-height: 250px !important;
width: 100% !important;
@@ -62,7 +62,7 @@
height: 580px !important;
}
@media (max-width: 768px) {
@media (max-width: 640px) {
.xEmbed {
width: 100% !important;
height: 50vh !important;
src/components/post-form/post-form.module.css
+1 -1
View File
@@ -25,7 +25,7 @@
}
}
@media (min-width: 641px) {
@media (min-width: 640px) {
.postFormButtonMobile {
display: none;
}
src/components/post/post.module.css
+1 -1
View File
@@ -384,7 +384,7 @@
}
}
@media (min-width: 641px) {
@media (min-width: 640px) {
.postMobile {
display: none;
}
src/components/post/post.tsx
+7 -2
View File
@@ -8,6 +8,7 @@ import { getFormattedDate } from '../../lib/utils/time-utils';
import { isPostPageView } from '../../lib/utils/view-utils';
import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
import useReplies from '../../hooks/use-replies';
import useWindowWidth from '../../hooks/use-window-width';
import styles from './post.module.css';
import Markdown from '../markdown';
import CommentMedia from '../comment-media';
@@ -417,11 +418,15 @@ const ReplyMobile = ({ reply, roles }: PostProps) => {
const Post = ({ post, showAllReplies = false }: PostProps) => {
const subplebbit = useSubplebbit({ subplebbitAddress: post?.subplebbitAddress });
const isMobile = useWindowWidth() < 640;
return (
<div className={styles.thread}>
<div className={styles.postContainer}>
<PostDesktop post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} />
<PostMobile post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} />
{isMobile ? (
<PostMobile post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} />
) : (
<PostDesktop post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} />
)}
</div>
</div>
);