Fix new layout

PrimalHQ · May 29, 2024 · 7139fec · 7139fec
1 parent 55f6c0a
commit 7139fec
Show file tree

Hide file tree

Showing 15 changed files with 149 additions and 53 deletions.
diff --git a/src/components/BookmarkNote/BookmarkNote.module.scss b/src/components/BookmarkNote/BookmarkNote.module.scss
@@ -37,3 +37,14 @@
     }
   }
 }
+
+.right {
+  display: flex;
+  justify-content: flex-end;
+  padding-left: 6px !important;
+  padding-right: 0px !important;
+
+  &.rightL {
+    width: 22px !important;
+  }
+}
diff --git a/src/components/BookmarkNote/BookmarkNote.tsx b/src/components/BookmarkNote/BookmarkNote.tsx
@@ -16,7 +16,7 @@ import styles from './BookmarkNote.module.scss';
 import { saveBookmarks } from '../../lib/localStore';
 import { importEvents, triggerImportEvents } from '../../lib/notes';
 
-const BookmarkNote: Component<{ note: PrimalNote, large?: boolean }> = (props) => {
+const BookmarkNote: Component<{ note: PrimalNote, large?: boolean, right?: boolean }> = (props) => {
   const account = useAccountContext();
   const app = useAppContext();
   const intl = useIntl();
@@ -136,6 +136,7 @@ const BookmarkNote: Component<{ note: PrimalNote, large?: boolean }> = (props) =
   return (
     <div class={styles.bookmark}>
       <ButtonGhost
+        class={`${props.right ? styles.right : ''} ${props.large ? styles.rightL : ''}`}
         onClick={(e: MouseEvent) => {
           e.preventDefault();
 

diff --git a/src/components/EmbeddedNote/EmbeddedNote.tsx b/src/components/EmbeddedNote/EmbeddedNote.tsx
@@ -118,6 +118,7 @@ const EmbeddedNote: Component<{
           shorten={true}
           isEmbeded={true}
           width={noteContent?.getBoundingClientRect().width}
+          margins={2}
         />
       </div>
     </>

diff --git a/src/components/FeedSelect/FeedSelect.tsx b/src/components/FeedSelect/FeedSelect.tsx
@@ -8,7 +8,7 @@ import { FeedOption, PrimalFeed, SelectionOption } from '../../types/primal';
 import SelectBox from '../SelectBox/SelectBox';
 import SelectionBox from '../SelectionBox/SelectionBox';
 
-const FeedSelect: Component<{ isPhone?: boolean, id?: string}> = (props) => {
+const FeedSelect: Component<{ isPhone?: boolean, id?: string, big?: boolean}> = (props) => {
 
   const account = useAccountContext();
   const home = useHomeContext();
@@ -123,6 +123,7 @@ const FeedSelect: Component<{ isPhone?: boolean, id?: string}> = (props) => {
       value={selectedValue()}
       isSelected={isSelected}
       isPhone={props.isPhone}
+      big={props.big}
     />
   );
 }

diff --git a/src/components/HomeHeader/HomeHeader.module.scss b/src/components/HomeHeader/HomeHeader.module.scss
@@ -155,7 +155,7 @@
   outline: none;
 
   padding-block: 21px;
-  padding-inline: 12px;
+  padding-inline: 20px;
   border: none;
   border-radius: 0;
   justify-content: flex-start;

diff --git a/src/components/HomeHeader/HomeHeader.tsx b/src/components/HomeHeader/HomeHeader.tsx
@@ -119,7 +119,7 @@ const HomeHeader: Component< {
         <Show
           when={settings?.availableFeeds && settings?.availableFeeds.length > 0 && home?.selectedFeed}
         >
-          <FeedSelect />
+          <FeedSelect big={true} />
         </Show>
 
         <Show

diff --git a/src/components/NavLink/NavLink.module.scss b/src/components/NavLink/NavLink.module.scss
@@ -115,10 +115,11 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 18px;
+  min-width: 18px;
   height: 18px;
 
   margin-left: 2px;
+  margin-top: -8px;
 
   font-family: 'Roboto Condensed';
   font-weight: 500;

diff --git a/src/components/Note/Note.module.scss b/src/components/Note/Note.module.scss
@@ -3,7 +3,7 @@
   display: flex;
   flex-direction: column;
   gap: 6px;
-  padding: 12px;
+  padding: 12px 20px;
   margin: 0px;
 
   text-decoration: none;
@@ -361,12 +361,16 @@
   background-color: var(--background-card);
   display: flex;
   flex-direction: column;
-  padding-inline: 12px;
+  padding-inline: 0px;
   padding-top: 0;
   padding-bottom: 12px;
   border-radius: 0;
   border: none;
 
+  .header {
+    padding-inline: 12px;
+  }
+
   .content {
     grid-area: content;
     display: flex;
@@ -386,6 +390,7 @@
       line-height: 24px;
       width: 100%;
       margin-bottom: 12px;
+      padding-inline: 12px;
 
       a:hover {
         text-decoration: underline;
@@ -406,6 +411,7 @@
 
     .time {
       padding-block: 20px;
+      padding-inline: 12px;
       border-bottom: 1px solid var(--devider);
       margin-bottom: 16px;
       color: var(--text-tertiary);
@@ -445,6 +451,13 @@
       }
     }
 
+    .topZaps {
+      padding-inline: 12px;
+    }
+
+    .footer {
+      padding-inline: 12px;
+    }
   }
 }
 

diff --git a/src/components/Note/Note.tsx b/src/components/Note/Note.tsx
@@ -285,6 +285,7 @@ const Note: Component<{
                   state={reactionsState}
                   updateState={updateReactionsState}
                   customZapInfo={customZapInfo()}
+                  size="short"
                 />
               </div>
             </div>
@@ -301,7 +302,9 @@ const Note: Component<{
         >
           <div class={styles.border}></div>
 
-          <NoteHeader note={props.note} primary={true} />
+          <div class={styles.header}>
+            <NoteHeader note={props.note} primary={true} />
+          </div>
 
           <div class={styles.upRightFloater}>
             <NoteContextTrigger
@@ -313,14 +316,20 @@ const Note: Component<{
           <div class={styles.content}>
 
             <div class={styles.message}>
-              <ParsedNote note={props.note} width={Math.min(640, window.innerWidth)} />
+              <ParsedNote
+                note={props.note}
+                width={Math.min(640, window.innerWidth)}
+                margins={12}
+              />
             </div>
 
-            <NoteTopZaps
-              topZaps={reactionsState.topZaps}
-              zapCount={reactionsState.zapCount}
-              action={() => openReactionModal('zaps')}
-            />
+            <div class={styles.topZaps}>
+              <NoteTopZaps
+                topZaps={reactionsState.topZaps}
+                zapCount={reactionsState.zapCount}
+                action={() => openReactionModal('zaps')}
+              />
+            </div>
 
             <div
               class={styles.time}
@@ -337,15 +346,17 @@ const Note: Component<{
               </button>
             </div>
 
-            <NoteFooter
-              note={props.note}
-              state={reactionsState}
-              updateState={updateReactionsState}
-              customZapInfo={customZapInfo()}
-              wide={true}
-              large={true}
-              onZapAnim={addTopZap}
-            />
+            <div class={styles.footer}>
+              <NoteFooter
+                note={props.note}
+                state={reactionsState}
+                updateState={updateReactionsState}
+                customZapInfo={customZapInfo()}
+                size="wide"
+                large={true}
+                onZapAnim={addTopZap}
+              />
+            </div>
           </div>
         </div>
       </Match>
@@ -390,6 +401,7 @@ const Note: Component<{
               note={props.note}
               shorten={props.shorten}
               width={Math.min(640, window.innerWidth - 72)}
+              margins={20}
             />
           </div>
 
@@ -406,7 +418,6 @@ const Note: Component<{
             updateState={updateReactionsState}
             customZapInfo={customZapInfo()}
             onZapAnim={addTopZapFeed}
-            wide={true}
           />
         </A>
       </Match>
@@ -457,7 +468,8 @@ const Note: Component<{
                 <ParsedNote
                   note={props.note}
                   shorten={props.shorten}
-                  width={Math.min(528, window.innerWidth - 72)}
+                  width={Math.min(566, window.innerWidth - 72)}
+                  margins={1}
                 />
               </div>
 
@@ -468,13 +480,16 @@ const Note: Component<{
                 topZapLimit={4}
               />
 
-              <NoteFooter
-                note={props.note}
-                state={reactionsState}
-                updateState={updateReactionsState}
-                customZapInfo={customZapInfo()}
-                onZapAnim={addTopZapFeed}
-              />
+              <div class={styles.footer}>
+                <NoteFooter
+                  note={props.note}
+                  state={reactionsState}
+                  updateState={updateReactionsState}
+                  customZapInfo={customZapInfo()}
+                  onZapAnim={addTopZapFeed}
+                  size="short"
+                />
+              </div>
             </div>
           </div>
         </A>
@@ -515,6 +530,7 @@ const Note: Component<{
                   note={props.note}
                   shorten={props.shorten}
                   width={Math.min(528, window.innerWidth - 72)}
+                  margins={12}
                   noLightbox={true}
                   altEmbeds={true}
                 />

diff --git a/src/components/Note/NoteFooter/NoteFooter.module.scss b/src/components/Note/NoteFooter/NoteFooter.module.scss
@@ -55,12 +55,34 @@
 
 .footer {
   display: grid;
-  grid-template-columns: 125px 125px 125px 125px auto;
+  grid-template-columns: 145px 145px 145px 145px auto;
   position: relative;
   width: 100%;
 
+  .bookmarkFoot {
+    display: flex;
+    justify-content: flex-end;
+    max-width: 20px;
+  }
+
   &.wide {
-    grid-template-columns: 137px 137px 137px 135px auto;
+    grid-template-columns: 148px 148px 148px 148px auto;
+
+    .bookmarkFoot {
+      display: flex;
+      justify-content: flex-end;
+      max-width: 100%;
+    }
+  }
+
+  &.short {
+    grid-template-columns: 126px 126px 126px 126px auto;
+
+    .bookmarkFoot {
+      display: flex;
+      justify-content: flex-end;
+      max-width: 100%;
+    }
   }
 
   .context {
@@ -172,10 +194,6 @@
     }
   }
 
-  .bookmarkFoot {
-    display: flex;
-    justify-content: flex-end;
-  }
 }
 
 .largeZapLottie {

diff --git a/src/components/Note/NoteFooter/NoteFooter.tsx b/src/components/Note/NoteFooter/NoteFooter.tsx
@@ -27,7 +27,7 @@ export const lottieDuration = () => zapMD.op * 1_000 / zapMD.fr;
 
 const NoteFooter: Component<{
   note: PrimalNote,
-  wide?: boolean,
+  size?: 'wide' | 'normal' | 'short',
   id?: string,
   state: NoteReactionsState,
   updateState: SetStoreFunction<NoteReactionsState>,
@@ -48,6 +48,8 @@ const NoteFooter: Component<{
   let footerDiv: HTMLDivElement | undefined;
   let repostMenu: HTMLDivElement | undefined;
 
+  const size = () => props.size || 'normal';
+
   const repostMenuItems: MenuItem[] = [
     {
       action: () => doRepost(),
@@ -61,6 +63,7 @@ const NoteFooter: Component<{
     },
   ];
 
+
   const onClickOutside = (e: MouseEvent) => {
     if (
       !document?.getElementById(`repost_menu_${props.note.post.id}`)?.contains(e.target as Node)
@@ -222,8 +225,8 @@ const NoteFooter: Component<{
         return;
       }
 
-      let newLeft = props.wide ? 15 : 13;
-      let newTop = props.wide ? -6 : -6;
+      let newLeft = size() === 'wide' ? 15 : 13;
+      let newTop = size() === 'wide' ? -6 : -6;
 
       if (props.large) {
         newLeft = 2;
@@ -318,7 +321,12 @@ const NoteFooter: Component<{
   }
 
   return (
-    <div id={props.id} class={`${styles.footer} ${props.wide ? styles.wide : ''}`} ref={footerDiv} onClick={(e) => {e.preventDefault();}}>
+    <div
+      id={props.id}
+      class={`${styles.footer} ${styles[size()]}`}
+      ref={footerDiv}
+      onClick={(e) => e.preventDefault() }
+    >
 
       <Show when={props.state.showZapAnim}>
         <ZapAnimation
@@ -395,6 +403,7 @@ const NoteFooter: Component<{
         <BookmarkNote
           note={props.note}
           large={props.large}
+          right={true}
         />
       </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -119,7 +119,7 @@ const HomeHeader: Component< { @@
             <Show
               when={settings?.availableFeeds && settings?.availableFeeds.length > 0 && home?.selectedFeed}
             >
-              <FeedSelect />
+              <FeedSelect big={true} />
             </Show>
             <Show
@@ Expand Down @@