diff --git a/src/components/BookmarkNote/BookmarkNote.module.scss b/src/components/BookmarkNote/BookmarkNote.module.scss
index 218b9e1..cb92454 100644
--- 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
index 494594d..dab17d7 100644
--- 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 (
{
e.preventDefault();
diff --git a/src/components/EmbeddedNote/EmbeddedNote.tsx b/src/components/EmbeddedNote/EmbeddedNote.tsx
index c1933ba..ebb41df 100644
--- 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}
/>
>
diff --git a/src/components/FeedSelect/FeedSelect.tsx b/src/components/FeedSelect/FeedSelect.tsx
index e47c691..44ab4a5 100644
--- 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
index c0dc5c1..33471d4 100644
--- 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
index ecad786..74e904e 100644
--- a/src/components/HomeHeader/HomeHeader.tsx
+++ b/src/components/HomeHeader/HomeHeader.tsx
@@ -119,7 +119,7 @@ const HomeHeader: Component< {
0 && home?.selectedFeed}
>
-
+
@@ -301,7 +302,9 @@ const Note: Component<{
>
-
+
- openReactionModal('zaps')}
- />
+
+ openReactionModal('zaps')}
+ />
+
-
+
@@ -390,6 +401,7 @@ const Note: Component<{
note={props.note}
shorten={props.shorten}
width={Math.min(640, window.innerWidth - 72)}
+ margins={20}
/>
@@ -406,7 +418,6 @@ const Note: Component<{
updateState={updateReactionsState}
customZapInfo={customZapInfo()}
onZapAnim={addTopZapFeed}
- wide={true}
/>
@@ -457,7 +468,8 @@ const Note: Component<{
@@ -468,13 +480,16 @@ const Note: Component<{
topZapLimit={4}
/>
-
+
@@ -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
index e31cfea..4329128 100644
--- 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
index 306c030..3165ee7 100644
--- 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,
@@ -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 (
-