mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-04-19 19:01:19 +00:00
Mobile styles and some styling consistency fixes
This commit is contained in:
austinkelsay
parent
7c8273d663
commit
7477ca073a
@ -38,8 +38,8 @@ const MessageInput = ({ onMessageSent }) => {
|
||||
const headerTemplate = (options) => {
|
||||
return (
|
||||
<div className="flex align-items-center justify-content-between my-1 py-2">
|
||||
<GenericButton outlined severity="primary" size="small" className="py-1" onClick={options.onTogglerClick} icon={options.collapsed ? 'pi pi-chevron-down' : 'pi pi-chevron-up'} />
|
||||
<h3 className="m-0 ml-2">New Message</h3>
|
||||
<GenericButton outlined severity="primary" size="small" className="py-0" onClick={options.onTogglerClick} icon={options.collapsed ? 'pi pi-chevron-down' : 'pi pi-chevron-up'} />
|
||||
<h2 className="m-0 ml-2">New Message</h2>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -103,16 +103,6 @@ const NostrFeed = ({ searchQuery }) => {
|
||||
platform="nostr"
|
||||
platformIcon={<Image src={NostrIcon} alt="Nostr" width={14} height={14} className='mr-[1px]' />}
|
||||
platformLink={`https://nostr.band/${nip19.noteEncode(message.id)}`}
|
||||
additionalFooter={
|
||||
session?.user?.pubkey && (
|
||||
<ZapThreadsWrapper
|
||||
anchor={nip19.noteEncode(message.id)}
|
||||
user={npub}
|
||||
relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://nostr.mutinywallet.com/, wss://relay.mutinywallet.com/, wss://relay.primal.net/"
|
||||
disable=""
|
||||
/>
|
||||
)
|
||||
}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
|
||||
@ -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 = () => (
|
||||
<svg width="16" height="16" className='mr-2' viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="#facc15" fillRule="evenodd" d="m41.7 91.4 41.644 59.22-78.966 69.228L129.25 155.94l-44.083-58.14 54.353-65.441Z"/>
|
||||
<path fill="#facc15" fillRule="evenodd" d="m208.355 136.74-54.358-64.36-38.4 128.449 48.675-74.094 64.36 65.175L251.54 42.497Z"/>
|
||||
</svg>
|
||||
<svg width="16" height="16" className='mr-2' viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="#facc15" fillRule="evenodd" d="m41.7 91.4 41.644 59.22-78.966 69.228L129.25 155.94l-44.083-58.14 54.353-65.441Z" />
|
||||
<path fill="#facc15" fillRule="evenodd" d="m208.355 136.74-54.358-64.36-38.4 128.449 48.675-74.094 64.36 65.175L251.54 42.497Z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const headerTemplate = (options, windowWidth, platform, id) => {
|
||||
return (
|
||||
<div className="flex flex-row justify-between items-end mb-2">
|
||||
<GenericButton outlined severity="primary" size="small" className="py-0" onClick={options.onTogglerClick} icon={options.collapsed ? 'pi pi-chevron-down' : 'pi pi-chevron-up'} tooltip={'comments'} tooltipOptions={{ position: 'right' }} />
|
||||
<GenericButton
|
||||
label={windowWidth > 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' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
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 = (
|
||||
<div className="flex flex-row w-full items-center justify-between p-4 bg-gray-800 rounded-t-lg">
|
||||
<div className="flex flex-row items-center">
|
||||
@ -32,20 +62,50 @@ const CommunityMessage = ({ message, searchQuery, windowWidth, platform }) => {
|
||||
);
|
||||
|
||||
const footer = (
|
||||
<div className="w-full flex justify-between items-center">
|
||||
<span className="rounded-lg text-sm text-gray-300">
|
||||
{new Date(message.timestamp).toLocaleString()}
|
||||
</span>
|
||||
<GenericButton
|
||||
label={windowWidth > 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' }}
|
||||
/>
|
||||
<div className='w-full flex flex-col justify-between items-start'>
|
||||
{
|
||||
platform === 'nostr' ? (
|
||||
<p className="rounded-lg text-sm text-gray-300">
|
||||
{new Date(message.timestamp).toLocaleString()}
|
||||
</p>
|
||||
) : null
|
||||
}
|
||||
<div className="w-full flex flex-row justify-between items-end">
|
||||
{
|
||||
session?.user?.pubkey && platform === 'nostr' ? (
|
||||
<Panel
|
||||
headerTemplate={() => headerTemplate({ onTogglerClick: () => setCollapsed(!collapsed) }, windowWidth, platform, message.id)}
|
||||
toggleable
|
||||
collapsed={collapsed}
|
||||
onToggle={(e) => setCollapsed(e.value)}
|
||||
className="w-full"
|
||||
>
|
||||
|
||||
<ZapThreadsWrapper
|
||||
anchor={nip19.noteEncode(message.id)}
|
||||
user={npub}
|
||||
relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://nostr.mutinywallet.com/, wss://relay.mutinywallet.com/, wss://relay.primal.net/"
|
||||
disable=""
|
||||
/>
|
||||
</Panel>
|
||||
) : (
|
||||
<div className="w-full flex flex-row justify-between items-end">
|
||||
<p className="rounded-lg text-sm text-gray-300">
|
||||
{new Date(message.timestamp).toLocaleString()}
|
||||
</p>
|
||||
<GenericButton
|
||||
label={windowWidth > 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' }}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
@ -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 (
|
||||
<div className="p-4">
|
||||
<h1 className="text-3xl font-bold mb-6">My Content</h1>
|
||||
{
|
||||
windowWidth < 768 && (
|
||||
<h1 className="text-3xl font-bold mb-6">My Content</h1>
|
||||
)
|
||||
}
|
||||
<div className="flex flex-row w-full justify-between px-8 max-tab:flex-col max-tab:px-0">
|
||||
<MenuTab
|
||||
items={contentItems}
|
||||
@ -128,10 +133,12 @@ const UserContent = () => {
|
||||
label="Create"
|
||||
severity="success"
|
||||
outlined
|
||||
className="mt-2"
|
||||
className="mt-2 max-tab:w-[50%]"
|
||||
/>
|
||||
</div>
|
||||
<Divider />
|
||||
<div className="w-full px-8 max-tab:px-0">
|
||||
<Divider />
|
||||
</div>
|
||||
<div className="w-full mx-auto my-8">
|
||||
<div className="w-full mx-auto px-8 max-tab:px-0">
|
||||
{isLoading ? (
|
||||
|
||||
@ -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 && (
|
||||
<div className="h-full w-full min-bottom-bar:w-[86vw] max-sidebar:w-[100vw] mx-auto">
|
||||
<div className="p-4">
|
||||
{
|
||||
windowWidth < 768 && (
|
||||
<h1 className="text-3xl font-bold mb-6">Profile</h1>
|
||||
)
|
||||
}
|
||||
<div className="w-full flex flex-col justify-center mx-auto">
|
||||
<div className="relative flex w-full items-center justify-center">
|
||||
<Image
|
||||
@ -87,7 +90,7 @@ const UserProfile = () => {
|
||||
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"
|
||||
|
||||
@ -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 && (
|
||||
<div className="h-full w-full min-bottom-bar:w-[86vw] max-sidebar:w-[100vw] mx-auto">
|
||||
<div className="p-4">
|
||||
{
|
||||
windowWidth < 768 && (
|
||||
<h1 className="text-3xl font-bold mb-6">Settings</h1>
|
||||
)
|
||||
}
|
||||
<div className="w-full flex flex-col justify-center mx-auto">
|
||||
<div className="relative flex w-full items-center justify-center">
|
||||
<Image
|
||||
|
||||
@ -4,7 +4,7 @@ import { useRouter } from 'next/router';
|
||||
import { useToast } from '@/hooks/useToast';
|
||||
import axios from 'axios';
|
||||
import { Card } from 'primereact/card';
|
||||
import { Button } from "primereact/button";
|
||||
import useWindowWidth from '@/hooks/useWindowWidth';
|
||||
import { Menu } from "primereact/menu";
|
||||
import { Message } from "primereact/message";
|
||||
import { ProgressSpinner } from 'primereact/progressspinner';
|
||||
@ -14,6 +14,7 @@ const UserSubscription = ({ user }) => {
|
||||
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 (
|
||||
<div className="p-4">
|
||||
<h1 className="text-3xl font-bold mb-6">Subscription Management</h1>
|
||||
{
|
||||
windowWidth < 768 && (
|
||||
<h1 className="text-3xl font-bold mb-6">Subscription Management</h1>
|
||||
)
|
||||
}
|
||||
<Card title={subscriptionCardTitle} className="mb-6">
|
||||
{subscribed && (
|
||||
<div className="flex flex-col">
|
||||
|
||||
@ -204,13 +204,13 @@ export default function Details() {
|
||||
|
||||
const renderContent = () => {
|
||||
if (decryptedContent) {
|
||||
return <MDDisplay className='p-4 rounded-lg' source={decryptedContent} />;
|
||||
return <MDDisplay className='p-4 rounded-lg w-full' source={decryptedContent} />;
|
||||
}
|
||||
if (paidResource && !decryptedContent) {
|
||||
return <p className="text-center text-xl text-red-500">This content is paid and needs to be purchased before viewing.</p>;
|
||||
}
|
||||
if (processedEvent?.content) {
|
||||
return <MDDisplay className='p-4 rounded-lg' source={processedEvent.content} />;
|
||||
return <MDDisplay className='p-4 rounded-lg w-full' source={processedEvent.content} />;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
@ -262,7 +262,7 @@ export default function Details() {
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className='w-[75vw] mx-auto mt-12 p-12 border-t-2 border-gray-300 max-tab:p-0 max-mob:p-0 max-tab:max-w-[100vw] max-mob:max-w-[100vw]'>
|
||||
<div className='w-[75vw] mx-auto mt-12 p-12 border-t-2 border-gray-300 max-tab:p-0 max-mob:p-0 max-tab:w-[100vw] max-mob:w-[100vw]'>
|
||||
{
|
||||
processedEvent && processedEvent.content && renderContent()
|
||||
}
|
||||
|
||||
@ -58,7 +58,7 @@ const Feed = () => {
|
||||
<div className="bg-gray-900 h-[100vh] w-[100vw] min-bottom-bar:w-[86vw]">
|
||||
<div className="w-[100vw] min-bottom-bar:w-[86vw] px-4 pt-4 flex flex-col items-start">
|
||||
<div className='mb-4 flex flex-row items-end'>
|
||||
<h2 className="font-bold mb-0">Community</h2>
|
||||
<h1 className="font-bold mb-0">Community</h1>
|
||||
<GenericButton
|
||||
icon={getTagIcon(title)}
|
||||
className='ml-2 text-sm p-2 py-1 flex items-center cursor-default hover:bg-transparent'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user