From 5c8cbc195603b21612f8bcb3979c32d8d3742080 Mon Sep 17 00:00:00 2001 From: enes Date: Wed, 28 Aug 2024 16:51:02 +0200 Subject: [PATCH 01/23] refactor(toolbox): responsiveness and cleanup --- src/pages/create/index.tsx | 50 ++++++++++++++---------------- src/pages/create/style.module.scss | 24 ++++++++++---- src/types/drawing.ts | 3 +- 3 files changed, 43 insertions(+), 34 deletions(-) diff --git a/src/pages/create/index.tsx b/src/pages/create/index.tsx index 2c32f7d..bf6c26f 100644 --- a/src/pages/create/index.tsx +++ b/src/pages/create/index.tsx @@ -132,109 +132,109 @@ export const CreatePage = () => { const [toolbox] = useState([ { identifier: MarkType.TEXT, - icon: , + icon: faT, label: 'Text', active: true }, { identifier: MarkType.SIGNATURE, - icon: , + icon: faSignature, label: 'Signature', active: false }, { identifier: MarkType.JOBTITLE, - icon: , + icon: faBriefcase, label: 'Job Title', active: false }, { identifier: MarkType.FULLNAME, - icon: , + icon: faIdCard, label: 'Full Name', active: false }, { identifier: MarkType.INITIALS, - icon: , + icon: faHeading, label: 'Initials', active: false }, { identifier: MarkType.DATETIME, - icon: , + icon: faClock, label: 'Date Time', active: false }, { identifier: MarkType.DATE, - icon: , + icon: faCalendarDays, label: 'Date', active: false }, { identifier: MarkType.NUMBER, - icon: , + icon: fa1, label: 'Number', active: false }, { identifier: MarkType.IMAGES, - icon: , + icon: faImage, label: 'Images', active: false }, { identifier: MarkType.CHECKBOX, - icon: , + icon: faSquareCheck, label: 'Checkbox', active: false }, { identifier: MarkType.MULTIPLE, - icon: , + icon: faCheckDouble, label: 'Multiple', active: false }, { identifier: MarkType.FILE, - icon: , + icon: faPaperclip, label: 'File', active: false }, { identifier: MarkType.RADIO, - icon: , + icon: faCircleDot, label: 'Radio', active: false }, { identifier: MarkType.SELECT, - icon: , + icon: faSquareCaretDown, label: 'Select', active: false }, { identifier: MarkType.CELLS, - icon: , + icon: faTableCellsLarge, label: 'Cells', active: false }, { identifier: MarkType.STAMP, - icon: , + icon: faStamp, label: 'Stamp', active: false }, { identifier: MarkType.PAYMENT, - icon: , + icon: faCreditCard, label: 'Payment', active: false }, { identifier: MarkType.PHONE, - icon: , + icon: faPhone, label: 'Phone', active: false } @@ -1020,20 +1020,16 @@ export const CreatePage = () => { return (
{ - handleToolSelect(drawTool) - } - : () => null - } + {...(drawTool.active && { + onClick: () => handleToolSelect(drawTool) + })} className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${!drawTool.active ? styles.comingSoon : ''} `} > - {drawTool.icon} + {drawTool.label} {drawTool.active ? ( - + ) : ( Date: Wed, 28 Aug 2024 18:05:30 +0200 Subject: [PATCH 02/23] refactor(sticky-columns-layout): initial responsiveness and breakpoints --- src/layouts/StickySideColumns.module.scss | 34 +++++++++++++++++++---- src/pages/create/style.module.scss | 4 +-- 2 files changed, 31 insertions(+), 7 deletions(-) diff --git a/src/layouts/StickySideColumns.module.scss b/src/layouts/StickySideColumns.module.scss index 77daa03..4defd59 100644 --- a/src/layouts/StickySideColumns.module.scss +++ b/src/layouts/StickySideColumns.module.scss @@ -3,9 +3,26 @@ .container { display: grid; - grid-template-columns: 0.75fr 1.5fr 0.75fr; - grid-gap: 30px; - flex-grow: 1; + + @media only screen and (max-width: 767px) { + gap: 20px; + grid-auto-flow: column; + grid-auto-columns: 100%; + + overflow-x: auto; + overscroll-behavior-inline: contain; + + scroll-snap-type: inline mandatory; + + > * { + scroll-snap-align: start; + } + } + + @media only screen and (min-width: 768px) { + grid-template-columns: 0.75fr 1.5fr 0.75fr; + gap: 30px; + } } .sidesWrap { @@ -16,8 +33,10 @@ } .sides { - position: sticky; - top: $header-height + $body-vertical-padding; + @media only screen and (min-width: 768px) { + position: sticky; + top: $header-height + $body-vertical-padding; + } } .files { @@ -29,4 +48,9 @@ padding: 10px; border: 10px solid $overlay-background-color; border-radius: 4px; + + @media only screen and (max-width: 767px) { + max-height: calc(100svh - $header-height + $body-vertical-padding * 2); + overflow-y: auto; + } } diff --git a/src/pages/create/style.module.scss b/src/pages/create/style.module.scss index 0b7c8f7..0ea1c46 100644 --- a/src/pages/create/style.module.scss +++ b/src/pages/create/style.module.scss @@ -135,11 +135,11 @@ grid-template-columns: 1fr; @container (min-width: 204px) { - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(2, 1fr); } @container (min-width: 309px) { - grid-template-columns: 1fr 1fr 1fr; + grid-template-columns: repeat(3, 1fr); } gap: 15px; From a48751b9a8a7e1d37f300107ed668fb83ba57e74 Mon Sep 17 00:00:00 2001 From: enes Date: Thu, 29 Aug 2024 16:43:09 +0200 Subject: [PATCH 03/23] refactor(footer): make footer a portal and use as needed --- src/components/Footer/Footer.tsx | 205 ++++++++++--------- src/layouts/Main.tsx | 2 - src/pages/home/index.tsx | 2 + src/pages/landing/index.tsx | 2 + src/pages/profile/index.tsx | 2 + src/pages/settings/Settings.tsx | 102 ++++----- src/pages/settings/cache/index.tsx | 86 ++++---- src/pages/settings/profile/index.tsx | 2 + src/pages/settings/relays/index.tsx | 296 ++++++++++++++------------- src/pages/verify/index.tsx | 2 + 10 files changed, 362 insertions(+), 339 deletions(-) diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index eac4166..17140e4 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -4,125 +4,128 @@ import styles from './style.module.scss' import { Container } from '../Container' import nostrImage from '../../assets/images/nostr.gif' import { appPublicRoutes } from '../../routes' +import { createPortal } from 'react-dom' -export const Footer = () => ( -
- - + createPortal( +
+ - - Logo - - - - - + + + + - Source - + + - - - - - -
- Built by  - - Nostr Dev - {' '} - 2024. -
-
-) + +
+ Built by  + + Nostr Dev + {' '} + 2024. +
+
, + document.getElementById('root')! + ) diff --git a/src/layouts/Main.tsx b/src/layouts/Main.tsx index ac233cc..f3962eb 100644 --- a/src/layouts/Main.tsx +++ b/src/layouts/Main.tsx @@ -26,7 +26,6 @@ import { } from '../utils' import { useAppSelector } from '../hooks' import styles from './style.module.scss' -import { Footer } from '../components/Footer/Footer' export const MainLayout = () => { const dispatch: Dispatch = useDispatch() @@ -160,7 +159,6 @@ export const MainLayout = () => { > -
) } diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index ddc777e..c93c9f8 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -18,6 +18,7 @@ import { SigitCardDisplayInfo, SigitStatus } from '../../utils' +import { Footer } from '../../components/Footer/Footer' // Unsupported Filter options are commented const FILTERS = [ @@ -262,6 +263,7 @@ export const HomePage = () => { ))}
+