From 7477ca073a3ec7fc5dfe4f120d86b2f4e097259a Mon Sep 17 00:00:00 2001 From: austinkelsay Date: Tue, 10 Sep 2024 17:56:48 -0500 Subject: [PATCH] Mobile styles and some styling consistency fixes --- src/components/feeds/MessageInput.js | 4 +- src/components/feeds/NostrFeed.js | 10 -- .../feeds/messages/CommunityMessage.js | 98 +++++++++++++++---- src/components/profile/UserContent.js | 15 ++- src/components/profile/UserProfile.js | 17 ++-- src/components/profile/UserSettings.js | 9 +- .../profile/subscription/UserSubscription.js | 9 +- src/pages/details/[slug]/index.js | 6 +- src/pages/feed.js | 2 +- 9 files changed, 121 insertions(+), 49 deletions(-) diff --git a/src/components/feeds/MessageInput.js b/src/components/feeds/MessageInput.js index e88e126..27af3bc 100644 --- a/src/components/feeds/MessageInput.js +++ b/src/components/feeds/MessageInput.js @@ -38,8 +38,8 @@ const MessageInput = ({ onMessageSent }) => { const headerTemplate = (options) => { return (
- -

New Message

+ +

New Message

); }; diff --git a/src/components/feeds/NostrFeed.js b/src/components/feeds/NostrFeed.js index 52b3bf9..a511ec3 100644 --- a/src/components/feeds/NostrFeed.js +++ b/src/components/feeds/NostrFeed.js @@ -103,16 +103,6 @@ const NostrFeed = ({ searchQuery }) => { platform="nostr" platformIcon={Nostr} platformLink={`https://nostr.band/${nip19.noteEncode(message.id)}`} - additionalFooter={ - session?.user?.pubkey && ( - - ) - } /> )) ) : ( diff --git a/src/components/feeds/messages/CommunityMessage.js b/src/components/feeds/messages/CommunityMessage.js index 155944f..37368d8 100644 --- a/src/components/feeds/messages/CommunityMessage.js +++ b/src/components/feeds/messages/CommunityMessage.js @@ -1,21 +1,51 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import { Card } from 'primereact/card'; import { Avatar } from 'primereact/avatar'; import { Tag } from 'primereact/tag'; +import { Panel } from 'primereact/panel'; import GenericButton from '@/components/buttons/GenericButton'; import { highlightText } from '@/utils/text'; +import { useSession } from 'next-auth/react'; import NostrIcon from '../../../../public/images/nostr.png'; import Image from 'next/image'; import { nip19 } from 'nostr-tools'; +import ZapThreadsWrapper from '@/components/ZapThreadsWrapper'; const StackerNewsIconComponent = () => ( - - - - + + + + ); +const headerTemplate = (options, windowWidth, platform, id) => { + return ( +
+ + 768 ? `View in ${platform}` : null} + icon="pi pi-external-link" + outlined + size="small" + onClick={() => window.open(getPlatformLink(platform, id), '_blank')} + tooltip={windowWidth < 768 ? `View in ${platform}` : null} + tooltipOptions={{ position: 'left' }} + /> +
+ ); +}; + const CommunityMessage = ({ message, searchQuery, windowWidth, platform }) => { + const [npub, setNpub] = useState(null); + const [collapsed, setCollapsed] = useState(true); + const { data: session } = useSession(); + + useEffect(() => { + if (session?.user?.pubkey) { + setNpub(nip19.npubEncode(session.user.pubkey)); + } + }, [session]); + const header = (
@@ -32,20 +62,50 @@ const CommunityMessage = ({ message, searchQuery, windowWidth, platform }) => { ); const footer = ( -
- - {new Date(message.timestamp).toLocaleString()} - - 768 ? `View in ${platform}` : null} - icon="pi pi-external-link" - outlined - size="small" - className='my-2' - onClick={() => window.open(getPlatformLink(platform, message.id), '_blank')} - tooltip={windowWidth < 768 ? `View in ${platform}` : null} - tooltipOptions={{ position: 'left' }} - /> +
+ { + platform === 'nostr' ? ( +

+ {new Date(message.timestamp).toLocaleString()} +

+ ) : null + } +
+ { + session?.user?.pubkey && platform === 'nostr' ? ( + headerTemplate({ onTogglerClick: () => setCollapsed(!collapsed) }, windowWidth, platform, message.id)} + toggleable + collapsed={collapsed} + onToggle={(e) => setCollapsed(e.value)} + className="w-full" + > + + + + ) : ( +
+

+ {new Date(message.timestamp).toLocaleString()} +

+ 768 ? `View in ${platform}` : null} + icon="pi pi-external-link" + outlined + size="small" + onClick={() => window.open(getPlatformLink(platform, message.id), '_blank')} + tooltip={windowWidth < 768 ? `View in ${platform}` : null} + tooltipOptions={{ position: 'left' }} + /> +
+ ) + } +
); diff --git a/src/components/profile/UserContent.js b/src/components/profile/UserContent.js index 073da3e..f68813a 100644 --- a/src/components/profile/UserContent.js +++ b/src/components/profile/UserContent.js @@ -11,6 +11,7 @@ import { useContentIdsQuery } from "@/hooks/apiQueries/useContentIdsQuery"; import { useSession } from "next-auth/react"; import { useToast } from "@/hooks/useToast"; import { Divider } from "primereact/divider"; +import useWindowWidth from "@/hooks/useWindowWidth"; import ContentList from "@/components/content/lists/ContentList"; import { parseEvent } from "@/utils/nostr"; import { ProgressSpinner } from "primereact/progressspinner"; @@ -23,7 +24,7 @@ const UserContent = () => { const [isClient, setIsClient] = useState(false); const [content, setContent] = useState([]); const [publishedContent, setPublishedContent] = useState([]); - + const windowWidth = useWindowWidth(); const { data: session, status } = useSession(); const [user, setUser] = useState(null); const router = useRouter(); @@ -116,7 +117,11 @@ const UserContent = () => { return (
-

My Content

+ { + windowWidth < 768 && ( +

My Content

+ ) + }
{ label="Create" severity="success" outlined - className="mt-2" + className="mt-2 max-tab:w-[50%]" />
- +
+ +
{isLoading ? ( diff --git a/src/components/profile/UserProfile.js b/src/components/profile/UserProfile.js index be88148..3e11c9a 100644 --- a/src/components/profile/UserProfile.js +++ b/src/components/profile/UserProfile.js @@ -1,7 +1,5 @@ import React, { useRef, useState, useEffect } from "react"; import { DataTable } from "primereact/datatable"; -import { Button } from "primereact/button"; -import { Avatar } from "primereact/avatar"; import { Menu } from "primereact/menu"; import { Column } from "primereact/column"; import { useImageProxy } from "@/hooks/useImageProxy"; @@ -10,12 +8,12 @@ import { ProgressSpinner } from "primereact/progressspinner"; import PurchasedListItem from "@/components/profile/PurchasedListItem"; import { useNDKContext } from "@/context/NDKContext"; import { formatDateTime } from "@/utils/time"; -import { findKind0Fields } from "@/utils/nostr"; import Image from "next/image"; -import BitcoinConnectButton from "@/components/bitcoinConnect/BitcoinConnect"; -import UserContent from "@/components/profile/UserContent"; import SubscribeModal from "@/components/profile/subscription/SubscribeModal"; +import useWindowWidth from "@/hooks/useWindowWidth"; + const UserProfile = () => { + const windowWidth = useWindowWidth(); const [user, setUser] = useState(null); const { data: session } = useSession(); const { returnImageProxy } = useImageProxy(); @@ -53,7 +51,12 @@ const UserProfile = () => { return ( user && ( -
+
+ { + windowWidth < 768 && ( +

Profile

+ ) + }
{ emptyMessage="No purchases" value={session.user?.purchased} header={header} - style={{ maxWidth: "90%", margin: "0 auto", borderRadius: "10px" }} + style={{ maxWidth: windowWidth < 768 ? "100%" : "90%", margin: "0 auto", borderRadius: "10px" }} pt={{ wrapper: { className: "rounded-lg rounded-t-none" diff --git a/src/components/profile/UserSettings.js b/src/components/profile/UserSettings.js index 369393c..442b4b4 100644 --- a/src/components/profile/UserSettings.js +++ b/src/components/profile/UserSettings.js @@ -6,6 +6,7 @@ import { useImageProxy } from "@/hooks/useImageProxy"; import { useSession } from 'next-auth/react'; import { ProgressSpinner } from "primereact/progressspinner"; import { useNDKContext } from "@/context/NDKContext"; +import useWindowWidth from "@/hooks/useWindowWidth"; import Image from "next/image"; import BitcoinConnectButton from "@/components/bitcoinConnect/BitcoinConnect"; @@ -14,6 +15,7 @@ const UserSettings = () => { const { data: session } = useSession(); const { returnImageProxy } = useImageProxy(); const { ndk } = useNDKContext(); + const windowWidth = useWindowWidth(); useEffect(() => { if (session?.user) { @@ -62,7 +64,12 @@ const UserSettings = () => { return ( user && ( -
+
+ { + windowWidth < 768 && ( +

Settings

+ ) + }
{ const { data: session, update } = useSession(); const { showToast } = useToast(); const router = useRouter(); + const windowWidth = useWindowWidth(); const [isProcessing, setIsProcessing] = useState(false); const [subscribed, setSubscribed] = useState(false); const [subscribedUntil, setSubscribedUntil] = useState(null); @@ -117,7 +118,11 @@ const UserSubscription = ({ user }) => { return (
-

Subscription Management

+ { + windowWidth < 768 && ( +

Subscription Management

+ ) + } {subscribed && (
diff --git a/src/pages/details/[slug]/index.js b/src/pages/details/[slug]/index.js index 86c3b42..50985ed 100644 --- a/src/pages/details/[slug]/index.js +++ b/src/pages/details/[slug]/index.js @@ -204,13 +204,13 @@ export default function Details() { const renderContent = () => { if (decryptedContent) { - return ; + return ; } if (paidResource && !decryptedContent) { return

This content is paid and needs to be purchased before viewing.

; } if (processedEvent?.content) { - return ; + return ; } return null; } @@ -262,7 +262,7 @@ export default function Details() { />
)} -
+
{ processedEvent && processedEvent.content && renderContent() } diff --git a/src/pages/feed.js b/src/pages/feed.js index ca7c034..8d4e135 100644 --- a/src/pages/feed.js +++ b/src/pages/feed.js @@ -58,7 +58,7 @@ const Feed = () => {
-

Community

+

Community