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 ( -
{e.preventDefault();}}> +
e.preventDefault() } + >
diff --git a/src/components/ParsedNote/ParsedNote.tsx b/src/components/ParsedNote/ParsedNote.tsx index be404b6..67ca913 100644 --- a/src/components/ParsedNote/ParsedNote.tsx +++ b/src/components/ParsedNote/ParsedNote.tsx @@ -147,6 +147,7 @@ const ParsedNote: Component<{ shorten?: boolean, isEmbeded?: boolean, width?: number, + margins?: number, noLightbox?: boolean, altEmbeds?: boolean, }> = (props) => { @@ -619,9 +620,10 @@ const ParsedNote: Component<{ let w: number | undefined = undefined; if (mVideo) { + const margins = props.margins || 20 const ratio = mVideo.w / mVideo.h; - h = (noteWidth() / ratio); - w = h > 680 ? 680 * ratio : noteWidth(); + h = ((noteWidth() - 2*margins) / ratio); + w = h > 680 ? 680 * ratio : noteWidth() - 2*margins; h = h > 680 ? 680 : h; } diff --git a/src/components/SelectionBox/SelectionBox.module.scss b/src/components/SelectionBox/SelectionBox.module.scss index 772840b..fbfb461 100644 --- a/src/components/SelectionBox/SelectionBox.module.scss +++ b/src/components/SelectionBox/SelectionBox.module.scss @@ -9,6 +9,32 @@ } .selectionIcon { + width: 10px; + height: 10px; + display: inline-block; + margin-inline: 4px; + background-color: var(--text-secondary); + -webkit-mask: url(../../assets/icons/caret.svg) no-repeat 0 0/ 10px 10px; + mask: url(../../assets/icons/caret.svg) no-repeat 0 0/ 10px 10px; +} + +.selectionBox { + position: relative; +} + +.trigger { + background-color: var(--background-site); + margin: 0; + padding: 0; + border: none; + color: var(--text-secondary); + font-size: 18px; + font-weight: 600; + line-height: 20px; +} + + +.selectionIconBig { width: 14px; height: 14px; display: inline-block; @@ -18,11 +44,7 @@ mask: url(../../assets/icons/caret.svg) no-repeat 0 / 14px; } -.selectionBox { - position: relative; -} - -.trigger { +.triggerBig { background-color: var(--background-site); margin: 0; padding: 0; diff --git a/src/components/SelectionBox/SelectionBox.tsx b/src/components/SelectionBox/SelectionBox.tsx index 7d4fd31..6d90945 100644 --- a/src/components/SelectionBox/SelectionBox.tsx +++ b/src/components/SelectionBox/SelectionBox.tsx @@ -18,6 +18,7 @@ const SelectionBox: Component<{ options: SelectionOption[], onChange: (option: any) => void, initialValue?: string | SelectionOption, + big?: boolean, value?: string | SelectionOption, id?: string, }> = (props) => { @@ -55,12 +56,12 @@ const SelectionBox: Component<{ onChange={props.onChange} gutter={8} > - + > {state => state.selectedOption()?.label || ''} -
+
diff --git a/src/index.scss b/src/index.scss index 794d9dd..7e4b95f 100644 --- a/src/index.scss +++ b/src/index.scss @@ -62,10 +62,10 @@ --warning-color: #FA3C3C; --success-color: #66E205; - --left-col-w: 188px; + --left-col-w: 182px; --center-col-w: 640px; --right-col-w: 348px; - --full-site-w: 1177px; + --full-site-w: 1172px; --header-height: 84px; background-color: var(--background-site);