doot/TAO
1
0
Fork 0
mirror of https://github.com/smolgrrr/TAO.git synced 2024-09-20 09:21:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

some styling stuff

Browse Source
This commit is contained in:
smolgrrr 2023-11-12 18:13:35 +11:00
parent 2ebf854dd5
commit 088fe7243a
6 changed files with 48 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
client/src/components/Forms/PostFormCard.tsx
View File

@ -53,7 +53,7 @@ const tagMapping = {
const NewNoteCard = ({
refEvent,
tagType
}: FormProps) => {
}: FormProps) => {
const [comment, setComment] = useState("");
const [file, setFile] = useState("");
const [sk, setSk] = useState(generatePrivateKey());
@ -67,6 +67,7 @@ const NewNoteCard = ({
const [difficulty, setDifficulty] = useState(
localStorage.getItem("difficulty") || "21"
);
const [fileSizeError, setFileSizeError] = useState(false);
const [uploadingFile, setUploadingFile] = useState(false);
const [doingWorkProp, setDoingWorkProp] = useState(false);
@ -145,12 +146,12 @@ const NewNoteCard = ({
setDoingWorkProp(true);
}}
>
<input type="hidden" name="MAX_FILE_SIZE" defaultValue={4194304} />
<input type="hidden" name="MAX_FILE_SIZE" defaultValue={2.5 * 1024 * 1024} />
<div
id="togglePostFormLink"
className="text-lg text-neutral-500 text-center mb-2 font-semibold"
>
Start a New Thread
{tagType === 'Reply' ? 'Reply to thread' : 'Start Thread'}
</div>
<div className="px-4 pt-4 flex flex-col bg-neutral-900 rounded-lg">
<textarea
@ -193,10 +194,16 @@ const NewNoteCard = ({
onChange={async (e) => {
const file_input = e.target.files?.[0];
if (file_input) {
// Check if file size is greater than 2.5MB
if (file_input.size > 2.5 * 1024 * 1024) {
setFileSizeError(true);
return;
}
setUploadingFile(true);
const attachedFile = await attachFile(file_input);
setFile(attachedFile);
setUploadingFile(false);
setFileSizeError(false);
}
}}
/>
@ -216,6 +223,9 @@ const NewNoteCard = ({
</div>
</div>
</div>
{fileSizeError ? (
<span className="text-red-500">File size should not exceed 2.5MB</span>
) : null}
{doingWorkProp ? (
<div className="flex animate-pulse text-sm text-gray-300">
<CpuChipIcon className="h-4 w-4 ml-auto" />

36
client/src/components/Modals/Card.tsx
View File

@ -60,8 +60,24 @@ const PostCard = ({
return (
<CardContainer>
<div className={`flex flex-col gap-2 ${type !== "OP" ? 'hover:cursor-pointer' : ''}`} onClick={handleClick}>
<div className="flex justify-between items-center">
<div className={`flex flex-col gap-2`}>
<div className={`flex flex-col break-words ${type !== "OP" ? 'hover:cursor-pointer' : ''}`} onClick={handleClick}>
<ContentPreview key={event.id} comment={comment} />
</div>
{renderMedia(file)}
{repliedTo && <div className="flex items-center mt-1" >
<span className="text-xs text-gray-500">Reply to: </span>
{uniqBy(repliedTo, 'pubkey').map((event, index) => (
<div key={index}>
{event.kind === 0 ? (
<img className={`h-5 w-5 rounded-full`} src={getMetadata(event)?.picture} />
) : (
<div className={`h-4 w-4 ${getIconFromHash(event.pubkey)} rounded-full`} />
)}
</div>
))}
</div>}
<div className={`flex justify-between items-center ${type !== "OP" ? 'hover:cursor-pointer' : ''}`} onClick={handleClick}>
<div className="flex items-center gap-2.5">
{metadataParsed ?
<img
@ -90,23 +106,7 @@ const PostCard = ({
</div>
</div>
</div>
{repliedTo && <div className="flex items-center my-1" >
<span className="text-xs text-gray-500">Reply to: </span>
{uniqBy(repliedTo, 'pubkey').map((event, index) => (
<div key={index}>
{event.kind === 0 ? (
<img className={`h-5 w-5 rounded-full`} src={getMetadata(event)?.picture} />
) : (
<div className={`h-5 w-5 ${getIconFromHash(event.pubkey)} rounded-full`} />
)}
</div>
))}
</div>}
<div className="flex flex-col break-words">
<ContentPreview key={event.id} comment={comment} />
</div>
</div>
{renderMedia(file)}
</CardContainer>
);
};

2
client/src/components/Modals/CardContainer.tsx
View File

@ -3,7 +3,7 @@ import { PropsWithChildren } from "react";
export default function CardContainer({ children }: PropsWithChildren) {
return (
<div className="card break-inside-avoid mb-4 bg-gradient-to-r from-black to-neutral-900 h-min">
<div className="card-body pb-2">{children}</div>
<div className="card-body">{children}</div>
</div>
);
}

10
client/src/components/Modals/CardModals/QuoteEmbed.tsx
View File

@ -70,6 +70,10 @@ const QuoteEmbed = ({
return (
<div className="p-3 rounded-lg border border-neutral-700 bg-neutral-800">
<div className="flex flex-col">
<div className="flex flex-col break-words">
<ContentPreview key={event.id} comment={comment} />
</div>
{renderMedia(file)}
<div className="flex justify-between items-center">
<div className="flex items-center gap-1.5">
{metadataParsed ? (
@ -84,17 +88,13 @@ const QuoteEmbed = ({
) : (
<>
<div
className={`h-5 w-5 bg-gradient-to-r ${colorCombo} rounded-full`}
className={`h-4 w-4 bg-gradient-to-r ${colorCombo} rounded-full`}
/>
<div className="text-sm font-medium">Anonymous</div>
</>
)}
</div>
</div>
<div className="flex flex-col break-words">
<ContentPreview key={event.id} comment={comment} />
</div>
{renderMedia(file)}
</div>
</div>
);

6
client/src/components/Modals/CardModals/TextModal.tsx
View File

@ -1,3 +1,4 @@
import React from "react";
import QuoteEmbed from "./QuoteEmbed";
import { Event } from "nostr-tools";
import { useEffect, useState } from "react";
@ -44,7 +45,10 @@ const ContentPreview = ({ key, comment }: { key: string; comment: string }) => {
return (
<div className="gap-2 flex flex-col break-words text-sm">
{isExpanded ? finalComment : finalComment.slice(0, 350)}
{isExpanded
? finalComment.split('\n').map((line, i) => <React.Fragment key={i}>{line}<br/></React.Fragment>)
: finalComment.slice(0, 350).split('\n').map((line, i) => <React.Fragment key={i}>{line}<br/></React.Fragment>)
}
{finalComment.length > 350 && (
<button
className="text-sm text-neutral-500"

1
client/src/utils/FileUpload.tsx
View File

@ -39,6 +39,7 @@ export const renderMedia = (file: string) => {
<video
controls
muted
src={file + "#t=0.1"}
preload="metadata"
className="thumb mt-2 rounded-md w-full"
>