From 3aa934c02047d027387c889467f8f4d3d9c2007a Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Thu, 21 Apr 2022 23:14:46 +0100 Subject: [PATCH 1/2] feat: rolling out share modal for photoinfo --- .DS_Store | Bin 6148 -> 6148 bytes .../helpers/sharemodal/ShareModal.jsx | 16 +++++------ .../modals/main/marketplace/Item.jsx | 2 +- src/components/modals/welcome/Welcome.jsx | 19 ++++++------ .../widgets/background/PhotoInformation.jsx | 27 ++++++++++++++---- 5 files changed, 40 insertions(+), 24 deletions(-) diff --git a/.DS_Store b/.DS_Store index bc281f0e43b0aa54f78cdc0ba6f53c14354c7e88..206831e967152cd1c7299604d2d856d2d4283d93 100644 GIT binary patch delta 48 zcmZoMXfc@JFUrfnz`)4BAi%&-!cgp)lb@WFlb^I%kYhPBBkyJ>mZQuQ8_YJdbNuB8 E02Z$d;s5{u delta 99 zcmZoMXfc@JFUrTjz`)4BAi%&-0)&|isSHI7MVkdVmNT1!q_`RM7z%(wsmRg{$(}j+ f$w@i+NkA1qolN(Dbl`s|*v!LnlzB5d$6tN`7g8Gr diff --git a/src/components/helpers/sharemodal/ShareModal.jsx b/src/components/helpers/sharemodal/ShareModal.jsx index df192a3b..a96fb73c 100644 --- a/src/components/helpers/sharemodal/ShareModal.jsx +++ b/src/components/helpers/sharemodal/ShareModal.jsx @@ -8,12 +8,12 @@ import { toast } from 'react-toastify'; import './sharemodal.scss'; -export default function ShareModal({ modalClose, data }) { +export default function ShareModal({ modalClose, data, type }) { const getMessage = (text) => variables.language.getMessage(variables.languagecode, text); const url = variables.constants.MARKETPLACE_URL + '/share/' + btoa(data.api_name); const copyLink = () => { - navigator.clipboard.writeText(url); + navigator.clipboard.writeText(data); toast('Link copied!'); }; @@ -33,7 +33,7 @@ export default function ShareModal({ modalClose, data }) { onClick={() => window .open( - `https://twitter.com/intent/tweet?text=Check out ${data.data.name} on @getmue marketplace: ${url}`, + `https://twitter.com/intent/tweet?text=Check out ${data.data.name} on @getmue marketplace: ${data}`, '_blank', ) .focus() @@ -45,7 +45,7 @@ export default function ShareModal({ modalClose, data }) { - ) : null} {this.state.currentTab !== 0 ? ( - ) : null} + ) : ( + + )} diff --git a/src/components/widgets/background/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx index c983caef..435d187f 100644 --- a/src/components/widgets/background/PhotoInformation.jsx +++ b/src/components/widgets/background/PhotoInformation.jsx @@ -12,6 +12,7 @@ import { MdSource as Source, } from 'react-icons/md'; import Tooltip from '../../helpers/tooltip/Tooltip'; +import Modal from 'react-modal'; import ShareModal from '../../helpers/sharemodal/ShareModal'; //import Hotkeys from 'react-hot-keys'; import { toast } from 'react-toastify'; @@ -50,6 +51,7 @@ export default function PhotoInformation({ info, url, api }) { const [showExtraInfo, setshowExtraInfo] = useState(false); const [showOld, setShowOld] = useState(true); const [other, setOther] = useState(false); + const [shareModal, openShareModal] = useState(false); if (info.hidden === true || !info.credit) { return null; @@ -199,6 +201,19 @@ export default function PhotoInformation({ info, url, api }) { onMouseEnter={() => setOther(true)} onMouseLeave={() => setOther(false)} > + openShareModal(false)} + > + openShareModal(false)} + /> + {localStorage.getItem('widgetStyle') === 'legacy' && (
@@ -270,7 +285,7 @@ export default function PhotoInformation({ info, url, api }) { <>
- copyImage(info)} /> + openShareModal(true)} /> @@ -308,10 +323,12 @@ export default function PhotoInformation({ info, url, api }) { {width}x{height}
- {api ?
- - {api.charAt(0).toUpperCase() + api.slice(1)} -
: null} + {api ? ( +
+ + {api.charAt(0).toUpperCase() + api.slice(1)} +
+ ) : null}
) : null} From 86cd8d55b2fb2f86f76d1f6fa3125a887be4ebb3 Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Sat, 23 Apr 2022 10:34:52 +0100 Subject: [PATCH 2/2] fix: fix markeplace item grid --- .../modals/main/scss/marketplace/_main.scss | 32 ++-------- src/components/modals/welcome/welcome.scss | 64 +++---------------- src/components/widgets/quote/Quote.jsx | 16 ++++- 3 files changed, 27 insertions(+), 85 deletions(-) diff --git a/src/components/modals/main/scss/marketplace/_main.scss b/src/components/modals/main/scss/marketplace/_main.scss index 71df23e8..06d9d0c0 100644 --- a/src/components/modals/main/scss/marketplace/_main.scss +++ b/src/components/modals/main/scss/marketplace/_main.scss @@ -6,17 +6,16 @@ @import 'scss/variables'; .items { - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: 15px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-gap: 1rem; margin-top: 15px; .item { position: relative; border-radius: 12px; height: 70px; - width: 260px; + width: auto; padding: 10px; cursor: pointer; display: flex; @@ -181,24 +180,6 @@ } } -@media (max-width: 1920px) { - .items { - grid-template-columns: repeat(3, 1fr); - } -} - -@media (max-width: 1680px) and (min-width: 1500px) { - .items { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (max-width: 1440px) { - .items { - grid-template-columns: repeat(1, 1fr); - } -} - .emptyItems { width: 100%; height: 100%; @@ -246,11 +227,6 @@ p.author { overflow-x: hidden; } -@media (max-height: 1080px) { - .dropdownsortAddons { - margin-top: 40px !important; - } -} .returnButton { display: grid; diff --git a/src/components/modals/welcome/welcome.scss b/src/components/modals/welcome/welcome.scss index 4c49a68e..ca16021a 100644 --- a/src/components/modals/welcome/welcome.scss +++ b/src/components/modals/welcome/welcome.scss @@ -1,6 +1,10 @@ @import '../main/scss/index.scss'; @import 'scss/variables'; +.welcomeContent { + height: 100%; +} + .welcomemodal { position: absolute; margin: auto; @@ -8,14 +12,15 @@ right: 0; bottom: 0; left: 0; - height: 80%; - width: 60%; + height: 90vh; + width: clamp(60vw, 1400px, 90vw); padding: 0; + overflow-x: hidden !important; section { width: 50%; display: inline; - height: 80vh; + height: 100%; } section:nth-child(1) { @@ -200,7 +205,7 @@ a.privacy { align-items: center; img { - width: 30rem !important; + width: clamp(20rem, 300px, 40rem); height: auto !important; display: block; margin: 30px; @@ -208,58 +213,7 @@ a.privacy { } } -@media (max-width: 1820px) and (min-width: 1200px) { - .welcomemodal { - width: 85%; - height: 90%; - } - section { - height: 90vh !important; - } -} - -@media (max-width: 1300px) { - .welcomemodal { - overflow-x: hidden !important; - } - - .examples img { - width: 20rem !important; - } - - .buttons { - position: relative !important; - bottom: 1rem !important; - right: -1rem !important; - } - - section { - height: 100vh !important; - } -} - -@media (max-width: 1190px) { - .welcomemodal { - width: 90%; - height: 90%; - } -} - -@media (max-width: 800px) { - .welcomemodal { - width: 100%; - height: 100%; - } - - .examples img { - width: 15rem !important; - } - - section { - height: 140vh !important; - } -} .createButtons { display: flex; diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx index 8557a7e3..87cf3bcf 100644 --- a/src/components/widgets/quote/Quote.jsx +++ b/src/components/widgets/quote/Quote.jsx @@ -13,6 +13,7 @@ import { toast } from 'react-toastify'; //import Hotkeys from 'react-hot-keys'; import Tooltip from '../../helpers/tooltip/Tooltip'; +import Modal from 'react-modal'; import ShareModal from '../../helpers/sharemodal/ShareModal'; import offline_quotes from './offline_quotes.json'; @@ -21,12 +22,13 @@ import Interval from 'modules/helpers/interval'; import EventBus from 'modules/helpers/eventbus'; import './quote.scss'; +import { getInitColorSchemeScript } from '@mui/material'; export default class Quote extends PureComponent { buttons = { share: ( - @@ -90,7 +92,7 @@ export default class Quote extends PureComponent { quote: '"' + quote.quote + '"', author: quote.author, authorlink: this.getAuthorLink(quote.author), - authorimg: '' + authorimg: '', }); } @@ -398,6 +400,16 @@ export default class Quote extends PureComponent { render() { return (
+ this.setState({ shareModal: false })} + > + this.setState({ shareModal: false })} /> + {this.state.quote}