mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-17 05:54:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: finish lightbox

Browse Source 
Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
This commit is contained in:
David Ralph
2021-05-01 12:31:46 +01:00
parent f2f683201d
commit 7942c367a7
5 changed files with 25 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/modals/Modals.jsx
View File

@@ -44,7 +44,7 @@ export default class Modals extends React.PureComponent {
return (
<>
<Navbar openModal={(modal) => this.setState({ [modal]: true })}/>
<Modal closeTimeoutMS={300} id='modal' onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}>
<Modal closeTimeoutMS={300} id='modal' onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className='Modal mainModal' overlayClassName='Overlay' ariaHideApp={false}>
<Main modalClose={() => this.setState({ mainModal: false })}/>
</Modal>
<React.Suspense fallback={renderLoader()}>

8
src/components/modals/main/marketplace/Item.jsx
View File

@@ -1,8 +1,8 @@
import React from 'react';
//import Modal from 'react-modal';
import Modal from 'react-modal';
//import Lightbox from './Lightbox';
import Lightbox from './Lightbox';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
@@ -66,9 +66,9 @@ export default class Item extends React.PureComponent {
</div>
{warningHTML}
</div>
{/* <Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ showLightbox: false })} isOpen={this.state.showLightbox} className='Modal lightboxmodal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
<Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ showLightbox: false })} isOpen={this.state.showLightbox} className='Modal lightboxmodal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
<Lightbox modalClose={() => this.setState({ showLightbox: false })} img={iconsrc}/>
</Modal> */}
</Modal>
</div>
);
}

11
src/components/modals/main/scss/index.scss
View File

@@ -15,7 +15,6 @@
border: none;
opacity: 1;
z-index: -2;
padding: 25px;
transition-timing-function: ease-in;
border-radius: map-get($modal, 'border-radius');
user-select: none;
@@ -28,6 +27,10 @@
}
}
.mainModal {
padding: 25px;
}
.modalLink {
color: var(--modal-link);
cursor: pointer;
@@ -70,8 +73,8 @@
}
.ReactModal__Content {
min-height: calc(100vh - 30vh);
max-height: calc(100vh - 10vh);
//min-height: calc(100vh - 30vh);
//max-height: calc(100vh - 10vh);
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
overflow-y: auto;
position: relative;
@@ -101,7 +104,7 @@
@media only screen and (min-height: 700px) {
.ReactModal__Content {
min-height: 600px;
//min-height: 600px;
}
}

14
src/components/modals/main/scss/marketplace/_main.scss
View File

@@ -198,12 +198,16 @@ p.description {
.lightboxmodal {
margin: auto;
max-width: 60%;
background: none !important;
box-shadow: none !important;
img {
max-height: 80%;
max-width: 80%;
display: block;
margin-left: auto;
margin-right: auto;
height: auto;
width: 100%;
}
.closeModal {
color: #fff;
text-shadow: 0 0 20px rgb(0 0 0 / 30%);
}
}

8
src/components/modals/main/settings/sections/Changelog.jsx
View File

@@ -1,8 +1,8 @@
import React from 'react';
//import Modal from 'react-modal';
import Modal from 'react-modal';
//import Lightbox from '../../marketplace/Lightbox';
import Lightbox from '../../marketplace/Lightbox';
import WifiOffIcon from '@material-ui/icons/WifiOff';
@@ -103,9 +103,9 @@ export default class Changelog extends React.PureComponent {
<h5 style={{ 'lineHeight': '0px' }}>{this.state.author} • {this.state.date}</h5>
{this.state.image ? <img draggable='false' src={this.state.image} alt={window.language.modals.update.title} className='updateimage'/> : null}
<div className='updatechangelog' dangerouslySetInnerHTML={{ __html: this.state.html }}/>
{/*<Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ showLightbox: false })} isOpen={this.state.showLightbox} className='Modal lightboxmodal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
<Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ showLightbox: false })} isOpen={this.state.showLightbox} className='Modal lightboxmodal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
<Lightbox modalClose={() => this.setState({ showLightbox: false })} img={this.state.lightboxImg}/>
</Modal>*/}
</Modal>
</div>
);
}