From ff94d66163d35d2a40a6842761eb4921a04ac8a7 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Mon, 26 Apr 2021 09:52:22 +0100 Subject: [PATCH] fix: marketplace css, reset modal transitions, add WIP lightbox to item page --- src/components/modals/Modals.jsx | 2 +- .../modals/main/marketplace/Item.jsx | 110 ++++++++++-------- .../modals/main/marketplace/Lightbox.jsx | 10 ++ .../modals/main/scss/marketplace/_main.scss | 37 ++++-- .../main/settings/sections/Advanced.jsx | 2 +- src/scss/_variables.scss | 5 - 6 files changed, 100 insertions(+), 66 deletions(-) create mode 100644 src/components/modals/main/marketplace/Lightbox.jsx diff --git a/src/components/modals/Modals.jsx b/src/components/modals/Modals.jsx index 14850650..b8ee652b 100644 --- a/src/components/modals/Modals.jsx +++ b/src/components/modals/Modals.jsx @@ -51,7 +51,7 @@ export default class Modals extends React.PureComponent { this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal welcomemodal' overlayClassName='Overlay' ariaHideApp={false}> this.closeWelcome()}/> - this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}> + this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}> this.setState({ feedbackModal: false })}/> diff --git a/src/components/modals/main/marketplace/Item.jsx b/src/components/modals/main/marketplace/Item.jsx index d45267f2..40baffa5 100644 --- a/src/components/modals/main/marketplace/Item.jsx +++ b/src/components/modals/main/marketplace/Item.jsx @@ -1,59 +1,75 @@ import React from 'react'; +import Modal from 'react-modal'; + +import Lightbox from './Lightbox'; + import ArrowBackIcon from '@material-ui/icons/ArrowBack'; -export default function Item(props) { - const language = window.language.modals.main.marketplace.product; - - let warningHTML; - // For some reason it breaks sometimes so we use try/catch - try { - if (props.content.content.data.quote_api) { - warningHTML = ( -
-
    -
  • {language.quote_warning.title}
    • -
  • {language.quote_warning.description}
    • -
-
- ); - } - } catch (e) { - // ignore +export default class Item extends React.PureComponent { + constructor() { + super(); + this.state = { + showLightbox: false + }; } - // prevent console error - let iconsrc = window.constants.DDG_PROXY + props.data.icon; - if (!props.data.icon) { - iconsrc = null; - } + render() { + const language = window.language.modals.main.marketplace.product; - return ( -
-
- -
-

{props.data.display_name}

- {props.button} -
- product -
-

{language.overview}

-

+ let warningHTML; + // For some reason it breaks sometimes so we use try/catch + try { + if (this.props.content.content.data.quote_api) { + warningHTML = (
    - {/*
  • {language.last_updated}
    • -
  • {props.data.updated}
    • -
    */} -
  • {language.version}
    • -
  • {props.data.version}
    • -
    -
  • {language.author}
    • -
  • {props.data.author}
    • -
+
  • {language.quote_warning.title}
    • +
  • {language.quote_warning.description}
    • +
    - {warningHTML} + ); + } + } catch (e) { + // ignore + } + + // prevent console error + let iconsrc = window.constants.DDG_PROXY + this.props.data.icon; + if (!this.props.data.icon) { + iconsrc = null; + } + + return ( +
    +
    + +
    +

    {this.props.data.display_name}

    + {this.props.button} +
    + product this.setState({ showLightbox: true })}/> +
    +

    {language.overview}

    +

    +
    +
      + {/*
    • {language.last_updated}
      • +
    • {this.props.data.updated}
      • +
      */} +
    • {language.version}
      • +
    • {this.props.data.version}
      • +
      +
    • {language.author}
      • +
    • {this.props.data.author}
      • +
    +
    + {warningHTML} +
    + this.setState({ showLightbox: false })} isOpen={this.state.showLightbox} className='Modal lightboxmodal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}> + this.setState({ showLightbox: false })} img={iconsrc}/> +
    -
    - ); + ); + } } diff --git a/src/components/modals/main/marketplace/Lightbox.jsx b/src/components/modals/main/marketplace/Lightbox.jsx new file mode 100644 index 00000000..01286b83 --- /dev/null +++ b/src/components/modals/main/marketplace/Lightbox.jsx @@ -0,0 +1,10 @@ +import React from 'react'; + +export default function Lightbox(props) { + return ( + <> + × + Item + + ); +} diff --git a/src/components/modals/main/scss/marketplace/_main.scss b/src/components/modals/main/scss/marketplace/_main.scss index 7ca9c2b0..12e76c8f 100644 --- a/src/components/modals/main/scss/marketplace/_main.scss +++ b/src/components/modals/main/scss/marketplace/_main.scss @@ -16,7 +16,7 @@ .items { display: inline-grid; - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(6, 1fr); margin-top: 15px; .item { @@ -24,7 +24,7 @@ border-radius: 12px; height: 80px; width: 260px; - background: map-get($marketplace, 'item-background'); + background: var(--sidebar); transition: 0.5s; cursor: pointer; margin-right: 20px; @@ -57,6 +57,7 @@ img { margin-left: 10px; height: 15px; + cursor: pointer; } } @@ -71,8 +72,22 @@ } } -.dark .items .item { - background: #2d3436; +@media only screen and (max-width: 2100px) { + .items { + grid-template-columns: repeat(3, 1fr); + } +} + +@media only screen and (max-width: 1870px) { + .items { + grid-template-columns: repeat(2, 1fr); + } +} + +@media only screen and (min-width: 1079px), (max-width: 1869px) { + .items { + grid-template-columns: repeat(3, 1fr); + } } p.author { @@ -80,8 +95,6 @@ p.author { } #item { - display: none; - h1 { font-size: 40px; line-height: 20px; @@ -129,7 +142,7 @@ p.description { .productInformation { padding: 10px; - background: map-get($marketplace, 'product-information-backgroud'); + background: var(--sidebar); width: 350px; border-radius: 12px; @@ -151,10 +164,6 @@ p.description { } } -.dark .productInformation { - background: #2d3436; -} - #item>img, .updateimage, .updatechangelog>p>img { border-radius: 24px; height: 200px; @@ -167,7 +176,7 @@ p.description { padding: 50px; color: #fff; box-shadow: 0 0 10px rgb(0 0 0 / 30%); - width: 100%; + width: 85%; button { float: left; @@ -185,3 +194,7 @@ p.description { margin-top: -20px; } } + +.lightboxmodal { + margin: auto; +} diff --git a/src/components/modals/main/settings/sections/Advanced.jsx b/src/components/modals/main/settings/sections/Advanced.jsx index 4d5650c8..0d7d4642 100644 --- a/src/components/modals/main/settings/sections/Advanced.jsx +++ b/src/components/modals/main/settings/sections/Advanced.jsx @@ -53,7 +53,7 @@ export default class AdvancedSettings extends React.PureComponent {

    {advanced.experimental_warning}

    - this.setState({ resetModal: false })} isOpen={this.state.resetModal} className='Modal resetmodal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}> + this.setState({ resetModal: false })} isOpen={this.state.resetModal} className='Modal resetmodal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}> this.setState({ resetModal: false })} /> diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index a4136d5d..a830a5d2 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -24,11 +24,6 @@ $modal: ( 'modal-link-dark': #3498db ); -$marketplace: ( - 'item-background': rgba(242, 243, 244, 1), - 'product-information-backgroud': rgba(242, 243, 244, 1) -); - $button-colours: ( 'confirm': rgba(46, 213, 115, 1), 'reset': rgba(255, 71, 87, 1),