From e382e1c2327c58718250ea87972a14d8d1aa028c Mon Sep 17 00:00:00 2001 From: raclim Date: Thu, 7 Nov 2024 13:50:20 -0500 Subject: [PATCH 01/16] turn about component into a page --- client/modules/IDE/components/About.jsx | 234 ------------------ .../modules/IDE/components/About.stories.jsx | 8 - client/modules/IDE/pages/About.jsx | 215 ++++++++++++++++ 3 files changed, 215 insertions(+), 242 deletions(-) delete mode 100644 client/modules/IDE/components/About.jsx delete mode 100644 client/modules/IDE/components/About.stories.jsx create mode 100644 client/modules/IDE/pages/About.jsx diff --git a/client/modules/IDE/components/About.jsx b/client/modules/IDE/components/About.jsx deleted file mode 100644 index 25b9f54520..0000000000 --- a/client/modules/IDE/components/About.jsx +++ /dev/null @@ -1,234 +0,0 @@ -import React from 'react'; -import { useSelector } from 'react-redux'; -import { Helmet } from 'react-helmet'; -import { useTranslation } from 'react-i18next'; -import { Link } from 'react-router-dom'; -import SquareLogoIcon from '../../../images/p5js-square-logo.svg'; -// import PlayIcon from '../../../images/play.svg'; -import AsteriskIcon from '../../../images/p5-asterisk.svg'; -import packageData from '../../../../package.json'; - -function About(props) { - const { t } = useTranslation(); - const p5version = useSelector((state) => { - const index = state.files.find((file) => file.name === 'index.html'); - return index?.content.match(/\/p5\.js\/([\d.]+)\//)?.[1]; - }); - return ( -
- - {t('About.TitleHelmet')} - -
- -
-

- {t('About.WebEditor')}: v{packageData?.version} -

-

- p5.js: v{p5version} -

-
-
-
-

{t('About.NewP5')}

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-
-
-

{t('About.Resources')}

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- -

-

- -

-

- -

-
-
-

- - {t('About.Contribute')} - -

-

- - {t('About.Report')} - -

-
-
- ); -} - -export default About; diff --git a/client/modules/IDE/components/About.stories.jsx b/client/modules/IDE/components/About.stories.jsx deleted file mode 100644 index 97289f9bc8..0000000000 --- a/client/modules/IDE/components/About.stories.jsx +++ /dev/null @@ -1,8 +0,0 @@ -import About from './About'; - -export default { - title: 'IDE/About', - component: About -}; - -export const Default = {}; diff --git a/client/modules/IDE/pages/About.jsx b/client/modules/IDE/pages/About.jsx new file mode 100644 index 0000000000..ed19fa7850 --- /dev/null +++ b/client/modules/IDE/pages/About.jsx @@ -0,0 +1,215 @@ +import React from 'react'; +import { useSelector } from 'react-redux'; +import { Helmet } from 'react-helmet'; +import { useTranslation } from 'react-i18next'; +import { Link } from 'react-router-dom'; +import AsteriskIcon from '../../../images/p5-asterisk.svg'; +import Nav from '../components/Header/Nav'; +import packageData from '../../../../package.json'; + +function About(props) { + const { t } = useTranslation(); + const p5version = useSelector((state) => { + const index = state.files.find((file) => file.name === 'index.html'); + return index?.content.match(/\/p5\.js\/([\d.]+)\//)?.[1]; + }); + return ( +
+ + {t('About.TitleHelmet')} + + +
+ ); +} + +export default About; From 643b21398fc2db2db7f760186b02d83cc31e54fd Mon Sep 17 00:00:00 2001 From: raclim Date: Thu, 7 Nov 2024 13:50:56 -0500 Subject: [PATCH 02/16] update routes and imports --- client/modules/IDE/components/IDEOverlays.jsx | 10 ---------- client/modules/IDE/pages/IDEView.jsx | 2 +- client/routes.jsx | 3 ++- 3 files changed, 3 insertions(+), 12 deletions(-) diff --git a/client/modules/IDE/components/IDEOverlays.jsx b/client/modules/IDE/components/IDEOverlays.jsx index 52b21a9e9e..8565c5bd56 100644 --- a/client/modules/IDE/components/IDEOverlays.jsx +++ b/client/modules/IDE/components/IDEOverlays.jsx @@ -9,7 +9,6 @@ import { closeShareModal, hideErrorModal } from '../actions/ide'; -import About from './About'; import AddToCollectionList from './AddToCollectionList'; import ErrorModal from './ErrorModal'; import Feedback from './Feedback'; @@ -49,15 +48,6 @@ export default function IDEOverlays() { )} - {location.pathname === '/about' && ( - - - - )} {location.pathname === '/feedback' && ( - + From 18c4ff361561c509dd4428ee5df22431827d48df Mon Sep 17 00:00:00 2001 From: raclim Date: Thu, 7 Nov 2024 13:51:30 -0500 Subject: [PATCH 03/16] update styling and translations --- client/styles/components/_about.scss | 28 ++++++++++---------- translations/locales/en-US/translations.json | 2 +- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/client/styles/components/_about.scss b/client/styles/components/_about.scss index c21939e6fe..bf9ccf800b 100644 --- a/client/styles/components/_about.scss +++ b/client/styles/components/_about.scss @@ -9,15 +9,7 @@ } .about__content { - display: flex; - flex-direction: row; - justify-content: space-between; - flex-wrap: wrap; - padding-top: #{math.div(17, $base-font-size)}rem; - padding-right: #{math.div(78, $base-font-size)}rem; - padding-bottom: #{math.div(20, $base-font-size)}rem; - padding-left: #{math.div(20, $base-font-size)}rem; - width: #{math.div(720, $base-font-size)}rem; + margin: 3rem 17rem; } .about__content-column { @@ -84,15 +76,23 @@ } .about__footer { - display: flex; - justify-content: space-between; - padding-top: #{math.div(18, $base-font-size)}rem; + border-top: 0.1rem dashed; padding-right: #{math.div(20, $base-font-size)}rem; padding-bottom: #{math.div(21, $base-font-size)}rem; - padding-left: #{math.div(20, $base-font-size)}rem; + width: 100%; + + @include themify() { + border-color: getThemifyVariable('logo-color'); + } +} + +.about__footer-list-container { + display: flex; + flex-wrap: wrap; width: 100%; } .about__footer-list { - padding-top: #{math.div(12, $base-font-size)}rem; + padding-top: #{math.div(20, $base-font-size)}rem; + padding-right: 9.5%; } diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json index 31a42c47af..53d54975df 100644 --- a/translations/locales/en-US/translations.json +++ b/translations/locales/en-US/translations.json @@ -89,7 +89,7 @@ "About": { "Title": "About", "TitleHelmet": "p5.js Web Editor | About", - "Contribute": "Contribute", + "Contribute": "Github", "NewP5": "New to p5.js?", "Report": "Report a bug", "Learn": "Learn", From a0866fab82009a37665b49384d8575d5fead269e Mon Sep 17 00:00:00 2001 From: raclim Date: Tue, 12 Nov 2024 18:42:48 -0500 Subject: [PATCH 04/16] add in translations and logo --- client/modules/IDE/pages/About.jsx | 121 +++++++++++++------ client/styles/components/_about.scss | 38 ++++-- translations/locales/en-US/translations.json | 37 ++++-- 3 files changed, 140 insertions(+), 56 deletions(-) diff --git a/client/modules/IDE/pages/About.jsx b/client/modules/IDE/pages/About.jsx index ed19fa7850..dabef5e89a 100644 --- a/client/modules/IDE/pages/About.jsx +++ b/client/modules/IDE/pages/About.jsx @@ -6,6 +6,7 @@ import { Link } from 'react-router-dom'; import AsteriskIcon from '../../../images/p5-asterisk.svg'; import Nav from '../components/Header/Nav'; import packageData from '../../../../package.json'; +import LogoIcon from '../../../images/p5js-square-logo.svg'; function About(props) { const { t } = useTranslation(); @@ -22,28 +23,36 @@ function About(props) {