vertically tighter note layout

irislib · Jul 26, 2023 · fb51316 · fb51316
1 parent c502178
commit fb51316
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 21 deletions.
diff --git a/src/js/components/Dropdown.tsx b/src/js/components/Dropdown.tsx
@@ -7,7 +7,7 @@ type Props = {
   children: JSX.Element | JSX.Element[];
 };
 
-const Dropdown = ({ children }: Props) => {
+const Dropdown = ({ children, small }: Props) => {
   const [open, setOpen] = useState(false);
 
   const toggle = (e: MouseEvent, newOpenState: boolean) => {
@@ -44,7 +44,9 @@ const Dropdown = ({ children }: Props) => {
       onMouseEnter={(e) => toggle(e, true)}
       onMouseLeave={(e) => toggle(e, false)}
     >
-      <button className="dropbtn btn btn-circle btn-ghost text-neutral-500">…</button>
+      <button className={`dropbtn btn btn-circle ${small && 'btn-sm'} btn-ghost text-neutral-500`}>
+        …
+      </button>
       <Show when={open}>
         <div className="absolute z-10 p-2 flex flex-col gap-2 right-0 w-56 rounded-md shadow-lg bg-black border-neutral-500 border-2">
           {children}

diff --git a/src/js/components/events/EventDropdown.tsx b/src/js/components/events/EventDropdown.tsx
@@ -104,7 +104,7 @@ const EventDropdown = (props: EventDropdownProps) => {
 
   return (
     <div>
-      <Dropdown>
+      <Dropdown small>
         <Copy className="btn btn-sm" key={`${id!}copy_link`} text={t('copy_link')} copyStr={url} />
         <Copy
           className="btn btn-sm"

diff --git a/src/js/components/events/note/Author.tsx b/src/js/components/events/note/Author.tsx
@@ -7,8 +7,9 @@ import Name from '../../user/Name';
 import EventDropdown from '../EventDropdown';
 
 import Avatar from './Avatar';
+import ReplyingToUsers from './ReplyingToUsers';
 
-const Author = ({ event, fullWidth, isQuote, standalone, setTranslatedText }) => {
+const Author = ({ event, fullWidth, isQuote, standalone, setTranslatedText, isQuoting }) => {
   const { time, dateStr, timeStr } = useMemo(() => {
     const t = new Date(event.created_at * 1000);
     const dStr = t.toLocaleString(window.navigator.language, {
@@ -29,19 +30,25 @@ const Author = ({ event, fullWidth, isQuote, standalone, setTranslatedText }) =>
       <Show when={fullWidth}>
         <Avatar event={event} isQuote={isQuote} standalone={standalone} />
       </Show>
-      <a href={`/${Key.toNostrBech32Address(event.pubkey, 'npub')}`} className="font-bold">
-        <Name pub={event.pubkey} />
-      </a>
-      <small>
-        {'· '}
-        <a
-          href={`/${Key.toNostrBech32Address(event.id, 'note')}`}
-          className="tooltip text-neutral-500"
-          data-tip={`${dateStr} ${timeStr}`}
-        >
-          {time && Helpers.getRelativeTimeText(time)}
-        </a>
-      </small>
+      <div className="flex flex-col">
+        <div>
+          <a href={`/${Key.toNostrBech32Address(event.pubkey, 'npub')}`} className="font-bold">
+            <Name pub={event.pubkey} />
+          </a>
+          <small>
+            {'· '}
+            <a
+              href={`/${Key.toNostrBech32Address(event.id, 'note')}`}
+              className="tooltip text-neutral-500"
+              data-tip={`${dateStr} ${timeStr}`}
+            >
+              {time && Helpers.getRelativeTimeText(time)}
+            </a>
+          </small>
+        </div>
+
+        <ReplyingToUsers event={event} isQuoting={isQuoting} />
+      </div>
       <Show when={!isQuote}>
         <div className="flex-1 flex items-center justify-end">
           <EventDropdown id={event.id} event={event} onTranslate={setTranslatedText} />

diff --git a/src/js/components/events/note/Content.tsx b/src/js/components/events/note/Content.tsx
@@ -13,7 +13,6 @@ import Reactions from '../buttons/ReactionButtons';
 
 import Author from './Author';
 import Helmet from './Helmet';
-import ReplyingToUsers from './ReplyingToUsers';
 
 let loadReactions = true;
 let showLikes = true;
@@ -99,18 +98,18 @@ const Content = ({ standalone, isQuote, fullWidth, isQuoting, asInlineQuote, eve
         standalone={standalone}
         event={event}
         isQuote={isQuote}
+        isQuoting={isQuoting}
         fullWidth={fullWidth}
         setTranslatedText={setTranslatedText}
       />
-      <ReplyingToUsers event={event} isQuoting={isQuoting} />
       <Show when={standalone}>
         <Helmet name={name} text={text} attachments={attachments} />
       </Show>
       <Show when={meta.torrentId}>
         <Torrent torrentId={meta.torrentId} autopause={!standalone} />
       </Show>
       <Show when={text?.length > 0}>
-        <div className={`preformatted-wrap py-2 ${emojiOnly && 'text-2xl'}`}>
+        <div className={`preformatted-wrap pb-1 ${emojiOnly && 'text-2xl'}`}>
           {text}
           <Show when={translatedText}>
             <p>

diff --git a/src/js/components/events/note/Note.tsx b/src/js/components/events/note/Note.tsx
@@ -43,7 +43,7 @@ const Note = ({
   }
 
   const className = useMemo(() => {
-    const classNames = ['msg'];
+    const classNames = [] as string[];
 
     if (standalone) {
       classNames.push('standalone');